[
  {
    "path": ".eslintignore",
    "content": "node_modules\ndist\ntypes"
  },
  {
    "path": ".eslintrc",
    "content": "{\n    \"root\": true,\n    \"extends\": [\n      \"prettier\",\n      \"plugin:prettier/recommended\",\n      \"eslint:recommended\",\n      \"plugin:react/recommended\",\n      \"plugin:@typescript-eslint/eslint-recommended\",\n      \"plugin:@typescript-eslint/recommended\"\n    ],\n    \"parser\": \"@typescript-eslint/parser\",\n    \"plugins\": [\n      \"@typescript-eslint\",\n      \"prettier\",\n      \"react\",\n      \"react-hooks\"\n    ],\n    \"rules\": {\n      \"react/button-has-type\": \"error\",\n      \"react-hooks/rules-of-hooks\": \"error\",\n      \"react-hooks/exhaustive-deps\": \"warn\",\n      \"@typescript-eslint/no-non-null-assertion\": \"off\",\n      \"@typescript-eslint/ban-ts-comment\": \"off\",\n      \"@typescript-eslint/no-explicit-any\": \"off\",\n      \"react/prop-types\": \"off\"\n    },\n    \"settings\": {\n      \"react\": {\n        \"version\": \"detect\"\n      }\n    },\n    \"env\": {\n      \"browser\": true,\n      \"node\": true\n    },\n    \"globals\": {\n      \"JSX\": true\n    }\n}\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/bug-report.yaml",
    "content": "name: \"\\U0001F41E Bug report\"\ndescription: Create a report to help us improve\ntitle: \"[Bug]: \"\nlabels: [\"Triage\"]\nbody:\n  - type: markdown\n    attributes:\n      value: |\n        **Before submitting a bug report**\n\n        The issue list is reserved for bug reports and feature requests. If you have a usage question, you can:\n\n        - Read the [documentation](https://npm.tremor.so/docs/getting-started/installation)\n        - Ask questions on [Slack](https://join.slack.com/t/tremor-community/shared_invite/zt-1u8jqmcmq-Fdr9B6MbnO7u8FkGh~2Ylg)\n\n        Also try to search for your issue/feature - another user may have already requested something similar, thanks!\n\n  - type: input\n    id: version\n    attributes:\n      label: Tremor Version\n    validations:\n      required: true\n  - type: input\n    id: reproduction-link\n    attributes:\n      label: Link to minimal reproduction\n      description: |\n        The easiest way to provide a reproduction is provide a link to a public GitHub repository or a tools like [Stackblitz](https://stackblitz.com) or [Codesandbox](https://codesandbox.io).\n\n        The reproduction should be **minimal**. This means, it should contain only the bare minimum amount of code needed\n        to show the bug.\n      placeholder: Reproduction Link\n    validations:\n      required: true\n  - type: textarea\n    id: steps-to-reproduce\n    attributes:\n      label: Steps to reproduce\n      description: |\n        What do we need to do after opening your repro in order to make the bug happen? Clear and concise reproduction instructions are important for us to be able to triage your issue in a timely manner. Note that you can use [Markdown](https://guides.github.com/features/mastering-markdown/) to format lists and code.\n      placeholder: Steps to reproduce\n    validations:\n      required: true\n  - type: textarea\n    id: expected\n    attributes:\n      label: What is expected?\n    validations:\n      required: true\n  - type: textarea\n    id: actually-happening\n    attributes:\n      label: What is actually happening?\n    validations:\n      required: true\n  - type: dropdown\n    id: browsers\n    attributes:\n      label: What browsers are you seeing the problem on?\n      multiple: true\n      options:\n        - Chrome\n        - Microsoft Edge\n        - Safari\n        - Firefox\n        - Vivaldi\n        - Brave\n        - Other\n  - type: textarea\n    id: additional-comments\n    attributes:\n      label: Any additional comments?\n      description: E.g. some background/context of how you ran into this bug.\n  - type: markdown\n    attributes:\n      value: |\n        This bug report template was inspired by the issue template from [vuejs](https://github.com/vuejs/core)\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/config.yaml",
    "content": "blank_issues_enabled: true\ncontact_links:\n  - name: Slack Community\n    url: https://join.slack.com/t/tremor-community/shared_invite/zt-1u8jqmcmq-Fdr9B6MbnO7u8FkGh~2Ylg\n    about: Please ask and answer usage questions here.\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/feature-request.yaml",
    "content": "name: \"\\U0001F680 New feature proposal\"\ndescription: Suggest an idea for this project\ntitle: \"[Feature]: \"\nlabels: [\"Triage\"]\nbody:\n  - type: markdown\n    attributes:\n      value: |\n        **Before submitting a feature request**\n\n        The issue list is reserved for bug reports and feature requests. If you have a usage question, you can:\n\n        - Read the [documentation](https://npm.tremor.so/docs/getting-started/installation)\n        - Ask questions on [Slack](https://join.slack.com/t/tremor-community/shared_invite/zt-1u8jqmcmq-Fdr9B6MbnO7u8FkGh~2Ylg)\n\n        Also try to search for your issue/feature - another user may have already requested something similar, thanks!\n\n  - type: textarea\n    id: problem-description\n    attributes:\n      label: What problem does this feature solve?\n      description: |\n        Explain your use case, context, and rationale behind this feature request.\n\n        An important design goal of Tremor is keeping the API small. The problem should be common enough to justify the addition.\n      placeholder: Problem description\n    validations:\n      required: true\n  - type: textarea\n    id: proposed-API\n    attributes:\n      label: What does the proposed API look like?\n      description: |\n        Describe how you propose to solve the problem and provide code samples of how the API would work once implemented. Note that you can use [Markdown](https://guides.github.com/features/mastering-markdown/) to format your code blocks.\n      placeholder: Assumed API\n  - type: markdown\n    attributes:\n      value: |\n        This bug report template was inspired by the feature template from [vuejs](https://github.com/vuejs/core)\n"
  },
  {
    "path": ".github/pull_request_template.md",
    "content": "<!--\nPlease make sure to read the Contribution Guidelines:\nhttps://github.com/tremorlabs/tremor-npm/blob/main/CONTRIBUTING.md\n-->\n\n<!-- PULL REQUEST TEMPLATE -->\n\n**Description**\n\n<!--- Describe your changes in detail -->\n\n**Related issue(s)**\n\n<!--- Please link to the issue here: -->\n<!--- This project only accepts pull requests related to open issues -->\n<!--- If suggesting a new feature or change, please discuss it in an issue first -->\n<!--- If fixing a bug, there should be an issue describing it with steps to reproduce -->\n\n**What kind of change does this PR introduce?** (check at least one)\n\n<!-- (Update \"[ ]\" to \"[x]\" to check a box) -->\n\n- [ ] Bug fix (non-breaking change which fixes an issue)\n- [ ] New Feature (non-breaking change which adds functionality)\n- [ ] New Feature (BREAKING CHANGE which adds functionality)\n- [ ] Refactor\n- [ ] Build-related changes\n- [ ] Other, please describe:\n\n**Does this PR introduce a breaking change?** (check one)\n\n- [ ] Yes\n- [ ] No\n\nIf yes, please describe the impact and migration path for existing applications:\n\n**How has this been tested?**\n\n<!--- Please describe how you tested your changes. -->\n<!--- Include details of your testing environment, and the tests you ran to -->\n<!--- see how your change affects other areas of the code, etc. -->\n\n**Screenshots (if appropriate):**\n\n**The PR fulfils these requirements:**\n\n<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->\n\n- [ ] It's submitted to the `main` branch\n- [ ] When resolving a specific issue, it's referenced in the related issue section above\n- [ ] My change requires a change to the documentation. (Managed by Tremor Team)\n- [ ] I have added tests to cover my changes\n- [ ] Check the [\"Allow edits from maintainers\" option](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/allowing-changes-to-a-pull-request-branch-created-from-a-fork) while creating your PR.\n- [ ] Add refs #XXX or fixes #XXX to the related issue section if your PR refers to or fixes an issue.\n- [ ] By contributing to Tremor, you confirm that you have read and agreed to Tremor's [CONTRIBUTING.md](https://github.com/tremorlabs/tremor-npm/blob/main/CONTRIBUTING.md) guideline. You also agree that your contributions will be licensed under the [Apache License 2.0](https://github.com/tremorlabs/tremor-npm/blob/main/License) license.\n"
  },
  {
    "path": ".github/workflows/build.yaml",
    "content": "name: \"Build\"\n\non:\n  pull_request:\n    types:\n      - opened\n      - edited\n      - synchronize\n  push:\n    branches:\n      - \"**\"\n      - \"!main\"\n\njobs:\n  build:\n    name: Build dist\n    runs-on: ubuntu-latest\n    steps:\n      - name: checkout\n        uses: actions/checkout@v4\n      - name: node\n        uses: actions/setup-node@v4\n        with:\n          node-version: 20\n          registry-url: https://registry.npmjs.org\n      - name: install react\n        run: npm i react\n      - name: install dependencies\n        run: npm ci\n      - name: lint checks\n        run: npm run lint\n      - name: unit tests\n        run: npm run tests\n      - name: build\n        run: npm run build\n"
  },
  {
    "path": ".github/workflows/lint.yaml",
    "content": "name: \"Lint PR\"\n\non:\n  pull_request:\n    types:\n      - opened\n      - edited\n      - synchronize\n  pull_request_target:\n    types:\n      - opened\n      - edited\n      - synchronize\n\njobs:\n  lint-pr:\n    name: Validate PR title\n    runs-on: ubuntu-latest\n    steps:\n      - name: Lint PR\n        uses: amannn/action-semantic-pull-request@v4.6.0\n        env:\n          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n"
  },
  {
    "path": ".github/workflows/release.yaml",
    "content": "name: \"Release\"\n\non:\n  push:\n    branches:\n      - main\n      - beta\n      - beta-**\n\njobs:\n  release:\n    name: Release\n    runs-on: ubuntu-latest\n    steps:\n      - name: checkout\n        uses: actions/checkout@v4\n      - name: node\n        uses: actions/setup-node@v4\n        with:\n          node-version: 20\n          registry-url: https://registry.npmjs.org\n      - name: install react\n        run: npm i react\n      - name: install dependencies\n        run: npm ci\n      - name: build\n        run: npm run build\n      - name: release\n        env:\n          NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}}\n          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n        run: npx semantic-release\n"
  },
  {
    "path": ".gitignore",
    "content": "node_modules\ndist\n.DS_Store\nstorybook-static\npackage-lock.json\n.vscode\nyarn.lock"
  },
  {
    "path": ".prettierrc.json",
    "content": "{\n  \"bracketSpacing\": true,\n  \"singleQuote\": false,\n  \"trailingComma\": \"all\",\n  \"tabWidth\": 2,\n  \"semi\": true,\n  \"printWidth\": 100,\n  \"jsxSingleQuote\": false,\n  \"endOfLine\": \"auto\"\n}\n"
  },
  {
    "path": ".storybook/main.js",
    "content": "var path = require(\"path\");\n\nmodule.exports = {\n  stories: [\"../src/**/*.stories.@(js|jsx|ts|tsx)\"],\n\n  addons: [\n    \"@storybook/addon-links\",\n    \"@storybook/addon-essentials\",\n    \"@storybook/addon-interactions\",\n    \"@storybook/addon-styling-webpack\",\n    \"@storybook/addon-themes\",\n    \"@storybook/addon-a11y\",\n    {\n      name: \"@storybook/addon-styling-webpack\",\n      options: {\n        rules: [\n          {\n            test: /\\.css$/,\n            sideEffects: true,\n            use: [\n              require.resolve(\"style-loader\"),\n              {\n                loader: require.resolve(\"css-loader\"),\n                options: {\n                  importLoaders: 1,\n                },\n              },\n              {\n                loader: require.resolve(\"postcss-loader\"),\n                options: {\n                  implementation: require.resolve(\"postcss\"),\n                },\n              },\n            ],\n          },\n        ],\n      },\n    },\n    \"@storybook/addon-webpack5-compiler-babel\",\n    \"@chromatic-com/storybook\",\n  ],\n\n  framework: {\n    name: \"@storybook/react-webpack5\",\n    options: {},\n  },\n\n  features: {\n    previewMdx2: true,\n  },\n\n  webpackFinal: async (config) => {\n    config.resolve.modules = [...(config.resolve.modules || []), path.resolve(__dirname, \"../src\")];\n\n    return config;\n  },\n\n  docs: {},\n\n  typescript: {\n    reactDocgen: \"react-docgen-typescript\",\n  },\n};\n"
  },
  {
    "path": ".storybook/manager.js",
    "content": "import { addons } from \"@storybook/manager-api\";\nimport { themes } from \"@storybook/theming\";\nimport tremorTheme from \"./tremorTheme\";\n\naddons.setConfig({\n  theme: tremorTheme,\n});\n"
  },
  {
    "path": ".storybook/preview.js",
    "content": "import \"../src/styles.css\";\nimport { withThemeByDataAttribute } from \"@storybook/addon-themes\";\n\nexport const parameters = {\n  controls: {\n    matchers: {\n      color: /(background|color)$/i,\n      date: /Date$/,\n    },\n  },\n  backgrounds: {\n    default: \"light\",\n    values: [\n      {\n        name: \"light\",\n        value: \"#ffffff\",\n      },\n      {\n        name: \"dark\",\n        value: \"#0f172a\",\n      },\n    ],\n  },\n};\n\nexport const decorators = [\n  withThemeByDataAttribute({\n    themes: {\n      light: \"light\",\n      dark: \"dark\",\n    },\n    defaultTheme: \"light\",\n    attributeName: \"data-mode\",\n  }),\n];\nexport const tags = [\"autodocs\"];\n"
  },
  {
    "path": ".storybook/tremorTheme.js",
    "content": "import { create } from \"@storybook/theming/create\";\n\nexport default create({\n  base: \"light\",\n  brandTitle: \"Tremor Storybook\",\n  brandUrl: \"https://storybook.tremor.so\",\n  //   brandImage: 'images/tremor-logo.svg',\n  brandTarget: \"_self\",\n  //\n  colorSecondary: \"#3b82f6\",\n\n  // UI\n  appBg: \"#ffffff\",\n  appContentBg: \"#ffffff\",\n  //   appBorderColor: '#585C6D',\n  appBorderRadius: 0,\n  //\n  barTextColor: \"#9E9E9E\",\n  barSelectedColor: \"#3b82f6\",\n  barBg: \"#ffffff\",\n});\n"
  },
  {
    "path": "CODE_OF_CONDUCT.md",
    "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nWe as members, contributors, and leaders pledge to make participation in our\ncommunity a harassment-free experience for everyone, regardless of age, body\nsize, visible or invisible disability, ethnicity, sex characteristics, gender\nidentity and expression, level of experience, education, socio-economic status,\nnationality, personal appearance, race, religion, or sexual identity\nand orientation.\n\nWe pledge to act and interact in ways that contribute to an open, welcoming,\ndiverse, inclusive, and healthy community.\n\n## Our Standards\n\nExamples of behavior that contributes to a positive environment for our\ncommunity include:\n\n- Demonstrating empathy and kindness toward other people\n- Being respectful of differing opinions, viewpoints, and experiences\n- Giving and gracefully accepting constructive feedback\n- Accepting responsibility and apologizing to those affected by our mistakes,\n  and learning from the experience\n- Focusing on what is best not just for us as individuals, but for the\n  overall community\n\nExamples of unacceptable behavior include:\n\n- The use of sexualized language or imagery, and sexual attention or\n  advances of any kind\n- Trolling, insulting or derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as a physical or email\n  address, without their explicit permission\n- Other conduct which could reasonably be considered inappropriate in a\n  professional setting\n\n## Enforcement Responsibilities\n\nCommunity leaders are responsible for clarifying and enforcing our standards of\nacceptable behavior and will take appropriate and fair corrective action in\nresponse to any behavior that they deem inappropriate, threatening, offensive,\nor harmful.\n\nCommunity leaders have the right and responsibility to remove, edit, or reject\ncomments, commits, code, wiki edits, issues, and other contributions that are\nnot aligned to this Code of Conduct, and will communicate reasons for moderation\ndecisions when appropriate.\n\n## Scope\n\nThis Code of Conduct applies within all community spaces, and also applies when\nan individual is officially representing the community in public spaces.\nExamples of representing our community include using an official e-mail address,\nposting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported to the community leaders responsible for enforcement at\n.\nAll complaints will be reviewed and investigated promptly and fairly.\n\nAll community leaders are obligated to respect the privacy and security of the\nreporter of any incident.\n\n## Enforcement Guidelines\n\nCommunity leaders will follow these Community Impact Guidelines in determining\nthe consequences for any action they deem in violation of this Code of Conduct:\n\n### 1. Correction\n\n**Community Impact**: Use of inappropriate language or other behavior deemed\nunprofessional or unwelcome in the community.\n\n**Consequence**: A private, written warning from community leaders, providing\nclarity around the nature of the violation and an explanation of why the\nbehavior was inappropriate. A public apology may be requested.\n\n### 2. Warning\n\n**Community Impact**: A violation through a single incident or series\nof actions.\n\n**Consequence**: A warning with consequences for continued behavior. No\ninteraction with the people involved, including unsolicited interaction with\nthose enforcing the Code of Conduct, for a specified period of time. This\nincludes avoiding interactions in community spaces as well as external channels\nlike social media. Violating these terms may lead to a temporary or\npermanent ban.\n\n### 3. Temporary Ban\n\n**Community Impact**: A serious violation of community standards, including\nsustained inappropriate behavior.\n\n**Consequence**: A temporary ban from any sort of interaction or public\ncommunication with the community for a specified period of time. No public or\nprivate interaction with the people involved, including unsolicited interaction\nwith those enforcing the Code of Conduct, is allowed during this period.\nViolating these terms may lead to a permanent ban.\n\n### 4. Permanent Ban\n\n**Community Impact**: Demonstrating a pattern of violation of community\nstandards, including sustained inappropriate behavior, harassment of an\nindividual, or aggression toward or disparagement of classes of individuals.\n\n**Consequence**: A permanent ban from any sort of public interaction within\nthe community.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage],\nversion 2.0, available at\nhttps://www.contributor-covenant.org/version/2/0/code_of_conduct.html.\n\nCommunity Impact Guidelines were inspired by [Mozilla's code of conduct\nenforcement ladder](https://github.com/mozilla/diversity).\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see the FAQ at\nhttps://www.contributor-covenant.org/faq. Translations are available at\nhttps://www.contributor-covenant.org/translations.\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "## **Contributing to Tremor**\n\nThanks for your interest in contributing to Tremor. Please take a moment to review this document before submitting a pull request. This document will outline how to submit changes to this repository and which conventions to follow. If you are ever in doubt about anything we encourage you to reach out on [Slack](https://tremor-community.slack.com/join/shared_invite/zt-2a95vjndc-YCKurK3HVAkYtjialnT2_A#/shared-invite/email), [open a discussion](#discussions), or [shoot us an email](mailto:hello@tremor.so).\n\n### **Prerequisites**\n\n- You are familiar with [issues](#issues) and [pull requests](#pulls).\n- You have read the [docs](https://npm.tremor.so/docs/getting-started/installation).\n\n### **Issues before PRs**\n\n1. Before you start working on a change please make sure that there is an issue for what you will be working on. You can either find an [existing issue](https://github.com/tremorlabs/tremor-npm/issues) or [open a new issue](https://github.com/tremorlabs/tremor-npm/issues/new/choose) if none exists.\n2. When you are ready to start working on a change you should first [fork the Tremor repo](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) and [branch out](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-and-deleting-branches-within-your-repository) from the `main` branch.\n3. Make your changes.\n4. [Open a pull request towards the main branch in the Tremor repo](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request-from-a-fork). Then, our team will review, comment and eventually approve your PR.\n\n### **Branches**\n\nAll changes should be part of a branch and submitted as a pull request - your branches should be prefixed with one of:\n\n- `fix/` for bug fixes\n- `feat/` for features\n\n### **Commits**\n\nStrive towards keeping your commits small and isolated - this helps the reviewer understand what is going on and makes it easier to process your requests.\n\n### **Pull Requests**\n\nOnce your changes are ready you must submit your branch as a pull request. Your pull request should be opened against the `main` branch in the main Tremor repo.\n\nIn your PR's description, you should follow the structure as outlined in the PR template:\n\n1. Description: Describe your changes in detail.\n2. Related issue(s): Please link to the issue.\n3. What kind of change does this PR introduce?: Select from template options.\n4. Does this PR introduce a breaking change?: Select Yes/No.\n5. How has This been tested?: Please describe how you tested your changes.\n6. Screenshots (if appropriate):\n\n**The PR fulfills these requirements:**\n\n- [ ] It's submitted to the `main` branch.\n- [ ] When resolving a specific issue, it's referenced in the related issue section above.\n- [ ] My change requires a change to the documentation. (Managed by Tremor Team).\n- [ ] I have added tests to cover my changes.\n\n* Be sure to check the \"Allow edits from maintainers\" option while creating your PR.\n* If your PR refers to or fixes an issue, be sure to add refs #XXX or fixes #XXX to the related issue section. Replacing XXX with the respective issue number.\n\nBe sure to fill the PR Template accordingly.\nWe encourage that you do a self-review prior to requesting a review. To do a self review click the review button in the top right corner, go through your code and annotate your changes. This makes it easier for the reviewer to process your PR.\n\n### **Documentation**\n\n- We generally encourage you to document your changes through comments in your code.\n- If you alter user-facing behavior you must provide documentation for such changes, for reference, check out [our documentation](<[url](https://npm.tremor.so/docs/getting-started/introduction)>).\n\n### **Licensing**\n\nBy contributing to Tremor, you agree that your contributions will be licensed under the [Apache License 2.0](https://github.com/tremorlabs/tremor-npm/blob/main/License) license. By submitting your pull request, you agree to our [Contributor License Agreement (CLA)](https://tremor.so/contributors). This agreement clarifies our ability to incorporate your contributions.\n"
  },
  {
    "path": "License",
    "content": "                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n"
  },
  {
    "path": "README.md",
    "content": "<br />\n<br />\n<p align=\"center\">\n  <a href=\"https://npm.tremor.so\">\n    <picture>\n       <source media=\"(prefers-color-scheme: dark)\" srcset=\"images/tremor-logo-dark.svg\">\n      <source media=\"(prefers-color-scheme: light)\" srcset=\"images/tremor-logo-light.svg\">\n    <img alt=\"Tremor Logo\" src=\"images/tremor-logo-light.svg\" height=\"50\"/>\n    </picture>\n  </a>\n</p>\n<div align=\"center\">\n<br />\n<br />\n\n<div align=\"center\">\n  <a href=\"https://npmjs.com/package/@tremor/react\">\n    <img alt=\"npm\" src=\"https://img.shields.io/npm/dm/@tremor/react?color=3b82f6&label=npm&logo=npm&labelColor=334155\">\n  </a>\n  <a href=\"https://npm.tremor.so/docs/getting-started/installation\">\n    <img alt=\"Read the documentation\" src=\"https://img.shields.io/badge/Docs-blue?style=flat&logo=readthedocs&color=3b82f6&labelColor=334155&logoColor=f5f5f5\" height=\"20\" width=\"auto\">\n  </a>\n  <a href=\"https://github.com/tremorlabs/tremor-npm/blob/main/License\">\n    <img alt=\"License Apache 2.0\" src=\"https://img.shields.io/badge/license-Apache 2.0-blue.svg?style=flat&color=3b82f6&labelColor=334155 \" height=\"20\" width=\"auto\">\n  </a>\n  <a href=\"https://join.slack.com/t/tremor-community/shared_invite/zt-21ug6czv6-RckDPEAR6GdYOqfMGKOWpQ\">\n    <img src=\"https://img.shields.io/badge/Join-important.svg?color=4A154B&label=Slack&logo=slack&labelColor=334155&logoColor=f5f5f5\" alt=\"Join Slack\" />\n  </a>\n  <a href=\"https://twitter.com/intent/follow?screen_name=tremorlabs\">\n    <img src=\"https://img.shields.io/badge/Follow-important.svg?color=000000&label=@tremorlabs&logo=X&labelColor=334155&logoColor=f5f5f5\" alt=\"Follow at Tremorlabs\" />\n  </a>\n</div>\n<h3 align=\"center\">\n  <a href=\"https://npm.tremor.so/docs/getting-started/installation\">Documentation</a> &bull;\n  <a href=\"https://npm.tremor.so\">Website</a>\n</h3>\n<br />\n  <h1>React components to build charts and dashboards</h1>\n</div>\n\n[Tremor NPM](https://npm.tremor.so/) 20+ open-source components built on top of Tailwind CSS to make visualizing data simple again. Fully open-source, made by data scientists and software engineers with a sweet spot for design.\n\n<br />\n\n![Tremor Banner](images/banner-github-readme.png)\n\n<br />\n\n## Getting Started\n\nSee our [Installation Guide](https://npm.tremor.so/docs/getting-started/installation). To make use of the library we also need Tailwind CSS setup in the project.\n\n## Example\n\nWith Tremor creating an analytical interface is easy.\n\n```jsx\n\"use client\";\nimport { AreaChart, Card } from \"@tremor/react\";\n\nconst chartdata = [\n  {\n    date: \"Jan 23\",\n    \"Route Requests\": 289,\n    \"Station Requests\": 233,\n  },\n  // ...\n  {\n    date: \"Oct 23\",\n    \"Route Requests\": 283,\n    \"Station Requests\": 247,\n  },\n];\n\nexport default function Example() {\n  return (\n    <Card className=\"max-w-4xl\">\n      <span className=\"text-tremor-default text-tremor-content dark:text-dark-tremor-content\">\n        Total Requests\n      </span>\n      <p className=\"text-tremor-metric font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong\">\n        6,568\n      </p>\n      <AreaChart\n        className=\"mt-2 h-80\"\n        data={chartdata}\n        index=\"date\"\n        categories={[\"Route Requests\", \"Station Requests\"]}\n        colors={[\"indigo\", \"rose\"]}\n        yAxisWidth={33}\n      />\n    </Card>\n  );\n}\n```\n\n<br />\n\n<picture>\n  <source media=\"(prefers-color-scheme: dark)\" srcset=\"images/example-dark.png\">\n  <source media=\"(prefers-color-scheme: light)\" srcset=\"images/example-light.png\">\n  <img alt=\"Tremor Example\" src=\"images/example-light.png\"/>\n</picture>\n\n## Community and Contribution\n\nWe are always looking for new ideas or other ways to improve Tremor NPM. If you have developed anything cool or found a bug, send us a pull request. Check out our Contributor License Agreement [here](https://tremor.so/contributors).\n\n## License\n\n[Apache License 2.0](https://github.com/tremorlabs/tremor-npm/blob/main/License)\n\nCopyright &copy; 2025 Tremor Labs, Inc. All rights reserved.\n"
  },
  {
    "path": "babel.config.js",
    "content": "/* eslint-disable no-undef */\nmodule.exports = {\n  presets: [\"@babel/preset-env\", \"@babel/preset-react\", \"@babel/preset-typescript\"],\n};\n"
  },
  {
    "path": "jest.config.js",
    "content": "/* eslint-disable no-undef */\nmodule.exports = {\n  testEnvironment: \"jsdom\",\n  moduleDirectories: [\"node_modules\", \"src\"],\n  moduleNameMapper: {\n    \".(css|less|scss)$\": \"identity-obj-proxy\",\n    \"components/(.*)\": \"<rootDir>/src/components/$1\",\n    \"assets/(.*)\": \"<rootDir>/src/assets/$1\",\n  },\n  transformIgnorePatterns: [\"<rootDir>/node_modules/(?!react-dnd|dnd-core|@react-dnd)\"],\n};\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"@tremor/react\",\n  \"version\": \"0.0.0-development\",\n  \"description\": \"The React library to build dashboards faster.\",\n  \"scripts\": {\n    \"prebuild\": \"rm -rf dist\",\n    \"build\": \"rollup -c\",\n    \"lint\": \"eslint \\\"{**/*,*}.{js,ts,jsx,tsx}\\\"\",\n    \"prettier\": \"prettier --write \\\"{src,types,tests,example/src}/**/*.{js,ts,jsx,tsx}\\\"\",\n    \"tests\": \"jest\",\n    \"fix-lint\": \"eslint . --ext .ts --ext .tsx --fix\",\n    \"build-storybook\": \"storybook build\",\n    \"semantic-release\": \"semantic-release\",\n    \"storybook\": \"storybook dev -p 6006\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/tremorlabs/tremor-npm.git\"\n  },\n  \"author\": \"tremor\",\n  \"license\": \"Apache 2.0\",\n  \"bugs\": {\n    \"url\": \"https://github.com/tremorlabs/tremor-npm/issues\"\n  },\n  \"homepage\": \"https://github.com/tremorlabs/tremor-npm-npm#readme\",\n  \"dependencies\": {\n    \"@floating-ui/react\": \"^0.19.2\",\n    \"@headlessui/react\": \"2.2.0\",\n    \"date-fns\": \"^3.6.0\",\n    \"react-day-picker\": \"^8.10.1\",\n    \"react-transition-state\": \"^2.1.2\",\n    \"recharts\": \"^2.13.3\",\n    \"tailwind-merge\": \"^2.5.2\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.25.2\",\n    \"@babel/preset-env\": \"^7.25.4\",\n    \"@babel/preset-react\": \"^7.24.7\",\n    \"@babel/preset-typescript\": \"^7.24.7\",\n    \"@chromatic-com/storybook\": \"^3.2.2\",\n    \"@mdx-js/react\": \"^2.3.0\",\n    \"@rollup/plugin-commonjs\": \"^21.1.0\",\n    \"@rollup/plugin-node-resolve\": \"^13.3.0\",\n    \"@rollup/plugin-terser\": \"^0.4.4\",\n    \"@rollup/plugin-typescript\": \"^8.5.0\",\n    \"@semantic-release/commit-analyzer\": \"^13.0.0\",\n    \"@semantic-release/github\": \"github:semantic-release/github\",\n    \"@semantic-release/npm\": \"github:semantic-release/npm\",\n    \"@storybook/addon-a11y\": \"^8.4.7\",\n    \"@storybook/addon-actions\": \"^8.4.7\",\n    \"@storybook/addon-essentials\": \"^8.4.7\",\n    \"@storybook/addon-interactions\": \"^8.4.7\",\n    \"@storybook/addon-links\": \"^8.4.7\",\n    \"@storybook/addon-styling-webpack\": \"^1.0.1\",\n    \"@storybook/addon-themes\": \"^8.4.7\",\n    \"@storybook/addon-webpack5-compiler-babel\": \"^3.0.3\",\n    \"@storybook/manager-api\": \"^8.4.7\",\n    \"@storybook/mdx2-csf\": \"^1.1.0\",\n    \"@storybook/react\": \"^8.4.7\",\n    \"@storybook/react-vite\": \"^8.4.7\",\n    \"@storybook/react-webpack5\": \"^8.4.7\",\n    \"@storybook/test\": \"^8.4.7\",\n    \"@storybook/theming\": \"^8.4.7\",\n    \"@tailwindcss/forms\": \"^0.5.9\",\n    \"@testing-library/react\": \"^14.3.1\",\n    \"@types/jest\": \"^29.5.13\",\n    \"@types/node\": \"^22.6.1\",\n    \"@types/react\": \"^18.3.9\",\n    \"@typescript-eslint/eslint-plugin\": \"^8.7.0\",\n    \"@typescript-eslint/parser\": \"^8.7.0\",\n    \"autoprefixer\": \"^10.4.20\",\n    \"babel-jest\": \"^27.5.1\",\n    \"babel-loader\": \"^8.4.1\",\n    \"conventional-changelog-conventionalcommits\": \"^5.0.0\",\n    \"css-loader\": \"^6.11.0\",\n    \"eslint\": \"^8.57.1\",\n    \"eslint-config-prettier\": \"^9.1.0\",\n    \"eslint-plugin-prettier\": \"^5.2.1\",\n    \"eslint-plugin-react\": \"^7.36.1\",\n    \"eslint-plugin-react-hooks\": \"^4.6.2\",\n    \"html-webpack-plugin\": \"^5.6.0\",\n    \"identity-obj-proxy\": \"^3.0.0\",\n    \"jest\": \"^29.7.0\",\n    \"jest-environment-jsdom\": \"^29.7.0\",\n    \"postcss\": \"^8.4.47\",\n    \"postcss-loader\": \"^7.3.4\",\n    \"prettier\": \"3.4.2\",\n    \"prop-types\": \"^15.8.1\",\n    \"react\": \"^18.3.1\",\n    \"react-dom\": \"^18.3.1\",\n    \"resize-observer-polyfill\": \"^1.5.1\",\n    \"rollup\": \"^2.79.1\",\n    \"rollup-plugin-dts\": \"^4.2.3\",\n    \"rollup-plugin-peer-deps-external\": \"^2.2.4\",\n    \"rollup-plugin-postcss\": \"^4.0.2\",\n    \"rollup-plugin-preserve-directives\": \"^0.1.1\",\n    \"rollup-plugin-typescript-paths\": \"^1.5.0\",\n    \"semantic-release\": \"^24.1.1\",\n    \"storybook\": \"^8.4.7\",\n    \"style-loader\": \"^3.3.4\",\n    \"tailwindcss\": \"^3.4.16\",\n    \"tslib\": \"^2.7.0\",\n    \"typescript\": \"^4.9.5\",\n    \"webpack\": \"^5.97.1\"\n  },\n  \"peerDependencies\": {\n    \"react\": \"^18.0.0\",\n    \"react-dom\": \">=16.6.0\"\n  },\n  \"main\": \"dist/index.cjs\",\n  \"module\": \"dist/index.js\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"types\": \"dist/index.d.ts\",\n  \"publishConfig\": {\n    \"access\": \"public\"\n  },\n  \"release\": {\n    \"branches\": [\n      \"main\",\n      {\n        \"name\": \"beta\",\n        \"prerelease\": true\n      },\n      {\n        \"name\": \"beta-*\",\n        \"prerelease\": true\n      }\n    ],\n    \"plugins\": [\n      [\n        \"@semantic-release/commit-analyzer\",\n        {\n          \"preset\": \"conventionalcommits\",\n          \"releaseRules\": [\n            {\n              \"type\": \"build\",\n              \"release\": \"minor\"\n            }\n          ]\n        }\n      ],\n      \"@semantic-release/npm\",\n      \"@semantic-release/github\"\n    ]\n  }\n}\n"
  },
  {
    "path": "postcss.config.js",
    "content": "/* eslint-disable no-undef */\nmodule.exports = {\n  plugins: {\n    tailwindcss: {},\n    autoprefixer: {},\n  },\n};\n"
  },
  {
    "path": "rollup.config.js",
    "content": "/* eslint-disable @typescript-eslint/no-var-requires */\n/* eslint-disable no-undef */\nimport commonjs from \"@rollup/plugin-commonjs\";\nimport resolve from \"@rollup/plugin-node-resolve\";\nimport typescript from \"@rollup/plugin-typescript\";\n\nimport dts from \"rollup-plugin-dts\";\nimport peerDepsExternal from \"rollup-plugin-peer-deps-external\";\nimport { typescriptPaths } from \"rollup-plugin-typescript-paths\";\nimport terser from \"@rollup/plugin-terser\";\nimport preserveDirectives from \"rollup-plugin-preserve-directives\";\n\nconst outputOptions = {\n  sourcemap: false,\n  preserveModules: true,\n  preserveModulesRoot: \"src\",\n};\n\nexport default [\n  {\n    input: \"src/index.ts\",\n    output: [\n      {\n        dir: \"dist\",\n        format: \"cjs\",\n        entryFileNames: \"[name].cjs\",\n        exports: \"auto\",\n        ...outputOptions,\n      },\n      {\n        dir: \"dist\",\n        format: \"esm\",\n        ...outputOptions,\n      },\n    ],\n    external: [/node_modules/],\n    plugins: [\n      peerDepsExternal(),\n      resolve(),\n      commonjs(),\n      preserveDirectives(),\n      terser(),\n      typescript({\n        tsconfig: \"./tsconfig.json\",\n        exclude: [\"**/stories/**\", \"**/tests/**\", \"./styles.css\"],\n      }),\n      typescriptPaths(),\n    ],\n  },\n  {\n    input: \"dist/index.d.ts\",\n    output: [{ file: \"dist/index.d.ts\", format: \"esm\" }],\n    plugins: [dts()],\n    external: [/\\.css$/],\n  },\n];\n"
  },
  {
    "path": "setupTests.js",
    "content": "/* eslint-disable @typescript-eslint/no-require-imports */\n/* eslint-disable no-undef */\nglobal.ResizeObserver = require(\"resize-observer-polyfill\");\n"
  },
  {
    "path": "src/assets/ArrowDownHeadIcon.tsx",
    "content": "import React from \"react\";\n\nconst ArrowDownHeadIcon = ({ ...props }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" {...props}>\n    <path d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"></path>\n  </svg>\n);\n\nexport default ArrowDownHeadIcon;\n"
  },
  {
    "path": "src/assets/ArrowDownIcon.tsx",
    "content": "import React from \"react\";\n\nconst ArrowDownIcon = ({ ...props }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" {...props}>\n    <path d=\"M13.0001 16.1716L18.3641 10.8076L19.7783 12.2218L12.0001 20L4.22192 12.2218L5.63614 10.8076L11.0001 16.1716V4H13.0001V16.1716Z\"></path>\n  </svg>\n);\n\nexport default ArrowDownIcon;\n"
  },
  {
    "path": "src/assets/ArrowDownRightIcon.tsx",
    "content": "import React from \"react\";\n\nconst ArrowDownRightIcon = ({ ...props }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" {...props}>\n    <path d=\"M14.5895 16.0032L5.98291 7.39664L7.39712 5.98242L16.0037 14.589V7.00324H18.0037V18.0032H7.00373V16.0032H14.5895Z\"></path>\n  </svg>\n);\n\nexport default ArrowDownRightIcon;\n"
  },
  {
    "path": "src/assets/ArrowLeftHeadIcon.tsx",
    "content": "import React from \"react\";\n\nconst ArrowLeftHeadIcon = ({ ...props }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" {...props}>\n    <path d=\"M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z\"></path>\n  </svg>\n);\n\nexport default ArrowLeftHeadIcon;\n"
  },
  {
    "path": "src/assets/ArrowRightHeadIcon.tsx",
    "content": "import React from \"react\";\n\nconst ArrowRightHeadIcon = ({ ...props }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" {...props}>\n    <path d=\"M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z\"></path>\n  </svg>\n);\n\nexport default ArrowRightHeadIcon;\n"
  },
  {
    "path": "src/assets/ArrowRightIcon.tsx",
    "content": "import React from \"react\";\n\nconst ArrowRightIcon = ({ ...props }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" {...props}>\n    <path d=\"M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z\"></path>\n  </svg>\n);\n\nexport default ArrowRightIcon;\n"
  },
  {
    "path": "src/assets/ArrowUpHeadIcon.tsx",
    "content": "import React from \"react\";\n\nconst ArrowUpHeadIcon = ({ ...props }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" {...props}>\n    <path d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"></path>\n  </svg>\n);\n\nexport default ArrowUpHeadIcon;\n"
  },
  {
    "path": "src/assets/ArrowUpIcon.tsx",
    "content": "import React from \"react\";\n\nconst ArrowUpIcon = ({ ...props }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" {...props}>\n    <path d=\"M13.0001 7.82843V20H11.0001V7.82843L5.63614 13.1924L4.22192 11.7782L12.0001 4L19.7783 11.7782L18.3641 13.1924L13.0001 7.82843Z\"></path>\n  </svg>\n);\n\nexport default ArrowUpIcon;\n"
  },
  {
    "path": "src/assets/ArrowUpRightIcon.tsx",
    "content": "import React from \"react\";\n\nconst ArrowUpRightIcon = ({ ...props }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" {...props}>\n    <path d=\"M16.0037 9.41421L7.39712 18.0208L5.98291 16.6066L14.5895 8H7.00373V6H18.0037V17H16.0037V9.41421Z\"></path>\n  </svg>\n);\n\nexport default ArrowUpRightIcon;\n"
  },
  {
    "path": "src/assets/CalendarIcon.tsx",
    "content": "import React from \"react\";\n\nconst CalendarIcon = ({ ...props }) => (\n  <svg {...props} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n    <path\n      fillRule=\"evenodd\"\n      d=\"M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\n\nexport default CalendarIcon;\n"
  },
  {
    "path": "src/assets/ChevronLeftFill.tsx",
    "content": "import React from \"react\";\n\nconst ChevronLeftFill = ({ ...props }) => (\n  <svg {...props} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n    <path d=\"M8 12L14 6V18L8 12Z\"></path>\n  </svg>\n);\n\nexport default ChevronLeftFill;\n"
  },
  {
    "path": "src/assets/ChevronRightFill.tsx",
    "content": "import React from \"react\";\n\nconst ChevronRightFill = ({ ...props }) => (\n  <svg {...props} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n    <path d=\"M16 12L10 18V6L16 12Z\"></path>\n  </svg>\n);\n\nexport default ChevronRightFill;\n"
  },
  {
    "path": "src/assets/DoubleArrowLeftHeadIcon.tsx",
    "content": "import React from \"react\";\n\nconst DoubleArrowLeftHeadIcon = ({ ...props }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" {...props}>\n    <path d=\"M4.83582 12L11.0429 18.2071L12.4571 16.7929L7.66424 12L12.4571 7.20712L11.0429 5.79291L4.83582 12ZM10.4857 12L16.6928 18.2071L18.107 16.7929L13.3141 12L18.107 7.20712L16.6928 5.79291L10.4857 12Z\"></path>\n  </svg>\n);\n\nexport default DoubleArrowLeftHeadIcon;\n"
  },
  {
    "path": "src/assets/DoubleArrowRightHeadIcon.tsx",
    "content": "import React from \"react\";\n\nconst DoubleArrowRightHeadIcon = ({ ...props }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" {...props}>\n    <path d=\"M19.1642 12L12.9571 5.79291L11.5429 7.20712L16.3358 12L11.5429 16.7929L12.9571 18.2071L19.1642 12ZM13.5143 12L7.30722 5.79291L5.89301 7.20712L10.6859 12L5.89301 16.7929L7.30722 18.2071L13.5143 12Z\"></path>\n  </svg>\n);\n\nexport default DoubleArrowRightHeadIcon;\n"
  },
  {
    "path": "src/assets/ExclamationFilledIcon.tsx",
    "content": "import React from \"react\";\n\nconst ExclamationFilledIcon = ({ ...props }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" {...props}>\n    <path d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11 15V17H13V15H11ZM11 7V13H13V7H11Z\"></path>\n  </svg>\n);\n\nexport default ExclamationFilledIcon;\n"
  },
  {
    "path": "src/assets/EyeIcon.tsx",
    "content": "import React from \"react\";\n\nconst EyeIcon = ({ ...props }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" {...props}>\n    <path d=\"M1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12ZM12.0003 17C14.7617 17 17.0003 14.7614 17.0003 12C17.0003 9.23858 14.7617 7 12.0003 7C9.23884 7 7.00026 9.23858 7.00026 12C7.00026 14.7614 9.23884 17 12.0003 17ZM12.0003 15C10.3434 15 9.00026 13.6569 9.00026 12C9.00026 10.3431 10.3434 9 12.0003 9C13.6571 9 15.0003 10.3431 15.0003 12C15.0003 13.6569 13.6571 15 12.0003 15Z\"></path>\n  </svg>\n);\n\nexport default EyeIcon;\n"
  },
  {
    "path": "src/assets/EyeOffIcon.tsx",
    "content": "import React from \"react\";\n\nconst EyeOffIcon = ({ ...props }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" {...props}>\n    <path d=\"M4.52047 5.93457L1.39366 2.80777L2.80788 1.39355L22.6069 21.1925L21.1927 22.6068L17.8827 19.2968C16.1814 20.3755 14.1638 21.0002 12.0003 21.0002C6.60812 21.0002 2.12215 17.1204 1.18164 12.0002C1.61832 9.62282 2.81932 7.5129 4.52047 5.93457ZM14.7577 16.1718L13.2937 14.7078C12.902 14.8952 12.4634 15.0002 12.0003 15.0002C10.3434 15.0002 9.00026 13.657 9.00026 12.0002C9.00026 11.537 9.10522 11.0984 9.29263 10.7067L7.82866 9.24277C7.30514 10.0332 7.00026 10.9811 7.00026 12.0002C7.00026 14.7616 9.23884 17.0002 12.0003 17.0002C13.0193 17.0002 13.9672 16.6953 14.7577 16.1718ZM7.97446 3.76015C9.22127 3.26959 10.5793 3.00016 12.0003 3.00016C17.3924 3.00016 21.8784 6.87992 22.8189 12.0002C22.5067 13.6998 21.8038 15.2628 20.8068 16.5925L16.947 12.7327C16.9821 12.4936 17.0003 12.249 17.0003 12.0002C17.0003 9.23873 14.7617 7.00016 12.0003 7.00016C11.7514 7.00016 11.5068 7.01833 11.2677 7.05343L7.97446 3.76015Z\"></path>\n  </svg>\n);\n\nexport default EyeOffIcon;\n"
  },
  {
    "path": "src/assets/LoadingSpinner.tsx",
    "content": "import React from \"react\";\n\nconst LoadingSpinner = ({ ...props }) => (\n  <svg {...props} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n    <path fill=\"none\" d=\"M0 0h24v24H0z\" />\n    <path d=\"M18.364 5.636L16.95 7.05A7 7 0 1 0 19 12h2a9 9 0 1 1-2.636-6.364z\" />\n  </svg>\n);\n\nexport default LoadingSpinner;\n"
  },
  {
    "path": "src/assets/MinusIcon.tsx",
    "content": "import React from \"react\";\n\nconst MinusIcon = ({ ...props }) => (\n  <svg\n    {...props}\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2.5\"\n  >\n    <path d=\"M20 12H4\" />\n  </svg>\n);\n\nexport default MinusIcon;\n"
  },
  {
    "path": "src/assets/PlusIcon.tsx",
    "content": "import React from \"react\";\n\nconst PlusIcon = ({ ...props }) => (\n  <svg\n    {...props}\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2.5\"\n  >\n    <path d=\"M12 4v16m8-8H4\" />\n  </svg>\n);\n\nexport default PlusIcon;\n"
  },
  {
    "path": "src/assets/SearchIcon.tsx",
    "content": "import React from \"react\";\n\nconst SearchIcon = ({ ...props }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" {...props}>\n    <path d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z\"></path>\n  </svg>\n);\n\nexport default SearchIcon;\n"
  },
  {
    "path": "src/assets/XCircleIcon.tsx",
    "content": "import React from \"react\";\n\nconst XCircleIcon = ({ ...props }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" {...props}>\n    <path d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 10.5858L9.17157 7.75736L7.75736 9.17157L10.5858 12L7.75736 14.8284L9.17157 16.2426L12 13.4142L14.8284 16.2426L16.2426 14.8284L13.4142 12L16.2426 9.17157L14.8284 7.75736L12 10.5858Z\"></path>\n  </svg>\n);\n\nexport default XCircleIcon;\n"
  },
  {
    "path": "src/assets/XIcon.tsx",
    "content": "import React from \"react\";\n\nconst XIcon = ({ ...props }) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"100%\"\n      height=\"100%\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n    </svg>\n  );\n};\n\nexport default XIcon;\n"
  },
  {
    "path": "src/assets/index.ts",
    "content": "export { default as ArrowDownHeadIcon } from \"./ArrowDownHeadIcon\";\nexport { default as ArrowDownIcon } from \"./ArrowDownIcon\";\nexport { default as ArrowDownRightIcon } from \"./ArrowDownRightIcon\";\nexport { default as ArrowLeftHeadIcon } from \"./ArrowLeftHeadIcon\";\nexport { default as ArrowRightHeadIcon } from \"./ArrowRightHeadIcon\";\nexport { default as ArrowRightIcon } from \"./ArrowRightIcon\";\nexport { default as ArrowUpHeadIcon } from \"./ArrowUpHeadIcon\";\nexport { default as ArrowUpIcon } from \"./ArrowUpIcon\";\nexport { default as ArrowUpRightIcon } from \"./ArrowUpRightIcon\";\nexport { default as CalendarIcon } from \"./CalendarIcon\";\nexport { default as DoubleArrowLeftHeadIcon } from \"./DoubleArrowLeftHeadIcon\";\nexport { default as DoubleArrowRightHeadIcon } from \"./DoubleArrowRightHeadIcon\";\nexport { default as ExclamationFilledIcon } from \"./ExclamationFilledIcon\";\nexport { default as EyeIcon } from \"./EyeIcon\";\nexport { default as EyeOffIcon } from \"./EyeOffIcon\";\nexport { default as LoadingSpinner } from \"./LoadingSpinner\";\nexport { default as SearchIcon } from \"./SearchIcon\";\nexport { default as XCircleIcon } from \"./XCircleIcon\";\nexport { default as PlusIcon } from \"./PlusIcon\";\nexport { default as MinusIcon } from \"./MinusIcon\";\nexport { default as ChevronLeftFill } from \"./ChevronLeftFill\";\nexport { default as ChevronRightFill } from \"./ChevronRightFill\";\n"
  },
  {
    "path": "src/components/chart-elements/AreaChart/AreaChart.tsx",
    "content": "\"use client\";\nimport React, { Fragment, useState } from \"react\";\nimport {\n  Area,\n  AreaChart as ReChartsAreaChart,\n  CartesianGrid,\n  Dot,\n  Legend,\n  Line,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n  Label,\n} from \"recharts\";\nimport { AxisDomain } from \"recharts/types/util/types\";\n\nimport BaseChartProps from \"../common/BaseChartProps\";\nimport ChartLegend from \"../common/ChartLegend\";\nimport ChartTooltip from \"../common/ChartTooltip\";\nimport NoData from \"../common/NoData\";\nimport {\n  constructCategoryColors,\n  getYAxisDomain,\n  hasOnlyOneValueForThisKey,\n} from \"../common/utils\";\n\nimport {\n  BaseColors,\n  colorPalette,\n  defaultValueFormatter,\n  getColorClassNames,\n  themeColorRange,\n  tremorTwMerge,\n} from \"lib\";\nimport { CurveType } from \"../../../lib/inputTypes\";\n\nexport interface AreaChartProps extends BaseChartProps {\n  stack?: boolean;\n  curveType?: CurveType;\n  connectNulls?: boolean;\n  showGradient?: boolean;\n}\n\ninterface ActiveDot {\n  index?: number;\n  dataKey?: string;\n}\n\nconst AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref) => {\n  const {\n    data = [],\n    categories = [],\n    index,\n    stack = false,\n    colors = themeColorRange,\n    valueFormatter = defaultValueFormatter,\n    startEndOnly = false,\n    showXAxis = true,\n    showYAxis = true,\n    yAxisWidth = 56,\n    intervalType = \"equidistantPreserveStart\",\n    showAnimation = false,\n    animationDuration = 900,\n    showTooltip = true,\n    showLegend = true,\n    showGridLines = true,\n    showGradient = true,\n    autoMinValue = false,\n    curveType = \"linear\",\n    minValue,\n    maxValue,\n    connectNulls = false,\n    allowDecimals = true,\n    noDataText,\n    className,\n    onValueChange,\n    enableLegendSlider = false,\n    customTooltip,\n    rotateLabelX,\n    padding = (!showXAxis && !showYAxis) || (startEndOnly && !showYAxis)\n      ? { left: 0, right: 0 }\n      : { left: 20, right: 20 },\n    tickGap = 5,\n    xAxisLabel,\n    yAxisLabel,\n    ...other\n  } = props;\n  const CustomTooltip = customTooltip;\n  const [legendHeight, setLegendHeight] = useState(60);\n  const [activeDot, setActiveDot] = useState<ActiveDot | undefined>(undefined);\n  const [activeLegend, setActiveLegend] = useState<string | undefined>(undefined);\n  const categoryColors = constructCategoryColors(categories, colors);\n\n  const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);\n  const hasOnValueChange = !!onValueChange;\n\n  function onDotClick(itemData: any, event: React.MouseEvent) {\n    event.stopPropagation();\n\n    if (!hasOnValueChange) return;\n    if (\n      (itemData.index === activeDot?.index && itemData.dataKey === activeDot?.dataKey) ||\n      (hasOnlyOneValueForThisKey(data, itemData.dataKey) &&\n        activeLegend &&\n        activeLegend === itemData.dataKey)\n    ) {\n      setActiveLegend(undefined);\n      setActiveDot(undefined);\n      onValueChange?.(null);\n    } else {\n      setActiveLegend(itemData.dataKey);\n      setActiveDot({\n        index: itemData.index,\n        dataKey: itemData.dataKey,\n      });\n      onValueChange?.({\n        eventType: \"dot\",\n        categoryClicked: itemData.dataKey,\n        ...itemData.payload,\n      });\n    }\n  }\n\n  function onCategoryClick(dataKey: string) {\n    if (!hasOnValueChange) return;\n    if (\n      (dataKey === activeLegend && !activeDot) ||\n      (hasOnlyOneValueForThisKey(data, dataKey) && activeDot && activeDot.dataKey === dataKey)\n    ) {\n      setActiveLegend(undefined);\n      onValueChange?.(null);\n    } else {\n      setActiveLegend(dataKey);\n      onValueChange?.({\n        eventType: \"category\",\n        categoryClicked: dataKey,\n      });\n    }\n    setActiveDot(undefined);\n  }\n  return (\n    <div ref={ref} className={tremorTwMerge(\"w-full h-80\", className)} {...other}>\n      <ResponsiveContainer className=\"h-full w-full\">\n        {data?.length ? (\n          <ReChartsAreaChart\n            data={data}\n            onClick={\n              hasOnValueChange && (activeLegend || activeDot)\n                ? () => {\n                    setActiveDot(undefined);\n                    setActiveLegend(undefined);\n                    onValueChange?.(null);\n                  }\n                : undefined\n            }\n            margin={{\n              bottom: xAxisLabel ? 30 : undefined,\n              left: yAxisLabel ? 20 : undefined,\n              right: yAxisLabel ? 5 : undefined,\n              top: 5,\n            }}\n          >\n            {showGridLines ? (\n              <CartesianGrid\n                className={tremorTwMerge(\n                  // common\n                  \"stroke-1\",\n                  // light\n                  \"stroke-tremor-border\",\n                  // dark\n                  \"dark:stroke-dark-tremor-border\",\n                )}\n                horizontal={true}\n                vertical={false}\n              />\n            ) : null}\n            <XAxis\n              padding={padding}\n              hide={!showXAxis}\n              dataKey={index}\n              tick={{ transform: \"translate(0, 6)\" }}\n              ticks={startEndOnly ? [data[0][index], data[data.length - 1][index]] : undefined}\n              fill=\"\"\n              stroke=\"\"\n              className={tremorTwMerge(\n                // common\n                \"text-tremor-label\",\n                // light\n                \"fill-tremor-content\",\n                // dark\n                \"dark:fill-dark-tremor-content\",\n              )}\n              interval={startEndOnly ? \"preserveStartEnd\" : intervalType}\n              tickLine={false}\n              axisLine={false}\n              minTickGap={tickGap}\n              angle={rotateLabelX?.angle}\n              dy={rotateLabelX?.verticalShift}\n              height={rotateLabelX?.xAxisHeight}\n            >\n              {xAxisLabel && (\n                <Label\n                  position=\"insideBottom\"\n                  offset={-20}\n                  className=\"fill-tremor-content-emphasis text-tremor-default font-medium dark:fill-dark-tremor-content-emphasis\"\n                >\n                  {xAxisLabel}\n                </Label>\n              )}\n            </XAxis>\n            <YAxis\n              width={yAxisWidth}\n              hide={!showYAxis}\n              axisLine={false}\n              tickLine={false}\n              type=\"number\"\n              domain={yAxisDomain as AxisDomain}\n              tick={{ transform: \"translate(-3, 0)\" }}\n              fill=\"\"\n              stroke=\"\"\n              className={tremorTwMerge(\n                // common\n                \"text-tremor-label\",\n                // light\n                \"fill-tremor-content\",\n                // dark\n                \"dark:fill-dark-tremor-content\",\n              )}\n              tickFormatter={valueFormatter}\n              allowDecimals={allowDecimals}\n            >\n              {yAxisLabel && (\n                <Label\n                  position=\"insideLeft\"\n                  style={{ textAnchor: \"middle\" }}\n                  angle={-90}\n                  offset={-15}\n                  className=\"fill-tremor-content-emphasis text-tremor-default font-medium dark:fill-dark-tremor-content-emphasis\"\n                >\n                  {yAxisLabel}\n                </Label>\n              )}\n            </YAxis>\n            <Tooltip\n              wrapperStyle={{ outline: \"none\" }}\n              isAnimationActive={false}\n              cursor={{ stroke: \"#d1d5db\", strokeWidth: 1 }}\n              content={\n                showTooltip ? (\n                  ({ active, payload, label }) =>\n                    CustomTooltip ? (\n                      <CustomTooltip\n                        payload={payload?.map((payloadItem: any) => ({\n                          ...payloadItem,\n                          color: categoryColors.get(payloadItem.dataKey) ?? BaseColors.Gray,\n                        }))}\n                        active={active}\n                        label={label}\n                      />\n                    ) : (\n                      <ChartTooltip\n                        active={active}\n                        payload={payload}\n                        label={label}\n                        valueFormatter={valueFormatter}\n                        categoryColors={categoryColors}\n                      />\n                    )\n                ) : (\n                  <></>\n                )\n              }\n              position={{ y: 0 }}\n            />\n            {showLegend ? (\n              <Legend\n                verticalAlign=\"top\"\n                height={legendHeight}\n                content={({ payload }) =>\n                  ChartLegend(\n                    { payload },\n                    categoryColors,\n                    setLegendHeight,\n                    activeLegend,\n                    hasOnValueChange\n                      ? (clickedLegendItem: string) => onCategoryClick(clickedLegendItem)\n                      : undefined,\n                    enableLegendSlider,\n                  )\n                }\n              />\n            ) : null}\n            {categories.map((category) => {\n              const gradientId = (categoryColors.get(category) ?? BaseColors.Gray).replace(\"#\", \"\");\n              return (\n                <defs key={category}>\n                  {showGradient ? (\n                    <linearGradient\n                      className={\n                        getColorClassNames(\n                          categoryColors.get(category) ?? BaseColors.Gray,\n                          colorPalette.text,\n                        ).textColor\n                      }\n                      id={gradientId}\n                      x1=\"0\"\n                      y1=\"0\"\n                      x2=\"0\"\n                      y2=\"1\"\n                    >\n                      <stop\n                        offset=\"5%\"\n                        stopColor=\"currentColor\"\n                        stopOpacity={\n                          activeDot || (activeLegend && activeLegend !== category) ? 0.15 : 0.4\n                        }\n                      />\n                      <stop offset=\"95%\" stopColor=\"currentColor\" stopOpacity={0} />\n                    </linearGradient>\n                  ) : (\n                    <linearGradient\n                      className={\n                        getColorClassNames(\n                          categoryColors.get(category) ?? BaseColors.Gray,\n                          colorPalette.text,\n                        ).textColor\n                      }\n                      id={gradientId}\n                      x1=\"0\"\n                      y1=\"0\"\n                      x2=\"0\"\n                      y2=\"1\"\n                    >\n                      <stop\n                        stopColor=\"currentColor\"\n                        stopOpacity={\n                          activeDot || (activeLegend && activeLegend !== category) ? 0.1 : 0.3\n                        }\n                      />\n                    </linearGradient>\n                  )}\n                </defs>\n              );\n            })}\n            {categories.map((category) => {\n              const gradientId = (categoryColors.get(category) ?? BaseColors.Gray).replace(\"#\", \"\");\n              return (\n                <Area\n                  className={\n                    getColorClassNames(\n                      categoryColors.get(category) ?? BaseColors.Gray,\n                      colorPalette.text,\n                    ).strokeColor\n                  }\n                  strokeOpacity={activeDot || (activeLegend && activeLegend !== category) ? 0.3 : 1}\n                  activeDot={(props: any) => {\n                    const { cx, cy, stroke, strokeLinecap, strokeLinejoin, strokeWidth, dataKey } =\n                      props;\n                    return (\n                      <Dot\n                        className={tremorTwMerge(\n                          \"stroke-tremor-background dark:stroke-dark-tremor-background\",\n                          onValueChange ? \"cursor-pointer\" : \"\",\n                          getColorClassNames(\n                            categoryColors.get(dataKey) ?? BaseColors.Gray,\n                            colorPalette.text,\n                          ).fillColor,\n                        )}\n                        cx={cx}\n                        cy={cy}\n                        r={5}\n                        fill=\"\"\n                        stroke={stroke}\n                        strokeLinecap={strokeLinecap}\n                        strokeLinejoin={strokeLinejoin}\n                        strokeWidth={strokeWidth}\n                        onClick={(dotProps: any, event) => onDotClick(props, event)}\n                      />\n                    );\n                  }}\n                  dot={(props: any) => {\n                    const {\n                      stroke,\n                      strokeLinecap,\n                      strokeLinejoin,\n                      strokeWidth,\n                      cx,\n                      cy,\n                      dataKey,\n                      index,\n                    } = props;\n\n                    if (\n                      (hasOnlyOneValueForThisKey(data, category) &&\n                        !(activeDot || (activeLegend && activeLegend !== category))) ||\n                      (activeDot?.index === index && activeDot?.dataKey === category)\n                    ) {\n                      return (\n                        <Dot\n                          key={index}\n                          cx={cx}\n                          cy={cy}\n                          r={5}\n                          stroke={stroke}\n                          fill=\"\"\n                          strokeLinecap={strokeLinecap}\n                          strokeLinejoin={strokeLinejoin}\n                          strokeWidth={strokeWidth}\n                          className={tremorTwMerge(\n                            \"stroke-tremor-background dark:stroke-dark-tremor-background\",\n                            onValueChange ? \"cursor-pointer\" : \"\",\n                            getColorClassNames(\n                              categoryColors.get(dataKey) ?? BaseColors.Gray,\n                              colorPalette.text,\n                            ).fillColor,\n                          )}\n                        />\n                      );\n                    }\n                    return <Fragment key={index}></Fragment>;\n                  }}\n                  key={category}\n                  name={category}\n                  type={curveType}\n                  dataKey={category}\n                  stroke=\"\"\n                  fill={`url(#${gradientId})`}\n                  strokeWidth={2}\n                  strokeLinejoin=\"round\"\n                  strokeLinecap=\"round\"\n                  isAnimationActive={showAnimation}\n                  animationDuration={animationDuration}\n                  stackId={stack ? \"a\" : undefined}\n                  connectNulls={connectNulls}\n                />\n              );\n            })}\n            {onValueChange\n              ? categories.map((category) => (\n                  <Line\n                    className={tremorTwMerge(\"cursor-pointer\")}\n                    strokeOpacity={0}\n                    key={category}\n                    name={category}\n                    type={curveType}\n                    dataKey={category}\n                    stroke=\"transparent\"\n                    fill=\"transparent\"\n                    legendType=\"none\"\n                    tooltipType=\"none\"\n                    strokeWidth={12}\n                    connectNulls={connectNulls}\n                    onClick={(props: any, event) => {\n                      event.stopPropagation();\n                      const { name } = props;\n                      onCategoryClick(name);\n                    }}\n                  />\n                ))\n              : null}\n          </ReChartsAreaChart>\n        ) : (\n          <NoData noDataText={noDataText} />\n        )}\n      </ResponsiveContainer>\n    </div>\n  );\n});\n\nAreaChart.displayName = \"AreaChart\";\n\nexport default AreaChart;\n"
  },
  {
    "path": "src/components/chart-elements/AreaChart/index.ts",
    "content": "export { default as AreaChart } from \"./AreaChart\";\nexport type { AreaChartProps } from \"./AreaChart\";\n"
  },
  {
    "path": "src/components/chart-elements/BarChart/BarChart.tsx",
    "content": "\"use client\";\nimport { colorPalette, getColorClassNames, tremorTwMerge } from \"lib\";\nimport React, { useState } from \"react\";\n\nimport {\n  Bar,\n  BarChart as ReChartsBarChart,\n  CartesianGrid,\n  Legend,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n  Label,\n} from \"recharts\";\n\nimport BaseChartProps from \"../common/BaseChartProps\";\nimport ChartLegend from \"../common/ChartLegend\";\nimport ChartTooltip from \"../common/ChartTooltip\";\nimport NoData from \"../common/NoData\";\nimport { constructCategoryColors, deepEqual, getYAxisDomain } from \"../common/utils\";\n\nimport { BaseColors, defaultValueFormatter, themeColorRange } from \"lib\";\nimport { AxisDomain } from \"recharts/types/util/types\";\n\nconst renderShape = (\n  props: any,\n  activeBar: any | undefined,\n  activeLegend: string | undefined,\n  layout: string,\n) => {\n  const { fillOpacity, name, payload, value } = props;\n  let { x, width, y, height } = props;\n\n  if (layout === \"horizontal\" && height < 0) {\n    y += height;\n    height = Math.abs(height); // height must be a positive number\n  } else if (layout === \"vertical\" && width < 0) {\n    x += width;\n    width = Math.abs(width); // width must be a positive number\n  }\n\n  return (\n    <rect\n      x={x}\n      y={y}\n      width={width}\n      height={height}\n      opacity={\n        activeBar || (activeLegend && activeLegend !== name)\n          ? deepEqual(activeBar, { ...payload, value })\n            ? fillOpacity\n            : 0.3\n          : fillOpacity\n      }\n    />\n  );\n};\n\nexport interface BarChartProps extends BaseChartProps {\n  layout?: \"vertical\" | \"horizontal\";\n  stack?: boolean;\n  relative?: boolean;\n  barCategoryGap?: string | number;\n}\n\nconst BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {\n  const {\n    data = [],\n    categories = [],\n    index,\n    colors = themeColorRange,\n    valueFormatter = defaultValueFormatter,\n    layout = \"horizontal\",\n    stack = false,\n    relative = false,\n    startEndOnly = false,\n    animationDuration = 900,\n    showAnimation = false,\n    showXAxis = true,\n    showYAxis = true,\n    yAxisWidth = 56,\n    intervalType = \"equidistantPreserveStart\",\n    showTooltip = true,\n    showLegend = true,\n    showGridLines = true,\n    autoMinValue = false,\n    minValue,\n    maxValue,\n    allowDecimals = true,\n    noDataText,\n    onValueChange,\n    enableLegendSlider = false,\n    customTooltip,\n    rotateLabelX,\n    barCategoryGap,\n    tickGap = 5,\n    xAxisLabel,\n    yAxisLabel,\n    className,\n    padding = !showXAxis && !showYAxis ? { left: 0, right: 0 } : { left: 20, right: 20 },\n    ...other\n  } = props;\n  const CustomTooltip = customTooltip;\n  const [legendHeight, setLegendHeight] = useState(60);\n  const categoryColors = constructCategoryColors(categories, colors);\n  const [activeBar, setActiveBar] = React.useState<any | undefined>(undefined);\n  const [activeLegend, setActiveLegend] = useState<string | undefined>(undefined);\n  const hasOnValueChange = !!onValueChange;\n\n  function onBarClick(data: any, idx: number, event: React.MouseEvent) {\n    event.stopPropagation();\n    if (!onValueChange) return;\n    if (deepEqual(activeBar, { ...data.payload, value: data.value })) {\n      setActiveLegend(undefined);\n      setActiveBar(undefined);\n      onValueChange?.(null);\n    } else {\n      setActiveLegend(data.tooltipPayload?.[0]?.dataKey);\n      setActiveBar({\n        ...data.payload,\n        value: data.value,\n      });\n      onValueChange?.({\n        eventType: \"bar\",\n        categoryClicked: data.tooltipPayload?.[0]?.dataKey,\n        ...data.payload,\n      });\n    }\n  }\n\n  function onCategoryClick(dataKey: string) {\n    if (!hasOnValueChange) return;\n    if (dataKey === activeLegend && !activeBar) {\n      setActiveLegend(undefined);\n      onValueChange?.(null);\n    } else {\n      setActiveLegend(dataKey);\n      onValueChange?.({\n        eventType: \"category\",\n        categoryClicked: dataKey,\n      });\n    }\n    setActiveBar(undefined);\n  }\n  const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);\n  return (\n    <div ref={ref} className={tremorTwMerge(\"w-full h-80\", className)} {...other}>\n      <ResponsiveContainer className=\"h-full w-full\">\n        {data?.length ? (\n          <ReChartsBarChart\n            barCategoryGap={barCategoryGap}\n            data={data}\n            stackOffset={stack ? \"sign\" : relative ? \"expand\" : \"none\"}\n            layout={layout === \"vertical\" ? \"vertical\" : \"horizontal\"}\n            onClick={\n              hasOnValueChange && (activeLegend || activeBar)\n                ? () => {\n                    setActiveBar(undefined);\n                    setActiveLegend(undefined);\n                    onValueChange?.(null);\n                  }\n                : undefined\n            }\n            margin={{\n              bottom: xAxisLabel ? 30 : undefined,\n              left: yAxisLabel ? 20 : undefined,\n              right: yAxisLabel ? 5 : undefined,\n              top: 5,\n            }}\n          >\n            {showGridLines ? (\n              <CartesianGrid\n                className={tremorTwMerge(\n                  // common\n                  \"stroke-1\",\n                  // light\n                  \"stroke-tremor-border\",\n                  // dark\n                  \"dark:stroke-dark-tremor-border\",\n                )}\n                horizontal={layout !== \"vertical\"}\n                vertical={layout === \"vertical\"}\n              />\n            ) : null}\n\n            {layout !== \"vertical\" ? (\n              <XAxis\n                padding={padding}\n                hide={!showXAxis}\n                dataKey={index}\n                interval={startEndOnly ? \"preserveStartEnd\" : intervalType}\n                tick={{ transform: \"translate(0, 6)\" }}\n                ticks={startEndOnly ? [data[0][index], data[data.length - 1][index]] : undefined}\n                fill=\"\"\n                stroke=\"\"\n                className={tremorTwMerge(\n                  // common\n                  \"mt-4 text-tremor-label\",\n                  // light\n                  \"fill-tremor-content\",\n                  // dark\n                  \"dark:fill-dark-tremor-content\",\n                )}\n                tickLine={false}\n                axisLine={false}\n                angle={rotateLabelX?.angle}\n                dy={rotateLabelX?.verticalShift}\n                height={rotateLabelX?.xAxisHeight}\n                minTickGap={tickGap}\n              >\n                {xAxisLabel && (\n                  <Label\n                    position=\"insideBottom\"\n                    offset={-20}\n                    className=\"fill-tremor-content-emphasis text-tremor-default font-medium dark:fill-dark-tremor-content-emphasis\"\n                  >\n                    {xAxisLabel}\n                  </Label>\n                )}\n              </XAxis>\n            ) : (\n              <XAxis\n                hide={!showXAxis}\n                type=\"number\"\n                tick={{ transform: \"translate(-3, 0)\" }}\n                domain={yAxisDomain as AxisDomain}\n                fill=\"\"\n                stroke=\"\"\n                className={tremorTwMerge(\n                  // common\n                  \"text-tremor-label\",\n                  // light\n                  \"fill-tremor-content\",\n                  // dark\n                  \"dark:fill-dark-tremor-content\",\n                )}\n                tickLine={false}\n                axisLine={false}\n                tickFormatter={valueFormatter}\n                minTickGap={tickGap}\n                allowDecimals={allowDecimals}\n                angle={rotateLabelX?.angle}\n                dy={rotateLabelX?.verticalShift}\n                height={rotateLabelX?.xAxisHeight}\n              >\n                {xAxisLabel && (\n                  <Label\n                    position=\"insideBottom\"\n                    offset={-20}\n                    className=\"fill-tremor-content-emphasis text-tremor-default font-medium dark:fill-dark-tremor-content-emphasis\"\n                  >\n                    {xAxisLabel}\n                  </Label>\n                )}\n              </XAxis>\n            )}\n            {layout !== \"vertical\" ? (\n              <YAxis\n                width={yAxisWidth}\n                hide={!showYAxis}\n                axisLine={false}\n                tickLine={false}\n                type=\"number\"\n                domain={yAxisDomain as AxisDomain}\n                tick={{ transform: \"translate(-3, 0)\" }}\n                fill=\"\"\n                stroke=\"\"\n                className={tremorTwMerge(\n                  // common\n                  \"text-tremor-label\",\n                  // light\n                  \"fill-tremor-content\",\n                  // dark\n                  \"dark:fill-dark-tremor-content\",\n                )}\n                tickFormatter={\n                  relative ? (value: number) => `${(value * 100).toString()} %` : valueFormatter\n                }\n                allowDecimals={allowDecimals}\n              >\n                {yAxisLabel && (\n                  <Label\n                    position=\"insideLeft\"\n                    style={{ textAnchor: \"middle\" }}\n                    angle={-90}\n                    offset={-15}\n                    className=\"fill-tremor-content-emphasis text-tremor-default font-medium dark:fill-dark-tremor-content-emphasis\"\n                  >\n                    {yAxisLabel}\n                  </Label>\n                )}\n              </YAxis>\n            ) : (\n              <YAxis\n                width={yAxisWidth}\n                hide={!showYAxis}\n                dataKey={index}\n                axisLine={false}\n                tickLine={false}\n                ticks={startEndOnly ? [data[0][index], data[data.length - 1][index]] : undefined}\n                type=\"category\"\n                interval=\"preserveStartEnd\"\n                tick={{ transform: \"translate(0, 6)\" }}\n                fill=\"\"\n                stroke=\"\"\n                className={tremorTwMerge(\n                  // common\n                  \"text-tremor-label\",\n                  // light\n                  \"fill-tremor-content\",\n                  // dark\n                  \"dark:fill-dark-tremor-content\",\n                )}\n              >\n                {yAxisLabel && (\n                  <Label\n                    position=\"insideLeft\"\n                    style={{ textAnchor: \"middle\" }}\n                    angle={-90}\n                    offset={-15}\n                    className=\"fill-tremor-content-emphasis text-tremor-default font-medium dark:fill-dark-tremor-content-emphasis\"\n                  >\n                    {yAxisLabel}\n                  </Label>\n                )}\n              </YAxis>\n            )}\n            <Tooltip\n              wrapperStyle={{ outline: \"none\" }}\n              isAnimationActive={false}\n              cursor={{ fill: \"#d1d5db\", opacity: \"0.15\" }}\n              content={\n                showTooltip ? (\n                  ({ active, payload, label }) =>\n                    CustomTooltip ? (\n                      <CustomTooltip\n                        payload={payload?.map((payloadItem: any) => ({\n                          ...payloadItem,\n                          color: categoryColors.get(payloadItem.dataKey) ?? BaseColors.Gray,\n                        }))}\n                        active={active}\n                        label={label}\n                      />\n                    ) : (\n                      <ChartTooltip\n                        active={active}\n                        payload={payload}\n                        label={label}\n                        valueFormatter={valueFormatter}\n                        categoryColors={categoryColors}\n                      />\n                    )\n                ) : (\n                  <></>\n                )\n              }\n              position={{ y: 0 }}\n            />\n            {showLegend ? (\n              <Legend\n                verticalAlign=\"top\"\n                height={legendHeight}\n                content={({ payload }) =>\n                  ChartLegend(\n                    { payload },\n                    categoryColors,\n                    setLegendHeight,\n                    activeLegend,\n                    hasOnValueChange\n                      ? (clickedLegendItem: string) => onCategoryClick(clickedLegendItem)\n                      : undefined,\n                    enableLegendSlider,\n                  )\n                }\n              />\n            ) : null}\n            {categories.map((category) => (\n              <Bar\n                className={tremorTwMerge(\n                  getColorClassNames(\n                    categoryColors.get(category) ?? BaseColors.Gray,\n                    colorPalette.background,\n                  ).fillColor,\n                  onValueChange ? \"cursor-pointer\" : \"\",\n                )}\n                key={category}\n                name={category}\n                type=\"linear\"\n                stackId={stack || relative ? \"a\" : undefined}\n                dataKey={category}\n                fill=\"\"\n                isAnimationActive={showAnimation}\n                animationDuration={animationDuration}\n                shape={(props: any) => renderShape(props, activeBar, activeLegend, layout)}\n                onClick={onBarClick}\n              />\n            ))}\n          </ReChartsBarChart>\n        ) : (\n          <NoData noDataText={noDataText} />\n        )}\n      </ResponsiveContainer>\n    </div>\n  );\n});\n\nBarChart.displayName = \"BarChart\";\n\nexport default BarChart;\n"
  },
  {
    "path": "src/components/chart-elements/BarChart/index.ts",
    "content": "export { default as BarChart } from \"./BarChart\";\nexport type { BarChartProps } from \"./BarChart\";\n"
  },
  {
    "path": "src/components/chart-elements/DonutChart/DonutChart.tsx",
    "content": "\"use client\";\nimport { BaseColors, defaultValueFormatter, themeColorRange, tremorTwMerge } from \"lib\";\nimport React, { useEffect } from \"react\";\nimport {\n  Pie,\n  PieChart as ReChartsDonutChart,\n  ResponsiveContainer,\n  Sector,\n  Tooltip,\n} from \"recharts\";\n\nimport { Color, ValueFormatter } from \"../../../lib/inputTypes\";\nimport NoData from \"../common/NoData\";\n\nimport { DonutChartTooltip } from \"./DonutChartTooltip\";\nimport { parseData, parseLabelInput } from \"./inputParser\";\n\nimport type { EventProps } from \"components/chart-elements/common\";\nimport { CustomTooltipProps } from \"components/chart-elements/common/CustomTooltipProps\";\nimport type BaseAnimationTimingProps from \"../common/BaseAnimationTimingProps\";\n\ntype DonutChartVariant = \"donut\" | \"pie\";\n\nexport interface DonutChartProps extends BaseAnimationTimingProps {\n  data: any[];\n  category?: string;\n  index?: string;\n  colors?: (Color | string)[];\n  variant?: DonutChartVariant;\n  valueFormatter?: ValueFormatter;\n  label?: string;\n  showLabel?: boolean;\n  showAnimation?: boolean;\n  showTooltip?: boolean;\n  noDataText?: string;\n  className?: string;\n  onValueChange?: (value: EventProps) => void;\n  customTooltip?: React.ComponentType<CustomTooltipProps>;\n}\n\nconst renderInactiveShape = (props: any) => {\n  const {\n    cx,\n    cy,\n    // midAngle,\n    innerRadius,\n    outerRadius,\n    startAngle,\n    endAngle,\n    // fill,\n    // payload,\n    // percent,\n    // value,\n    // activeIndex,\n    className,\n  } = props;\n\n  return (\n    <g>\n      <Sector\n        cx={cx}\n        cy={cy}\n        innerRadius={innerRadius}\n        outerRadius={outerRadius}\n        startAngle={startAngle}\n        endAngle={endAngle}\n        className={className}\n        fill=\"\"\n        opacity={0.3}\n        style={{ outline: \"none\" }}\n      />\n    </g>\n  );\n};\n\nconst DonutChart = React.forwardRef<HTMLDivElement, DonutChartProps>((props, ref) => {\n  const {\n    data = [],\n    category = \"value\",\n    index = \"name\",\n    colors = themeColorRange,\n    variant = \"donut\",\n    valueFormatter = defaultValueFormatter,\n    label,\n    showLabel = true,\n    animationDuration = 900,\n    showAnimation = false,\n    showTooltip = true,\n    noDataText,\n    onValueChange,\n    customTooltip,\n    className,\n    ...other\n  } = props;\n  const CustomTooltip = customTooltip;\n  const isDonut = variant == \"donut\";\n  const parsedLabelInput = parseLabelInput(label, valueFormatter, data, category);\n\n  const [activeIndex, setActiveIndex] = React.useState<number | undefined>(undefined);\n  const hasOnValueChange = !!onValueChange;\n\n  function onShapeClick(data: any, index: number, event: React.MouseEvent) {\n    event.stopPropagation();\n\n    if (!hasOnValueChange) return;\n    if (activeIndex === index) {\n      setActiveIndex(undefined);\n      onValueChange?.(null);\n    } else {\n      setActiveIndex(index);\n      onValueChange?.({\n        eventType: \"slice\",\n        ...data.payload.payload,\n      });\n    }\n  }\n\n  useEffect(() => {\n    const pieSectors = document.querySelectorAll(\".recharts-pie-sector\");\n    if (pieSectors) {\n      pieSectors.forEach((sector) => {\n        sector.setAttribute(\"style\", \"outline: none\");\n      });\n    }\n  }, [activeIndex]);\n\n  return (\n    <div ref={ref} className={tremorTwMerge(\"w-full h-40\", className)} {...other}>\n      <ResponsiveContainer className=\"h-full w-full\">\n        {data?.length ? (\n          <ReChartsDonutChart\n            onClick={\n              hasOnValueChange && activeIndex\n                ? () => {\n                    setActiveIndex(undefined);\n                    onValueChange?.(null);\n                  }\n                : undefined\n            }\n            margin={{ top: 0, left: 0, right: 0, bottom: 0 }}\n          >\n            {showLabel && isDonut ? (\n              <text\n                className={tremorTwMerge(\n                  // light\n                  \"fill-tremor-content-emphasis\",\n                  // dark\n                  \"dark:fill-dark-tremor-content-emphasis\",\n                )}\n                x=\"50%\"\n                y=\"50%\"\n                textAnchor=\"middle\"\n                dominantBaseline=\"middle\"\n              >\n                {parsedLabelInput}\n              </text>\n            ) : null}\n            <Pie\n              className={tremorTwMerge(\n                \"stroke-tremor-background dark:stroke-dark-tremor-background\",\n                onValueChange ? \"cursor-pointer\" : \"cursor-default\",\n              )}\n              data={parseData(data, colors)}\n              cx=\"50%\"\n              cy=\"50%\"\n              startAngle={90}\n              endAngle={-270}\n              innerRadius={isDonut ? \"75%\" : \"0%\"}\n              outerRadius=\"100%\"\n              stroke=\"\"\n              strokeLinejoin=\"round\"\n              dataKey={category}\n              nameKey={index}\n              isAnimationActive={showAnimation}\n              animationDuration={animationDuration}\n              onClick={onShapeClick}\n              activeIndex={activeIndex}\n              inactiveShape={renderInactiveShape}\n              style={{ outline: \"none\" }}\n            />\n            {/* {showTooltip ? (\n              <Tooltip\n                wrapperStyle={{ outline: \"none\" }}\n                isAnimationActive={false}\n                content={({ active, payload }) => (\n                  <DonutChartTooltip\n                    active={active}\n                    payload={payload}\n                    valueFormatter={valueFormatter}\n                  />\n            )}\n              />\n            ) : null} */}\n            <Tooltip\n              wrapperStyle={{ outline: \"none\" }}\n              isAnimationActive={false}\n              content={\n                showTooltip ? (\n                  ({ active, payload }) =>\n                    CustomTooltip ? (\n                      <CustomTooltip\n                        payload={payload?.map((payloadItem) => ({\n                          ...payloadItem,\n                          color: payload?.[0]?.payload?.color ?? BaseColors.Gray,\n                        }))}\n                        active={active}\n                        label={payload?.[0]?.name}\n                      />\n                    ) : (\n                      <DonutChartTooltip\n                        active={active}\n                        payload={payload}\n                        valueFormatter={valueFormatter}\n                      />\n                    )\n                ) : (\n                  <></>\n                )\n              }\n            />\n          </ReChartsDonutChart>\n        ) : (\n          <NoData noDataText={noDataText} />\n        )}\n      </ResponsiveContainer>\n    </div>\n  );\n});\n\nDonutChart.displayName = \"DonutChart\";\n\nexport default DonutChart;\n"
  },
  {
    "path": "src/components/chart-elements/DonutChart/DonutChartTooltip.tsx",
    "content": "import React from \"react\";\nimport { tremorTwMerge, ValueFormatter } from \"lib\";\n\nimport { ChartTooltipFrame, ChartTooltipRow } from \"components/chart-elements/common/ChartTooltip\";\n\nexport interface DonutChartTooltipProps {\n  active: boolean | undefined;\n  payload: any;\n  valueFormatter: ValueFormatter;\n}\n\nexport const DonutChartTooltip = ({ active, payload, valueFormatter }: DonutChartTooltipProps) => {\n  if (active && payload?.[0]) {\n    const payloadRow = payload?.[0];\n    return (\n      <ChartTooltipFrame>\n        <div className={tremorTwMerge(\"px-4 py-2\")}>\n          <ChartTooltipRow\n            value={valueFormatter(payloadRow.value)}\n            name={payloadRow.name}\n            color={payloadRow.payload.color}\n          />\n        </div>\n      </ChartTooltipFrame>\n    );\n  }\n  return null;\n};\n"
  },
  {
    "path": "src/components/chart-elements/DonutChart/index.ts",
    "content": "export { default as DonutChart } from \"./DonutChart\";\nexport type { DonutChartProps } from \"./DonutChart\";\n"
  },
  {
    "path": "src/components/chart-elements/DonutChart/inputParser.ts",
    "content": "import { BaseColors, colorPalette, getColorClassNames, sumNumericArray } from \"lib\";\nimport { Color, ValueFormatter } from \"../../../lib/inputTypes\";\n\nexport const parseData = (data: any[], colors: (Color | string)[]) =>\n  data.map((dataPoint: any, idx: number) => {\n    const baseColor = idx < colors.length ? colors[idx] : BaseColors.Gray;\n    return {\n      ...dataPoint,\n      // explicitly adding color key if not present for tooltip coloring\n      color: baseColor,\n      className: getColorClassNames(baseColor ?? BaseColors.Gray, colorPalette.background)\n        .fillColor,\n      fill: \"\",\n    };\n  });\n\nconst calculateDefaultLabel = (data: any[], category: string) =>\n  sumNumericArray(data.map((dataPoint) => dataPoint[category]));\n\nexport const parseLabelInput = (\n  labelInput: string | undefined,\n  valueFormatter: ValueFormatter,\n  data: any[],\n  category: string,\n) => (labelInput ? labelInput : valueFormatter(calculateDefaultLabel(data, category)));\n"
  },
  {
    "path": "src/components/chart-elements/FunnelChart/FunnelChart.tsx",
    "content": "import React from \"react\";\nimport { ChartTooltipFrame, ChartTooltipRow } from \"../common/ChartTooltip\";\nimport {\n  BaseColors,\n  Color,\n  FunnelVariantType,\n  colorPalette,\n  defaultValueFormatter,\n  getColorClassNames,\n  tremorTwMerge,\n} from \"lib\";\nimport { CustomTooltipProps, EventProps } from \"../common\";\nimport NoData from \"../common/NoData\";\nimport { ArrowRightIcon } from \"assets\";\n\ntype FormattedDataT = DataT & {\n  normalizedValue: number;\n  startX: number;\n  startY: number;\n  barHeight: number;\n  nextValue: number;\n  nextNormalizedValue: number;\n  nextBarHeight: number;\n  nextStartX: number;\n};\n\ntype CalculateFrom = \"first\" | \"previous\";\n\ntype Tooltip = {\n  x: number;\n  y: number;\n  data?: {\n    className?: string;\n    name: string;\n    fill?: string;\n    dataKey: string;\n    color?: Color | string;\n    value: number;\n    payload?: any;\n  };\n  index?: number;\n};\n\ntype DataT = {\n  value: number;\n  name: string;\n};\n\nconst GLOBAL_PADDING = 10;\nconst HALF_PADDING = GLOBAL_PADDING / 2;\nconst Y_AXIS_LABELS = [\"100%\", \"75%\", \"50%\", \"25%\", \"0%\"];\n\nexport interface FunnelChartProps extends React.HTMLAttributes<HTMLDivElement> {\n  data: DataT[];\n  evolutionGradient?: boolean;\n  gradient?: boolean;\n  valueFormatter?: (value: number) => string;\n  calculateFrom?: CalculateFrom;\n  color?: Color | string;\n  variant?: FunnelVariantType;\n  yAxisPadding?: number;\n  showYAxis?: boolean;\n  showXAxis?: boolean;\n  showArrow?: boolean;\n  showGridLines?: boolean;\n  showTooltip?: boolean;\n  onValueChange?: (value: EventProps) => void;\n  customTooltip?: React.ComponentType<CustomTooltipProps>;\n  noDataText?: string;\n  rotateLabelX?: {\n    angle: number;\n    verticalShift?: number;\n    xAxisHeight?: number;\n  };\n  barGap?: number | `${number}%`;\n  xAxisLabel?: string;\n  yAxisLabel?: string;\n}\n\n//#region Funnel Chart Primitive\n\nconst FunnelChartPrimitive = React.forwardRef<HTMLDivElement, FunnelChartProps>(\n  (props: FunnelChartProps, ref) => {\n    const {\n      data,\n      evolutionGradient = false,\n      gradient = true,\n      valueFormatter = defaultValueFormatter,\n      className,\n      calculateFrom = \"first\",\n      color,\n      variant = \"base\",\n      showGridLines = true,\n      showYAxis = calculateFrom === \"previous\" ? false : true,\n      showXAxis = true,\n      showArrow = true,\n      xAxisLabel = \"\",\n      yAxisLabel = \"\",\n      yAxisPadding = showYAxis ? (yAxisLabel ? 70 : 45) : 0,\n      showTooltip = true,\n      onValueChange,\n      customTooltip,\n      noDataText,\n      rotateLabelX,\n      barGap = \"20%\",\n      ...other\n    } = props;\n    const DEFAULT_X_AXIS_HEIGHT = showXAxis && xAxisLabel ? 25 : 15;\n\n    const CustomTooltip = customTooltip;\n\n    const svgRef = React.useRef<SVGSVGElement>(null);\n    const tooltipRef = React.useRef<HTMLDivElement>(null);\n\n    const [width, setWidth] = React.useState(0);\n    const [height, setHeight] = React.useState(0);\n    const [tooltip, setTooltip] = React.useState<Tooltip>({ x: 0, y: 0 });\n\n    const [activeBar, setActiveBar] = React.useState<any | undefined>(undefined);\n    const hasOnValueChange = !!onValueChange;\n\n    function onBarClick(data: any, idx: number, event: React.MouseEvent) {\n      event.stopPropagation();\n      if (!hasOnValueChange) return;\n      if (idx === activeBar?.index) {\n        setActiveBar(undefined);\n        onValueChange(undefined);\n      } else {\n        setActiveBar({ data, index: idx });\n        onValueChange({\n          eventType: \"bar\",\n          categoryClicked: data.name,\n          [data.name]: data.value,\n          percentage: data.normalizedValue,\n        });\n      }\n    }\n\n    const maxValue = React.useMemo(() => Math.max(...data.map((item) => item.value)), [data]);\n\n    const widthWithoutPadding = width - GLOBAL_PADDING - yAxisPadding;\n    const gap = React.useMemo(() => {\n      if (typeof barGap === \"number\") {\n        return barGap;\n      } else if (typeof barGap === \"string\" && barGap.endsWith(\"%\")) {\n        const percentage = parseFloat(barGap.slice(0, -1));\n        const totalWidthForGaps = (widthWithoutPadding * percentage) / 100;\n        const numberOfGaps = data.length - 1;\n        return totalWidthForGaps / numberOfGaps;\n      } else {\n        console.error(\n          'Invalid barGap value. It must be a number or a percentage string (e.g., \"10%\").',\n        );\n        return 30;\n      }\n    }, [widthWithoutPadding, data.length, barGap]);\n\n    const barWidth = React.useMemo(\n      () => (widthWithoutPadding - (data.length - 1) * gap - gap) / data.length,\n      [widthWithoutPadding, gap, data.length],\n    );\n    const realHeight =\n      height -\n      GLOBAL_PADDING -\n      (showXAxis\n        ? (rotateLabelX?.xAxisHeight || DEFAULT_X_AXIS_HEIGHT) + (showXAxis && xAxisLabel ? 30 : 10)\n        : 0);\n\n    const isPreviousCalculation = calculateFrom === \"previous\";\n    const isVariantCenter = variant === \"center\";\n\n    React.useLayoutEffect(() => {\n      const handleResize = () => {\n        if (svgRef.current) {\n          const boundingBox = svgRef.current.getBoundingClientRect();\n\n          setWidth(boundingBox.width);\n          setHeight(boundingBox.height);\n        }\n      };\n\n      handleResize();\n\n      window.addEventListener(\"resize\", handleResize);\n      return () => {\n        window.removeEventListener(\"resize\", handleResize);\n      };\n    }, [className]);\n\n    React.useEffect(() => {\n      const handleTooltipOverflows = () => {\n        if (tooltipRef.current) {\n          const boundingBox = tooltipRef.current.getBoundingClientRect();\n\n          if (boundingBox.right > window.innerWidth) {\n            tooltipRef.current.style.left = `${width - boundingBox.width}px`;\n          }\n        }\n      };\n\n      handleTooltipOverflows();\n      window.addEventListener(\"resize\", handleTooltipOverflows);\n      return () => {\n        window.removeEventListener(\"resize\", handleTooltipOverflows);\n      };\n    }, [tooltip, width]);\n\n    const formattedData = React.useMemo(() => {\n      if (realHeight <= 0) return [];\n      return data.reduce((acc: FormattedDataT[], item, index) => {\n        const prev = acc[index - 1];\n        const value = item.value;\n        const valueToCompareWith = isPreviousCalculation ? (prev?.value ?? maxValue) : maxValue;\n        const calculationHeight = isPreviousCalculation\n          ? (prev?.barHeight ?? realHeight)\n          : realHeight;\n\n        const normalizedValue = value / valueToCompareWith;\n        const barHeight = normalizedValue * calculationHeight;\n        const startX = index * (barWidth + gap) + 0.5 * gap;\n        const startY =\n          calculationHeight -\n          barHeight +\n          (isPreviousCalculation ? realHeight - (prev?.barHeight ?? realHeight) : 0);\n        const nextValue = data[index + 1]?.value;\n        const nextNormalizedValue = nextValue / valueToCompareWith;\n        const nextBarHeight = nextNormalizedValue * calculationHeight;\n        const nextStartX = (index + 1) * (barWidth + gap) + 0.5 * gap;\n\n        acc.push({\n          value,\n          normalizedValue,\n          name: item.name,\n          startX,\n          startY,\n          barHeight,\n          nextValue,\n          nextNormalizedValue,\n          nextBarHeight,\n          nextStartX,\n        });\n\n        return acc;\n      }, []);\n    }, [data, realHeight, isPreviousCalculation, barWidth, gap, maxValue]);\n\n    const handleTooltip = (touch: React.Touch) => {\n      const chartBoundingRect = svgRef.current?.getBoundingClientRect();\n      if (!chartBoundingRect) return;\n      const chartX = chartBoundingRect.x;\n      const chartY = chartBoundingRect.y;\n      const chartTop = chartY + window.scrollY;\n      const chartLeft = chartX + window.scrollX + yAxisPadding + HALF_PADDING;\n      const chartWidth = chartBoundingRect.width - yAxisPadding - HALF_PADDING;\n      const chartHeight =\n        chartBoundingRect.height - HALF_PADDING - (showXAxis ? DEFAULT_X_AXIS_HEIGHT : 0);\n      const chartRight = chartLeft + chartWidth;\n      const chartBottom = chartTop + chartHeight;\n\n      if (\n        touch.pageX < chartLeft ||\n        touch.pageX > chartRight ||\n        touch.pageY < chartTop ||\n        touch.pageY > chartBottom\n      ) {\n        console.log(\"out of bounds\");\n        return setTooltip({ x: 0, y: 0 });\n      }\n\n      const pageX = touch.pageX - chartX - barWidth / 2 - yAxisPadding - HALF_PADDING;\n      const closestBar = formattedData.reduce((acc, current) => {\n        const currentDistance = Math.abs(current.startX - pageX);\n        const accDistance = Math.abs(acc.startX - pageX);\n        return currentDistance < accDistance ? current : acc;\n      });\n      const closestBarIndex = formattedData.findIndex((bar) => bar === closestBar);\n\n      setTooltip({\n        x: closestBar.startX,\n        y: closestBar.startY,\n        data: {\n          dataKey: closestBar.name,\n          name: closestBar.name,\n          value: closestBar.value,\n          color: color ?? BaseColors.Blue,\n          className: tremorTwMerge(\n            getColorClassNames(color ?? BaseColors.Blue, colorPalette.text).textColor,\n            hasOnValueChange ? \"cursor-pointer\" : \"cursor-default\",\n          ),\n          fill: \"\",\n          payload: closestBar,\n        },\n        index: closestBarIndex,\n      });\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={tremorTwMerge(\"tremor-wrapper relative w-full h-80\", className)}\n        {...other}\n      >\n        {data?.length ? (\n          <>\n            <svg\n              ref={svgRef}\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className={tremorTwMerge(\"w-full h-full\")}\n              onMouseMove={(e) => {\n                const fakeTouch = {\n                  clientX: e.clientX,\n                  clientY: e.clientY,\n                  pageX: e.pageX,\n                  pageY: e.pageY,\n                } as React.Touch;\n                handleTooltip(fakeTouch);\n              }}\n              onTouchMove={(e) => {\n                const touch = e.touches[0];\n                handleTooltip(touch);\n              }}\n              onMouseLeave={() => setTooltip({ x: 0, y: 0 })}\n              onTouchEnd={() => setTooltip({ x: 0, y: 0 })}\n            >\n              {/* Draw Y axis labels and lines */}\n              {Y_AXIS_LABELS.map((label, index) => (\n                <React.Fragment key={`y-axis-${index}`}>\n                  {showGridLines ? (\n                    <line\n                      x1={yAxisPadding + HALF_PADDING}\n                      y1={(index * realHeight) / 4 + HALF_PADDING}\n                      x2={width - HALF_PADDING}\n                      y2={(index * realHeight) / 4 + HALF_PADDING}\n                      stroke=\"currentColor\"\n                      className={tremorTwMerge(\n                        // common\n                        \"stroke-1\",\n                        // light\n                        \"stroke-tremor-border\",\n                        // dark\n                        \"dark:stroke-dark-tremor-border\",\n                      )}\n                    />\n                  ) : null}\n                  <text\n                    x={yAxisPadding - 10 + HALF_PADDING}\n                    y={(index * realHeight) / 4 + 5 + HALF_PADDING}\n                    textAnchor=\"end\"\n                    fill=\"\"\n                    stroke=\"\"\n                    className={tremorTwMerge(\n                      // base\n                      \"text-tremor-label\",\n                      // light\n                      \"fill-tremor-content\",\n                      // dark\n                      \"dark:fill-dark-tremor-content\",\n                    )}\n                  >\n                    {label}\n                  </text>\n                </React.Fragment>\n              ))}\n              {formattedData.map((item, index) => (\n                <g key={`bar-${index}`}>\n                  {/* Hover gray rect */}\n                  <rect\n                    x={item.startX - gap * 0.5 + HALF_PADDING + yAxisPadding}\n                    y={HALF_PADDING}\n                    width={barWidth + gap}\n                    height={realHeight}\n                    fill=\"currentColor\"\n                    className={tremorTwMerge(\n                      \"z-0\",\n                      tooltip.index === index ? \"text-[#d1d5db]/15\" : \"text-transparent\",\n                    )}\n                  />\n\n                  {/* Draw gradient bar to fill space */}\n                  {gradient ? (\n                    <rect\n                      x={item.startX + HALF_PADDING + yAxisPadding}\n                      y={\n                        realHeight -\n                        (isPreviousCalculation\n                          ? formattedData[index - 1]?.barHeight || realHeight\n                          : realHeight) +\n                        HALF_PADDING\n                      }\n                      width={barWidth}\n                      height={\n                        (realHeight -\n                          item.barHeight -\n                          (isPreviousCalculation\n                            ? realHeight - formattedData[index - 1]?.barHeight || 0\n                            : 0)) /\n                        (isVariantCenter ? 2 : 1)\n                      }\n                      fill={`url(#base-gradient)`}\n                      className={tremorTwMerge(\n                        !activeBar || activeBar.index === index ? \"\" : \"opacity-30\",\n                      )}\n                    />\n                  ) : null}\n\n                  {/* Draw bar */}\n                  <rect\n                    x={item.startX + HALF_PADDING + yAxisPadding}\n                    y={\n                      (isVariantCenter ? realHeight / 2 - item.barHeight / 2 : item.startY) +\n                      HALF_PADDING\n                    }\n                    width={barWidth}\n                    height={item.barHeight}\n                    fill=\"currentColor\"\n                    className={tremorTwMerge(\n                      getColorClassNames(color ?? BaseColors.Blue, colorPalette.text).textColor,\n                      !activeBar || activeBar.index === index ? \"\" : \"opacity-30\",\n                      hasOnValueChange ? \"cursor-pointer\" : \"cursor-default\",\n                    )}\n                    onClick={(e) => onBarClick(item, index, e)}\n                  />\n\n                  {/* Draw bottom gradient bar to fill space */}\n                  {gradient && isVariantCenter ? (\n                    <rect\n                      x={item.startX + HALF_PADDING + yAxisPadding}\n                      y={realHeight / 2 + item.barHeight / 2 + HALF_PADDING}\n                      width={barWidth}\n                      height={(realHeight - item.barHeight) / 2}\n                      fill={`url(#base-gradient-revert)`}\n                      className={tremorTwMerge(\n                        !activeBar || activeBar.index === index ? \"\" : \"opacity-30\",\n                      )}\n                    />\n                  ) : null}\n\n                  {/* Draw label */}\n                  {showXAxis ? (\n                    <foreignObject\n                      x={item.startX + HALF_PADDING + yAxisPadding}\n                      y={realHeight + HALF_PADDING + 10}\n                      width={barWidth}\n                      height={rotateLabelX?.xAxisHeight || DEFAULT_X_AXIS_HEIGHT}\n                      transform={\n                        rotateLabelX\n                          ? `rotate(${rotateLabelX?.angle}, ${\n                              item.startX + barWidth / 2 + HALF_PADDING + yAxisPadding\n                            }, ${\n                              realHeight +\n                              (rotateLabelX?.xAxisHeight || DEFAULT_X_AXIS_HEIGHT) / 2 +\n                              HALF_PADDING +\n                              (rotateLabelX?.verticalShift || 0)\n                            })`\n                          : undefined\n                      }\n                    >\n                      <div\n                        className={tremorTwMerge(\n                          //common\n                          \"truncate text-center !text-tremor-label\",\n                          // light\n                          \"text-tremor-content\",\n                          // dark\n                          \"dark:text-dark-tremor-content\",\n                        )}\n                        title={item.name}\n                      >\n                        {item.name}\n                      </div>\n                    </foreignObject>\n                  ) : null}\n                </g>\n              ))}\n              {/* Draw gradient polygon between bars */}\n              {formattedData.map((item, index) => (\n                <React.Fragment key={`gradient-${index}`}>\n                  {index < data.length - 1 && evolutionGradient ? (\n                    <>\n                      {isVariantCenter ? (\n                        <>\n                          <polygon\n                            points={`\n                                    ${item.startX + barWidth + HALF_PADDING + yAxisPadding}, ${\n                                      realHeight / 2 + item.nextBarHeight / 4 + HALF_PADDING\n                                    }\n                                    ${item.nextStartX + HALF_PADDING + yAxisPadding}, ${\n                                      realHeight / 2 + item.nextBarHeight / 4 + HALF_PADDING\n                                    }\n                                    ${item.nextStartX + HALF_PADDING + yAxisPadding}, ${\n                                      realHeight / 2 - item.nextBarHeight / 2 + HALF_PADDING\n                                    }\n                                    ${item.startX + barWidth + HALF_PADDING + yAxisPadding}, ${\n                                      realHeight / 2 - item.barHeight / 2 + HALF_PADDING\n                                    }\n                                  `}\n                            fill={`url(#base-gradient)`}\n                            className={tremorTwMerge(\n                              \"z-10\",\n                              !activeBar || activeBar.index === index ? \"\" : \"opacity-30\",\n                            )}\n                          />\n                          <polygon\n                            points={`\n                                    ${item.startX + barWidth + HALF_PADDING + yAxisPadding}, ${\n                                      realHeight / 2 + item.barHeight / 2 + HALF_PADDING\n                                    }\n                                    ${item.nextStartX + HALF_PADDING + yAxisPadding}, ${\n                                      realHeight / 2 + item.nextBarHeight / 2 + HALF_PADDING\n                                    }\n                                    ${item.nextStartX + HALF_PADDING + yAxisPadding}, ${\n                                      realHeight / 2 - item.nextBarHeight / 4 + HALF_PADDING\n                                    }\n                                    ${item.startX + barWidth + HALF_PADDING + yAxisPadding}, ${\n                                      realHeight / 2 - item.nextBarHeight / 4 + HALF_PADDING\n                                    }\n                                  `}\n                            fill={`url(#base-gradient-revert)`}\n                            className={tremorTwMerge(\n                              \"z-10\",\n                              !activeBar || activeBar.index === index ? \"\" : \"opacity-30\",\n                            )}\n                          />\n                        </>\n                      ) : (\n                        <polygon\n                          points={`\n                                  ${item.startX + barWidth + HALF_PADDING + yAxisPadding}, ${\n                                    item.startY + HALF_PADDING\n                                  } \n                                  ${item.nextStartX + HALF_PADDING + yAxisPadding}, ${\n                                    realHeight - item.nextBarHeight + HALF_PADDING\n                                  } \n                                  ${item.nextStartX + HALF_PADDING + yAxisPadding}, ${\n                                    realHeight + HALF_PADDING\n                                  } \n                                  ${item.startX + barWidth + HALF_PADDING + yAxisPadding}, ${\n                                    realHeight + HALF_PADDING\n                                  }\n                                `}\n                          fill={`url(#base-gradient)`}\n                          className={tremorTwMerge(\n                            \"z-10\",\n                            !activeBar || activeBar.index === index ? \"\" : \"opacity-30\",\n                          )}\n                        />\n                      )}\n                    </>\n                  ) : null}\n                  {/* Hover transparent rect for tooltip */}\n                  {/*<rect\n                    x={item.startX - 0.5 * gap + HALF_PADDING + yAxisPadding}\n                    y={HALF_PADDING}\n                    width={barWidth + gap}\n                    height={realHeight}\n                    fill=\"transparent\"\n                    onMouseEnter={() => handleTooltip(index, item)}\n                    onTouchStart={() => handleTooltip(index, item)}\n                    onTouchMove={(e) => {\n                        const touch = e.touches[0];\n                        const distance = barWidth + gap * 2 + yAxisPadding - touch.clientX;\n                        const closestBar = formattedData.reduce((acc, current) => {\n                            const currentDistance = Math.abs(current.startX + distance);\n                            const accDistance = Math.abs(acc.startX + distance);\n                            return currentDistance < accDistance ? current : acc;\n                        });\n                        const closestBarIndex = formattedData.findIndex((bar) => bar === closestBar);\n\n                        handleTooltip(closestBarIndex, closestBar);\n                    }}\n                    onMouseLeave={() => setTooltip({ x: 0, y: 0 })}\n                    onTouchEnd={() => setTooltip({ x: 0, y: 0 })}\n                    onClick={(e) => onBarClick(item, index, e)}\n                    className={tremorTwMerge(\n                      hasOnValueChange ? \"cursor-pointer\" : \"cursor-default\",\n                    )}\n                /> */}\n                  {/* Add arrow between labels */}\n                  {index < data.length - 1 && showXAxis && showArrow && gap >= 14 ? (\n                    <foreignObject\n                      x={item.startX + barWidth + HALF_PADDING + yAxisPadding - 6 + gap / 2}\n                      y={realHeight + HALF_PADDING + 11}\n                      width={12}\n                      height={rotateLabelX?.xAxisHeight || DEFAULT_X_AXIS_HEIGHT}\n                    >\n                      <div\n                        className={tremorTwMerge(\n                          // light\n                          \"text-tremor-content\",\n                          // dark\n                          \"dark:text-dark-tremor-content\",\n                        )}\n                      >\n                        <ArrowRightIcon className=\"size-3.5 shrink-0\" />\n                      </div>\n                    </foreignObject>\n                  ) : null}\n                </React.Fragment>\n              ))}\n              <linearGradient\n                id={\"base-gradient\"}\n                x1=\"0%\"\n                y1=\"0%\"\n                x2=\"0%\"\n                y2=\"100%\"\n                className={tremorTwMerge(\n                  getColorClassNames(color ?? BaseColors.Blue, colorPalette.text).textColor,\n                )}\n              >\n                <stop offset=\"5%\" stopColor=\"currentColor\" stopOpacity={0.4} />\n                <stop offset=\"95%\" stopColor=\"currentColor\" stopOpacity={0} />\n              </linearGradient>\n              <linearGradient\n                id={\"base-gradient-revert\"}\n                x1=\"0%\"\n                y1=\"0%\"\n                x2=\"0%\"\n                y2=\"100%\"\n                className={tremorTwMerge(\n                  getColorClassNames(color ?? BaseColors.Blue, colorPalette.text).textColor,\n                )}\n              >\n                <stop offset=\"5%\" stopColor=\"currentColor\" stopOpacity={0} />\n                <stop offset=\"95%\" stopColor=\"currentColor\" stopOpacity={0.4} />\n              </linearGradient>\n              {showXAxis && xAxisLabel ? (\n                <text\n                  x={width / 2 + yAxisPadding / 2}\n                  y={realHeight + HALF_PADDING + 50}\n                  style={{ textAnchor: \"middle\" }}\n                  fill=\"\"\n                  stroke=\"\"\n                  className={tremorTwMerge(\n                    // base\n                    \"text-tremor-default cursor-default font-medium\",\n                    // light\n                    \"fill-tremor-content-emphasis\",\n                    // dark\n                    \"dark:fill-dark-tremor-content-emphasis\",\n                  )}\n                >\n                  {xAxisLabel}\n                </text>\n              ) : null}\n              {showYAxis && yAxisLabel ? (\n                <text\n                  x={-5}\n                  y={realHeight / 2 + 10}\n                  textAnchor=\"middle\"\n                  style={{ textAnchor: \"middle\" }}\n                  transform={`rotate(-90, 0, ${realHeight / 2})`}\n                  fill=\"\"\n                  stroke=\"\"\n                  className={tremorTwMerge(\n                    // base\n                    \"text-tremor-default cursor-default font-medium\",\n                    // light\n                    \"fill-tremor-content-emphasis\",\n                    // dark\n                    \"dark:fill-dark-tremor-content-emphasis\",\n                  )}\n                >\n                  {yAxisLabel}\n                </text>\n              ) : null}\n            </svg>\n            {showTooltip ? (\n              <div\n                ref={tooltipRef}\n                className={tremorTwMerge(\n                  \"absolute top-0 pointer-events-none\",\n                  tooltip.data ? \"visible\" : \"hidden\",\n                )}\n                tabIndex={-1}\n                role=\"dialog\"\n                style={{\n                  left: tooltip.x + barWidth * 0.66,\n                }}\n              >\n                {CustomTooltip ? (\n                  <CustomTooltip\n                    payload={tooltip.data ? [tooltip.data] : []}\n                    active={!!tooltip.data}\n                    label={tooltip.data?.name}\n                  />\n                ) : (\n                  <ChartTooltipFrame>\n                    <div\n                      className={tremorTwMerge(\n                        // light\n                        \"border-tremor-border border-b px-4 py-2\",\n                        // dark\n                        \"dark:border-dark-tremor-border\",\n                      )}\n                    >\n                      <p\n                        className={tremorTwMerge(\n                          // common\n                          \"font-medium\",\n                          // light\n                          \"text-tremor-content-emphasis\",\n                          // dark\n                          \"dark:text-dark-tremor-content-emphasis\",\n                        )}\n                      >\n                        {tooltip?.data?.name}\n                      </p>\n                    </div>\n\n                    <div className={tremorTwMerge(\"px-4 py-2 space-y-1\")}>\n                      {tooltip.data ? (\n                        <ChartTooltipRow\n                          value={valueFormatter(tooltip.data.value)}\n                          name={`${(tooltip.data.payload.normalizedValue * 100).toFixed(2)}%`}\n                          color={color ?? BaseColors.Blue}\n                        />\n                      ) : null}\n                    </div>\n                  </ChartTooltipFrame>\n                )}\n              </div>\n            ) : null}\n          </>\n        ) : (\n          <NoData noDataText={noDataText} />\n        )}\n      </div>\n    );\n  },\n);\n\nFunnelChartPrimitive.displayName = \"FunnelChart\";\n\n//#region Data Validation\n\nconst validateData = (data: DataT[], calculatedFrom?: CalculateFrom): string | null => {\n  if (data && data.length > 0) {\n    if (calculatedFrom === \"previous\" && data[0].value <= 0) {\n      return `The value of the first item \"${data[0].name}\" is not greater than 0. This is not allowed when setting the \"calculateFrom\" prop to \"previous\". Please enter a value greater than 0.`;\n    }\n\n    for (const item of data) {\n      if (item.value < 0) {\n        return `Item \"${item.name}\" has a negative value: ${item.value}. This is not allowed. The value must be greater than or equal to 0.`;\n      }\n    }\n  }\n  return null;\n};\n\n//#region  Exports\n\nconst FunnelChart = ({ data, ...props }: FunnelChartProps) => {\n  const errorMessage = data ? validateData(data, props.calculateFrom) : null;\n  return errorMessage ? (\n    <NoData className=\"h-full w-full p-6\" noDataText={`Calculation error: ${errorMessage}`} />\n  ) : (\n    <FunnelChartPrimitive data={data} {...props} />\n  );\n};\n\nexport default FunnelChart;\n"
  },
  {
    "path": "src/components/chart-elements/FunnelChart/index.ts",
    "content": "export { default as FunnelChart } from \"./FunnelChart\";\nexport type { FunnelChartProps } from \"./FunnelChart\";\n"
  },
  {
    "path": "src/components/chart-elements/LineChart/LineChart.tsx",
    "content": "\"use client\";\nimport React, { Fragment, useState } from \"react\";\nimport {\n  CartesianGrid,\n  Dot,\n  Legend,\n  Line,\n  LineChart as ReChartsLineChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n  Label,\n} from \"recharts\";\nimport { AxisDomain } from \"recharts/types/util/types\";\n\nimport BaseChartProps from \"../common/BaseChartProps\";\nimport ChartLegend from \"../common/ChartLegend\";\nimport ChartTooltip from \"../common/ChartTooltip\";\nimport NoData from \"../common/NoData\";\nimport {\n  constructCategoryColors,\n  getYAxisDomain,\n  hasOnlyOneValueForThisKey,\n} from \"../common/utils\";\n\nimport {\n  BaseColors,\n  colorPalette,\n  defaultValueFormatter,\n  getColorClassNames,\n  themeColorRange,\n  tremorTwMerge,\n} from \"lib\";\nimport { CurveType } from \"../../../lib/inputTypes\";\n\nexport interface LineChartProps extends BaseChartProps {\n  curveType?: CurveType;\n  connectNulls?: boolean;\n}\n\ninterface ActiveDot {\n  index?: number;\n  dataKey?: string;\n}\n\nconst LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {\n  const {\n    data = [],\n    categories = [],\n    index,\n    colors = themeColorRange,\n    valueFormatter = defaultValueFormatter,\n    startEndOnly = false,\n    showXAxis = true,\n    showYAxis = true,\n    yAxisWidth = 56,\n    intervalType = \"equidistantPreserveStart\",\n    animationDuration = 900,\n    showAnimation = false,\n    showTooltip = true,\n    showLegend = true,\n    showGridLines = true,\n    autoMinValue = false,\n    curveType = \"linear\",\n    minValue,\n    maxValue,\n    connectNulls = false,\n    allowDecimals = true,\n    noDataText,\n    className,\n    onValueChange,\n    enableLegendSlider = false,\n    customTooltip,\n    rotateLabelX,\n    padding = !showXAxis && !showYAxis ? { left: 0, right: 0 } : { left: 20, right: 20 },\n    tickGap = 5,\n    xAxisLabel,\n    yAxisLabel,\n    ...other\n  } = props;\n  const CustomTooltip = customTooltip;\n  const [legendHeight, setLegendHeight] = useState(60);\n  const [activeDot, setActiveDot] = useState<ActiveDot | undefined>(undefined);\n  const [activeLegend, setActiveLegend] = useState<string | undefined>(undefined);\n  const categoryColors = constructCategoryColors(categories, colors);\n\n  const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);\n  const hasOnValueChange = !!onValueChange;\n\n  function onDotClick(itemData: any, event: React.MouseEvent) {\n    event.stopPropagation();\n\n    if (!hasOnValueChange) return;\n    if (\n      (itemData.index === activeDot?.index && itemData.dataKey === activeDot?.dataKey) ||\n      (hasOnlyOneValueForThisKey(data, itemData.dataKey) &&\n        activeLegend &&\n        activeLegend === itemData.dataKey)\n    ) {\n      setActiveLegend(undefined);\n      setActiveDot(undefined);\n      onValueChange?.(null);\n    } else {\n      setActiveLegend(itemData.dataKey);\n      setActiveDot({\n        index: itemData.index,\n        dataKey: itemData.dataKey,\n      });\n      onValueChange?.({\n        eventType: \"dot\",\n        categoryClicked: itemData.dataKey,\n        ...itemData.payload,\n      });\n    }\n  }\n\n  function onCategoryClick(dataKey: string) {\n    if (!hasOnValueChange) return;\n    if (\n      (dataKey === activeLegend && !activeDot) ||\n      (hasOnlyOneValueForThisKey(data, dataKey) && activeDot && activeDot.dataKey === dataKey)\n    ) {\n      setActiveLegend(undefined);\n      onValueChange?.(null);\n    } else {\n      setActiveLegend(dataKey);\n      onValueChange?.({\n        eventType: \"category\",\n        categoryClicked: dataKey,\n      });\n    }\n    setActiveDot(undefined);\n  }\n\n  return (\n    <div ref={ref} className={tremorTwMerge(\"w-full h-80\", className)} {...other}>\n      <ResponsiveContainer className=\"h-full w-full\">\n        {data?.length ? (\n          <ReChartsLineChart\n            data={data}\n            onClick={\n              hasOnValueChange && (activeLegend || activeDot)\n                ? () => {\n                    setActiveDot(undefined);\n                    setActiveLegend(undefined);\n                    onValueChange?.(null);\n                  }\n                : undefined\n            }\n            margin={{\n              bottom: xAxisLabel ? 30 : undefined,\n              left: yAxisLabel ? 20 : undefined,\n              right: yAxisLabel ? 5 : undefined,\n              top: 5,\n            }}\n          >\n            {showGridLines ? (\n              <CartesianGrid\n                className={tremorTwMerge(\n                  // common\n                  \"stroke-1\",\n                  // light\n                  \"stroke-tremor-border\",\n                  // dark\n                  \"dark:stroke-dark-tremor-border\",\n                )}\n                horizontal={true}\n                vertical={false}\n              />\n            ) : null}\n            <XAxis\n              padding={padding}\n              hide={!showXAxis}\n              dataKey={index}\n              interval={startEndOnly ? \"preserveStartEnd\" : intervalType}\n              tick={{ transform: \"translate(0, 6)\" }}\n              ticks={startEndOnly ? [data[0][index], data[data.length - 1][index]] : undefined}\n              fill=\"\"\n              stroke=\"\"\n              className={tremorTwMerge(\n                // common\n                \"text-tremor-label\",\n                // light\n                \"fill-tremor-content\",\n                // dark\n                \"dark:fill-dark-tremor-content\",\n              )}\n              tickLine={false}\n              axisLine={false}\n              minTickGap={tickGap}\n              angle={rotateLabelX?.angle}\n              dy={rotateLabelX?.verticalShift}\n              height={rotateLabelX?.xAxisHeight}\n            >\n              {xAxisLabel && (\n                <Label\n                  position=\"insideBottom\"\n                  offset={-20}\n                  className=\"fill-tremor-content-emphasis text-tremor-default font-medium dark:fill-dark-tremor-content-emphasis\"\n                >\n                  {xAxisLabel}\n                </Label>\n              )}\n            </XAxis>\n            <YAxis\n              width={yAxisWidth}\n              hide={!showYAxis}\n              axisLine={false}\n              tickLine={false}\n              type=\"number\"\n              domain={yAxisDomain as AxisDomain}\n              tick={{ transform: \"translate(-3, 0)\" }}\n              fill=\"\"\n              stroke=\"\"\n              className={tremorTwMerge(\n                // common\n                \"text-tremor-label\",\n                // light\n                \"fill-tremor-content\",\n                // dark\n                \"dark:fill-dark-tremor-content\",\n              )}\n              tickFormatter={valueFormatter}\n              allowDecimals={allowDecimals}\n            >\n              {yAxisLabel && (\n                <Label\n                  position=\"insideLeft\"\n                  style={{ textAnchor: \"middle\" }}\n                  angle={-90}\n                  offset={-15}\n                  className=\"fill-tremor-content-emphasis text-tremor-default font-medium dark:fill-dark-tremor-content-emphasis\"\n                >\n                  {yAxisLabel}\n                </Label>\n              )}\n            </YAxis>\n            <Tooltip\n              wrapperStyle={{ outline: \"none\" }}\n              isAnimationActive={false}\n              cursor={{ stroke: \"#d1d5db\", strokeWidth: 1 }}\n              content={\n                showTooltip ? (\n                  ({ active, payload, label }) =>\n                    CustomTooltip ? (\n                      <CustomTooltip\n                        payload={payload?.map((payloadItem: any) => ({\n                          ...payloadItem,\n                          color: categoryColors.get(payloadItem.dataKey) ?? BaseColors.Gray,\n                        }))}\n                        active={active}\n                        label={label}\n                      />\n                    ) : (\n                      <ChartTooltip\n                        active={active}\n                        payload={payload}\n                        label={label}\n                        valueFormatter={valueFormatter}\n                        categoryColors={categoryColors}\n                      />\n                    )\n                ) : (\n                  <></>\n                )\n              }\n              position={{ y: 0 }}\n            />\n\n            {showLegend ? (\n              <Legend\n                verticalAlign=\"top\"\n                height={legendHeight}\n                content={({ payload }) =>\n                  ChartLegend(\n                    { payload },\n                    categoryColors,\n                    setLegendHeight,\n                    activeLegend,\n                    hasOnValueChange\n                      ? (clickedLegendItem: string) => onCategoryClick(clickedLegendItem)\n                      : undefined,\n                    enableLegendSlider,\n                  )\n                }\n              />\n            ) : null}\n            {categories.map((category) => (\n              <Line\n                className={tremorTwMerge(\n                  getColorClassNames(\n                    categoryColors.get(category) ?? BaseColors.Gray,\n                    colorPalette.text,\n                  ).strokeColor,\n                )}\n                strokeOpacity={activeDot || (activeLegend && activeLegend !== category) ? 0.3 : 1}\n                activeDot={(props: any) => {\n                  const { cx, cy, stroke, strokeLinecap, strokeLinejoin, strokeWidth, dataKey } =\n                    props;\n                  return (\n                    <Dot\n                      className={tremorTwMerge(\n                        \"stroke-tremor-background dark:stroke-dark-tremor-background\",\n                        onValueChange ? \"cursor-pointer\" : \"\",\n                        getColorClassNames(\n                          categoryColors.get(dataKey) ?? BaseColors.Gray,\n                          colorPalette.text,\n                        ).fillColor,\n                      )}\n                      cx={cx}\n                      cy={cy}\n                      r={5}\n                      fill=\"\"\n                      stroke={stroke}\n                      strokeLinecap={strokeLinecap}\n                      strokeLinejoin={strokeLinejoin}\n                      strokeWidth={strokeWidth}\n                      onClick={(dotProps: any, event) => onDotClick(props, event)}\n                    />\n                  );\n                }}\n                dot={(props: any) => {\n                  const {\n                    stroke,\n                    strokeLinecap,\n                    strokeLinejoin,\n                    strokeWidth,\n                    cx,\n                    cy,\n                    dataKey,\n                    index,\n                  } = props;\n\n                  if (\n                    (hasOnlyOneValueForThisKey(data, category) &&\n                      !(activeDot || (activeLegend && activeLegend !== category))) ||\n                    (activeDot?.index === index && activeDot?.dataKey === category)\n                  ) {\n                    return (\n                      <Dot\n                        key={index}\n                        cx={cx}\n                        cy={cy}\n                        r={5}\n                        stroke={stroke}\n                        fill=\"\"\n                        strokeLinecap={strokeLinecap}\n                        strokeLinejoin={strokeLinejoin}\n                        strokeWidth={strokeWidth}\n                        className={tremorTwMerge(\n                          \"stroke-tremor-background dark:stroke-dark-tremor-background\",\n                          onValueChange ? \"cursor-pointer\" : \"\",\n                          getColorClassNames(\n                            categoryColors.get(dataKey) ?? BaseColors.Gray,\n                            colorPalette.text,\n                          ).fillColor,\n                        )}\n                      />\n                    );\n                  }\n                  return <Fragment key={index}></Fragment>;\n                }}\n                key={category}\n                name={category}\n                type={curveType}\n                dataKey={category}\n                stroke=\"\"\n                strokeWidth={2}\n                strokeLinejoin=\"round\"\n                strokeLinecap=\"round\"\n                isAnimationActive={showAnimation}\n                animationDuration={animationDuration}\n                connectNulls={connectNulls}\n              />\n            ))}\n            {onValueChange\n              ? categories.map((category) => (\n                  <Line\n                    className={tremorTwMerge(\"cursor-pointer\")}\n                    strokeOpacity={0}\n                    key={category}\n                    name={category}\n                    type={curveType}\n                    dataKey={category}\n                    stroke=\"transparent\"\n                    fill=\"transparent\"\n                    legendType=\"none\"\n                    tooltipType=\"none\"\n                    strokeWidth={12}\n                    connectNulls={connectNulls}\n                    onClick={(props: any, event) => {\n                      event.stopPropagation();\n                      const { name } = props;\n                      onCategoryClick(name);\n                    }}\n                  />\n                ))\n              : null}\n          </ReChartsLineChart>\n        ) : (\n          <NoData noDataText={noDataText} />\n        )}\n      </ResponsiveContainer>\n    </div>\n  );\n});\n\nLineChart.displayName = \"LineChart\";\n\nexport default LineChart;\n"
  },
  {
    "path": "src/components/chart-elements/LineChart/index.ts",
    "content": "export { default as LineChart } from \"./LineChart\";\nexport type { LineChartProps } from \"./LineChart\";\n"
  },
  {
    "path": "src/components/chart-elements/ScatterChart/ScatterChart.tsx",
    "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport {\n  CartesianGrid,\n  Dot,\n  Legend,\n  ResponsiveContainer,\n  Scatter,\n  ScatterChart as ReChartsScatterChart,\n  Tooltip,\n  XAxis,\n  YAxis,\n  ZAxis,\n  Label,\n} from \"recharts\";\nimport { AxisDomain } from \"recharts/types/util/types\";\n\nimport type { EventProps } from \"components/chart-elements/common\";\nimport ChartLegend from \"components/chart-elements/common/ChartLegend\";\nimport ScatterChartTooltip from \"components/chart-elements/ScatterChart/ScatterChartTooltip\";\nimport BaseAnimationTimingProps from \"../common/BaseAnimationTimingProps\";\nimport NoData from \"../common/NoData\";\nimport {\n  constructCategories,\n  constructCategoryColors,\n  deepEqual,\n  getYAxisDomain,\n} from \"../common/utils\";\n\nimport { CustomTooltipProps } from \"components/chart-elements/common/CustomTooltipProps\";\nimport {\n  BaseColors,\n  colorPalette,\n  defaultValueFormatter,\n  getColorClassNames,\n  themeColorRange,\n  tremorTwMerge,\n} from \"lib\";\nimport { Color, ValueFormatter, IntervalType } from \"../../../lib/inputTypes\";\n\nexport type ScatterChartValueFormatter = {\n  x?: ValueFormatter;\n  y?: ValueFormatter;\n  size?: ValueFormatter;\n};\n\nexport interface ScatterChartProps\n  extends BaseAnimationTimingProps,\n    React.HTMLAttributes<HTMLDivElement> {\n  data: any[];\n  x: string;\n  y: string;\n  category: string;\n  size?: string;\n  valueFormatter?: ScatterChartValueFormatter;\n  sizeRange?: number[];\n  colors?: (Color | string)[];\n  showOpacity?: boolean;\n  startEndOnly?: boolean;\n  showXAxis?: boolean;\n  showYAxis?: boolean;\n  yAxisWidth?: number;\n  intervalType?: IntervalType;\n  showTooltip?: boolean;\n  showLegend?: boolean;\n  showGridLines?: boolean;\n  autoMinXValue?: boolean;\n  minXValue?: number;\n  maxXValue?: number;\n  autoMinYValue?: boolean;\n  minYValue?: number;\n  maxYValue?: number;\n  allowDecimals?: boolean;\n  noDataText?: string;\n  enableLegendSlider?: boolean;\n  onValueChange?: (value: EventProps) => void;\n  customTooltip?: React.ComponentType<CustomTooltipProps>;\n  rotateLabelX?: {\n    angle: number;\n    verticalShift: number;\n    xAxisHeight: number;\n  };\n  tickGap?: number;\n  xAxisLabel?: string;\n  yAxisLabel?: string;\n}\n\nconst renderShape = (props: any, activeNode: any | undefined, activeLegend: string | undefined) => {\n  const { cx, cy, width, node, fillOpacity, name } = props;\n\n  return (\n    <Dot\n      cx={cx}\n      cy={cy}\n      r={width / 2}\n      opacity={\n        activeNode || (activeLegend && activeLegend !== name)\n          ? deepEqual(activeNode, node)\n            ? fillOpacity\n            : 0.3\n          : fillOpacity\n      }\n    />\n  );\n};\n\nconst ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((props, ref) => {\n  const {\n    data = [],\n    x,\n    y,\n    size,\n    category,\n    colors = themeColorRange,\n    showOpacity = false,\n    sizeRange = [1, 1000],\n    valueFormatter = {\n      x: defaultValueFormatter,\n      y: defaultValueFormatter,\n      size: defaultValueFormatter,\n    },\n    startEndOnly = false,\n    showXAxis = true,\n    showYAxis = true,\n    yAxisWidth = 56,\n    intervalType = \"equidistantPreserveStart\",\n    animationDuration = 900,\n    showAnimation = false,\n    showTooltip = true,\n    showLegend = true,\n    showGridLines = true,\n    autoMinXValue = false,\n    minXValue,\n    maxXValue,\n    autoMinYValue = false,\n    minYValue,\n    maxYValue,\n    allowDecimals = true,\n    noDataText,\n    onValueChange,\n    customTooltip,\n    rotateLabelX,\n    className,\n    enableLegendSlider = false,\n    tickGap = 5,\n    xAxisLabel,\n    yAxisLabel,\n    ...other\n  } = props;\n  const CustomTooltip = customTooltip;\n  const [legendHeight, setLegendHeight] = useState(60);\n  const [activeNode, setActiveNode] = React.useState<any | undefined>(undefined);\n  const [activeLegend, setActiveLegend] = useState<string | undefined>(undefined);\n  const hasOnValueChange = !!onValueChange;\n\n  function onNodeClick(data: any, index: number, event: React.MouseEvent) {\n    event.stopPropagation();\n    if (!hasOnValueChange) return;\n    if (deepEqual(activeNode, data.node)) {\n      setActiveLegend(undefined);\n      setActiveNode(undefined);\n      onValueChange?.(null);\n    } else {\n      setActiveNode(data.node);\n      setActiveLegend(data.payload[category]);\n      onValueChange?.({\n        eventType: \"bubble\",\n        categoryClicked: data.payload[category],\n        ...data.payload,\n      });\n    }\n  }\n\n  function onCategoryClick(dataKey: string) {\n    if (!hasOnValueChange) return;\n    if (dataKey === activeLegend && !activeNode) {\n      setActiveLegend(undefined);\n      onValueChange?.(null);\n    } else {\n      setActiveLegend(dataKey);\n      onValueChange?.({\n        eventType: \"category\",\n        categoryClicked: dataKey,\n      });\n    }\n    setActiveNode(undefined);\n  }\n\n  const categories = constructCategories(data, category);\n  const categoryColors = constructCategoryColors(categories, colors);\n\n  //maybe rename getYAxisDomain to getAxisDomain\n  const xAxisDomain = getYAxisDomain(autoMinXValue, minXValue, maxXValue);\n  const yAxisDomain = getYAxisDomain(autoMinYValue, minYValue, maxYValue);\n\n  return (\n    <div ref={ref} className={tremorTwMerge(\"w-full h-80\", className)} {...other}>\n      <ResponsiveContainer className=\"h-full w-full\">\n        {data?.length ? (\n          <ReChartsScatterChart\n            onClick={\n              hasOnValueChange && (activeLegend || activeNode)\n                ? () => {\n                    setActiveNode(undefined);\n                    setActiveLegend(undefined);\n                    onValueChange?.(null);\n                  }\n                : undefined\n            }\n            margin={{\n              bottom: xAxisLabel ? 20 : undefined,\n              left: 20,\n              right: 20,\n              top: 5,\n            }}\n          >\n            {showGridLines ? (\n              <CartesianGrid\n                className={tremorTwMerge(\n                  // common\n                  \"stroke-1\",\n                  // light\n                  \"stroke-tremor-border\",\n                  // dark\n                  \"dark:stroke-dark-tremor-border\",\n                )}\n                horizontal={true}\n                vertical={true}\n              />\n            ) : null}\n            {x ? (\n              <XAxis\n                hide={!showXAxis}\n                dataKey={x}\n                interval={startEndOnly ? \"preserveStartEnd\" : intervalType}\n                tick={{ transform: \"translate(0, 6)\" }}\n                ticks={startEndOnly ? [data[0][x], data[data.length - 1][x]] : undefined}\n                type=\"number\"\n                name={x}\n                fill=\"\"\n                stroke=\"\"\n                className={tremorTwMerge(\n                  // common\n                  \"text-tremor-label\",\n                  // light\n                  \"fill-tremor-content\",\n                  // dark\n                  \"dark:fill-dark-tremor-content\",\n                )}\n                tickLine={false}\n                tickFormatter={valueFormatter.x}\n                axisLine={false}\n                minTickGap={tickGap}\n                domain={xAxisDomain as AxisDomain}\n                allowDataOverflow={true}\n                angle={rotateLabelX?.angle}\n                dy={rotateLabelX?.verticalShift}\n                height={rotateLabelX?.xAxisHeight}\n              >\n                {xAxisLabel && (\n                  <Label\n                    position=\"insideBottom\"\n                    offset={-20}\n                    className=\"fill-tremor-content-emphasis text-tremor-default font-medium dark:fill-dark-tremor-content-emphasis\"\n                  >\n                    {xAxisLabel}\n                  </Label>\n                )}\n              </XAxis>\n            ) : null}\n            {y ? (\n              <YAxis\n                width={yAxisWidth}\n                hide={!showYAxis}\n                axisLine={false}\n                tickLine={false}\n                dataKey={y}\n                type=\"number\"\n                name={y}\n                domain={yAxisDomain as AxisDomain}\n                tick={{ transform: \"translate(-3, 0)\" }}\n                tickFormatter={valueFormatter.y}\n                fill=\"\"\n                stroke=\"\"\n                className={tremorTwMerge(\n                  // common\n                  \"text-tremor-label\",\n                  // light\n                  \"fill-tremor-content\",\n                  // dark\n                  \"dark:fill-dark-tremor-content\",\n                )}\n                allowDecimals={allowDecimals}\n                allowDataOverflow={true}\n              >\n                {yAxisLabel && (\n                  <Label\n                    position=\"insideLeft\"\n                    style={{ textAnchor: \"middle\" }}\n                    angle={-90}\n                    offset={-15}\n                    className=\"fill-tremor-content-emphasis text-tremor-default font-medium dark:fill-dark-tremor-content-emphasis\"\n                  >\n                    {yAxisLabel}\n                  </Label>\n                )}\n              </YAxis>\n            ) : null}\n            <Tooltip\n              wrapperStyle={{ outline: \"none\" }}\n              isAnimationActive={false}\n              cursor={{ stroke: \"#d1d5db\", strokeWidth: 1 }}\n              content={\n                showTooltip ? (\n                  ({ active, payload, label }) => {\n                    const color = category ? payload?.[0]?.payload?.[category] : label;\n                    return CustomTooltip ? (\n                      <CustomTooltip\n                        payload={payload?.map((payloadItem) => ({\n                          ...payloadItem,\n                          color: categoryColors.get(color) ?? BaseColors.Gray,\n                        }))}\n                        active={active}\n                        label={color}\n                      />\n                    ) : (\n                      <ScatterChartTooltip\n                        active={active}\n                        payload={payload}\n                        label={color}\n                        valueFormatter={valueFormatter}\n                        axis={{ x: x, y: y, size: size }}\n                        category={category}\n                        categoryColors={categoryColors}\n                      />\n                    );\n                  }\n                ) : (\n                  <></>\n                )\n              }\n            />\n            {size ? <ZAxis dataKey={size} type=\"number\" range={sizeRange} name={size} /> : null}\n            {categories.map((cat) => {\n              return (\n                <Scatter\n                  className={tremorTwMerge(\n                    getColorClassNames(\n                      categoryColors.get(cat) ?? BaseColors.Gray,\n                      colorPalette.text,\n                    ).fillColor,\n                    showOpacity\n                      ? getColorClassNames(\n                          categoryColors.get(cat) ?? BaseColors.Gray,\n                          colorPalette.text,\n                        ).strokeColor\n                      : \"\",\n                    onValueChange ? \"cursor-pointer\" : \"\",\n                  )}\n                  fill={`url(#${categoryColors.get(cat)})`}\n                  fillOpacity={showOpacity ? 0.7 : 1}\n                  key={cat}\n                  name={cat}\n                  data={category ? data.filter((d) => d[category] === cat) : data}\n                  isAnimationActive={showAnimation}\n                  animationDuration={animationDuration}\n                  shape={(props: any) => renderShape(props, activeNode, activeLegend)}\n                  onClick={onNodeClick}\n                />\n              );\n            })}\n            {showLegend ? (\n              <Legend\n                verticalAlign=\"top\"\n                height={legendHeight}\n                content={({ payload }) =>\n                  ChartLegend(\n                    { payload },\n                    categoryColors,\n                    setLegendHeight,\n                    activeLegend,\n                    hasOnValueChange\n                      ? (clickedLegendItem: string) => onCategoryClick(clickedLegendItem)\n                      : undefined,\n                    enableLegendSlider,\n                  )\n                }\n              />\n            ) : null}\n          </ReChartsScatterChart>\n        ) : (\n          <NoData noDataText={noDataText} />\n        )}\n      </ResponsiveContainer>\n    </div>\n  );\n});\n\nScatterChart.displayName = \"ScatterChart\";\n\nexport default ScatterChart;\n"
  },
  {
    "path": "src/components/chart-elements/ScatterChart/ScatterChartTooltip.tsx",
    "content": "import React from \"react\";\n\nimport { ScatterChartValueFormatter } from \"components/chart-elements/ScatterChart/ScatterChart\";\nimport {\n  BaseColors,\n  getColorClassNames,\n  Color,\n  defaultValueFormatter,\n  tremorTwMerge,\n  colorPalette,\n} from \"lib\";\n\nexport const ChartTooltipFrame = ({ children }: { children: React.ReactNode }) => (\n  <div\n    className={tremorTwMerge(\n      // common\n      \"rounded-tremor-default text-tremor-default border\",\n      // light\n      \"bg-tremor-background shadow-tremor-dropdown border-tremor-border\",\n      // dark\n      \"dark:bg-dark-tremor-background dark:shadow-dark-tremor-dropdown dark:border-dark-tremor-border\",\n    )}\n  >\n    {children}\n  </div>\n);\n\nexport interface ChartTooltipRowProps {\n  value: string;\n  name: string;\n}\n\nexport const ChartTooltipRow = ({ value, name }: ChartTooltipRowProps) => (\n  <div className=\"flex items-center justify-between space-x-8\">\n    <div className=\"flex items-center space-x-2\">\n      <p\n        className={tremorTwMerge(\n          // commmon\n          \"text-right whitespace-nowrap\",\n          // light\n          \"text-tremor-content\",\n          // dark\n          \"dark:text-dark-tremor-content\",\n        )}\n      >\n        {name}\n      </p>\n    </div>\n    <p\n      className={tremorTwMerge(\n        // common\n        \"font-medium tabular-nums text-right whitespace-nowrap\",\n        // light\n        \"text-tremor-content-emphasis\",\n        // dark\n        \"dark:text-dark-tremor-content-emphasis\",\n      )}\n    >\n      {value}\n    </p>\n  </div>\n);\n\nexport interface ScatterChartTooltipProps {\n  label: string;\n  categoryColors: Map<string, Color | string>;\n  active: boolean | undefined;\n  payload: any;\n  valueFormatter: ScatterChartValueFormatter;\n  axis: any;\n  category?: string;\n}\n\nconst ScatterChartTooltip = ({\n  label,\n  active,\n  payload,\n  valueFormatter,\n  axis,\n  category,\n  categoryColors,\n}: ScatterChartTooltipProps) => {\n  if (active && payload) {\n    return (\n      <ChartTooltipFrame>\n        <div\n          className={tremorTwMerge(\n            // common\n            \"flex items-center space-x-2 border-b px-4 py-2\",\n            // light\n            \"border-tremor-border\",\n            // dark\n            \"dark:border-dark-tremor-border\",\n          )}\n        >\n          <span\n            className={tremorTwMerge(\n              // common\n              \"shrink-0 rounded-tremor-full border-2 h-3 w-3\",\n              // light\n              \"border-tremor-background shadow-tremor-card\",\n              // dark\n              \"dark:border-dark-tremor-background dark:shadow-dark-tremor-card\",\n              getColorClassNames(\n                category\n                  ? (categoryColors.get(payload?.[0]?.payload[category]) ?? BaseColors.Blue)\n                  : BaseColors.Blue,\n                colorPalette.background,\n              ).bgColor,\n            )}\n          />\n          <p\n            className={tremorTwMerge(\n              // common\n              \"font-medium\",\n              // light\n              \"text-tremor-content-emphasis\",\n              // dark\n              \"dark:text-dark-tremor-content-emphasis\",\n            )}\n          >\n            {label}\n          </p>\n        </div>\n\n        <div className={tremorTwMerge(\"px-4 py-2 space-y-1\")}>\n          {payload.map(({ value, name }: { value: number; name: string }, idx: number) => {\n            const valueFormatterKey = Object.keys(axis).find((key) => axis[key] === name) ?? \"\";\n            const valueFormatterFn =\n              valueFormatter[valueFormatterKey as keyof ScatterChartValueFormatter] ??\n              defaultValueFormatter;\n            return (\n              <ChartTooltipRow\n                key={`id-${idx}`}\n                value={valueFormatter && valueFormatterFn ? valueFormatterFn(value) : `${value}`}\n                name={name}\n              />\n            );\n          })}\n        </div>\n      </ChartTooltipFrame>\n    );\n  }\n  return null;\n};\n\nexport default ScatterChartTooltip;\n"
  },
  {
    "path": "src/components/chart-elements/ScatterChart/index.tsx",
    "content": "export { default as ScatterChart } from \"./ScatterChart\";\nexport type { ScatterChartProps } from \"./ScatterChart\";\n"
  },
  {
    "path": "src/components/chart-elements/common/BaseAnimationTimingProps.tsx",
    "content": "interface BaseAnimationTimingProps {\n  animationDuration?: number;\n  showAnimation?: boolean;\n}\n\nexport default BaseAnimationTimingProps;\n"
  },
  {
    "path": "src/components/chart-elements/common/BaseChartProps.tsx",
    "content": "import { Color, ValueFormatter, IntervalType } from \"../../../lib\";\nimport type BaseAnimationTimingProps from \"./BaseAnimationTimingProps\";\nimport { CustomTooltipProps } from \"./CustomTooltipProps\";\n\ntype FixedProps = {\n  eventType: \"dot\" | \"category\" | \"bar\" | \"slice\" | \"bubble\";\n  categoryClicked: string;\n};\n\ntype BaseEventProps = FixedProps & {\n  [key: string]: number | string;\n};\n\nexport type EventProps = BaseEventProps | null | undefined;\n\ninterface BaseChartProps extends BaseAnimationTimingProps, React.HTMLAttributes<HTMLDivElement> {\n  data: any[];\n  categories: string[];\n  index: string;\n  colors?: (Color | string)[];\n  valueFormatter?: ValueFormatter;\n  startEndOnly?: boolean;\n  showXAxis?: boolean;\n  showYAxis?: boolean;\n  yAxisWidth?: number;\n  intervalType?: IntervalType;\n  showTooltip?: boolean;\n  showLegend?: boolean;\n  showGridLines?: boolean;\n  autoMinValue?: boolean;\n  minValue?: number;\n  maxValue?: number;\n  allowDecimals?: boolean;\n  noDataText?: string;\n  onValueChange?: (value: EventProps) => void;\n  enableLegendSlider?: boolean;\n  padding?: { left?: number; right?: number };\n  customTooltip?: React.ComponentType<CustomTooltipProps>;\n  rotateLabelX?: {\n    angle: number;\n    verticalShift?: number;\n    xAxisHeight?: number;\n  };\n  tickGap?: number;\n  xAxisLabel?: string;\n  yAxisLabel?: string;\n}\n\nexport default BaseChartProps;\n"
  },
  {
    "path": "src/components/chart-elements/common/ChartLegend.tsx",
    "content": "import React, { useRef } from \"react\";\n\nimport { useOnWindowResize } from \"hooks\";\n\nimport { Legend } from \"components/text-elements/Legend\";\nimport { Color } from \"../../../lib\";\n\nconst ChartLegend = (\n  { payload }: any,\n  categoryColors: Map<string, Color | string>,\n  setLegendHeight: React.Dispatch<React.SetStateAction<number>>,\n  activeLegend: string | undefined,\n  onClick?: (category: string, color: Color | string) => void,\n  enableLegendSlider?: boolean,\n) => {\n  const legendRef = useRef<HTMLDivElement>(null);\n\n  useOnWindowResize(() => {\n    const calculateHeight = (height: number | undefined) =>\n      height\n        ? Number(height) + 20 // 20px extra padding\n        : 60; // default height\n    setLegendHeight(calculateHeight(legendRef.current?.clientHeight));\n  });\n\n  const filteredPayload = payload.filter((item: any) => item.type !== \"none\");\n\n  return (\n    <div ref={legendRef} className=\"flex items-center justify-end\">\n      <Legend\n        categories={filteredPayload.map((entry: any) => entry.value)}\n        colors={filteredPayload.map((entry: any) => categoryColors.get(entry.value))}\n        onClickLegendItem={onClick}\n        activeLegend={activeLegend}\n        enableLegendSlider={enableLegendSlider}\n      />\n    </div>\n  );\n};\n\nexport default ChartLegend;\n"
  },
  {
    "path": "src/components/chart-elements/common/ChartTooltip.tsx",
    "content": "import React from \"react\";\nimport {\n  BaseColors,\n  getColorClassNames,\n  tremorTwMerge,\n  Color,\n  ValueFormatter,\n  colorPalette,\n} from \"lib\";\n\nexport const ChartTooltipFrame = ({ children }: { children: React.ReactNode }) => (\n  <div\n    className={tremorTwMerge(\n      // common\n      \"rounded-tremor-default text-tremor-default border\",\n      // light\n      \"bg-tremor-background shadow-tremor-dropdown border-tremor-border\",\n      // dark\n      \"dark:bg-dark-tremor-background dark:shadow-dark-tremor-dropdown dark:border-dark-tremor-border\",\n    )}\n  >\n    {children}\n  </div>\n);\n\nexport interface ChartTooltipRowProps {\n  value: string;\n  name: string;\n  color: Color | string;\n}\n\nexport const ChartTooltipRow = ({ value, name, color }: ChartTooltipRowProps) => (\n  <div className=\"flex items-center justify-between space-x-8\">\n    <div className=\"flex items-center space-x-2\">\n      <span\n        className={tremorTwMerge(\n          // common\n          \"shrink-0 rounded-tremor-full border-2 h-3 w-3\",\n          // light\n          \"border-tremor-background shadow-tremor-card\",\n          // dark\n          \"dark:border-dark-tremor-background dark:shadow-dark-tremor-card\",\n          getColorClassNames(color, colorPalette.background).bgColor,\n        )}\n      />\n      <p\n        className={tremorTwMerge(\n          // commmon\n          \"text-right whitespace-nowrap\",\n          // light\n          \"text-tremor-content\",\n          // dark\n          \"dark:text-dark-tremor-content\",\n        )}\n      >\n        {name}\n      </p>\n    </div>\n    <p\n      className={tremorTwMerge(\n        // common\n        \"font-medium tabular-nums text-right whitespace-nowrap\",\n        // light\n        \"text-tremor-content-emphasis\",\n        // dark\n        \"dark:text-dark-tremor-content-emphasis\",\n      )}\n    >\n      {value}\n    </p>\n  </div>\n);\n\nexport interface ChartTooltipProps {\n  active: boolean | undefined;\n  payload: any;\n  label: string;\n  categoryColors: Map<string, Color | string>;\n  valueFormatter: ValueFormatter;\n}\n\nconst ChartTooltip = ({\n  active,\n  payload,\n  label,\n  categoryColors,\n  valueFormatter,\n}: ChartTooltipProps) => {\n  if (active && payload) {\n    const filteredPayload = payload.filter((item: any) => item.type !== \"none\");\n\n    return (\n      <ChartTooltipFrame>\n        <div\n          className={tremorTwMerge(\n            // light\n            \"border-tremor-border border-b px-4 py-2\",\n            // dark\n            \"dark:border-dark-tremor-border\",\n          )}\n        >\n          <p\n            className={tremorTwMerge(\n              // common\n              \"font-medium\",\n              // light\n              \"text-tremor-content-emphasis\",\n              // dark\n              \"dark:text-dark-tremor-content-emphasis\",\n            )}\n          >\n            {label}\n          </p>\n        </div>\n\n        <div className={tremorTwMerge(\"px-4 py-2 space-y-1\")}>\n          {filteredPayload.map(({ value, name }: { value: number; name: string }, idx: number) => (\n            <ChartTooltipRow\n              key={`id-${idx}`}\n              value={valueFormatter(value)}\n              name={name}\n              color={categoryColors.get(name) ?? BaseColors.Blue}\n            />\n          ))}\n        </div>\n      </ChartTooltipFrame>\n    );\n  }\n  return null;\n};\n\nexport default ChartTooltip;\n"
  },
  {
    "path": "src/components/chart-elements/common/CustomTooltipProps.tsx",
    "content": "import { NameType, Payload } from \"recharts/types/component/DefaultTooltipContent\";\n\nexport type CustomTooltipProps = {\n  payload: Payload<string | number | (string | number)[], string | number>[] | undefined;\n  active: boolean | undefined;\n  label: NameType | undefined;\n};\n"
  },
  {
    "path": "src/components/chart-elements/common/NoData.tsx",
    "content": "import { tremorTwMerge } from \"lib\";\nimport React from \"react\";\n\ninterface NoDataProps {\n  noDataText?: string;\n  className?: string;\n}\nconst NoData = ({ className, noDataText = \"No data\" }: NoDataProps) => {\n  return (\n    <div\n      className={tremorTwMerge(\n        // common\n        \"flex items-center justify-center w-full h-full border border-dashed rounded-tremor-default\",\n        // light\n        \"border-tremor-border\",\n        // dark\n        \"dark:border-dark-tremor-border\",\n        className,\n      )}\n    >\n      <p\n        className={tremorTwMerge(\n          // light\n          \"text-tremor-content text-tremor-default\",\n          // dark\n          \"dark:text-dark-tremor-content\",\n        )}\n      >\n        {noDataText}\n      </p>\n    </div>\n  );\n};\n\nexport default NoData;\n"
  },
  {
    "path": "src/components/chart-elements/common/index.ts",
    "content": "export type { EventProps } from \"./BaseChartProps\";\nexport type { CustomTooltipProps } from \"./CustomTooltipProps\";\n"
  },
  {
    "path": "src/components/chart-elements/common/utils.ts",
    "content": "import { Color } from \"../../../lib/inputTypes\";\n\nexport const constructCategoryColors = (\n  categories: string[],\n  colors: (Color | string)[],\n): Map<string, Color | string> => {\n  const categoryColors = new Map<string, Color | string>();\n  categories.forEach((category, idx) => {\n    categoryColors.set(category, colors[idx % colors.length]);\n  });\n  return categoryColors;\n};\n\nexport const getYAxisDomain = (\n  autoMinValue: boolean,\n  minValue: number | undefined,\n  maxValue: number | undefined,\n) => {\n  const minDomain = autoMinValue ? \"auto\" : (minValue ?? 0);\n  const maxDomain = maxValue ?? \"auto\";\n  return [minDomain, maxDomain];\n};\n\nexport const constructCategories = (data: any[], color?: string): string[] => {\n  if (!color) {\n    return [];\n  }\n\n  const categories = new Set<string>();\n  data.forEach((datum) => {\n    categories.add(datum[color]);\n  });\n  return Array.from(categories);\n};\n\nexport function deepEqual(obj1: any, obj2: any) {\n  if (obj1 === obj2) return true;\n\n  if (typeof obj1 !== \"object\" || typeof obj2 !== \"object\" || obj1 === null || obj2 === null)\n    return false;\n\n  const keys1 = Object.keys(obj1);\n  const keys2 = Object.keys(obj2);\n\n  if (keys1.length !== keys2.length) return false;\n\n  for (const key of keys1) {\n    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) return false;\n  }\n\n  return true;\n}\n\n// export function deepEqual(obj1: unknown, obj2: unknown): boolean {\n//   if (obj1 === obj2) return true;\n\n//   if (typeof obj1 !== \"object\" || typeof obj2 !== \"object\" || obj1 === null || obj2 === null)\n//     return false;\n\n//   if (Object.prototype.toString.call(obj1) !== Object.prototype.toString.call(obj2)) return false;\n\n//   const keys1 = Object.keys(obj1);\n//   const keys2 = new Set(Object.keys(obj2));\n\n//   if (keys1.length !== keys2.size) return false;\n\n//   for (const key of keys1) {\n//     if (\n//       !keys2.has(key) ||\n//       !deepEqual((obj1 as Record<string, unknown>)[key], (obj2 as Record<string, unknown>)[key])\n//     )\n//       return false;\n//   }\n\n//   return true;\n// }\n\nexport function hasOnlyOneValueForThisKey(array: any[], keyToCheck: string) {\n  const val = [];\n\n  for (const obj of array) {\n    if (Object.prototype.hasOwnProperty.call(obj, keyToCheck)) {\n      val.push(obj[keyToCheck]);\n      if (val.length > 1) {\n        return false;\n      }\n    }\n  }\n\n  return true;\n}\n"
  },
  {
    "path": "src/components/chart-elements/index.ts",
    "content": "export * from \"./AreaChart\";\nexport * from \"./BarChart\";\nexport { EventProps } from \"./common/BaseChartProps\";\nexport { CustomTooltipProps } from \"./common/CustomTooltipProps\";\nexport * from \"./DonutChart\";\nexport * from \"./LineChart\";\nexport * from \"./ScatterChart\";\nexport * from \"./FunnelChart\";\n"
  },
  {
    "path": "src/components/icon-elements/Badge/Badge.tsx",
    "content": "\"use client\";\nimport React from \"react\";\nimport Tooltip, { useTooltip } from \"components/util-elements/Tooltip/Tooltip\";\nimport {\n  Color,\n  getColorClassNames,\n  makeClassName,\n  mergeRefs,\n  Size,\n  Sizes,\n  tremorTwMerge,\n  colorPalette,\n} from \"lib\";\nimport { badgeProportions, iconSizes } from \"./styles\";\n\nconst makeBadgeClassName = makeClassName(\"Badge\");\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  color?: Color;\n  size?: Size;\n  icon?: React.ElementType;\n  tooltip?: string;\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {\n  const { color, icon, size = Sizes.SM, tooltip, className, children, ...other } = props;\n\n  const Icon = icon ? icon : null;\n\n  const { tooltipProps, getReferenceProps } = useTooltip();\n\n  return (\n    <span\n      ref={mergeRefs([ref, tooltipProps.refs.setReference])}\n      className={tremorTwMerge(\n        makeBadgeClassName(\"root\"),\n        // common\n        \"w-max shrink-0 inline-flex justify-center items-center cursor-default rounded-tremor-small ring-1 ring-inset\",\n        color\n          ? tremorTwMerge(\n              getColorClassNames(color, colorPalette.background).bgColor,\n              getColorClassNames(color, colorPalette.iconText).textColor,\n              getColorClassNames(color, colorPalette.iconRing).ringColor,\n              // light\n              \"bg-opacity-10 ring-opacity-20\",\n              // dark\n              \"dark:bg-opacity-5 dark:ring-opacity-60\",\n            )\n          : tremorTwMerge(\n              // light\n              \"bg-tremor-brand-faint text-tremor-brand-emphasis ring-tremor-brand/20\",\n              // dark\n              \"dark:bg-dark-tremor-brand-muted/50 dark:text-dark-tremor-brand dark:ring-dark-tremor-subtle/20\",\n            ),\n        badgeProportions[size].paddingX,\n        badgeProportions[size].paddingY,\n        badgeProportions[size].fontSize,\n        className,\n      )}\n      {...getReferenceProps}\n      {...other}\n    >\n      <Tooltip text={tooltip} {...tooltipProps} />\n      {Icon ? (\n        <Icon\n          className={tremorTwMerge(\n            makeBadgeClassName(\"icon\"),\n            \"shrink-0 -ml-1 mr-1.5\",\n            iconSizes[size].height,\n            iconSizes[size].width,\n          )}\n        />\n      ) : null}\n      <span className={tremorTwMerge(makeBadgeClassName(\"text\"), \"whitespace-nowrap\")}>\n        {children}\n      </span>\n    </span>\n  );\n});\n\nBadge.displayName = \"Badge\";\n\nexport default Badge;\n"
  },
  {
    "path": "src/components/icon-elements/Badge/index.ts",
    "content": "export { default as Badge } from \"./Badge\";\nexport type { BadgeProps } from \"./Badge\";\n"
  },
  {
    "path": "src/components/icon-elements/Badge/styles.ts",
    "content": "export type BadgeProportionTypes = {\n  paddingX: string;\n  paddingY: string;\n  fontSize: string;\n};\n\nexport const badgeProportions: { [char: string]: BadgeProportionTypes } = {\n  xs: {\n    paddingX: \"px-2\",\n    paddingY: \"py-0.5\",\n    fontSize: \"text-xs\",\n  },\n  sm: {\n    paddingX: \"px-2.5\",\n    paddingY: \"py-0.5\",\n    fontSize: \"text-sm\",\n  },\n  md: {\n    paddingX: \"px-3\",\n    paddingY: \"py-0.5\",\n    fontSize: \"text-md\",\n  },\n  lg: {\n    paddingX: \"px-3.5\",\n    paddingY: \"py-0.5\",\n    fontSize: \"text-lg\",\n  },\n  xl: {\n    paddingX: \"px-4\",\n    paddingY: \"py-1\",\n    fontSize: \"text-xl\",\n  },\n};\n\nexport const iconSizes: {\n  [size: string]: {\n    height: string;\n    width: string;\n  };\n} = {\n  xs: {\n    height: \"h-4\",\n    width: \"w-4\",\n  },\n  sm: {\n    height: \"h-4\",\n    width: \"w-4\",\n  },\n  md: {\n    height: \"h-4\",\n    width: \"w-4\",\n  },\n  lg: {\n    height: \"h-5\",\n    width: \"w-5\",\n  },\n  xl: {\n    height: \"h-6\",\n    width: \"w-6\",\n  },\n};\n"
  },
  {
    "path": "src/components/icon-elements/BadgeDelta/BadgeDelta.tsx",
    "content": "\"use client\";\nimport React from \"react\";\nimport Tooltip, { useTooltip } from \"components/util-elements/Tooltip/Tooltip\";\nimport {\n  DeltaType,\n  DeltaTypes,\n  makeClassName,\n  mapInputsToDeltaType,\n  mergeRefs,\n  Size,\n  Sizes,\n  tremorTwMerge,\n} from \"lib\";\nimport {\n  badgeProportionsIconOnly,\n  badgeProportionsWithText,\n  colors,\n  deltaIcons,\n  iconSizes,\n} from \"./styles\";\n\nconst makeBadgeDeltaClassName = makeClassName(\"BadgeDelta\");\n\nexport interface BadgeDeltaProps extends React.HTMLAttributes<HTMLSpanElement> {\n  deltaType?: DeltaType;\n  isIncreasePositive?: boolean;\n  size?: Size;\n  tooltip?: string;\n}\n\nconst BadgeDelta = React.forwardRef<HTMLSpanElement, BadgeDeltaProps>((props, ref) => {\n  const {\n    deltaType = DeltaTypes.Increase,\n    isIncreasePositive = true,\n    size = Sizes.SM,\n    tooltip,\n    children,\n    className,\n    ...other\n  } = props;\n\n  const Icon = deltaIcons[deltaType];\n  const mappedDeltaType = mapInputsToDeltaType(deltaType, isIncreasePositive);\n  const badgeProportions = children ? badgeProportionsWithText : badgeProportionsIconOnly;\n  const { tooltipProps, getReferenceProps } = useTooltip();\n\n  return (\n    <span\n      ref={mergeRefs([ref, tooltipProps.refs.setReference])}\n      className={tremorTwMerge(\n        makeBadgeDeltaClassName(\"root\"),\n        // common\n        \"w-max shrink-0 inline-flex justify-center items-center cursor-default rounded-tremor-small ring-1 ring-inset\",\n        colors[mappedDeltaType].bgColor,\n        colors[mappedDeltaType].textColor,\n        colors[mappedDeltaType].ringColor,\n        badgeProportions[size].paddingX,\n        badgeProportions[size].paddingY,\n        badgeProportions[size].fontSize,\n        // light\n        \"bg-opacity-10 ring-opacity-20\",\n        // dark\n        \"dark:bg-opacity-5 dark:ring-opacity-60\",\n        className,\n      )}\n      {...getReferenceProps}\n      {...other}\n    >\n      <Tooltip text={tooltip} {...tooltipProps} />\n      <Icon\n        className={tremorTwMerge(\n          makeBadgeDeltaClassName(\"icon\"),\n          \"shrink-0\",\n          children ? tremorTwMerge(\"-ml-1 mr-1.5\") : iconSizes[size].height,\n          iconSizes[size].width,\n        )}\n      />\n      {children ? (\n        <span className={tremorTwMerge(makeBadgeDeltaClassName(\"text\"), \"whitespace-nowrap\")}>\n          {children}\n        </span>\n      ) : null}\n    </span>\n  );\n});\n\nBadgeDelta.displayName = \"BadgeDelta\";\n\nexport default BadgeDelta;\n"
  },
  {
    "path": "src/components/icon-elements/BadgeDelta/index.ts",
    "content": "export { default as BadgeDelta } from \"./BadgeDelta\";\nexport type { BadgeDeltaProps } from \"./BadgeDelta\";\n"
  },
  {
    "path": "src/components/icon-elements/BadgeDelta/styles.ts",
    "content": "import { BaseColors, DeltaTypes, getColorClassNames, colorPalette } from \"lib\";\n\nimport {\n  ArrowDownIcon,\n  ArrowDownRightIcon,\n  ArrowRightIcon,\n  ArrowUpIcon,\n  ArrowUpRightIcon,\n} from \"assets\";\n\nexport type BadgeProportionTypes = {\n  paddingX: string;\n  paddingY: string;\n  fontSize: string;\n};\n\nexport const badgeProportionsIconOnly: {\n  [char: string]: BadgeProportionTypes;\n} = {\n  xs: {\n    paddingX: \"px-2\",\n    paddingY: \"py-0.5\",\n    fontSize: \"text-xs\",\n  },\n  sm: {\n    paddingX: \"px-2.5\",\n    paddingY: \"py-1\",\n    fontSize: \"text-sm\",\n  },\n  md: {\n    paddingX: \"px-3\",\n    paddingY: \"py-1.5\",\n    fontSize: \"text-md\",\n  },\n  lg: {\n    paddingX: \"px-3.5\",\n    paddingY: \"py-1.5\",\n    fontSize: \"text-lg\",\n  },\n  xl: {\n    paddingX: \"px-3.5\",\n    paddingY: \"py-1.5\",\n    fontSize: \"text-xl\",\n  },\n};\n\nexport const badgeProportionsWithText: {\n  [char: string]: BadgeProportionTypes;\n} = {\n  xs: {\n    paddingX: \"px-2\",\n    paddingY: \"py-0.5\",\n    fontSize: \"text-xs\",\n  },\n  sm: {\n    paddingX: \"px-2.5\",\n    paddingY: \"py-0.5\",\n    fontSize: \"text-sm\",\n  },\n  md: {\n    paddingX: \"px-3\",\n    paddingY: \"py-0.5\",\n    fontSize: \"text-md\",\n  },\n  lg: {\n    paddingX: \"px-3.5\",\n    paddingY: \"py-0.5\",\n    fontSize: \"text-lg\",\n  },\n  xl: {\n    paddingX: \"px-4\",\n    paddingY: \"py-1\",\n    fontSize: \"text-xl\",\n  },\n};\n\nexport const iconSizes: {\n  [size: string]: {\n    height: string;\n    width: string;\n  };\n} = {\n  xs: {\n    height: \"h-4\",\n    width: \"w-4\",\n  },\n  sm: {\n    height: \"h-4\",\n    width: \"w-4\",\n  },\n  md: {\n    height: \"h-4\",\n    width: \"w-4\",\n  },\n  lg: {\n    height: \"h-5\",\n    width: \"w-5\",\n  },\n  xl: {\n    height: \"h-6\",\n    width: \"w-6\",\n  },\n};\n\nexport type ColorTypes = {\n  bgColor: string;\n  textColor: string;\n  ringColor: string;\n};\n\nexport const colors: { [key: string]: ColorTypes } = {\n  [DeltaTypes.Increase]: {\n    bgColor: getColorClassNames(BaseColors.Emerald, colorPalette.background).bgColor,\n    textColor: getColorClassNames(BaseColors.Emerald, colorPalette.iconText).textColor,\n    ringColor: getColorClassNames(BaseColors.Emerald, colorPalette.iconRing).ringColor,\n  },\n  [DeltaTypes.ModerateIncrease]: {\n    bgColor: getColorClassNames(BaseColors.Emerald, colorPalette.background).bgColor,\n    textColor: getColorClassNames(BaseColors.Emerald, colorPalette.iconText).textColor,\n    ringColor: getColorClassNames(BaseColors.Emerald, colorPalette.iconRing).ringColor,\n  },\n  [DeltaTypes.Decrease]: {\n    bgColor: getColorClassNames(BaseColors.Red, colorPalette.background).bgColor,\n    textColor: getColorClassNames(BaseColors.Red, colorPalette.iconText).textColor,\n    ringColor: getColorClassNames(BaseColors.Red, colorPalette.iconRing).ringColor,\n  },\n  [DeltaTypes.ModerateDecrease]: {\n    bgColor: getColorClassNames(BaseColors.Red, colorPalette.background).bgColor,\n    textColor: getColorClassNames(BaseColors.Red, colorPalette.iconText).textColor,\n    ringColor: getColorClassNames(BaseColors.Red, colorPalette.iconRing).ringColor,\n  },\n  [DeltaTypes.Unchanged]: {\n    bgColor: getColorClassNames(BaseColors.Orange, colorPalette.background).bgColor,\n    textColor: getColorClassNames(BaseColors.Orange, colorPalette.iconText).textColor,\n    ringColor: getColorClassNames(BaseColors.Orange, colorPalette.iconRing).ringColor,\n  },\n};\n\nexport const deltaIcons: { [key: string]: React.ElementType } = {\n  [DeltaTypes.Increase]: ArrowUpIcon,\n  [DeltaTypes.ModerateIncrease]: ArrowUpRightIcon,\n  [DeltaTypes.Decrease]: ArrowDownIcon,\n  [DeltaTypes.ModerateDecrease]: ArrowDownRightIcon,\n  [DeltaTypes.Unchanged]: ArrowRightIcon,\n};\n"
  },
  {
    "path": "src/components/icon-elements/Icon/Icon.tsx",
    "content": "\"use client\";\nimport React from \"react\";\n\nimport Tooltip, { useTooltip } from \"components/util-elements/Tooltip/Tooltip\";\nimport { makeClassName, mergeRefs, Sizes, tremorTwMerge, Color, IconVariant, Size } from \"lib\";\nimport { getIconColors, iconSizes, shape, wrapperProportions } from \"./styles\";\n\nconst makeIconClassName = makeClassName(\"Icon\");\n\nexport const IconVariants: { [key: string]: IconVariant } = {\n  Simple: \"simple\",\n  Light: \"light\",\n  Shadow: \"shadow\",\n  Solid: \"solid\",\n  Outlined: \"outlined\",\n};\n\nexport interface IconProps extends React.HTMLAttributes<HTMLSpanElement> {\n  icon: React.ElementType;\n  variant?: IconVariant;\n  tooltip?: string;\n  size?: Size;\n  color?: Color;\n}\n\nconst Icon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {\n  const {\n    icon,\n    variant = IconVariants.Simple,\n    tooltip,\n    size = Sizes.SM,\n    color,\n    className,\n    ...other\n  } = props;\n  const Icon = icon;\n  const iconColorStyles = getIconColors(variant, color);\n\n  const { tooltipProps, getReferenceProps } = useTooltip();\n\n  return (\n    <span\n      ref={mergeRefs([ref, tooltipProps.refs.setReference])}\n      className={tremorTwMerge(\n        makeIconClassName(\"root\"),\n        \"inline-flex shrink-0 items-center justify-center\",\n        iconColorStyles.bgColor,\n        iconColorStyles.textColor,\n        iconColorStyles.borderColor,\n        iconColorStyles.ringColor,\n        shape[variant].rounded,\n        shape[variant].border,\n        shape[variant].shadow,\n        shape[variant].ring,\n        wrapperProportions[size].paddingX,\n        wrapperProportions[size].paddingY,\n        className,\n      )}\n      {...getReferenceProps}\n      {...other}\n    >\n      <Tooltip text={tooltip} {...tooltipProps} />\n      <Icon\n        className={tremorTwMerge(\n          makeIconClassName(\"icon\"),\n          \"shrink-0\",\n          iconSizes[size].height,\n          iconSizes[size].width,\n        )}\n      />\n    </span>\n  );\n});\n\nIcon.displayName = \"Icon\";\n\nexport default Icon;\n"
  },
  {
    "path": "src/components/icon-elements/Icon/index.ts",
    "content": "export { default as Icon } from \"./Icon\";\nexport type { IconProps } from \"./Icon\";\n"
  },
  {
    "path": "src/components/icon-elements/Icon/styles.ts",
    "content": "import { getColorClassNames, tremorTwMerge, colorPalette, Color, IconVariant } from \"lib\";\n\nexport type WrapperProportionTypes = {\n  paddingX: string;\n  paddingY: string;\n};\n\nexport const wrapperProportions: { [size: string]: WrapperProportionTypes } = {\n  xs: {\n    paddingX: \"px-1.5\",\n    paddingY: \"py-1.5\",\n  },\n  sm: {\n    paddingX: \"px-1.5\",\n    paddingY: \"py-1.5\",\n  },\n  md: {\n    paddingX: \"px-2\",\n    paddingY: \"py-2\",\n  },\n  lg: {\n    paddingX: \"px-2\",\n    paddingY: \"py-2\",\n  },\n  xl: {\n    paddingX: \"px-2.5\",\n    paddingY: \"py-2.5\",\n  },\n};\n\nexport const iconSizes: {\n  [size: string]: {\n    height: string;\n    width: string;\n  };\n} = {\n  xs: {\n    height: \"h-3\",\n    width: \"w-3\",\n  },\n  sm: {\n    height: \"h-5\",\n    width: \"w-5\",\n  },\n  md: {\n    height: \"h-5\",\n    width: \"w-5\",\n  },\n  lg: {\n    height: \"h-7\",\n    width: \"w-7\",\n  },\n  xl: {\n    height: \"h-9\",\n    width: \"w-9\",\n  },\n};\n\nexport type ShapeTypes = {\n  rounded: string;\n  border: string;\n  ring: string;\n  shadow: string;\n};\n\nexport const shape: { [style: string]: ShapeTypes } = {\n  simple: {\n    rounded: \"\",\n    border: \"\",\n    ring: \"\",\n    shadow: \"\",\n  },\n  light: {\n    rounded: \"rounded-tremor-default\",\n    border: \"\",\n    ring: \"\",\n    shadow: \"\",\n  },\n  shadow: {\n    rounded: \"rounded-tremor-default\",\n    border: \"border\",\n    ring: \"\",\n    shadow: \"shadow-tremor-card dark:shadow-dark-tremor-card\",\n  },\n  solid: {\n    rounded: \"rounded-tremor-default\",\n    border: \"border-2\",\n    ring: \"ring-1\",\n    shadow: \"\",\n  },\n  outlined: {\n    rounded: \"rounded-tremor-default\",\n    border: \"border\",\n    ring: \"ring-2\",\n    shadow: \"\",\n  },\n};\n\nexport const getIconColors = (variant: IconVariant, color?: Color) => {\n  switch (variant) {\n    case \"simple\":\n      return {\n        textColor: color\n          ? getColorClassNames(color, colorPalette.text).textColor\n          : \"text-tremor-brand dark:text-dark-tremor-brand\",\n        bgColor: \"\",\n        borderColor: \"\",\n        ringColor: \"\",\n      };\n    case \"light\":\n      return {\n        textColor: color\n          ? getColorClassNames(color, colorPalette.text).textColor\n          : \"text-tremor-brand dark:text-dark-tremor-brand\",\n        bgColor: color\n          ? tremorTwMerge(\n              getColorClassNames(color, colorPalette.background).bgColor,\n              \"bg-opacity-20\",\n            )\n          : \"bg-tremor-brand-muted dark:bg-dark-tremor-brand-muted\",\n        borderColor: \"\",\n        ringColor: \"\",\n      };\n    case \"shadow\":\n      return {\n        textColor: color\n          ? getColorClassNames(color, colorPalette.text).textColor\n          : \"text-tremor-brand dark:text-dark-tremor-brand\",\n        bgColor: color\n          ? tremorTwMerge(\n              getColorClassNames(color, colorPalette.background).bgColor,\n              \"bg-opacity-20\",\n            )\n          : \"bg-tremor-background dark:bg-dark-tremor-background\",\n        borderColor: \"border-tremor-border dark:border-dark-tremor-border\",\n        ringColor: \"\",\n      };\n    case \"solid\":\n      return {\n        textColor: color\n          ? getColorClassNames(color, colorPalette.text).textColor\n          : \"text-tremor-brand-inverted dark:text-dark-tremor-brand-inverted\",\n        bgColor: color\n          ? tremorTwMerge(\n              getColorClassNames(color, colorPalette.background).bgColor,\n              \"bg-opacity-20\",\n            )\n          : \"bg-tremor-brand dark:bg-dark-tremor-brand\",\n        borderColor: \"border-tremor-brand-inverted dark:border-dark-tremor-brand-inverted\",\n        ringColor: \"ring-tremor-ring dark:ring-dark-tremor-ring\",\n      };\n    case \"outlined\":\n      return {\n        textColor: color\n          ? getColorClassNames(color, colorPalette.text).textColor\n          : \"text-tremor-brand dark:text-dark-tremor-brand\",\n        bgColor: color\n          ? tremorTwMerge(\n              getColorClassNames(color, colorPalette.background).bgColor,\n              \"bg-opacity-20\",\n            )\n          : \"bg-tremor-background dark:bg-dark-tremor-background\",\n        borderColor: color\n          ? getColorClassNames(color, colorPalette.ring).borderColor\n          : \"border-tremor-brand-subtle dark:border-dark-tremor-brand-subtle\",\n        ringColor: color\n          ? tremorTwMerge(getColorClassNames(color, colorPalette.ring).ringColor, \"ring-opacity-40\")\n          : \"ring-tremor-brand-muted dark:ring-dark-tremor-brand-muted\",\n      };\n  }\n};\n"
  },
  {
    "path": "src/components/icon-elements/index.ts",
    "content": "export * from \"./Badge\";\nexport * from \"./BadgeDelta\";\nexport * from \"./Icon\";\n"
  },
  {
    "path": "src/components/index.ts",
    "content": "export * from \"./chart-elements\";\nexport * from \"./icon-elements\";\nexport * from \"./input-elements\";\nexport * from \"./layout-elements\";\nexport * from \"./list-elements\";\nexport * from \"./spark-elements\";\nexport * from \"./text-elements\";\nexport * from \"./vis-elements\";\n"
  },
  {
    "path": "src/components/input-elements/BaseInput.tsx",
    "content": "\"use client\";\nimport React, { ReactNode, useCallback, useRef, useState } from \"react\";\nimport { ExclamationFilledIcon, EyeIcon, EyeOffIcon } from \"assets\";\nimport { getSelectButtonColors, hasValue } from \"components/input-elements/selectUtils\";\nimport { mergeRefs, tremorTwMerge } from \"lib\";\n\nexport interface BaseInputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  type?: \"text\" | \"password\" | \"email\" | \"url\" | \"number\" | \"search\" | \"tel\";\n  defaultValue?: string | number;\n  value?: string | number;\n  icon?: React.ElementType | React.JSXElementConstructor<any>;\n  error?: boolean;\n  errorMessage?: string;\n  disabled?: boolean;\n  stepper?: ReactNode;\n  onValueChange?: (value: any) => void;\n  makeInputClassName: (className: string) => string;\n  pattern?: string;\n}\n\nconst BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>((props, ref) => {\n  const {\n    value,\n    defaultValue,\n    type,\n    placeholder = \"Type...\",\n    icon,\n    error = false,\n    errorMessage,\n    disabled = false,\n    stepper,\n    makeInputClassName,\n    className,\n    onChange,\n    onValueChange,\n    autoFocus,\n    pattern,\n    ...other\n  } = props;\n  const [isFocused, setIsFocused] = useState(autoFocus || false);\n  const [isPasswordVisible, setIsPasswordVisible] = useState(false);\n\n  const toggleIsPasswordVisible = useCallback(\n    () => setIsPasswordVisible(!isPasswordVisible),\n    [isPasswordVisible, setIsPasswordVisible],\n  );\n\n  const Icon = icon;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const hasSelection = hasValue(value || defaultValue);\n\n  React.useEffect(() => {\n    const handleFocus = () => setIsFocused(true);\n    const handleBlur = () => setIsFocused(false);\n\n    const node = inputRef.current;\n    if (node) {\n      node.addEventListener(\"focus\", handleFocus);\n      node.addEventListener(\"blur\", handleBlur);\n\n      // Autofocus logic\n      if (autoFocus) {\n        node.focus();\n      }\n    }\n\n    return () => {\n      if (node) {\n        node.removeEventListener(\"focus\", handleFocus);\n        node.removeEventListener(\"blur\", handleBlur);\n      }\n    };\n  }, [autoFocus]);\n\n  return (\n    <>\n      <div\n        className={tremorTwMerge(\n          makeInputClassName(\"root\"),\n          // common\n          \"relative w-full flex items-center min-w-[10rem] outline-none rounded-tremor-default transition duration-100 border\",\n          // light\n          \"shadow-tremor-input\",\n          // dark\n          \"dark:shadow-dark-tremor-input\",\n          getSelectButtonColors(hasSelection, disabled, error),\n          isFocused &&\n            tremorTwMerge(\n              // common\n              \"ring-2\",\n              // light\n              \"border-tremor-brand-subtle ring-tremor-brand-muted\",\n              // light\n              \"dark:border-dark-tremor-brand-subtle dark:ring-dark-tremor-brand-muted\",\n            ),\n          className,\n        )}\n      >\n        {Icon ? (\n          <Icon\n            className={tremorTwMerge(\n              makeInputClassName(\"icon\"),\n              // common\n              \"shrink-0 h-5 w-5 mx-2.5 absolute left-0 flex items-center\",\n              // light\n              \"text-tremor-content-subtle\",\n              // light\n              \"dark:text-dark-tremor-content-subtle\",\n            )}\n          />\n        ) : null}\n        <input\n          ref={mergeRefs([inputRef, ref])}\n          defaultValue={defaultValue}\n          value={value}\n          type={isPasswordVisible ? \"text\" : type}\n          className={tremorTwMerge(\n            makeInputClassName(\"input\"),\n            // common\n            \"w-full bg-transparent focus:outline-none focus:ring-0 border-none text-tremor-default rounded-tremor-default transition duration-100 py-2\",\n            // light\n            \"text-tremor-content-emphasis\",\n            // dark\n            \"dark:text-dark-tremor-content-emphasis\",\n            \"[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none\",\n            type === \"password\" ? (error ? \"pr-16\" : \"pr-12\") : error ? \"pr-8\" : \"pr-3\",\n            Icon ? \"pl-10\" : \"pl-3\",\n            disabled\n              ? \"placeholder:text-tremor-content-subtle dark:placeholder:text-dark-tremor-content-subtle\"\n              : \"placeholder:text-tremor-content dark:placeholder:text-dark-tremor-content\",\n          )}\n          placeholder={placeholder}\n          disabled={disabled}\n          data-testid=\"base-input\"\n          onChange={(e) => {\n            onChange?.(e);\n            onValueChange?.(e.target.value);\n          }}\n          pattern={pattern}\n          {...other}\n        />\n        {type === \"password\" && !disabled ? (\n          <button\n            className={tremorTwMerge(\n              makeInputClassName(\"toggleButton\"),\n              \"absolute inset-y-0 right-0 flex items-center px-2.5 rounded-lg\",\n            )}\n            type=\"button\"\n            onClick={() => toggleIsPasswordVisible()}\n            aria-label={isPasswordVisible ? \"Hide password\" : \"Show Password\"}\n          >\n            {isPasswordVisible ? (\n              <EyeOffIcon\n                className={tremorTwMerge(\n                  // common\n                  \"flex-none h-5 w-5 transition\",\n                  // light\n                  \"text-tremor-content-subtle hover:text-tremor-content\",\n                  // dark\n                  \"dark:text-dark-tremor-content-subtle hover:dark:text-dark-tremor-content\",\n                )}\n                aria-hidden\n              />\n            ) : (\n              <EyeIcon\n                className={tremorTwMerge(\n                  // common\n                  \"flex-none h-5 w-5 transition\",\n                  // light\n                  \"text-tremor-content-subtle hover:text-tremor-content\",\n                  // dark\n                  \"dark:text-dark-tremor-content-subtle hover:dark:text-dark-tremor-content\",\n                )}\n                aria-hidden\n              />\n            )}\n          </button>\n        ) : null}\n        {error ? (\n          <ExclamationFilledIcon\n            className={tremorTwMerge(\n              makeInputClassName(\"errorIcon\"),\n              \"text-red-500 shrink-0 h-5 w-5 absolute right-0 flex items-center\",\n              type === \"password\"\n                ? \"mr-10\"\n                : type === \"number\"\n                  ? stepper\n                    ? \"mr-20\"\n                    : \"mr-3\"\n                  : \"mx-2.5\",\n            )}\n          />\n        ) : null}\n        {stepper ?? null}\n      </div>\n      {error && errorMessage ? (\n        <p\n          className={tremorTwMerge(makeInputClassName(\"errorMessage\"), \"text-sm text-red-500 mt-1\")}\n        >\n          {errorMessage}\n        </p>\n      ) : null}\n    </>\n  );\n});\n\nBaseInput.displayName = \"BaseInput\";\n\nexport default BaseInput;\n"
  },
  {
    "path": "src/components/input-elements/Button/Button.tsx",
    "content": "\"use client\";\nimport Tooltip, { useTooltip } from \"components/util-elements/Tooltip/Tooltip\";\nimport React, { useEffect } from \"react\";\nimport { useTransition, type TransitionStatus } from \"react-transition-state\";\n\nimport { HorizontalPositions, makeClassName, mergeRefs, Sizes, tremorTwMerge } from \"lib\";\n\nimport { LoadingSpinner } from \"assets\";\nimport { ButtonVariant, Color, HorizontalPosition, Size } from \"../../../lib\";\nimport { getButtonColors, getButtonProportions, iconSizes } from \"./styles\";\n\nconst makeButtonClassName = makeClassName(\"Button\");\n\nexport interface ButtonIconOrSpinnerProps {\n  loading: boolean;\n  iconSize: string;\n  iconPosition: string;\n  Icon: React.ElementType | undefined;\n  needMargin: boolean;\n  transitionStatus: TransitionStatus;\n}\n\nexport const ButtonIconOrSpinner = ({\n  loading,\n  iconSize,\n  iconPosition,\n  Icon,\n  needMargin,\n  transitionStatus,\n}: ButtonIconOrSpinnerProps) => {\n  Icon = Icon!;\n\n  const margin = !needMargin\n    ? \"\"\n    : iconPosition === HorizontalPositions.Left\n      ? tremorTwMerge(\"-ml-1\", \"mr-1.5\")\n      : tremorTwMerge(\"-mr-1\", \"ml-1.5\");\n\n  const defaultSpinnerSize = tremorTwMerge(\"w-0 h-0\");\n  const spinnerSize: { [key: string]: any } = {\n    default: defaultSpinnerSize,\n    entering: defaultSpinnerSize,\n    entered: iconSize,\n    exiting: iconSize,\n    exited: defaultSpinnerSize,\n  };\n\n  return loading ? (\n    <LoadingSpinner\n      className={tremorTwMerge(\n        makeButtonClassName(\"icon\"),\n        \"animate-spin shrink-0\",\n        margin,\n        spinnerSize.default,\n        spinnerSize[transitionStatus],\n      )}\n      style={{ transition: `width 150ms` }}\n    />\n  ) : (\n    <Icon className={tremorTwMerge(makeButtonClassName(\"icon\"), \"shrink-0\", iconSize, margin)} />\n  );\n};\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  icon?: React.ElementType;\n  iconPosition?: HorizontalPosition;\n  size?: Size;\n  color?: Color;\n  variant?: ButtonVariant;\n  disabled?: boolean;\n  loading?: boolean;\n  loadingText?: string;\n  tooltip?: string;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n  const {\n    icon,\n    iconPosition = HorizontalPositions.Left,\n    size = Sizes.SM,\n    color,\n    variant = \"primary\",\n    disabled,\n    loading = false,\n    loadingText,\n    children,\n    tooltip,\n    className,\n    ...other\n  } = props;\n\n  const Icon = icon;\n\n  const isDisabled = loading || disabled;\n  const showButtonIconOrSpinner = Icon !== undefined || loading;\n  const showLoadingText = loading && loadingText;\n  const needIconMargin = children || showLoadingText ? true : false;\n\n  const iconSize = tremorTwMerge(iconSizes[size].height, iconSizes[size].width);\n  const buttonShapeStyles =\n    variant !== \"light\"\n      ? tremorTwMerge(\n          // common\n          \"rounded-tremor-default border\",\n          // light\n          \"shadow-tremor-input\",\n          // dark\n          \"dark:shadow-dark-tremor-input\",\n        )\n      : \"\";\n  const buttonColorStyles = getButtonColors(variant, color);\n  const buttonProportionStyles = getButtonProportions(variant)[size];\n  const delay = 300;\n  const { tooltipProps, getReferenceProps } = useTooltip(delay);\n\n  const [transitionState, toggleTransition] = useTransition({ timeout: 50 });\n\n  useEffect(() => {\n    toggleTransition(loading);\n  }, [loading]);\n\n  return (\n    // eslint-disable-next-line react/button-has-type\n    <button\n      ref={mergeRefs([ref, tooltipProps.refs.setReference])}\n      className={tremorTwMerge(\n        makeButtonClassName(\"root\"),\n        // common\n        \"shrink-0 inline-flex justify-center items-center group font-medium outline-none\",\n        buttonShapeStyles,\n        buttonProportionStyles.paddingX,\n        buttonProportionStyles.paddingY,\n        buttonProportionStyles.fontSize,\n        buttonColorStyles.textColor,\n        buttonColorStyles.bgColor,\n        buttonColorStyles.borderColor,\n        buttonColorStyles.hoverBorderColor,\n        !isDisabled\n          ? tremorTwMerge(\n              getButtonColors(variant, color).hoverTextColor,\n              getButtonColors(variant, color).hoverBgColor,\n              getButtonColors(variant, color).hoverBorderColor,\n            )\n          : \"opacity-50 cursor-not-allowed\",\n        className,\n      )}\n      disabled={isDisabled}\n      {...getReferenceProps}\n      {...other}\n    >\n      <Tooltip text={tooltip} {...tooltipProps} />\n      {showButtonIconOrSpinner && iconPosition !== HorizontalPositions.Right ? (\n        <ButtonIconOrSpinner\n          loading={loading}\n          iconSize={iconSize}\n          iconPosition={iconPosition}\n          Icon={Icon}\n          transitionStatus={transitionState.status}\n          needMargin={needIconMargin}\n        />\n      ) : null}\n      {showLoadingText || children ? (\n        <span\n          className={tremorTwMerge(\n            makeButtonClassName(\"text\"),\n            \"text-tremor-default whitespace-nowrap\",\n          )}\n        >\n          {showLoadingText ? loadingText : children}\n        </span>\n      ) : null}\n      {showButtonIconOrSpinner && iconPosition === HorizontalPositions.Right ? (\n        <ButtonIconOrSpinner\n          loading={loading}\n          iconSize={iconSize}\n          iconPosition={iconPosition}\n          Icon={Icon}\n          transitionStatus={transitionState.status}\n          needMargin={needIconMargin}\n        />\n      ) : null}\n    </button>\n  );\n});\n\nButton.displayName = \"Button\";\n\nexport default Button;\n"
  },
  {
    "path": "src/components/input-elements/Button/index.ts",
    "content": "export { default as Button } from \"./Button\";\nexport type { ButtonProps } from \"./Button\";\n"
  },
  {
    "path": "src/components/input-elements/Button/styles.ts",
    "content": "import { getColorClassNames, tremorTwMerge, ButtonVariant, Color, colorPalette } from \"lib\";\n\nexport const iconSizes: {\n  [size: string]: {\n    height: string;\n    width: string;\n  };\n} = {\n  xs: {\n    height: \"h-4\",\n    width: \"w-4\",\n  },\n  sm: {\n    height: \"h-5\",\n    width: \"w-5\",\n  },\n  md: {\n    height: \"h-5\",\n    width: \"w-5\",\n  },\n  lg: {\n    height: \"h-6\",\n    width: \"w-6\",\n  },\n  xl: {\n    height: \"h-6\",\n    width: \"w-6\",\n  },\n};\n\nexport const getButtonProportions = (variant: ButtonVariant) => {\n  if (!(variant === \"light\")) {\n    return {\n      xs: {\n        paddingX: \"px-2.5\",\n        paddingY: \"py-1.5\",\n        fontSize: \"text-xs\",\n      },\n      sm: {\n        paddingX: \"px-4\",\n        paddingY: \"py-2\",\n        fontSize: \"text-sm\",\n      },\n      md: {\n        paddingX: \"px-4\",\n        paddingY: \"py-2\",\n        fontSize: \"text-md\",\n      },\n      lg: {\n        paddingX: \"px-4\",\n        paddingY: \"py-2.5\",\n        fontSize: \"text-lg\",\n      },\n      xl: {\n        paddingX: \"px-4\",\n        paddingY: \"py-3\",\n        fontSize: \"text-xl\",\n      },\n    };\n  }\n  return {\n    xs: {\n      paddingX: \"\",\n      paddingY: \"\",\n      fontSize: \"text-xs\",\n    },\n    sm: {\n      paddingX: \"\",\n      paddingY: \"\",\n      fontSize: \"text-sm\",\n    },\n    md: {\n      paddingX: \"\",\n      paddingY: \"\",\n      fontSize: \"text-md\",\n    },\n    lg: {\n      paddingX: \"\",\n      paddingY: \"\",\n      fontSize: \"text-lg\",\n    },\n    xl: {\n      paddingX: \"\",\n      paddingY: \"\",\n      fontSize: \"text-xl\",\n    },\n  };\n};\n\nexport const getButtonColors = (variant: ButtonVariant, color?: Color) => {\n  switch (variant) {\n    case \"primary\":\n      return {\n        textColor: color\n          ? getColorClassNames(\"white\").textColor\n          : \"text-tremor-brand-inverted dark:text-dark-tremor-brand-inverted\",\n        hoverTextColor: color\n          ? getColorClassNames(\"white\").textColor\n          : \"text-tremor-brand-inverted dark:text-dark-tremor-brand-inverted\",\n        bgColor: color\n          ? getColorClassNames(color, colorPalette.background).bgColor\n          : \"bg-tremor-brand dark:bg-dark-tremor-brand\",\n        hoverBgColor: color\n          ? getColorClassNames(color, colorPalette.darkBackground).hoverBgColor\n          : \"hover:bg-tremor-brand-emphasis dark:hover:bg-dark-tremor-brand-emphasis\",\n        borderColor: color\n          ? getColorClassNames(color, colorPalette.border).borderColor\n          : \"border-tremor-brand dark:border-dark-tremor-brand\",\n        hoverBorderColor: color\n          ? getColorClassNames(color, colorPalette.darkBorder).hoverBorderColor\n          : \"hover:border-tremor-brand-emphasis dark:hover:border-dark-tremor-brand-emphasis\",\n      };\n    case \"secondary\":\n      return {\n        textColor: color\n          ? getColorClassNames(color, colorPalette.text).textColor\n          : \"text-tremor-brand dark:text-dark-tremor-brand\",\n        hoverTextColor: color\n          ? getColorClassNames(color, colorPalette.text).textColor\n          : \"hover:text-tremor-brand-emphasis dark:hover:text-dark-tremor-brand-emphasis\",\n        bgColor: getColorClassNames(\"transparent\").bgColor,\n        hoverBgColor: color\n          ? tremorTwMerge(\n              getColorClassNames(color, colorPalette.background).hoverBgColor,\n              \"hover:bg-opacity-20 dark:hover:bg-opacity-20\",\n            )\n          : \"hover:bg-tremor-brand-faint dark:hover:bg-dark-tremor-brand-faint\",\n        borderColor: color\n          ? getColorClassNames(color, colorPalette.border).borderColor\n          : \"border-tremor-brand dark:border-dark-tremor-brand\",\n      };\n    case \"light\":\n      return {\n        textColor: color\n          ? getColorClassNames(color, colorPalette.text).textColor\n          : \"text-tremor-brand dark:text-dark-tremor-brand\",\n        hoverTextColor: color\n          ? getColorClassNames(color, colorPalette.darkText).hoverTextColor\n          : \"hover:text-tremor-brand-emphasis dark:hover:text-dark-tremor-brand-emphasis\",\n        bgColor: getColorClassNames(\"transparent\").bgColor,\n        borderColor: \"\",\n        hoverBorderColor: \"\",\n      };\n  }\n};\n"
  },
  {
    "path": "src/components/input-elements/Calendar/Calendar.tsx",
    "content": "\"use client\";\nimport React from \"react\";\nimport {\n  DayPicker,\n  DayPickerRangeProps,\n  DayPickerSingleProps,\n  useNavigation,\n} from \"react-day-picker\";\n\nimport {\n  ArrowLeftHeadIcon,\n  ArrowRightHeadIcon,\n  DoubleArrowLeftHeadIcon,\n  DoubleArrowRightHeadIcon,\n} from \"assets\";\nimport { addYears, format } from \"date-fns\";\nimport { Text } from \"../../text-elements/Text\";\nimport { NavButton } from \"./NavButton\";\n\nfunction Calendar<T extends DayPickerSingleProps | DayPickerRangeProps>({\n  mode,\n  defaultMonth,\n  selected,\n  onSelect,\n  locale,\n  disabled,\n  enableYearNavigation,\n  classNames,\n  weekStartsOn = 0,\n  ...other\n}: T & { enableYearNavigation: boolean }) {\n  return (\n    <DayPicker\n      showOutsideDays={true}\n      mode={mode as any}\n      defaultMonth={defaultMonth}\n      selected={selected}\n      onSelect={onSelect as any}\n      locale={locale}\n      disabled={disabled}\n      weekStartsOn={weekStartsOn}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-2 relative items-center\",\n        caption_label:\n          \"text-tremor-default text-tremor-content-emphasis dark:text-dark-tremor-content-emphasis font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button:\n          \"flex items-center justify-center p-1 h-7 w-7 outline-none focus:ring-2 transition duration-100 border border-tremor-border dark:border-dark-tremor-border hover:bg-tremor-background-muted dark:hover:bg-dark-tremor-background-muted rounded-tremor-small focus:border-tremor-brand-subtle dark:focus:border-dark-tremor-brand-subtle focus:ring-tremor-brand-muted dark:focus:ring-dark-tremor-brand-muted text-tremor-content-subtle dark:text-dark-tremor-content-subtle hover:text-tremor-content dark:hover:text-dark-tremor-content\",\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"w-9 font-normal text-center text-tremor-content-subtle dark:text-dark-tremor-content-subtle\",\n        row: \"flex w-full mt-0.5\",\n        cell: \"text-center p-0 relative focus-within:relative text-tremor-default text-tremor-content-emphasis dark:text-dark-tremor-content-emphasis\",\n        day: \"h-9 w-9 p-0 hover:bg-tremor-background-subtle dark:hover:bg-dark-tremor-background-subtle outline-tremor-brand dark:outline-dark-tremor-brand rounded-tremor-default\",\n        day_today: \"font-bold\",\n        day_selected:\n          \"aria-selected:bg-tremor-background-emphasis aria-selected:text-tremor-content-inverted dark:aria-selected:bg-dark-tremor-background-emphasis dark:aria-selected:text-dark-tremor-content-inverted \",\n        day_disabled:\n          \"text-tremor-content-subtle dark:text-dark-tremor-content-subtle disabled:hover:bg-transparent\",\n        day_outside: \"text-tremor-content-subtle dark:text-dark-tremor-content-subtle\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ArrowLeftHeadIcon className=\"h-4 w-4\" {...props} />,\n        IconRight: ({ ...props }) => <ArrowRightHeadIcon className=\"h-4 w-4\" {...props} />,\n        Caption: ({ ...props }) => {\n          const { goToMonth, nextMonth, previousMonth, currentMonth } = useNavigation();\n\n          return (\n            <div className=\"flex justify-between items-center\">\n              <div className=\"flex items-center space-x-1\">\n                {enableYearNavigation && (\n                  <NavButton\n                    onClick={() => currentMonth && goToMonth(addYears(currentMonth, -1))}\n                    icon={DoubleArrowLeftHeadIcon}\n                  />\n                )}\n                <NavButton\n                  onClick={() => previousMonth && goToMonth(previousMonth)}\n                  icon={ArrowLeftHeadIcon}\n                />\n              </div>\n\n              <Text className=\"text-tremor-default tabular-nums capitalize text-tremor-content-emphasis dark:text-dark-tremor-content-emphasis font-medium\">\n                {format(props.displayMonth, \"LLLL yyy\", { locale })}\n              </Text>\n\n              <div className=\"flex items-center space-x-1\">\n                <NavButton\n                  onClick={() => nextMonth && goToMonth(nextMonth)}\n                  icon={ArrowRightHeadIcon}\n                />\n                {enableYearNavigation && (\n                  <NavButton\n                    onClick={() => currentMonth && goToMonth(addYears(currentMonth, 1))}\n                    icon={DoubleArrowRightHeadIcon}\n                  />\n                )}\n              </div>\n            </div>\n          );\n        },\n      }}\n      {...other}\n    />\n  );\n}\n\nCalendar.displayName = \"DateRangePicker\";\n\nexport default Calendar;\n"
  },
  {
    "path": "src/components/input-elements/Calendar/NavButton.tsx",
    "content": "import { Icon as IconComponent } from \"components/icon-elements\";\nimport { tremorTwMerge } from \"lib\";\nimport React from \"react\";\n\ninterface NavButtonProps extends React.HTMLAttributes<HTMLButtonElement> {\n  onClick: () => void;\n  icon: React.ElementType;\n}\n\nexport const NavButton = ({ onClick, icon, ...other }: NavButtonProps) => {\n  const Icon = icon;\n  return (\n    <button\n      type=\"button\"\n      className={tremorTwMerge(\n        \"flex items-center justify-center p-1 h-7 w-7 outline-none focus:ring-2 transition duration-100 border border-tremor-border dark:border-dark-tremor-border hover:bg-tremor-background-muted dark:hover:bg-dark-tremor-background-muted rounded-tremor-small focus:border-tremor-brand-subtle select-none dark:focus:border-dark-tremor-brand-subtle focus:ring-tremor-brand-muted dark:focus:ring-dark-tremor-brand-muted text-tremor-content-subtle dark:text-dark-tremor-content-subtle hover:text-tremor-content dark:hover:text-dark-tremor-content\",\n      )}\n      {...other}\n    >\n      <IconComponent onClick={onClick} icon={Icon} variant=\"simple\" color=\"slate\" size=\"sm\" />\n    </button>\n  );\n};\n"
  },
  {
    "path": "src/components/input-elements/Calendar/index.ts",
    "content": "export { default as Calendar } from \"./Calendar\";\n"
  },
  {
    "path": "src/components/input-elements/DatePicker/DatePicker.tsx",
    "content": "\"use client\";\nimport { tremorTwMerge } from \"lib\";\nimport React, { useMemo } from \"react\";\nimport { DayPickerSingleProps } from \"react-day-picker\";\n\nimport { startOfMonth, startOfToday } from \"date-fns\";\nimport { enUS } from \"date-fns/locale\";\n\nimport { Popover, PopoverButton, PopoverPanel, Transition } from \"@headlessui/react\";\nimport { CalendarIcon, XCircleIcon } from \"assets\";\nimport { Calendar } from \"components/input-elements/Calendar\";\nimport { makeDatePickerClassName } from \"components/input-elements/DatePicker/datePickerUtils\";\nimport { useInternalState } from \"hooks\";\nimport { Color } from \"../../../lib/inputTypes\";\nimport { formatSelectedDates } from \"../DateRangePicker/dateRangePickerUtils\";\nimport { getSelectButtonColors, hasValue } from \"../selectUtils\";\n\nconst TODAY = startOfToday();\n\nexport type Locale = typeof enUS;\n\nexport type DatePickerValue = Date | undefined;\n\nexport interface DatePickerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"value\" | \"defaultValue\"> {\n  value?: Date;\n  defaultValue?: Date;\n  onValueChange?: (value: DatePickerValue) => void;\n  minDate?: Date;\n  maxDate?: Date;\n  placeholder?: string;\n  disabled?: boolean;\n  color?: Color;\n  locale?: Locale;\n  enableClear?: boolean;\n  displayFormat?: string;\n  enableYearNavigation?: boolean;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  disabledDates?: Date[];\n  children?: React.ReactElement[] | React.ReactElement;\n}\n\nconst DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => {\n  const {\n    value,\n    defaultValue,\n    onValueChange,\n    minDate,\n    maxDate,\n    placeholder = \"Select date\",\n    disabled = false,\n    locale = enUS,\n    enableClear = true,\n    displayFormat,\n    className,\n    enableYearNavigation = false,\n    weekStartsOn = 0,\n    disabledDates,\n    ...other\n  } = props;\n\n  const [selectedValue, setSelectedValue] = useInternalState<Date | undefined>(defaultValue, value);\n\n  const disabledDays = useMemo(() => {\n    const disabledDays = [];\n    if (minDate) disabledDays.push({ before: minDate });\n    if (maxDate) disabledDays.push({ after: maxDate });\n    return [...disabledDays, ...(disabledDates ?? [])];\n  }, [minDate, maxDate, disabledDates]);\n\n  const formattedSelection = !selectedValue\n    ? placeholder\n    : formatSelectedDates(selectedValue, undefined, locale, displayFormat);\n  const defaultMonth = startOfMonth(selectedValue ?? maxDate ?? TODAY);\n\n  const isClearEnabled = enableClear && !disabled;\n\n  const handleReset = () => {\n    onValueChange?.(undefined);\n    setSelectedValue(undefined);\n  };\n\n  return (\n    <Popover\n      ref={ref}\n      as=\"div\"\n      className={tremorTwMerge(\n        \"relative w-full min-w-[10rem] text-tremor-default\",\n        \"focus:ring-2 focus:ring-tremor-brand-muted dark:focus:ring-dark-tremor-brand-muted\",\n        className,\n      )}\n      {...other}\n    >\n      <PopoverButton\n        disabled={disabled}\n        className={tremorTwMerge(\n          // common\n          \"w-full outline-none text-left whitespace-nowrap truncate focus:ring-2 transition duration-100 rounded-tremor-default flex flex-nowrap border pl-3 py-2\",\n          // light\n          \"border-tremor-border shadow-tremor-input text-tremor-content-emphasis focus:border-tremor-brand-subtle focus:ring-tremor-brand-muted\",\n          // dark\n          \"dark:border-dark-tremor-border dark:shadow-dark-tremor-input dark:text-dark-tremor-content-emphasis dark:focus:border-dark-tremor-brand-subtle dark:focus:ring-dark-tremor-brand-muted\",\n          isClearEnabled ? \"pr-8\" : \"pr-4\",\n          getSelectButtonColors(hasValue<Date>(selectedValue), disabled),\n        )}\n      >\n        <CalendarIcon\n          className={tremorTwMerge(\n            makeDatePickerClassName(\"calendarIcon\"),\n            \"flex-none shrink-0 h-5 w-5 mr-2 -ml-0.5\",\n            // light\n            \"text-tremor-content-subtle\",\n            // light\n            \"dark:text-dark-tremor-content-subtle\",\n          )}\n          aria-hidden=\"true\"\n        />\n        <p className=\"truncate\">{formattedSelection}</p>\n      </PopoverButton>\n      {isClearEnabled && selectedValue ? (\n        <button\n          type=\"button\"\n          className={tremorTwMerge(\n            \"absolute outline-none inset-y-0 right-0 flex items-center transition duration-100 mr-4\",\n          )}\n          onClick={(e) => {\n            e.preventDefault();\n            handleReset();\n          }}\n        >\n          <XCircleIcon\n            className={tremorTwMerge(\n              // common\n              \"flex-none h-4 w-4\",\n              // light\n              \"text-tremor-content-subtle\",\n              // dark\n              \"dark:text-dark-tremor-content-subtle\",\n            )}\n          />\n        </button>\n      ) : null}\n      <Transition\n        enter=\"transition ease duration-100 transform\"\n        enterFrom=\"opacity-0 -translate-y-4\"\n        enterTo=\"opacity-100 translate-y-0\"\n        leave=\"transition ease duration-100 transform\"\n        leaveFrom=\"opacity-100 translate-y-0\"\n        leaveTo=\"opacity-0 -translate-y-4\"\n      >\n        <PopoverPanel\n          anchor=\"bottom start\"\n          className={tremorTwMerge(\n            // common\n            \"z-10 min-w-min divide-y overflow-y-auto outline-none rounded-tremor-default p-3 border [--anchor-gap:4px]\",\n            // light\n            \"bg-tremor-background border-tremor-border divide-tremor-border shadow-tremor-dropdown\",\n            // dark\n            \"dark:bg-dark-tremor-background dark:border-dark-tremor-border dark:divide-dark-tremor-border dark:shadow-dark-tremor-dropdown\",\n          )}\n        >\n          {({ close }) => (\n            <Calendar<DayPickerSingleProps>\n              showOutsideDays={true}\n              mode=\"single\"\n              defaultMonth={defaultMonth}\n              selected={selectedValue}\n              weekStartsOn={weekStartsOn}\n              onSelect={\n                ((v: Date) => {\n                  onValueChange?.(v);\n                  setSelectedValue(v);\n                  close();\n                }) as any\n              }\n              locale={locale}\n              disabled={disabledDays}\n              enableYearNavigation={enableYearNavigation}\n            />\n          )}\n        </PopoverPanel>\n      </Transition>\n    </Popover>\n  );\n});\n\nDatePicker.displayName = \"DatePicker\";\n\nexport default DatePicker;\n"
  },
  {
    "path": "src/components/input-elements/DatePicker/datePickerUtils.tsx",
    "content": "import { makeClassName } from \"lib\";\n\nexport const makeDatePickerClassName = makeClassName(\"DatePicker\");\n"
  },
  {
    "path": "src/components/input-elements/DatePicker/index.ts",
    "content": "export { default as DatePicker } from \"./DatePicker\";\nexport type { DatePickerProps, DatePickerValue } from \"./DatePicker\";\n"
  },
  {
    "path": "src/components/input-elements/DateRangePicker/DateRangePicker.tsx",
    "content": "\"use client\";\n\nimport { CalendarIcon, XCircleIcon } from \"assets\";\nimport { startOfMonth, startOfToday } from \"date-fns\";\nimport { tremorTwMerge } from \"lib\";\nimport React, { ReactElement, useMemo, useState } from \"react\";\nimport { DateRange, DayPickerRangeProps } from \"react-day-picker\";\nimport {\n  constructValueToNameMapping,\n  getNodeText,\n  getSelectButtonColors,\n  hasValue,\n} from \"../selectUtils\";\nimport {\n  defaultOptions,\n  formatSelectedDates,\n  makeDateRangePickerClassName,\n  parseEndDate,\n  parseStartDate,\n} from \"./dateRangePickerUtils\";\n\nimport { Calendar } from \"components/input-elements/Calendar\";\nimport { DateRangePickerItemProps } from \"components/input-elements/DateRangePicker/DateRangePickerItem\";\nimport { SelectItem } from \"components/input-elements/Select\";\nimport { enUS } from \"date-fns/locale\";\nimport { useInternalState } from \"hooks\";\nimport { Color } from \"../../../lib/inputTypes\";\nimport {\n  Popover,\n  PopoverButton,\n  Transition,\n  PopoverPanel,\n  Listbox,\n  ListboxButton,\n  ListboxOptions,\n} from \"@headlessui/react\";\n\nconst TODAY = startOfToday();\n\nexport type Locale = typeof enUS;\n\nexport type DateRangePickerValue = { from?: Date; to?: Date; selectValue?: string };\n\nexport interface DateRangePickerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"value\" | \"defaultValue\"> {\n  value?: DateRangePickerValue;\n  defaultValue?: DateRangePickerValue;\n  onValueChange?: (value: DateRangePickerValue) => void;\n  enableSelect?: boolean;\n  minDate?: Date;\n  maxDate?: Date;\n  placeholder?: string;\n  selectPlaceholder?: string;\n  disabled?: boolean;\n  color?: Color;\n  locale?: Locale;\n  enableClear?: boolean;\n  displayFormat?: string;\n  enableYearNavigation?: boolean;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  disabledDates?: Date[];\n  children?: React.ReactElement[] | React.ReactElement;\n}\n\nconst DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((props, ref) => {\n  const {\n    value,\n    defaultValue,\n    onValueChange,\n    enableSelect = true,\n    minDate,\n    maxDate,\n    placeholder = \"Select range\",\n    selectPlaceholder = \"Select range\",\n    disabled = false,\n    locale = enUS,\n    enableClear = true,\n    displayFormat,\n    children,\n    className,\n    enableYearNavigation = false,\n    weekStartsOn = 0,\n    disabledDates,\n    ...other\n  } = props;\n\n  const [selectedValue, setSelectedValue] = useInternalState(defaultValue, value);\n  const [isCalendarButtonFocused, setIsCalendarButtonFocused] = useState(false);\n  const [isSelectButtonFocused, setIsSelectButtonFocused] = useState(false);\n\n  const disabledDays = useMemo(() => {\n    const disabledDays = [];\n    if (minDate) disabledDays.push({ before: minDate });\n    if (maxDate) disabledDays.push({ after: maxDate });\n    return [...disabledDays, ...(disabledDates ?? [])];\n  }, [minDate, maxDate, disabledDates]);\n\n  const selectValues = useMemo(() => {\n    const selectValues = new Map<\n      string,\n      Omit<DateRangePickerItemProps, \"value\"> & { text: string }\n    >();\n\n    if (children) {\n      React.Children.forEach(\n        children as ReactElement[],\n        (child: React.ReactElement<DateRangePickerItemProps>) => {\n          selectValues.set(child.props.value, {\n            text: (getNodeText(child) ?? child.props.value) as string,\n            from: child.props.from,\n            to: child.props.to,\n          });\n        },\n      );\n    } else {\n      defaultOptions.forEach((option) => {\n        selectValues.set(option.value, {\n          text: option.text,\n          from: option.from,\n          to: TODAY,\n        });\n      });\n    }\n    return selectValues;\n  }, [children]);\n\n  const valueToNameMapping = useMemo(() => {\n    if (children) {\n      return constructValueToNameMapping(children);\n    }\n    const valueToNameMapping = new Map<string, string>();\n    defaultOptions.forEach((option) => valueToNameMapping.set(option.value, option.text));\n    return valueToNameMapping;\n  }, [children]);\n\n  const selectedSelectValue = selectedValue?.selectValue || \"\";\n  const selectedStartDate = parseStartDate(\n    selectedValue?.from,\n    minDate,\n    selectedSelectValue,\n    selectValues,\n  );\n  const selectedEndDate = parseEndDate(\n    selectedValue?.to,\n    maxDate,\n    selectedSelectValue,\n    selectValues,\n  );\n  const formattedSelection =\n    !selectedStartDate && !selectedEndDate\n      ? placeholder\n      : formatSelectedDates(selectedStartDate, selectedEndDate, locale, displayFormat);\n  const defaultMonth = startOfMonth(selectedEndDate ?? selectedStartDate ?? maxDate ?? TODAY);\n\n  const isClearEnabled = enableClear && !disabled;\n\n  const handleSelectClick = (value: string) => {\n    const { from, to } = selectValues.get(value)!;\n    const toDate = to ?? TODAY;\n    onValueChange?.({ from, to: toDate, selectValue: value });\n    setSelectedValue({ from, to: toDate, selectValue: value });\n  };\n\n  const handleReset = () => {\n    onValueChange?.({});\n    setSelectedValue({});\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={tremorTwMerge(\n        \"w-full min-w-[10rem] relative flex justify-between text-tremor-default max-w-sm shadow-tremor-input dark:shadow-dark-tremor-input rounded-tremor-default\",\n        className,\n      )}\n      {...other}\n    >\n      <Popover\n        as=\"div\"\n        className={tremorTwMerge(\n          \"w-full\",\n          enableSelect ? \"rounded-l-tremor-default\" : \"rounded-tremor-default\",\n          isCalendarButtonFocused &&\n            \"ring-2 ring-tremor-brand-muted dark:ring-dark-tremor-brand-muted z-10\",\n        )}\n      >\n        <div className=\"relative w-full\">\n          <PopoverButton\n            onFocus={() => setIsCalendarButtonFocused(true)}\n            onBlur={() => setIsCalendarButtonFocused(false)}\n            disabled={disabled}\n            className={tremorTwMerge(\n              // common\n              \"w-full outline-none text-left whitespace-nowrap truncate focus:ring-2 transition duration-100 rounded-l-tremor-default flex flex-nowrap border pl-3 py-2\",\n              // light\n              \"rounded-l-tremor-default border-tremor-border text-tremor-content-emphasis focus:border-tremor-brand-subtle focus:ring-tremor-brand-muted\",\n              // dark\n              \"dark:border-dark-tremor-border dark:text-dark-tremor-content-emphasis dark:focus:border-dark-tremor-brand-subtle dark:focus:ring-dark-tremor-brand-muted\",\n              enableSelect ? \"rounded-l-tremor-default\" : \"rounded-tremor-default\",\n              isClearEnabled ? \"pr-8\" : \"pr-4\",\n              getSelectButtonColors(hasValue<Date>(selectedStartDate || selectedEndDate), disabled),\n            )}\n          >\n            <CalendarIcon\n              className={tremorTwMerge(\n                makeDateRangePickerClassName(\"calendarIcon\"),\n                \"flex-none shrink-0 h-5 w-5 -ml-0.5 mr-2\",\n                // light\n                \"text-tremor-content-subtle\",\n                // light\n                \"dark:text-dark-tremor-content-subtle\",\n              )}\n              aria-hidden=\"true\"\n            />\n            <p className=\"truncate\">{formattedSelection}</p>\n          </PopoverButton>\n          {isClearEnabled && selectedStartDate ? (\n            <button\n              type=\"button\"\n              className={tremorTwMerge(\n                \"absolute outline-none inset-y-0 right-0 flex items-center transition duration-100 mr-4\",\n              )}\n              onClick={(e) => {\n                e.preventDefault();\n                handleReset();\n              }}\n            >\n              <XCircleIcon\n                className={tremorTwMerge(\n                  makeDateRangePickerClassName(\"clearIcon\"),\n                  // common\n                  \"flex-none h-4 w-4\",\n                  // light\n                  \"text-tremor-content-subtle\",\n                  // dark\n                  \"dark:text-dark-tremor-content-subtle\",\n                )}\n              />\n            </button>\n          ) : null}\n        </div>\n        <Transition\n          enter=\"transition ease duration-100 transform\"\n          enterFrom=\"opacity-0 -translate-y-4\"\n          enterTo=\"opacity-100 translate-y-0\"\n          leave=\"transition ease duration-100 transform\"\n          leaveFrom=\"opacity-100 translate-y-0\"\n          leaveTo=\"opacity-0 -translate-y-4\"\n        >\n          <PopoverPanel\n            anchor=\"bottom start\"\n            focus={true}\n            className={tremorTwMerge(\n              // common\n              \"min-w-min divide-y overflow-y-auto outline-none rounded-tremor-default p-3 border [--anchor-gap:4px]\",\n              // light\n              \"bg-tremor-background border-tremor-border divide-tremor-border shadow-tremor-dropdown\",\n              // dark\n              \"dark:bg-dark-tremor-background dark:border-dark-tremor-border dark:divide-dark-tremor-border dark:shadow-dark-tremor-dropdown\",\n            )}\n          >\n            <Calendar<DayPickerRangeProps>\n              mode=\"range\"\n              showOutsideDays={true}\n              defaultMonth={defaultMonth}\n              selected={{\n                from: selectedStartDate,\n                to: selectedEndDate,\n              }}\n              onSelect={\n                ((v: DateRange) => {\n                  onValueChange?.({ from: v?.from, to: v?.to });\n                  setSelectedValue({ from: v?.from, to: v?.to });\n                }) as any\n              }\n              locale={locale}\n              disabled={disabledDays}\n              enableYearNavigation={enableYearNavigation}\n              classNames={{\n                day_range_middle: tremorTwMerge(\n                  \"!rounded-none aria-selected:!bg-tremor-background-subtle aria-selected:dark:!bg-dark-tremor-background-subtle aria-selected:!text-tremor-content aria-selected:dark:!bg-dark-tremor-background-subtle\",\n                ),\n                day_range_start:\n                  \"rounded-r-none rounded-l-tremor-small aria-selected:text-tremor-brand-inverted dark:aria-selected:text-dark-tremor-brand-inverted\",\n                day_range_end:\n                  \"rounded-l-none rounded-r-tremor-small aria-selected:text-tremor-brand-inverted dark:aria-selected:text-dark-tremor-brand-inverted\",\n              }}\n              weekStartsOn={weekStartsOn}\n              {...props}\n            />\n          </PopoverPanel>\n        </Transition>\n      </Popover>\n      {enableSelect && (\n        <Listbox\n          as=\"div\"\n          className={tremorTwMerge(\n            \"w-48 -ml-px rounded-r-tremor-default\",\n            isSelectButtonFocused &&\n              \"ring-2 ring-tremor-brand-muted dark:ring-dark-tremor-brand-muted z-10\",\n          )}\n          value={selectedSelectValue}\n          onChange={handleSelectClick}\n          disabled={disabled}\n        >\n          {({ value }) => (\n            <>\n              <ListboxButton\n                onFocus={() => setIsSelectButtonFocused(true)}\n                onBlur={() => setIsSelectButtonFocused(false)}\n                className={tremorTwMerge(\n                  // common\n                  \"w-full outline-none text-left whitespace-nowrap truncate rounded-r-tremor-default transition duration-100 border px-4 py-2\",\n                  // light\n                  \"border-tremor-border text-tremor-content-emphasis focus:border-tremor-brand-subtle\",\n                  // dark\n                  \"dark:border-dark-tremor-border  dark:text-dark-tremor-content-emphasis dark:focus:border-dark-tremor-brand-subtle\",\n                  getSelectButtonColors(hasValue<string>(value), disabled),\n                )}\n              >\n                {value ? (valueToNameMapping.get(value) ?? selectPlaceholder) : selectPlaceholder}\n              </ListboxButton>\n              <Transition\n                enter=\"transition ease duration-100 transform\"\n                enterFrom=\"opacity-0 -translate-y-4\"\n                enterTo=\"opacity-100 translate-y-0\"\n                leave=\"transition ease duration-100 transform\"\n                leaveFrom=\"opacity-100 translate-y-0\"\n                leaveTo=\"opacity-0 -translate-y-4\"\n              >\n                <ListboxOptions\n                  anchor=\"bottom end\"\n                  className={tremorTwMerge(\n                    // common\n                    \"[--anchor-gap:4px] divide-y overflow-y-auto outline-none border min-w-44\",\n                    // light\n                    \"shadow-tremor-dropdown bg-tremor-background border-tremor-border divide-tremor-border rounded-tremor-default\",\n                    // dark\n                    \"dark:shadow-dark-tremor-dropdown dark:bg-dark-tremor-background dark:border-dark-tremor-border dark:divide-dark-tremor-border\",\n                  )}\n                >\n                  {children ??\n                    defaultOptions.map((option) => (\n                      <SelectItem key={option.value} value={option.value}>\n                        {option.text}\n                      </SelectItem>\n                    ))}\n                </ListboxOptions>\n              </Transition>\n            </>\n          )}\n        </Listbox>\n      )}\n    </div>\n  );\n});\n\nDateRangePicker.displayName = \"DateRangePicker\";\n\nexport default DateRangePicker;\n"
  },
  {
    "path": "src/components/input-elements/DateRangePicker/DateRangePickerItem.tsx",
    "content": "\"use client\";\nimport React from \"react\";\n\nimport { SelectItem } from \"../Select\";\n\nexport interface DateRangePickerItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: string;\n  from: Date;\n  to?: Date;\n}\n\nconst DateRangePickerItem = React.forwardRef<HTMLDivElement, DateRangePickerItemProps>(\n  (props, ref) => {\n    const { value, className, children, ...other } = props;\n\n    return (\n      <SelectItem ref={ref} className={className} value={value} {...other}>\n        {children ?? value}\n      </SelectItem>\n    );\n  },\n);\n\nDateRangePickerItem.displayName = \"DateRangePickerItem\";\n\nexport default DateRangePickerItem;\n"
  },
  {
    "path": "src/components/input-elements/DateRangePicker/dateRangePickerUtils.tsx",
    "content": "import {\n  format,\n  isEqual,\n  max,\n  min,\n  startOfDay,\n  startOfMonth,\n  startOfToday,\n  startOfYear,\n  sub,\n  Locale,\n} from \"date-fns\";\n\nimport { makeClassName } from \"lib\";\n\nexport type DateRangePickerOption = {\n  value: string;\n  text: string;\n  from: Date;\n  to?: Date;\n};\nexport type DropdownValues = Map<string, Omit<DateRangePickerOption, \"value\">>;\n\nexport const makeDateRangePickerClassName = makeClassName(\"DateRangePicker\");\n\nexport const parseStartDate = (\n  startDate: Date | undefined,\n  minDate: Date | undefined,\n  selectedDropdownValue: string | undefined,\n  selectValues: DropdownValues,\n) => {\n  if (selectedDropdownValue) {\n    startDate = selectValues.get(selectedDropdownValue)?.from;\n  }\n  if (!startDate) return undefined;\n  if (startDate && !minDate) return startOfDay(startDate);\n  return startOfDay(max([startDate as Date, minDate as Date]));\n};\n\nexport const parseEndDate = (\n  endDate: Date | undefined,\n  maxDate: Date | undefined,\n  selectedDropdownValue: string | undefined,\n  selectValues: DropdownValues,\n) => {\n  if (selectedDropdownValue) {\n    endDate = startOfDay(selectValues.get(selectedDropdownValue)?.to ?? startOfToday());\n  }\n  if (!endDate) return undefined;\n  if (endDate && !maxDate) return startOfDay(endDate);\n\n  return startOfDay(min([endDate as Date, maxDate as Date]));\n};\n\nexport const defaultOptions: DateRangePickerOption[] = [\n  {\n    value: \"tdy\",\n    text: \"Today\",\n    from: startOfToday(),\n  },\n  {\n    value: \"w\",\n    text: \"Last 7 days\",\n    from: sub(startOfToday(), { days: 7 }),\n  },\n  {\n    value: \"t\",\n    text: \"Last 30 days\",\n    from: sub(startOfToday(), { days: 30 }),\n  },\n  {\n    value: \"m\",\n    text: \"Month to Date\",\n    from: startOfMonth(startOfToday()),\n  },\n  {\n    value: \"y\",\n    text: \"Year to Date\",\n    from: startOfYear(startOfToday()),\n  },\n];\n\nexport const formatSelectedDates = (\n  startDate: Date | undefined,\n  endDate: Date | undefined,\n  locale?: Locale,\n  displayFormat?: string,\n) => {\n  const localeCode = locale?.code || \"en-US\";\n  if (!startDate && !endDate) {\n    return \"\";\n  } else if (startDate && !endDate) {\n    if (displayFormat) return format(startDate, displayFormat);\n    const options: Intl.DateTimeFormatOptions = {\n      year: \"numeric\",\n      month: \"short\",\n      day: \"numeric\",\n    };\n    return startDate.toLocaleDateString(localeCode, options);\n  } else if (startDate && endDate) {\n    if (isEqual(startDate, endDate)) {\n      if (displayFormat) return format(startDate, displayFormat);\n      const options: Intl.DateTimeFormatOptions = {\n        year: \"numeric\",\n        month: \"short\",\n        day: \"numeric\",\n      };\n      return startDate.toLocaleDateString(localeCode, options);\n    } else if (\n      startDate.getMonth() === endDate.getMonth() &&\n      startDate.getFullYear() === endDate.getFullYear()\n    ) {\n      if (displayFormat)\n        return `${format(startDate, displayFormat)} - ${format(endDate, displayFormat)}`;\n\n      const optionsStartDate: Intl.DateTimeFormatOptions = {\n        month: \"short\",\n        day: \"numeric\",\n      };\n      return `${startDate.toLocaleDateString(localeCode, optionsStartDate)} - \n                    ${endDate.getDate()}, ${endDate.getFullYear()}`;\n    } else {\n      if (displayFormat)\n        return `${format(startDate, displayFormat)} - ${format(endDate, displayFormat)}`;\n      const options: Intl.DateTimeFormatOptions = {\n        year: \"numeric\",\n        month: \"short\",\n        day: \"numeric\",\n      };\n      return `${startDate.toLocaleDateString(localeCode, options)} - \n                    ${endDate.toLocaleDateString(localeCode, options)}`;\n    }\n  }\n  return \"\";\n};\n"
  },
  {
    "path": "src/components/input-elements/DateRangePicker/index.ts",
    "content": "export { default as DateRangePicker } from \"./DateRangePicker\";\nexport type { DateRangePickerProps, DateRangePickerValue } from \"./DateRangePicker\";\nexport { default as DateRangePickerItem } from \"./DateRangePickerItem\";\nexport type { DateRangePickerItemProps } from \"./DateRangePickerItem\";\n"
  },
  {
    "path": "src/components/input-elements/MultiSelect/MultiSelect.tsx",
    "content": "\"use client\";\nimport React, { isValidElement, useMemo, useRef, useState } from \"react\";\nimport { SelectedValueContext } from \"contexts\";\nimport { useInternalState } from \"hooks\";\nimport { ArrowDownHeadIcon, SearchIcon, XCircleIcon } from \"assets\";\nimport XIcon from \"assets/XIcon\";\nimport { makeClassName, tremorTwMerge } from \"lib\";\nimport { getFilteredOptions, getSelectButtonColors } from \"../selectUtils\";\nimport { Listbox, ListboxButton, ListboxOptions, Transition } from \"@headlessui/react\";\n\nconst makeMultiSelectClassName = makeClassName(\"MultiSelect\");\n\nexport interface MultiSelectProps extends React.HTMLAttributes<HTMLInputElement> {\n  defaultValue?: string[];\n  name?: string;\n  value?: string[];\n  onValueChange?: (value: string[]) => void;\n  placeholder?: string;\n  placeholderSearch?: string;\n  disabled?: boolean;\n  icon?: React.ElementType | React.JSXElementConstructor<any>;\n  required?: boolean;\n  error?: boolean;\n  errorMessage?: string;\n  children: React.ReactNode;\n}\n\nconst MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>((props, ref) => {\n  const {\n    defaultValue = [],\n    value,\n    onValueChange,\n    placeholder = \"Select...\",\n    placeholderSearch = \"Search\",\n    disabled = false,\n    icon,\n    children,\n    className,\n    required,\n    name,\n    error = false,\n    errorMessage,\n    id,\n    ...other\n  } = props;\n  const listboxButtonRef = useRef<HTMLButtonElement | null>(null);\n\n  const Icon = icon;\n\n  const [selectedValue, setSelectedValue] = useInternalState(defaultValue, value);\n\n  const { reactElementChildren, optionsAvailable } = useMemo(() => {\n    const reactElementChildren = React.Children.toArray(children).filter(isValidElement);\n    const optionsAvailable = getFilteredOptions(\"\", reactElementChildren);\n    return { reactElementChildren, optionsAvailable };\n  }, [children]);\n\n  const [searchQuery, setSearchQuery] = useState(\"\");\n\n  // checked if there are selected options\n  // used the same code from the previous version\n  const selectedItems = selectedValue ?? [];\n  const hasSelection = selectedItems.length > 0;\n\n  const filteredOptions = useMemo(\n    () => (searchQuery ? getFilteredOptions(searchQuery, reactElementChildren) : optionsAvailable),\n    [searchQuery, reactElementChildren, optionsAvailable],\n  );\n\n  const handleReset = () => {\n    setSelectedValue([]);\n    onValueChange?.([]);\n  };\n\n  const handleResetSearch = () => {\n    setSearchQuery(\"\");\n  };\n\n  return (\n    <div\n      className={tremorTwMerge(\n        // common\n        \"w-full min-w-[10rem] text-tremor-default\",\n        className,\n      )}\n    >\n      <div className=\"relative\">\n        <select\n          title=\"multi-select-hidden\"\n          required={required}\n          className={tremorTwMerge(\"h-full w-full absolute left-0 top-0 -z-10 opacity-0\")}\n          value={selectedValue}\n          onChange={(e) => {\n            e.preventDefault();\n          }}\n          name={name}\n          disabled={disabled}\n          multiple\n          id={id}\n          onFocus={() => {\n            const listboxButton = listboxButtonRef.current;\n            if (listboxButton) listboxButton.focus();\n          }}\n        >\n          <option className=\"hidden\" value=\"\" disabled hidden>\n            {placeholder}\n          </option>\n          {filteredOptions.map((child: any) => {\n            const value = child.props.value;\n            const name = child.props.children;\n            return (\n              <option className=\"hidden\" key={value} value={value}>\n                {name}\n              </option>\n            );\n          })}\n        </select>\n        <Listbox\n          as=\"div\"\n          ref={ref}\n          defaultValue={selectedValue}\n          value={selectedValue}\n          onChange={\n            ((values: string[]) => {\n              onValueChange?.(values);\n              setSelectedValue(values);\n            }) as any\n          }\n          disabled={disabled}\n          id={id}\n          multiple\n          {...other}\n        >\n          {({ value }) => (\n            <>\n              <ListboxButton\n                className={tremorTwMerge(\n                  // common\n                  \"w-full outline-none text-left whitespace-nowrap truncate rounded-tremor-default focus:ring-2 transition duration-100 border pr-8 py-1.5\",\n                  // light\n                  \"border-tremor-border shadow-tremor-input focus:border-tremor-brand-subtle focus:ring-tremor-brand-muted\",\n                  // dark\n                  \"dark:border-dark-tremor-border dark:shadow-dark-tremor-input dark:focus:border-dark-tremor-brand-subtle dark:focus:ring-dark-tremor-brand-muted\",\n                  Icon ? \"pl-11 -ml-0.5\" : \"pl-3\",\n                  getSelectButtonColors(value.length > 0, disabled, error),\n                )}\n                ref={listboxButtonRef}\n              >\n                {Icon && (\n                  <span\n                    className={tremorTwMerge(\n                      \"absolute inset-y-0 left-0 flex items-center ml-px pl-2.5\",\n                    )}\n                  >\n                    <Icon\n                      className={tremorTwMerge(\n                        makeMultiSelectClassName(\"Icon\"),\n                        // common\n                        \"flex-none h-5 w-5\",\n                        // light\n                        \"text-tremor-content-subtle\",\n                        // dark\n                        \"dark:text-dark-tremor-content-subtle\",\n                      )}\n                    />\n                  </span>\n                )}\n                <div className=\"h-6 flex items-center\">\n                  {value.length > 0 ? (\n                    <div className=\"flex flex-nowrap overflow-x-scroll [&::-webkit-scrollbar]:hidden [scrollbar-width:none] gap-x-1 mr-5 -ml-1.5 relative\">\n                      {optionsAvailable\n                        .filter((option) => value.includes(option.props.value))\n                        .map((option, index) => {\n                          return (\n                            <div\n                              key={index}\n                              className={tremorTwMerge(\n                                \"max-w-[100px] lg:max-w-[200px] flex justify-center items-center pl-2 pr-1.5 py-1 font-medium\",\n                                \"rounded-tremor-small\",\n                                \"bg-tremor-background-muted dark:bg-dark-tremor-background-muted\",\n                                \"bg-tremor-background-subtle dark:bg-dark-tremor-background-subtle\",\n                                \"text-tremor-content-default dark:text-dark-tremor-content-default\",\n                                \"text-tremor-content-emphasis dark:text-dark-tremor-content-emphasis\",\n                              )}\n                            >\n                              <div className=\"text-xs truncate \">\n                                {option.props.children ?? option.props.value}\n                              </div>\n                              <div\n                                onClick={(e) => {\n                                  e.preventDefault();\n                                  const newValue = value.filter((v) => v !== option.props.value);\n                                  onValueChange?.(newValue);\n                                  setSelectedValue(newValue);\n                                }}\n                              >\n                                <XIcon\n                                  className={tremorTwMerge(\n                                    makeMultiSelectClassName(\"clearIconItem\"),\n                                    // common\n                                    \"cursor-pointer rounded-tremor-full w-3.5 h-3.5 ml-2\",\n                                    // light\n                                    \"text-tremor-content-subtle hover:text-tremor-content\",\n                                    // dark\n                                    \"dark:text-dark-tremor-content-subtle dark:hover:text-tremor-content\",\n                                  )}\n                                />\n                              </div>\n                            </div>\n                          );\n                        })}\n                    </div>\n                  ) : (\n                    <span>{placeholder}</span>\n                  )}\n                </div>\n                <span\n                  className={tremorTwMerge(\"absolute inset-y-0 right-0 flex items-center mr-2.5\")}\n                >\n                  <ArrowDownHeadIcon\n                    className={tremorTwMerge(\n                      makeMultiSelectClassName(\"arrowDownIcon\"),\n                      // common\n                      \"flex-none h-5 w-5\",\n                      // light\n                      \"text-tremor-content-subtle\",\n                      // dark\n                      \"dark:text-dark-tremor-content-subtle\",\n                    )}\n                  />\n                </span>\n              </ListboxButton>\n\n              {hasSelection && !disabled ? (\n                <button\n                  type=\"button\"\n                  className={tremorTwMerge(\"absolute inset-y-0 right-0 flex items-center mr-8\")}\n                  onClick={(e) => {\n                    e.preventDefault();\n                    handleReset();\n                  }}\n                >\n                  <XCircleIcon\n                    className={tremorTwMerge(\n                      makeMultiSelectClassName(\"clearIconAllItems\"),\n                      // common\n                      \"flex-none h-4 w-4\",\n                      // light\n                      \"text-tremor-content-subtle\",\n                      // dark\n                      \"dark:text-dark-tremor-content-subtle\",\n                    )}\n                  />\n                </button>\n              ) : null}\n              <Transition\n                enter=\"transition ease duration-100 transform\"\n                enterFrom=\"opacity-0 -translate-y-4\"\n                enterTo=\"opacity-100 translate-y-0\"\n                leave=\"transition ease duration-100 transform\"\n                leaveFrom=\"opacity-100 translate-y-0\"\n                leaveTo=\"opacity-0 -translate-y-4\"\n              >\n                <ListboxOptions\n                  anchor=\"bottom start\"\n                  className={tremorTwMerge(\n                    // common\n                    \"z-10 divide-y w-[var(--button-width)] overflow-y-auto outline-none rounded-tremor-default max-h-[228px]  border [--anchor-gap:4px]\",\n                    // light\n                    \"bg-tremor-background border-tremor-border divide-tremor-border shadow-tremor-dropdown\",\n                    // dark\n                    \"dark:bg-dark-tremor-background dark:border-dark-tremor-border dark:divide-dark-tremor-border dark:shadow-dark-tremor-dropdown\",\n                  )}\n                >\n                  <div\n                    className={tremorTwMerge(\n                      // common\n                      \"flex items-center w-full px-2.5\",\n                      // light\n                      \"bg-tremor-background-muted\",\n                      // dark\n                      \"dark:bg-dark-tremor-background-muted\",\n                    )}\n                  >\n                    <span>\n                      <SearchIcon\n                        className={tremorTwMerge(\n                          // common\n                          \"flex-none w-4 h-4 mr-2\",\n                          // light\n                          \"text-tremor-content-subtle\",\n                          // dark\n                          \"dark:text-dark-tremor-content-subtle\",\n                        )}\n                      />\n                    </span>\n                    <input\n                      name=\"search\"\n                      type=\"input\"\n                      autoComplete=\"off\"\n                      placeholder={placeholderSearch}\n                      className={tremorTwMerge(\n                        // common\n                        \"w-full focus:outline-none focus:ring-none bg-transparent text-tremor-default py-2\",\n                        // light\n                        \"text-tremor-content-emphasis\",\n                        // dark\n                        \"dark:text-dark-tremor-content-subtle\",\n                      )}\n                      onKeyDown={(e) => {\n                        if (e.code === \"Space\" && (e.target as HTMLInputElement).value !== \"\") {\n                          e.stopPropagation();\n                        }\n                      }}\n                      onChange={(e) => setSearchQuery(e.target.value)}\n                      value={searchQuery}\n                    />\n                  </div>\n                  <SelectedValueContext.Provider\n                    {...{ onBlur: { handleResetSearch } }}\n                    value={{ selectedValue: value }}\n                  >\n                    {filteredOptions}\n                  </SelectedValueContext.Provider>\n                </ListboxOptions>\n              </Transition>\n            </>\n          )}\n        </Listbox>\n      </div>\n      {error && errorMessage ? (\n        <p className={tremorTwMerge(\"errorMessage\", \"text-sm text-rose-500 mt-1\")}>\n          {errorMessage}\n        </p>\n      ) : null}\n    </div>\n  );\n});\n\nMultiSelect.displayName = \"MultiSelect\";\n\nexport default MultiSelect;\n"
  },
  {
    "path": "src/components/input-elements/MultiSelect/MultiSelectItem.tsx",
    "content": "\"use client\";\nimport { SelectedValueContext } from \"contexts\";\nimport React, { useContext } from \"react\";\nimport { isValueInArray, makeClassName, tremorTwMerge } from \"lib\";\nimport { ListboxOption } from \"@headlessui/react\";\n\nconst makeMultiSelectItemClassName = makeClassName(\"MultiSelectItem\");\n\nexport interface MultiSelectItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: string;\n}\n\nconst MultiSelectItem = React.forwardRef<HTMLDivElement, MultiSelectItemProps>((props, ref) => {\n  const { value, className, children, ...other } = props;\n\n  const { selectedValue } = useContext(SelectedValueContext);\n  const isSelected = isValueInArray(value, selectedValue);\n\n  return (\n    <ListboxOption\n      className={tremorTwMerge(\n        makeMultiSelectItemClassName(\"root\"),\n        // common\n        \"flex justify-start items-center cursor-default text-tremor-default p-2.5\",\n        // light\n        // \"data-[focus]:bg-tremor-background-muted data-[focus]:text-tremor-content-strong data-[select]ed:text-tremor-content-strong data-[select]ed:bg-tremor-background-muted text-tremor-content-emphasis\",\n        \"data-[focus]:bg-tremor-background-muted data-[focus]:text-tremor-content-strong data-[select]ed:text-tremor-content-strong text-tremor-content-emphasis\",\n        // dark\n        \"dark:data-[focus]:bg-dark-tremor-background-muted dark:data-[focus]:text-dark-tremor-content-strong dark:data-[select]ed:text-dark-tremor-content-strong dark:data-[select]ed:bg-dark-tremor-background-muted dark:text-dark-tremor-content-emphasis\",\n        className,\n      )}\n      ref={ref}\n      key={value}\n      value={value}\n      {...other}\n    >\n      <input\n        type=\"checkbox\"\n        className={tremorTwMerge(\n          makeMultiSelectItemClassName(\"checkbox\"),\n          // common\n          \"flex-none focus:ring-none focus:outline-none cursor-pointer mr-2.5\",\n          // light\n          \"accent-tremor-brand\",\n          // dark\n          \"dark:accent-dark-tremor-brand\",\n        )}\n        checked={isSelected}\n        readOnly={true}\n      />\n      <span className=\"whitespace-nowrap truncate\">{children ?? value}</span>\n    </ListboxOption>\n  );\n});\n\nMultiSelectItem.displayName = \"MultiSelectItem\";\n\nexport default MultiSelectItem;\n"
  },
  {
    "path": "src/components/input-elements/MultiSelect/index.ts",
    "content": "export { default as MultiSelect } from \"./MultiSelect\";\nexport type { MultiSelectProps } from \"./MultiSelect\";\nexport { default as MultiSelectItem } from \"./MultiSelectItem\";\nexport type { MultiSelectItemProps } from \"./MultiSelectItem\";\n"
  },
  {
    "path": "src/components/input-elements/NumberInput/NumberInput.tsx",
    "content": "\"use client\";\nimport { MinusIcon, PlusIcon } from \"assets\";\nimport { makeClassName, mergeRefs, tremorTwMerge } from \"lib\";\nimport React, { useRef } from \"react\";\nimport BaseInput, { BaseInputProps } from \"../BaseInput\";\n\nexport interface NumberInputProps\n  extends Omit<BaseInputProps, \"type\" | \"stepper\" | \"onSubmit\" | \"makeInputClassName\"> {\n  step?: string | number;\n  enableStepper?: boolean;\n  onSubmit?: (value: number) => void;\n  onValueChange?: (value: number) => void;\n}\n\nconst baseArrowClasses =\n  \"flex mx-auto text-tremor-content-subtle dark:text-dark-tremor-content-subtle\";\n\nconst enabledArrowClasses =\n  \"cursor-pointer hover:text-tremor-content dark:hover:text-dark-tremor-content\";\n\nconst NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>((props, ref) => {\n  const { onSubmit, enableStepper = true, disabled, onValueChange, onChange, ...other } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const [isArrowDownPressed, setIsArrowDownPressed] = React.useState(false);\n  const handleArrowDownPress = React.useCallback(() => {\n    setIsArrowDownPressed(true);\n  }, []);\n  const handleArrowDownRelease = React.useCallback(() => {\n    setIsArrowDownPressed(false);\n  }, []);\n\n  const [isArrowUpPressed, setIsArrowUpPressed] = React.useState(false);\n  const handleArrowUpPress = React.useCallback(() => {\n    setIsArrowUpPressed(true);\n  }, []);\n  const handleArrowUpRelease = React.useCallback(() => {\n    setIsArrowUpPressed(false);\n  }, []);\n\n  return (\n    <BaseInput\n      type=\"number\"\n      ref={mergeRefs([inputRef, ref])}\n      disabled={disabled}\n      makeInputClassName={makeClassName(\"NumberInput\")}\n      onKeyDown={(e) => {\n        if (e.key === \"Enter\" && !e.ctrlKey && !e.altKey && !e.shiftKey) {\n          const value = inputRef.current?.value;\n          onSubmit?.(parseFloat(value ?? \"\"));\n        }\n        if (e.key === \"ArrowDown\") {\n          handleArrowDownPress();\n        }\n        if (e.key === \"ArrowUp\") {\n          handleArrowUpPress();\n        }\n      }}\n      onKeyUp={(e) => {\n        if (e.key === \"ArrowDown\") {\n          handleArrowDownRelease();\n        }\n        if (e.key === \"ArrowUp\") {\n          handleArrowUpRelease();\n        }\n      }}\n      onChange={(e) => {\n        if (disabled) return;\n\n        onValueChange?.(parseFloat(e.target.value));\n        onChange?.(e);\n      }}\n      stepper={\n        enableStepper ? (\n          <div className={tremorTwMerge(\"flex justify-center align-middle\")}>\n            <div\n              tabIndex={-1}\n              onClick={(e) => e.preventDefault()}\n              onMouseDown={(e) => e.preventDefault()}\n              onTouchStart={(e) => {\n                if (e.cancelable) {\n                  e.preventDefault();\n                }\n              }}\n              onMouseUp={() => {\n                if (disabled) return;\n                inputRef.current?.stepDown();\n                inputRef.current?.dispatchEvent(new Event(\"input\", { bubbles: true }));\n              }}\n              className={tremorTwMerge(\n                !disabled && enabledArrowClasses,\n                baseArrowClasses,\n                \"group py-[10px] px-2.5 border-l border-tremor-border dark:border-dark-tremor-border\",\n              )}\n            >\n              <MinusIcon\n                data-testid=\"step-down\"\n                className={`${\n                  isArrowDownPressed ? \"scale-95\" : \"\"\n                } h-4 w-4 duration-75 transition group-active:scale-95`}\n              />\n            </div>\n            <div\n              tabIndex={-1}\n              onClick={(e) => e.preventDefault()}\n              onMouseDown={(e) => e.preventDefault()}\n              onTouchStart={(e) => {\n                if (e.cancelable) {\n                  e.preventDefault();\n                }\n              }}\n              onMouseUp={() => {\n                if (disabled) return;\n                inputRef.current?.stepUp();\n                inputRef.current?.dispatchEvent(new Event(\"input\", { bubbles: true }));\n              }}\n              className={tremorTwMerge(\n                !disabled && enabledArrowClasses,\n                baseArrowClasses,\n                \"group py-[10px] px-2.5 border-l border-tremor-border dark:border-dark-tremor-border\",\n              )}\n            >\n              <PlusIcon\n                data-testid=\"step-up\"\n                className={`${\n                  isArrowUpPressed ? \"scale-95\" : \"\"\n                } h-4 w-4 duration-75 transition group-active:scale-95`}\n              />\n            </div>\n          </div>\n        ) : null\n      }\n      {...other}\n    />\n  );\n});\n\nNumberInput.displayName = \"NumberInput\";\n\nexport default NumberInput;\n"
  },
  {
    "path": "src/components/input-elements/NumberInput/index.ts",
    "content": "export { default as NumberInput } from \"./NumberInput\";\nexport type { NumberInputProps } from \"./NumberInput\";\n"
  },
  {
    "path": "src/components/input-elements/SearchSelect/SearchSelect.tsx",
    "content": "\"use client\";\nimport { useInternalState } from \"hooks\";\nimport React, { isValidElement, useMemo, useRef } from \"react\";\n\nimport {\n  Combobox,\n  ComboboxButton,\n  ComboboxInput,\n  ComboboxOptions,\n  Transition,\n} from \"@headlessui/react\";\nimport { ArrowDownHeadIcon, XCircleIcon } from \"assets\";\nimport { makeClassName, tremorTwMerge } from \"lib\";\nimport {\n  constructValueToNameMapping,\n  getFilteredOptions,\n  getSelectButtonColors,\n  hasValue,\n} from \"../selectUtils\";\n\nconst makeSearchSelectClassName = makeClassName(\"SearchSelect\");\n\nexport interface SearchSelectProps extends React.HTMLAttributes<HTMLInputElement> {\n  defaultValue?: string;\n  name?: string;\n  searchValue?: string;\n  onSearchValueChange?: (value: string) => void;\n  value?: string;\n  onValueChange?: (value: string) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  icon?: React.ElementType | React.JSXElementConstructor<any>;\n  required?: boolean;\n  error?: boolean;\n  errorMessage?: string;\n  enableClear?: boolean;\n  children: React.ReactNode;\n  autoComplete?: string;\n}\n\nconst makeSelectClassName = makeClassName(\"SearchSelect\");\n\nconst SearchSelect = React.forwardRef<HTMLInputElement, SearchSelectProps>((props, ref) => {\n  const {\n    defaultValue = \"\",\n    searchValue,\n    onSearchValueChange,\n    value,\n    onValueChange,\n    placeholder = \"Select...\",\n    disabled = false,\n    icon,\n    enableClear = true,\n    name,\n    required,\n    error = false,\n    errorMessage,\n    children,\n    className,\n    id,\n    autoComplete = \"off\",\n    ...other\n  } = props;\n  const comboboxInputRef = useRef<HTMLInputElement | null>(null);\n\n  const [searchQuery, setSearchQuery] = useInternalState(\"\", searchValue);\n  const [selectedValue, setSelectedValue] = useInternalState(defaultValue, value);\n\n  const Icon = icon;\n\n  const { reactElementChildren, valueToNameMapping } = useMemo(() => {\n    const reactElementChildren = React.Children.toArray(children).filter(isValidElement);\n    const valueToNameMapping = constructValueToNameMapping(reactElementChildren);\n    return { reactElementChildren, valueToNameMapping };\n  }, [children]);\n\n  const filteredOptions = useMemo(\n    () => getFilteredOptions(searchQuery ?? \"\", reactElementChildren),\n    [searchQuery, reactElementChildren],\n  );\n\n  const handleReset = () => {\n    setSelectedValue(\"\");\n    setSearchQuery(\"\");\n    onValueChange?.(\"\");\n    onSearchValueChange?.(\"\");\n  };\n\n  return (\n    <div\n      className={tremorTwMerge(\n        // common\n        \"w-full min-w-[10rem] text-tremor-default\",\n        className,\n      )}\n    >\n      <div className=\"relative\">\n        <select\n          title=\"search-select-hidden\"\n          required={required}\n          className={tremorTwMerge(\"h-full w-full absolute left-0 top-0 -z-10 opacity-0\")}\n          value={selectedValue}\n          onChange={(e) => {\n            e.preventDefault();\n          }}\n          name={name}\n          disabled={disabled}\n          id={id}\n          onFocus={() => {\n            const comboboxInput = comboboxInputRef.current;\n            if (comboboxInput) comboboxInput.focus();\n          }}\n        >\n          <option className=\"hidden\" value=\"\" disabled hidden>\n            {placeholder}\n          </option>\n          {filteredOptions.map((child: any) => {\n            const value = child.props.value;\n            const name = child.props.children;\n            return (\n              <option className=\"hidden\" key={value} value={value}>\n                {name}\n              </option>\n            );\n          })}\n        </select>\n        <Combobox\n          as=\"div\"\n          ref={ref}\n          defaultValue={selectedValue}\n          value={selectedValue}\n          onChange={\n            ((value: string) => {\n              onValueChange?.(value);\n              setSelectedValue(value);\n            }) as any\n          }\n          disabled={disabled}\n          id={id}\n          {...other}\n        >\n          {({ value }) => (\n            <>\n              <ComboboxButton className=\"w-full\">\n                {Icon && (\n                  <span\n                    className={tremorTwMerge(\n                      \"absolute inset-y-0 left-0 flex items-center ml-px pl-2.5\",\n                    )}\n                  >\n                    <Icon\n                      className={tremorTwMerge(\n                        makeSearchSelectClassName(\"Icon\"),\n                        // common\n                        \"flex-none h-5 w-5\",\n                        // light\n                        \"text-tremor-content-subtle\",\n                        // dark\n                        \"dark:text-dark-tremor-content-subtle\",\n                      )}\n                    />\n                  </span>\n                )}\n\n                <ComboboxInput\n                  ref={comboboxInputRef}\n                  className={tremorTwMerge(\n                    // common\n                    \"w-full outline-none text-left whitespace-nowrap truncate rounded-tremor-default focus:ring-2 transition duration-100 text-tremor-default pr-14 border py-2\",\n                    // light\n                    \"border-tremor-border shadow-tremor-input focus:border-tremor-brand-subtle focus:ring-tremor-brand-muted\",\n                    // dark\n                    \"dark:border-dark-tremor-border dark:shadow-dark-tremor-input dark:focus:border-dark-tremor-brand-subtle dark:focus:ring-dark-tremor-brand-muted\",\n                    Icon ? \"pl-10\" : \"pl-3\",\n                    disabled\n                      ? \"placeholder:text-tremor-content-subtle dark:placeholder:text-tremor-content-subtle\"\n                      : \"placeholder:text-tremor-content dark:placeholder:text-tremor-content\",\n                    getSelectButtonColors(hasValue(value), disabled, error),\n                  )}\n                  placeholder={placeholder}\n                  onChange={(event) => {\n                    onSearchValueChange?.(event.target.value);\n                    setSearchQuery(event.target.value);\n                  }}\n                  displayValue={(value: string) => valueToNameMapping.get(value) ?? \"\"}\n                  autoComplete={autoComplete}\n                />\n                <div\n                  className={tremorTwMerge(\"absolute inset-y-0 right-0 flex items-center pr-2.5\")}\n                >\n                  <ArrowDownHeadIcon\n                    className={tremorTwMerge(\n                      makeSearchSelectClassName(\"arrowDownIcon\"),\n                      // common\n                      \"flex-none h-5 w-5\",\n                      // light\n                      \"!text-tremor-content-subtle\",\n                      // dark\n                      \"!dark:text-dark-tremor-content-subtle\",\n                    )}\n                  />\n                </div>\n              </ComboboxButton>\n\n              {enableClear && selectedValue ? (\n                <button\n                  type=\"button\"\n                  className={tremorTwMerge(\"absolute inset-y-0 right-0 flex items-center mr-8\")}\n                  onClick={(e) => {\n                    e.preventDefault();\n                    handleReset();\n                  }}\n                >\n                  <XCircleIcon\n                    className={tremorTwMerge(\n                      makeSelectClassName(\"clearIcon\"),\n                      // common\n                      \"flex-none h-4 w-4\",\n                      // light\n                      \"text-tremor-content-subtle\",\n                      // dark\n                      \"dark:text-dark-tremor-content-subtle\",\n                    )}\n                  />\n                </button>\n              ) : null}\n              {filteredOptions.length > 0 && (\n                <Transition\n                  enter=\"transition ease duration-100 transform\"\n                  enterFrom=\"opacity-0 -translate-y-4\"\n                  enterTo=\"opacity-100 translate-y-0\"\n                  leave=\"transition ease duration-100 transform\"\n                  leaveFrom=\"opacity-100 translate-y-0\"\n                  leaveTo=\"opacity-0 -translate-y-4\"\n                >\n                  <ComboboxOptions\n                    anchor=\"bottom start\"\n                    className={tremorTwMerge(\n                      // common\n                      \"z-10 divide-y w-[var(--button-width)] overflow-y-auto outline-none rounded-tremor-default text-tremor-default max-h-[228px] border [--anchor-gap:4px]\",\n                      // light\n                      \"bg-tremor-background border-tremor-border divide-tremor-border shadow-tremor-dropdown\",\n                      // dark\n                      \"dark:bg-dark-tremor-background dark:border-dark-tremor-border dark:divide-dark-tremor-border dark:shadow-dark-tremor-dropdown\",\n                    )}\n                  >\n                    {filteredOptions}\n                  </ComboboxOptions>\n                </Transition>\n              )}\n            </>\n          )}\n        </Combobox>\n      </div>\n      {error && errorMessage ? (\n        <p className={tremorTwMerge(\"errorMessage\", \"text-sm text-rose-500 mt-1\")}>\n          {errorMessage}\n        </p>\n      ) : null}\n    </div>\n  );\n});\n\nSearchSelect.displayName = \"SearchSelect\";\n\nexport default SearchSelect;\n"
  },
  {
    "path": "src/components/input-elements/SearchSelect/SearchSelectItem.tsx",
    "content": "\"use client\";\nimport React from \"react\";\n\nimport { makeClassName, tremorTwMerge } from \"lib\";\n\nimport { ComboboxOption } from \"@headlessui/react\";\n\nconst makeSearchSelectItemClassName = makeClassName(\"SearchSelectItem\");\n\nexport interface SearchSelectItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: string;\n  icon?: React.ElementType;\n}\n\nconst SearchSelectItem = React.forwardRef<HTMLDivElement, SearchSelectItemProps>((props, ref) => {\n  const { value, icon, className, children, ...other } = props;\n  const Icon = icon;\n\n  return (\n    <ComboboxOption\n      className={tremorTwMerge(\n        makeSearchSelectItemClassName(\"root\"),\n        // common\n        \"flex justify-start items-center cursor-default text-tremor-default p-2.5\",\n        // light\n        \"data-[focus]:bg-tremor-background-muted  data-[focus]:text-tremor-content-strong data-[selected]:text-tremor-content-strong data-[selected]:bg-tremor-background-muted text-tremor-content-emphasis\",\n        // dark\n        \"dark:data-[focus]:bg-dark-tremor-background-muted  dark:data-[focus]:text-dark-tremor-content-strong dark:data-[selected]:text-dark-tremor-content-strong dark:data-[selected]:bg-dark-tremor-background-muted dark:text-dark-tremor-content-emphasis\",\n        className,\n      )}\n      ref={ref}\n      key={value}\n      value={value}\n      {...other}\n    >\n      {Icon && (\n        <Icon\n          className={tremorTwMerge(\n            makeSearchSelectItemClassName(\"icon\"),\n            // common\n            \"flex-none h-5 w-5 mr-3\",\n            // light\n            \"text-tremor-content-subtle\",\n            // dark\n            \"dark:text-dark-tremor-content-subtle\",\n          )}\n        />\n      )}\n      <span className=\"whitespace-nowrap truncate\">{children ?? value}</span>\n    </ComboboxOption>\n  );\n});\n\nSearchSelectItem.displayName = \"SearchSelectItem\";\n\nexport default SearchSelectItem;\n"
  },
  {
    "path": "src/components/input-elements/SearchSelect/index.ts",
    "content": "export { default as SearchSelect } from \"./SearchSelect\";\nexport type { SearchSelectProps } from \"./SearchSelect\";\nexport { default as SearchSelectItem } from \"./SearchSelectItem\";\nexport type { SearchSelectItemProps } from \"./SearchSelectItem\";\n"
  },
  {
    "path": "src/components/input-elements/Select/Select.tsx",
    "content": "\"use client\";\n\nimport { ArrowDownHeadIcon, XCircleIcon } from \"assets\";\nimport { makeClassName, tremorTwMerge } from \"lib\";\nimport React, { Children, isValidElement, useMemo, useRef } from \"react\";\nimport { constructValueToNameMapping, getSelectButtonColors, hasValue } from \"../selectUtils\";\n\nimport { Listbox, ListboxButton, ListboxOptions, Transition } from \"@headlessui/react\";\nimport { useInternalState } from \"hooks\";\n\nconst makeSelectClassName = makeClassName(\"Select\");\n\nexport interface SelectProps extends React.HTMLAttributes<HTMLInputElement> {\n  value?: string;\n  name?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  icon?: React.JSXElementConstructor<any>;\n  enableClear?: boolean;\n  required?: boolean;\n  error?: boolean;\n  errorMessage?: string;\n  children: React.ReactNode;\n}\n\nconst Select = React.forwardRef<HTMLInputElement, SelectProps>((props, ref) => {\n  const {\n    defaultValue = \"\",\n    value,\n    onValueChange,\n    placeholder = \"Select...\",\n    disabled = false,\n    icon,\n    enableClear = false,\n    required,\n    children,\n    name,\n    error = false,\n    errorMessage,\n    className,\n    id,\n    ...other\n  } = props;\n  const listboxButtonRef = useRef<HTMLButtonElement | null>(null);\n  const childrenArray = Children.toArray(children); // @sev\n\n  const [selectedValue, setSelectedValue] = useInternalState(defaultValue, value);\n  const Icon = icon;\n  const valueToNameMapping = useMemo(() => {\n    const reactElementChildren = React.Children.toArray(children).filter(isValidElement);\n    const valueToNameMapping = constructValueToNameMapping(reactElementChildren);\n    return valueToNameMapping;\n  }, [children]);\n\n  const handleReset = () => {\n    setSelectedValue(\"\");\n    onValueChange?.(\"\");\n  };\n\n  return (\n    <div\n      className={tremorTwMerge(\n        // common\n        \"w-full min-w-[10rem] text-tremor-default\",\n        className,\n      )}\n    >\n      <div className=\"relative\">\n        <select\n          title=\"select-hidden\"\n          required={required}\n          className={tremorTwMerge(\"h-full w-full absolute left-0 top-0 -z-10 opacity-0\")}\n          value={selectedValue}\n          onChange={(e) => {\n            e.preventDefault();\n          }}\n          name={name}\n          disabled={disabled}\n          id={id}\n          onFocus={() => {\n            const listboxButton = listboxButtonRef.current;\n            if (listboxButton) listboxButton.focus();\n          }}\n        >\n          <option className=\"hidden\" value=\"\" disabled hidden>\n            {placeholder}\n          </option>\n          {childrenArray.map((child: any) => {\n            const value = child.props.value;\n            const name = child.props.children;\n            return (\n              <option className=\"hidden\" key={value} value={value}>\n                {name}\n              </option>\n            );\n          })}\n        </select>\n        <Listbox\n          as=\"div\"\n          ref={ref}\n          defaultValue={selectedValue}\n          value={selectedValue}\n          onChange={\n            ((value: string) => {\n              onValueChange?.(value);\n              setSelectedValue(value);\n            }) as any\n          }\n          disabled={disabled}\n          id={id}\n          {...other}\n        >\n          {({ value }) => (\n            <>\n              <ListboxButton\n                ref={listboxButtonRef}\n                className={tremorTwMerge(\n                  // common\n                  \"w-full outline-none text-left whitespace-nowrap truncate rounded-tremor-default focus:ring-2 transition duration-100 border pr-8 py-2\",\n                  // light\n                  \"border-tremor-border shadow-tremor-input focus:border-tremor-brand-subtle focus:ring-tremor-brand-muted\",\n                  // dark\n                  \"dark:border-dark-tremor-border dark:shadow-dark-tremor-input dark:focus:border-dark-tremor-brand-subtle dark:focus:ring-dark-tremor-brand-muted\",\n                  Icon ? \"pl-10\" : \"pl-3\",\n                  getSelectButtonColors(hasValue(value), disabled, error),\n                )}\n              >\n                {Icon && (\n                  <span\n                    className={tremorTwMerge(\n                      \"absolute inset-y-0 left-0 flex items-center ml-px pl-2.5\",\n                    )}\n                  >\n                    <Icon\n                      className={tremorTwMerge(\n                        makeSelectClassName(\"Icon\"),\n                        // common\n                        \"flex-none h-5 w-5\",\n                        // light\n                        \"text-tremor-content-subtle\",\n                        // dark\n                        \"dark:text-dark-tremor-content-subtle\",\n                      )}\n                    />\n                  </span>\n                )}\n                <span className=\"w-[90%] block truncate\">\n                  {value ? (valueToNameMapping.get(value) ?? placeholder) : placeholder}\n                </span>\n                <span\n                  className={tremorTwMerge(\"absolute inset-y-0 right-0 flex items-center mr-3\")}\n                >\n                  <ArrowDownHeadIcon\n                    className={tremorTwMerge(\n                      makeSelectClassName(\"arrowDownIcon\"),\n                      // common\n                      \"flex-none h-5 w-5\",\n                      // light\n                      \"text-tremor-content-subtle\",\n                      // dark\n                      \"dark:text-dark-tremor-content-subtle\",\n                    )}\n                  />\n                </span>\n              </ListboxButton>\n              {enableClear && selectedValue ? (\n                <button\n                  type=\"button\"\n                  className={tremorTwMerge(\"absolute inset-y-0 right-0 flex items-center mr-8\")}\n                  onClick={(e) => {\n                    e.preventDefault();\n                    handleReset();\n                  }}\n                >\n                  <XCircleIcon\n                    className={tremorTwMerge(\n                      makeSelectClassName(\"clearIcon\"),\n                      // common\n                      \"flex-none h-4 w-4\",\n                      // light\n                      \"text-tremor-content-subtle\",\n                      // dark\n                      \"dark:text-dark-tremor-content-subtle\",\n                    )}\n                  />\n                </button>\n              ) : null}\n              <Transition\n                enter=\"transition ease duration-100 transform\"\n                enterFrom=\"opacity-0 -translate-y-4\"\n                enterTo=\"opacity-100 translate-y-0\"\n                leave=\"transition ease duration-100 transform\"\n                leaveFrom=\"opacity-100 translate-y-0\"\n                leaveTo=\"opacity-0 -translate-y-4\"\n              >\n                <ListboxOptions\n                  anchor=\"bottom start\"\n                  className={tremorTwMerge(\n                    // common\n                    \"z-10 w-[var(--button-width)] divide-y overflow-y-auto outline-none rounded-tremor-default max-h-[228px]  border [--anchor-gap:4px]\",\n                    // light\n                    \"bg-tremor-background border-tremor-border divide-tremor-border shadow-tremor-dropdown\",\n                    // dark\n                    \"dark:bg-dark-tremor-background dark:border-dark-tremor-border dark:divide-dark-tremor-border dark:shadow-dark-tremor-dropdown\",\n                  )}\n                >\n                  {children}\n                </ListboxOptions>\n              </Transition>\n            </>\n          )}\n        </Listbox>\n      </div>\n      {error && errorMessage ? (\n        <p className={tremorTwMerge(\"errorMessage\", \"text-sm text-rose-500 mt-1\")}>\n          {errorMessage}\n        </p>\n      ) : null}\n    </div>\n  );\n});\n\nSelect.displayName = \"Select\";\n\nexport default Select;\n"
  },
  {
    "path": "src/components/input-elements/Select/SelectItem.tsx",
    "content": "\"use client\";\nimport React from \"react\";\nimport { ListboxOption } from \"@headlessui/react\";\nimport { makeClassName, tremorTwMerge } from \"lib\";\n\nconst makeSelectItemClassName = makeClassName(\"SelectItem\");\n\nexport interface SelectItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: string;\n  icon?: React.ElementType;\n}\n\nconst SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>((props, ref) => {\n  const { value, icon, className, children, ...other } = props;\n\n  const Icon = icon;\n\n  return (\n    <ListboxOption\n      className={tremorTwMerge(\n        makeSelectItemClassName(\"root\"),\n        // common\n        \"flex justify-start items-center cursor-default text-tremor-default px-2.5 py-2.5\",\n        // light\n        \"data-[focus]:bg-tremor-background-muted  data-[focus]:text-tremor-content-strong data-[selected]:text-tremor-content-strong data-[selected]:bg-tremor-background-muted text-tremor-content-emphasis\",\n        // dark\n        \"dark:data-[focus]:bg-dark-tremor-background-muted  dark:data-[focus]:text-dark-tremor-content-strong dark:data-[selected]:text-dark-tremor-content-strong dark:data-[selected]:bg-dark-tremor-background-muted dark:text-dark-tremor-content-emphasis\",\n        className,\n      )}\n      ref={ref}\n      key={value}\n      value={value}\n      {...other}\n    >\n      {Icon && (\n        <Icon\n          className={tremorTwMerge(\n            makeSelectItemClassName(\"icon\"),\n            // common\n            \"flex-none w-5 h-5 mr-1.5\",\n            // light\n            \"text-tremor-content-subtle\",\n            // dark\n            \"dark:text-dark-tremor-content-subtle\",\n          )}\n        />\n      )}\n      <span className=\"whitespace-nowrap truncate\">{children ?? value}</span>\n    </ListboxOption>\n  );\n});\n\nSelectItem.displayName = \"SelectItem\";\n\nexport default SelectItem;\n"
  },
  {
    "path": "src/components/input-elements/Select/index.ts",
    "content": "export { default as Select } from \"./Select\";\nexport type { SelectProps } from \"./Select\";\nexport { default as SelectItem } from \"./SelectItem\";\nexport type { SelectItemProps } from \"./SelectItem\";\n"
  },
  {
    "path": "src/components/input-elements/Switch/Switch.tsx",
    "content": "\"use client\";\nimport { Switch as HeadlessSwitch } from \"@headlessui/react\";\nimport { useInternalState } from \"hooks\";\nimport {\n  Color,\n  makeClassName,\n  tremorTwMerge,\n  colorPalette,\n  getColorClassNames,\n  mergeRefs,\n} from \"lib\";\nimport Tooltip, { useTooltip } from \"components/util-elements/Tooltip/Tooltip\";\n\nimport React, { useState } from \"react\";\n\nconst getSwitchColors = (color?: Color) => {\n  return {\n    bgColor: color\n      ? getColorClassNames(color, colorPalette.background).bgColor\n      : \"bg-tremor-brand dark:bg-dark-tremor-brand\",\n    ringColor: color\n      ? getColorClassNames(color, colorPalette.ring).ringColor\n      : \"ring-tremor-brand-muted dark:ring-dark-tremor-brand-muted\",\n  };\n};\n\nconst makeSwitchClassName = makeClassName(\"Switch\");\n\nexport interface SwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onChange?: (value: boolean) => void;\n  color?: Color;\n  name?: string;\n  error?: boolean;\n  errorMessage?: string;\n  disabled?: boolean;\n  required?: boolean;\n  id?: string;\n  tooltip?: string;\n}\n\nconst Switch = React.forwardRef<HTMLDivElement, SwitchProps>((props, ref) => {\n  const {\n    checked,\n    defaultChecked = false,\n    onChange,\n    color,\n    name,\n    error,\n    errorMessage,\n    disabled,\n    required,\n    tooltip,\n    id,\n    ...other\n  } = props;\n  const switchColorStyles = getSwitchColors(color);\n\n  const [isChecked, setIsChecked] = useInternalState(defaultChecked, checked);\n  const [isFocused, setIsFocused] = useState(false);\n  const delay = 300;\n  const { tooltipProps, getReferenceProps } = useTooltip(delay);\n\n  return (\n    <div className=\"flex flex-row items-center justify-start\">\n      <Tooltip text={tooltip} {...tooltipProps} />\n      <div\n        ref={mergeRefs([ref, tooltipProps.refs.setReference])}\n        className={tremorTwMerge(makeSwitchClassName(\"root\"), \"flex flex-row relative h-5\")}\n        {...other}\n        {...getReferenceProps}\n      >\n        <input\n          type=\"checkbox\"\n          className={tremorTwMerge(\n            makeSwitchClassName(\"input\"),\n            \"absolute w-5 h-5 cursor-pointer left-0 top-0 opacity-0\",\n          )}\n          name={name}\n          required={required}\n          checked={isChecked}\n          onChange={(e) => {\n            e.preventDefault();\n          }}\n        />\n        <HeadlessSwitch\n          checked={isChecked}\n          onChange={(e) => {\n            setIsChecked(e);\n            onChange?.(e);\n          }}\n          disabled={disabled}\n          className={tremorTwMerge(\n            makeSwitchClassName(\"switch\"),\n            \"w-10 h-5 group relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-tremor-full\",\n            \"focus:outline-none\",\n            disabled ? \"cursor-not-allowed\" : \"\",\n          )}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          id={id}\n        >\n          <span className={tremorTwMerge(makeSwitchClassName(\"sr-only\"), \"sr-only\")}>\n            Switch {isChecked ? \"on\" : \"off\"}\n          </span>\n          <span\n            aria-hidden=\"true\"\n            className={tremorTwMerge(\n              makeSwitchClassName(\"background\"),\n              isChecked ? switchColorStyles.bgColor : \"bg-tremor-border dark:bg-dark-tremor-border\",\n              \"pointer-events-none absolute mx-auto h-3 w-9 rounded-tremor-full transition-colors duration-100 ease-in-out\",\n            )}\n          />\n          <span\n            aria-hidden=\"true\"\n            className={tremorTwMerge(\n              makeSwitchClassName(\"round\"),\n              isChecked\n                ? tremorTwMerge(\n                    switchColorStyles.bgColor,\n                    \"translate-x-5 border-tremor-background dark:border-dark-tremor-background\",\n                  )\n                : \"translate-x-0 bg-tremor-border dark:bg-dark-tremor-border border-tremor-background dark:border-dark-tremor-background\",\n              \"pointer-events-none absolute left-0 inline-block h-5 w-5 transform rounded-tremor-full border-2 shadow-tremor-input duration-100 ease-in-out transition\",\n              isFocused ? tremorTwMerge(\"ring-2\", switchColorStyles.ringColor) : \"\",\n            )}\n          />\n        </HeadlessSwitch>\n      </div>\n      {error && errorMessage ? (\n        <p\n          className={tremorTwMerge(\n            makeSwitchClassName(\"errorMessage\"),\n            \"text-sm text-red-500 mt-1 \",\n          )}\n        >\n          {errorMessage}\n        </p>\n      ) : null}\n    </div>\n  );\n});\n\nSwitch.displayName = \"Switch\";\n\nexport default Switch;\n"
  },
  {
    "path": "src/components/input-elements/Switch/index.ts",
    "content": "export { default as Switch } from \"./Switch\";\nexport type { SwitchProps } from \"./Switch\";\n"
  },
  {
    "path": "src/components/input-elements/Tabs/Tab.tsx",
    "content": "\"use client\";\nimport { Tab as HeadlessTab } from \"@headlessui/react\";\nimport { colorPalette, getColorClassNames, tremorTwMerge, makeClassName } from \"lib\";\nimport React, { useContext } from \"react\";\n\nimport { TabVariant, TabVariantContext } from \"components/input-elements/Tabs/TabList\";\nimport { BaseColorContext } from \"contexts\";\nimport { Color } from \"../../../lib/inputTypes\";\n\nconst makeTabClassName = makeClassName(\"Tab\");\n\nfunction getVariantStyles(tabVariant: TabVariant, color?: Color) {\n  switch (tabVariant) {\n    case \"line\":\n      return tremorTwMerge(\n        // common\n        \"data-[selected]:border-b-2 hover:border-b-2 border-transparent transition duration-100 -mb-px px-2 py-2\",\n        // light\n        \"hover:border-tremor-content hover:text-tremor-content-emphasis text-tremor-content\",\n        // dark\n        \"[&:not([data-selected])]:dark:hover:border-dark-tremor-content-emphasis [&:not([data-selected])]:dark:hover:text-dark-tremor-content-emphasis [&:not([data-selected])]:dark:text-dark-tremor-content\",\n        // brand\n        color\n          ? getColorClassNames(color, colorPalette.border).selectBorderColor\n          : [\n              \"data-[selected]:border-tremor-brand data-[selected]:text-tremor-brand\",\n              \"data-[selected]:dark:border-dark-tremor-brand data-[selected]:dark:text-dark-tremor-brand\",\n            ],\n      );\n    case \"solid\":\n      return tremorTwMerge(\n        // common\n        \"border-transparent border rounded-tremor-small px-2.5 py-1\",\n        // light\n        \"data-[selected]:border-tremor-border data-[selected]:bg-tremor-background data-[selected]:shadow-tremor-input [&:not([data-selected])]:hover:text-tremor-content-emphasis data-[selected]:text-tremor-brand [&:not([data-selected])]:text-tremor-content\",\n        // dark\n        \"dark:data-[selected]:border-dark-tremor-border dark:data-[selected]:bg-dark-tremor-background dark:data-[selected]:shadow-dark-tremor-input dark:[&:not([data-selected])]:hover:text-dark-tremor-content-emphasis dark:data-[selected]:text-dark-tremor-brand dark:[&:not([data-selected])]:text-dark-tremor-content\",\n        // brand\n        color\n          ? getColorClassNames(color, colorPalette.text).selectTextColor\n          : \"text-tremor-content dark:text-dark-tremor-content\",\n      );\n  }\n}\n\nexport interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  icon?: React.ElementType;\n}\n\nconst Tab = React.forwardRef<HTMLButtonElement, TabProps>((props, ref) => {\n  const { icon, className, children, ...other } = props;\n\n  const variant = useContext(TabVariantContext);\n  const color = useContext(BaseColorContext);\n  const Icon = icon;\n  return (\n    <HeadlessTab\n      ref={ref}\n      className={tremorTwMerge(\n        makeTabClassName(\"root\"),\n        // common\n        \"flex whitespace-nowrap truncate max-w-xs outline-none data-focus-visible:ring text-tremor-default transition duration-100\",\n        getVariantStyles(variant, color),\n        className,\n        color && getColorClassNames(color, colorPalette.text).selectTextColor,\n      )}\n      {...other}\n    >\n      {Icon ? (\n        <Icon\n          className={tremorTwMerge(\n            makeTabClassName(\"icon\"),\n            \"flex-none h-5 w-5\",\n            children ? \"mr-2\" : \"\",\n          )}\n        />\n      ) : null}\n      {children ? <span>{children}</span> : null}\n    </HeadlessTab>\n  );\n});\n\nTab.displayName = \"Tab\";\n\nexport default Tab;\n"
  },
  {
    "path": "src/components/input-elements/Tabs/TabGroup.tsx",
    "content": "\"use client\";\nimport { Tab } from \"@headlessui/react\";\nimport { makeClassName, tremorTwMerge } from \"lib\";\nimport React from \"react\";\n\nconst makeTabGroupClassName = makeClassName(\"TabGroup\");\n\nexport interface TabGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  defaultIndex?: number;\n  index?: number;\n  onIndexChange?: (index: number) => void;\n  children: React.ReactElement[] | React.ReactElement;\n}\n\nconst TabGroup = React.forwardRef<HTMLDivElement, TabGroupProps>((props, ref) => {\n  const { defaultIndex, index, onIndexChange, children, className, ...other } = props;\n  return (\n    <Tab.Group\n      as=\"div\"\n      ref={ref}\n      defaultIndex={defaultIndex}\n      selectedIndex={index}\n      onChange={onIndexChange as any}\n      className={tremorTwMerge(makeTabGroupClassName(\"root\"), \"w-full\", className)}\n      {...other}\n    >\n      {children}\n    </Tab.Group>\n  );\n});\n\nTabGroup.displayName = \"TabGroup\";\n\nexport default TabGroup;\n"
  },
  {
    "path": "src/components/input-elements/Tabs/TabList.tsx",
    "content": "\"use client\";\nimport React, { createContext } from \"react\";\n\nimport { BaseColorContext } from \"contexts\";\n\nimport { Tab } from \"@headlessui/react\";\nimport { makeClassName, tremorTwMerge, Color } from \"lib\";\n\nconst makeTabListClassName = makeClassName(\"TabList\");\n\nexport type TabVariant = \"line\" | \"solid\";\n\nexport const TabVariantContext = createContext<TabVariant>(\"line\");\n\nconst variantStyles: { [key in TabVariant]: string } = {\n  line: tremorTwMerge(\n    // common\n    \"flex border-b space-x-4\",\n    // light\n    \"border-tremor-border\",\n    // dark\n    \"dark:border-dark-tremor-border\",\n  ),\n  solid: tremorTwMerge(\n    // common\n    \"inline-flex p-0.5 rounded-tremor-default space-x-1.5\",\n    // light\n    \"bg-tremor-background-subtle\",\n    // dark\n    \"dark:bg-dark-tremor-background-subtle\",\n  ),\n};\n\nexport interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {\n  color?: Color;\n  variant?: TabVariant;\n  children: React.ReactElement[] | React.ReactElement;\n}\n\nconst TabList = React.forwardRef<HTMLDivElement, TabListProps>((props, ref) => {\n  const { color, variant = \"line\", children, className, ...other } = props;\n\n  return (\n    <Tab.List\n      ref={ref}\n      className={tremorTwMerge(\n        makeTabListClassName(\"root\"),\n        \"justify-start overflow-x-clip\",\n        variantStyles[variant],\n        className,\n      )}\n      {...other}\n    >\n      <TabVariantContext.Provider value={variant}>\n        <BaseColorContext.Provider value={color}>{children}</BaseColorContext.Provider>\n      </TabVariantContext.Provider>\n    </Tab.List>\n  );\n});\n\nTabList.displayName = \"TabList\";\n\nexport default TabList;\n"
  },
  {
    "path": "src/components/input-elements/Tabs/TabPanel.tsx",
    "content": "\"use client\";\nimport { IndexContext, SelectedValueContext } from \"contexts\";\nimport { makeClassName, tremorTwMerge } from \"lib\";\nimport React, { useContext } from \"react\";\n\nconst makeTabPanelClassName = makeClassName(\"TabPanel\");\n\nconst TabPanel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  (props, ref) => {\n    const { children, className, ...other } = props;\n\n    const { selectedValue: selectedIndex } = useContext(SelectedValueContext);\n    const index = useContext(IndexContext);\n\n    const isSelected = selectedIndex === index;\n\n    return (\n      // Not using Tab.Panel because of https://github.com/tailwindlabs/headlessui/discussions/2366.\n      <div\n        ref={ref}\n        className={tremorTwMerge(\n          makeTabPanelClassName(\"root\"),\n          \"w-full mt-2\",\n          isSelected ? \"\" : \"hidden\",\n          className,\n        )}\n        aria-selected={isSelected ? \"true\" : \"false\"}\n        {...other}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nTabPanel.displayName = \"TabPanel\";\n\nexport default TabPanel;\n"
  },
  {
    "path": "src/components/input-elements/Tabs/TabPanels.tsx",
    "content": "\"use client\";\nimport { Tab } from \"@headlessui/react\";\nimport { IndexContext, SelectedValueContext } from \"contexts\";\nimport { makeClassName, tremorTwMerge } from \"lib\";\nimport React from \"react\";\n\nconst makeTabPanelsClassName = makeClassName(\"TabPanels\");\n\nconst TabPanels = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  (props, ref) => {\n    const { children, className, ...other } = props;\n\n    return (\n      <Tab.Panels\n        as=\"div\"\n        ref={ref}\n        className={tremorTwMerge(makeTabPanelsClassName(\"root\"), \"w-full\", className)}\n        {...other}\n      >\n        {({ selectedIndex }) => (\n          <SelectedValueContext.Provider value={{ selectedValue: selectedIndex }}>\n            {React.Children.map(children, (child, index) => (\n              <IndexContext.Provider value={index}>{child}</IndexContext.Provider>\n            ))}\n          </SelectedValueContext.Provider>\n        )}\n      </Tab.Panels>\n    );\n  },\n);\n\nTabPanels.displayName = \"TabPanels\";\n\nexport default TabPanels;\n"
  },
  {
    "path": "src/components/input-elements/Tabs/index.ts",
    "content": "export { default as Tab } from \"./Tab\";\nexport type { TabProps } from \"./Tab\";\nexport { default as TabGroup } from \"./TabGroup\";\nexport type { TabGroupProps } from \"./TabGroup\";\nexport { default as TabList } from \"./TabList\";\nexport type { TabListProps } from \"./TabList\";\nexport { default as TabPanel } from \"./TabPanel\";\nexport { default as TabPanels } from \"./TabPanels\";\n"
  },
  {
    "path": "src/components/input-elements/TextInput/TextInput.tsx",
    "content": "\"use client\";\nimport React from \"react\";\nimport { makeClassName } from \"lib\";\nimport BaseInput, { BaseInputProps } from \"../BaseInput\";\n\nexport type TextInputProps = Omit<BaseInputProps, \"stepper\" | \"makeInputClassName\"> & {\n  defaultValue?: string;\n  value?: string;\n  onValueChange?: (value: string) => void;\n  icon?: React.ElementType | React.JSXElementConstructor<any>;\n  error?: boolean;\n  errorMessage?: string;\n  disabled?: boolean;\n};\n\nconst makeTextInputClassName = makeClassName(\"TextInput\");\n\nconst TextInput = React.forwardRef<HTMLInputElement, TextInputProps>((props, ref) => {\n  const { type = \"text\", ...other } = props;\n  return <BaseInput ref={ref} type={type} makeInputClassName={makeTextInputClassName} {...other} />;\n});\n\nTextInput.displayName = \"TextInput\";\n\nexport default TextInput;\n"
  },
  {
    "path": "src/components/input-elements/TextInput/index.ts",
    "content": "export { default as TextInput } from \"./TextInput\";\nexport type { TextInputProps } from \"./TextInput\";\n"
  },
  {
    "path": "src/components/input-elements/Textarea/Textarea.tsx",
    "content": "\"use client\";\n\nimport { getSelectButtonColors, hasValue } from \"components/input-elements/selectUtils\";\nimport { useInternalState } from \"hooks\";\n\nimport { makeClassName, mergeRefs, tremorTwMerge } from \"lib\";\nimport React, { useEffect, useRef } from \"react\";\n\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  defaultValue?: string | number;\n  value?: string | number;\n  error?: boolean;\n  errorMessage?: string;\n  disabled?: boolean;\n  autoHeight?: boolean;\n  onValueChange?: (value: any) => void;\n}\n\nconst makeTextareaClassName = makeClassName(\"Textarea\");\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>((props, ref) => {\n  const {\n    value,\n    defaultValue = \"\",\n    placeholder = \"Type...\",\n    error = false,\n    errorMessage,\n    disabled = false,\n    className,\n    onChange,\n    onValueChange,\n    autoHeight = false,\n    ...other\n  } = props;\n  const [val, setVal] = useInternalState(defaultValue, value);\n\n  const inputRef = useRef<HTMLTextAreaElement>(null);\n\n  const hasSelection = hasValue(val);\n\n  useEffect(() => {\n    const textAreaHTMLRef = inputRef.current;\n    if (autoHeight && textAreaHTMLRef) {\n      textAreaHTMLRef.style.height = \"60px\";\n      // Calculates the height dynamically\n      const scrollHeight = textAreaHTMLRef.scrollHeight;\n      textAreaHTMLRef.style.height = scrollHeight + \"px\";\n    }\n  }, [autoHeight, inputRef, val]);\n  return (\n    <>\n      <textarea\n        ref={mergeRefs([inputRef, ref])}\n        value={val}\n        placeholder={placeholder}\n        disabled={disabled}\n        className={tremorTwMerge(\n          makeTextareaClassName(\"Textarea\"),\n          // common\n          \"w-full flex items-center outline-none rounded-tremor-default px-3 py-2 text-tremor-default focus:ring-2 transition duration-100 border\",\n          // light\n          \"shadow-tremor-input focus:border-tremor-brand-subtle focus:ring-tremor-brand-muted\",\n          // dark\n          \"dark:shadow-dark-tremor-input focus:dark:border-dark-tremor-brand-subtle focus:dark:ring-dark-tremor-brand-muted\",\n          getSelectButtonColors(hasSelection, disabled, error),\n          disabled\n            ? \"placeholder:text-tremor-content-subtle dark:placeholder:text-dark-tremor-content-subtle\"\n            : \"placeholder:text-tremor-content dark:placeholder:text-dark-tremor-content\",\n          className,\n        )}\n        data-testid=\"text-area\"\n        onChange={(e) => {\n          onChange?.(e);\n          setVal(e.target.value);\n          onValueChange?.(e.target.value);\n        }}\n        {...other}\n      />\n      {error && errorMessage ? (\n        <p\n          className={tremorTwMerge(\n            makeTextareaClassName(\"errorMessage\"),\n            \"text-sm text-red-500 mt-1\",\n          )}\n        >\n          {errorMessage}\n        </p>\n      ) : null}\n    </>\n  );\n});\n\nTextarea.displayName = \"Textarea\";\n\nexport default Textarea;\n"
  },
  {
    "path": "src/components/input-elements/Textarea/index.ts",
    "content": "export { default as Textarea } from \"./Textarea\";\nexport type { TextareaProps } from \"./Textarea\";\n"
  },
  {
    "path": "src/components/input-elements/index.ts",
    "content": "export * from \"./Button\";\nexport * from \"./DatePicker\";\nexport * from \"./DateRangePicker\";\nexport * from \"./MultiSelect\";\nexport * from \"./NumberInput\";\nexport * from \"./SearchSelect\";\nexport * from \"./Select\";\nexport * from \"./Switch\";\nexport * from \"./Tabs\";\nexport * from \"./Textarea\";\nexport * from \"./TextInput\";\n"
  },
  {
    "path": "src/components/input-elements/selectUtils.ts",
    "content": "import { tremorTwMerge } from \"lib\";\nimport React from \"react\";\n\nexport interface SelectItemProps {\n  value: string;\n  children?: React.ReactNode;\n}\n\nexport const getNodeText = (node: React.ReactElement): string | React.ReactElement | undefined => {\n  if ([\"string\", \"number\"].includes(typeof node)) return node;\n  if (node instanceof Array) return node.map(getNodeText).join(\"\");\n  if (typeof node === \"object\" && node) return getNodeText(node.props.children);\n};\n\nexport function constructValueToNameMapping(children: React.ReactElement[] | React.ReactElement) {\n  const valueToNameMapping = new Map<string, string>();\n  React.Children.map(children, (child: React.ReactElement<SelectItemProps>) => {\n    valueToNameMapping.set(child.props.value, (getNodeText(child) ?? child.props.value) as string);\n  });\n  return valueToNameMapping;\n}\n\nexport function getFilteredOptions(\n  searchQuery: string,\n  children: React.ReactElement[],\n): React.ReactElement[] {\n  return React.Children.map(children, (child) => {\n    const optionText = (getNodeText(child) ?? child.props.value) as string;\n    if (optionText.toLowerCase().includes(searchQuery.toLowerCase())) return child;\n  });\n}\n\nexport const getSelectButtonColors = (\n  hasSelection: boolean,\n  isDisabled: boolean,\n  hasError = false,\n) => {\n  return tremorTwMerge(\n    isDisabled\n      ? \"bg-tremor-background-subtle dark:bg-dark-tremor-background-subtle\"\n      : \"bg-tremor-background dark:bg-dark-tremor-background\",\n    !isDisabled && \"hover:bg-tremor-background-muted dark:hover:bg-dark-tremor-background-muted\",\n    hasSelection\n      ? \"text-tremor-content-emphasis dark:text-dark-tremor-content-emphasis\"\n      : \"text-tremor-content dark:text-dark-tremor-content\",\n    isDisabled && \"text-tremor-content-subtle dark:text-dark-tremor-content-subtle\",\n    hasError &&\n      \"text-red-500 placeholder:text-red-500 dark:text-red-500 dark:placeholder:text-red-500\",\n    hasError\n      ? \"border-red-500 dark:border-red-500\"\n      : \"border-tremor-border dark:border-dark-tremor-border\",\n  );\n};\n\nexport function hasValue<T>(value: T | null | undefined) {\n  return value !== null && value !== undefined && value !== \"\";\n}\n"
  },
  {
    "path": "src/components/layout-elements/Accordion/Accordion.tsx",
    "content": "\"use client\";\nimport { Disclosure } from \"@headlessui/react\";\nimport { RootStylesContext } from \"contexts\";\nimport { makeClassName, tremorTwMerge } from \"lib\";\nimport React, { createContext, useContext } from \"react\";\n\nconst makeAccordionClassName = makeClassName(\"Accordion\");\n\ninterface OpenContextValue {\n  isOpen: boolean;\n}\nexport const OpenContext = createContext<OpenContextValue>({\n  isOpen: false,\n});\n\nexport interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  defaultOpen?: boolean;\n}\n\nconst Accordion = React.forwardRef<HTMLDivElement, AccordionProps>((props, ref) => {\n  const { defaultOpen = false, children, className, ...other } = props;\n\n  const rootStyles =\n    useContext(RootStylesContext) ?? tremorTwMerge(\"rounded-tremor-default border\");\n  return (\n    <Disclosure\n      as=\"div\"\n      ref={ref}\n      className={tremorTwMerge(\n        makeAccordionClassName(\"root\"),\n        // common\n        \"overflow-hidden\",\n        // light\n        \"bg-tremor-background border-tremor-border\",\n        // dark\n        \"dark:bg-dark-tremor-background dark:border-dark-tremor-border\",\n        rootStyles,\n        className,\n      )}\n      defaultOpen={defaultOpen}\n      {...other}\n    >\n      {({ open }) => (\n        <OpenContext.Provider value={{ isOpen: open }}>{children}</OpenContext.Provider>\n      )}\n    </Disclosure>\n  );\n});\n\nAccordion.displayName = \"Accordion\";\n\nexport default Accordion;\n"
  },
  {
    "path": "src/components/layout-elements/Accordion/AccordionBody.tsx",
    "content": "\"use client\";\nimport React from \"react\";\nimport { Disclosure } from \"@headlessui/react\";\nimport { makeClassName, tremorTwMerge } from \"lib\";\n\nconst makeAccordionBodyClassName = makeClassName(\"AccordionBody\");\n\nconst AccordionBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  (props, ref) => {\n    const { children, className, ...other } = props;\n    return (\n      <Disclosure.Panel\n        ref={ref}\n        className={tremorTwMerge(\n          makeAccordionBodyClassName(\"root\"),\n          // common\n          \"w-full text-tremor-default px-4 pb-3\",\n          // light\n          \"text-tremor-content\",\n          // dark\n          \"dark:text-dark-tremor-content\",\n          className,\n        )}\n        {...other}\n      >\n        {children}\n      </Disclosure.Panel>\n    );\n  },\n);\n\nAccordionBody.displayName = \"AccordionBody\";\n\nexport default AccordionBody;\n"
  },
  {
    "path": "src/components/layout-elements/Accordion/AccordionHeader.tsx",
    "content": "\"use client\";\nimport React, { useContext } from \"react\";\n\nimport { Disclosure } from \"@headlessui/react\";\nimport { ArrowUpHeadIcon } from \"assets\";\nimport { OpenContext } from \"components/layout-elements/Accordion/Accordion\";\nimport { makeClassName, tremorTwMerge } from \"lib\";\n\nconst makeAccordionHeaderClassName = makeClassName(\"AccordionHeader\");\n\nconst AccordionHeader = React.forwardRef<\n  HTMLButtonElement,\n  React.ButtonHTMLAttributes<HTMLButtonElement>\n>((props, ref) => {\n  const { children, className, ...other } = props;\n\n  const { isOpen } = useContext(OpenContext);\n\n  return (\n    <Disclosure.Button\n      ref={ref}\n      className={tremorTwMerge(\n        makeAccordionHeaderClassName(\"root\"),\n        // common\n        \"w-full flex items-center justify-between px-4 py-3\",\n        // light\n        \"text-tremor-content-emphasis\",\n        // dark\n        \"dark:text-dark-tremor-content-emphasis\",\n        className,\n      )}\n      {...other}\n    >\n      <div\n        className={tremorTwMerge(\n          makeAccordionHeaderClassName(\"children\"),\n          \"flex flex-1 text-inherit mr-4\",\n        )}\n      >\n        {children}\n      </div>\n      <div>\n        <ArrowUpHeadIcon\n          className={tremorTwMerge(\n            makeAccordionHeaderClassName(\"arrowIcon\"),\n            //common\n            \"h-5 w-5 -mr-1\",\n            // light\n            \"text-tremor-content-subtle\",\n            // dark\n            \"dark:text-dark-tremor-content-subtle\",\n            isOpen ? \"transition-all\" : \"transition-all -rotate-180\",\n          )}\n        />\n      </div>\n    </Disclosure.Button>\n  );\n});\n\nAccordionHeader.displayName = \"AccordionHeader\";\n\nexport default AccordionHeader;\n"
  },
  {
    "path": "src/components/layout-elements/Accordion/AccordionList.tsx",
    "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { RootStylesContext } from \"contexts\";\nimport { makeClassName, tremorTwMerge } from \"lib\";\n\nconst makeAccordionListClassName = makeClassName(\"AccordionList\");\n\nexport interface AccordionListProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactElement[] | React.ReactElement;\n}\n\nconst AccordionList = React.forwardRef<HTMLDivElement, AccordionListProps>((props, ref) => {\n  const { children, className, ...other } = props;\n  const numChildren = React.Children.count(children);\n\n  return (\n    <div\n      ref={ref}\n      className={tremorTwMerge(\n        makeAccordionListClassName(\"root\"),\n        // common\n        \"rounded-tremor-default\",\n        // light\n        \"shadow-tremor-card\",\n        // dark\n        \"dark:shadow-dark-tremor-card\",\n        className,\n      )}\n      {...other}\n    >\n      {React.Children.map(children, (child, idx) => {\n        if (idx === 0) {\n          return (\n            <RootStylesContext.Provider value={tremorTwMerge(\"rounded-t-tremor-default border\")}>\n              {React.cloneElement(child)}\n            </RootStylesContext.Provider>\n          );\n        }\n        if (idx === numChildren - 1) {\n          return (\n            <RootStylesContext.Provider\n              value={tremorTwMerge(\"rounded-b-tremor-default border-l border-r border-b\")}\n            >\n              {React.cloneElement(child)}\n            </RootStylesContext.Provider>\n          );\n        }\n        return (\n          <RootStylesContext.Provider value={tremorTwMerge(\"border-l border-r border-b\")}>\n            {React.cloneElement(child)}\n          </RootStylesContext.Provider>\n        );\n      })}\n    </div>\n  );\n});\n\nAccordionList.displayName = \"AccordionList\";\n\nexport default AccordionList;\n"
  },
  {
    "path": "src/components/layout-elements/Accordion/index.ts",
    "content": "export { default as Accordion } from \"./Accordion\";\nexport type { AccordionProps } from \"./Accordion\";\nexport { default as AccordionBody } from \"./AccordionBody\";\nexport { default as AccordionHeader } from \"./AccordionHeader\";\nexport { default as AccordionList } from \"./AccordionList\";\nexport type { AccordionListProps } from \"./AccordionList\";\n"
  },
  {
    "path": "src/components/layout-elements/Card/Card.tsx",
    "content": "import React from \"react\";\nimport {\n  getColorClassNames,\n  makeClassName,\n  tremorTwMerge,\n  Color,\n  HorizontalPosition,\n  VerticalPosition,\n} from \"lib\";\nimport { HorizontalPositions, VerticalPositions } from \"lib/constants\";\nimport { colorPalette } from \"lib/theme\";\n\nconst makeCardClassName = makeClassName(\"Card\");\n\nconst parseDecorationAlignment = (decorationAlignment: string) => {\n  if (!decorationAlignment) return \"\";\n  switch (decorationAlignment) {\n    case HorizontalPositions.Left:\n      return \"border-l-4\";\n    case VerticalPositions.Top:\n      return \"border-t-4\";\n    case HorizontalPositions.Right:\n      return \"border-r-4\";\n    case VerticalPositions.Bottom:\n      return \"border-b-4\";\n    default:\n      return \"\";\n  }\n};\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  decoration?: HorizontalPosition | VerticalPosition | \"\";\n  decorationColor?: Color;\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {\n  const { decoration = \"\", decorationColor, children, className, ...other } = props;\n  return (\n    <div\n      ref={ref}\n      className={tremorTwMerge(\n        makeCardClassName(\"root\"),\n        // common\n        \"relative w-full text-left ring-1 rounded-tremor-default p-6\",\n        // light\n        \"bg-tremor-background ring-tremor-ring shadow-tremor-card\",\n        // dark\n        \"dark:bg-dark-tremor-background dark:ring-dark-tremor-ring dark:shadow-dark-tremor-card\",\n        // brand\n        decorationColor\n          ? getColorClassNames(decorationColor, colorPalette.border).borderColor\n          : \"border-tremor-brand dark:border-dark-tremor-brand\",\n        parseDecorationAlignment(decoration),\n        className,\n      )}\n      {...other}\n    >\n      {children}\n    </div>\n  );\n});\n\nCard.displayName = \"Card\";\n\nexport default Card;\n"
  },
  {
    "path": "src/components/layout-elements/Card/index.ts",
    "content": "export { default as Card } from \"./Card\";\nexport type { CardProps } from \"./Card\";\n"
  },
  {
    "path": "src/components/layout-elements/Dialog/Dialog.tsx",
    "content": "import React from \"react\";\nimport { Dialog as HeadlessUiDialog, DialogBackdrop, Transition } from \"@headlessui/react\";\nimport { makeClassName, tremorTwMerge } from \"lib\";\n\nconst makeDisplayClassName = makeClassName(\"dialog\");\n\ntype Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };\ntype XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;\n\nexport type DialogProps = React.HTMLAttributes<HTMLDivElement> & {\n  open: boolean;\n  onClose: (val: boolean) => void;\n  role?: \"dialog\" | \"alertdialog\";\n} & XOR<{ unmount?: boolean }, { static?: boolean }>;\n\nconst Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, ref) => {\n  const { children, className, ...other } = props;\n  return (\n    <Transition appear show={props.open}>\n      <HeadlessUiDialog\n        ref={ref}\n        {...other}\n        className={tremorTwMerge(makeDisplayClassName(\"root\"), \"relative z-50\", className)}\n      >\n        <DialogBackdrop\n          transition\n          className=\"fixed bg-slate-950/30  dark:bg-slate-950/50  inset-0  transition-opacity data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in\"\n        />\n        <div className=\"fixed inset-0 overflow-y-auto w-screen\">\n          <div className=\"flex min-h-full items-center justify-center p-4\">{children}</div>\n        </div>\n      </HeadlessUiDialog>\n    </Transition>\n  );\n});\n\nDialog.displayName = \"Dialog\";\n\nexport default Dialog;\n"
  },
  {
    "path": "src/components/layout-elements/Dialog/DialogPanel.tsx",
    "content": "import React from \"react\";\nimport { DialogPanel as HeadlessuiDialogPanel, TransitionChild } from \"@headlessui/react\";\nimport { makeClassName, tremorTwMerge } from \"lib\";\nimport { RootStylesContext } from \"contexts\";\n\nconst makeDisplayClassName = makeClassName(\"dialog\");\n\nexport type DialogPanelProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst DialogPanel = React.forwardRef<HTMLDivElement, DialogPanelProps>((props, ref) => {\n  const { children, className, ...other } = props;\n  const rootStyles =\n    React.useContext(RootStylesContext) ?? tremorTwMerge(\"rounded-tremor-default p-6\");\n\n  return (\n    <TransitionChild\n      enter=\"ease-out duration-300\"\n      enterFrom=\"opacity-0 scale-95\"\n      enterTo=\"opacity-100 scale-100\"\n      leave=\"ease-in duration-200\"\n      leaveFrom=\"opacity-100 scale-100\"\n      leaveTo=\"opacity-0 scale-95\"\n    >\n      <HeadlessuiDialogPanel\n        ref={ref}\n        className={tremorTwMerge(\n          makeDisplayClassName(\"panel\"),\n          // common\n          \"w-full max-w-lg overflow-visible text-left ring-1 shadow-tremor transition-all transform\",\n          // light\n          \"bg-tremor-background  text-tremor-content ring-tremor-ring\",\n          // dark\n          \"dark:bg-dark-tremor-background dark:text-dark-tremor-content dark:ring-dark-tremor-ring\",\n          rootStyles,\n          className,\n        )}\n        {...other}\n      >\n        {children}\n      </HeadlessuiDialogPanel>\n    </TransitionChild>\n  );\n});\n\nDialogPanel.displayName = \"DialogPanel\";\n\nexport default DialogPanel;\n"
  },
  {
    "path": "src/components/layout-elements/Dialog/index.ts",
    "content": "export { default as Dialog, type DialogProps } from \"./Dialog\";\nexport { default as DialogPanel, type DialogPanelProps } from \"./DialogPanel\";\n"
  },
  {
    "path": "src/components/layout-elements/Divider/Divider.tsx",
    "content": "import { makeClassName, tremorTwMerge } from \"lib\";\nimport React from \"react\";\n\nconst makeDividerClassName = makeClassName(\"Divider\");\n\nconst Divider = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  (props, ref) => {\n    const { className, children, ...other } = props;\n    return (\n      <div\n        ref={ref}\n        className={tremorTwMerge(\n          makeDividerClassName(\"root\"),\n          // common\n          \"w-full mx-auto my-6 flex justify-between gap-3 items-center text-tremor-default\",\n          // light\n          \"text-tremor-content\",\n          // dark\n          \"dark:text-dark-tremor-content\",\n          className,\n        )}\n        {...other}\n      >\n        {children ? (\n          <>\n            <div\n              className={tremorTwMerge(\n                \"w-full h-[1px] bg-tremor-border dark:bg-dark-tremor-border\",\n              )}\n            />\n            <div className={tremorTwMerge(\"text-inherit whitespace-nowrap\")}>{children}</div>\n            <div\n              className={tremorTwMerge(\n                \"w-full h-[1px] bg-tremor-border dark:bg-dark-tremor-border\",\n              )}\n            />\n          </>\n        ) : (\n          <div\n            className={tremorTwMerge(\"w-full h-[1px] bg-tremor-border dark:bg-dark-tremor-border\")}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nDivider.displayName = \"Divider\";\n\nexport default Divider;\n"
  },
  {
    "path": "src/components/layout-elements/Divider/index.ts",
    "content": "export { default as Divider } from \"./Divider\";\n"
  },
  {
    "path": "src/components/layout-elements/Flex/Flex.tsx",
    "content": "import { tremorTwMerge } from \"lib\";\nimport React from \"react\";\n\nimport { makeClassName } from \"lib\";\nimport { AlignItems, FlexDirection, JustifyContent } from \"../../../lib\";\n\nconst makeFlexClassName = makeClassName(\"Flex\");\n\nconst justifyContentClassNames: { [key in JustifyContent]: string } = {\n  start: \"justify-start\",\n  end: \"justify-end\",\n  center: \"justify-center\",\n  between: \"justify-between\",\n  around: \"justify-around\",\n  evenly: \"justify-evenly\",\n};\n\nconst alignItemsClassNames: { [key in AlignItems]: string } = {\n  start: \"items-start\",\n  end: \"items-end\",\n  center: \"items-center\",\n  baseline: \"items-baseline\",\n  stretch: \"items-stretch\",\n};\n\nconst flexDirectionClassNames: { [key in FlexDirection]: string } = {\n  row: \"flex-row\",\n  col: \"flex-col\",\n  \"row-reverse\": \"flex-row-reverse\",\n  \"col-reverse\": \"flex-col-reverse\",\n};\n\nexport interface FlexProps extends React.HTMLAttributes<HTMLDivElement> {\n  flexDirection?: FlexDirection;\n  justifyContent?: JustifyContent;\n  alignItems?: AlignItems;\n  children: React.ReactNode;\n}\n\nconst Flex = React.forwardRef<HTMLDivElement, FlexProps>((props, ref) => {\n  const {\n    flexDirection = \"row\",\n    justifyContent = \"between\",\n    alignItems = \"center\",\n    children,\n    className,\n    ...other\n  } = props;\n\n  return (\n    <div\n      ref={ref}\n      className={tremorTwMerge(\n        makeFlexClassName(\"root\"),\n        \"flex w-full\",\n        flexDirectionClassNames[flexDirection],\n        justifyContentClassNames[justifyContent],\n        alignItemsClassNames[alignItems],\n        className,\n      )}\n      {...other}\n    >\n      {children}\n    </div>\n  );\n});\n\nFlex.displayName = \"Flex\";\n\nexport default Flex;\n"
  },
  {
    "path": "src/components/layout-elements/Flex/index.ts",
    "content": "export { default as Flex } from \"./Flex\";\nexport type { FlexProps } from \"./Flex\";\n"
  },
  {
    "path": "src/components/layout-elements/Grid/Col.tsx",
    "content": "import { tremorTwMerge } from \"lib\";\nimport React from \"react\";\n\nimport { makeClassName } from \"lib\";\nimport { colSpan, colSpanLg, colSpanMd, colSpanSm, GridClassesMapping } from \"./styles\";\n\nconst makeColClassName = makeClassName(\"Col\");\n\nexport interface ColProps extends React.HTMLAttributes<HTMLDivElement> {\n  numColSpan?: number;\n  numColSpanSm?: number;\n  numColSpanMd?: number;\n  numColSpanLg?: number;\n}\n\nconst Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {\n  const {\n    numColSpan = 1,\n    numColSpanSm,\n    numColSpanMd,\n    numColSpanLg,\n    children,\n    className,\n    ...other\n  } = props;\n  const getColSpan = (\n    numColSpan: number | undefined,\n    colSpanMapping: GridClassesMapping,\n  ): string => {\n    if (!numColSpan) return \"\";\n    if (!Object.keys(colSpanMapping).includes(String(numColSpan))) return \"\";\n    return colSpanMapping[numColSpan];\n  };\n\n  const getColSpanClassNames = () => {\n    const spanBase = getColSpan(numColSpan, colSpan);\n    const spanSm = getColSpan(numColSpanSm, colSpanSm);\n    const spanMd = getColSpan(numColSpanMd, colSpanMd);\n    const spanLg = getColSpan(numColSpanLg, colSpanLg);\n\n    return tremorTwMerge(spanBase, spanSm, spanMd, spanLg);\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={tremorTwMerge(makeColClassName(\"root\"), getColSpanClassNames(), className)}\n      {...other}\n    >\n      {children}\n    </div>\n  );\n});\n\nCol.displayName = \"Col\";\n\nexport default Col;\n"
  },
  {
    "path": "src/components/layout-elements/Grid/Grid.tsx",
    "content": "import { tremorTwMerge } from \"lib\";\nimport React from \"react\";\n\nimport { makeClassName } from \"lib\";\nimport { GridClassesMapping, gridCols, gridColsLg, gridColsMd, gridColsSm } from \"./styles\";\n\nconst makeGridClassName = makeClassName(\"Grid\");\n\nconst getGridCols = (numCols: number | undefined, gridColsMapping: GridClassesMapping): string => {\n  if (!numCols) return \"\";\n  if (!Object.keys(gridColsMapping).includes(String(numCols))) return \"\";\n  return gridColsMapping[numCols];\n};\n\nexport interface GridProps extends React.HTMLAttributes<HTMLDivElement> {\n  numItems?: number;\n  numItemsSm?: number;\n  numItemsMd?: number;\n  numItemsLg?: number;\n  children: React.ReactNode;\n}\n\nconst Grid = React.forwardRef<HTMLDivElement, GridProps>((props, ref) => {\n  const { numItems = 1, numItemsSm, numItemsMd, numItemsLg, children, className, ...other } = props;\n\n  const colsBase = getGridCols(numItems, gridCols);\n  const colsSm = getGridCols(numItemsSm, gridColsSm);\n  const colsMd = getGridCols(numItemsMd, gridColsMd);\n  const colsLg = getGridCols(numItemsLg, gridColsLg);\n\n  const colClassNames = tremorTwMerge(colsBase, colsSm, colsMd, colsLg);\n\n  return (\n    <div\n      ref={ref}\n      className={tremorTwMerge(makeGridClassName(\"root\"), \"grid\", colClassNames, className)}\n      {...other}\n    >\n      {children}\n    </div>\n  );\n});\n\nGrid.displayName = \"Grid\";\n\nexport default Grid;\n"
  },
  {
    "path": "src/components/layout-elements/Grid/index.ts",
    "content": "export { default as Col } from \"./Col\";\nexport type { ColProps } from \"./Col\";\nexport { default as Grid } from \"./Grid\";\nexport type { GridProps } from \"./Grid\";\n"
  },
  {
    "path": "src/components/layout-elements/Grid/styles.ts",
    "content": "export type GridClassesMapping = {\n  [key: string]: string;\n};\n\nexport const gridCols: GridClassesMapping = {\n  0: \"grid-cols-none\",\n  1: \"grid-cols-1\",\n  2: \"grid-cols-2\",\n  3: \"grid-cols-3\",\n  4: \"grid-cols-4\",\n  5: \"grid-cols-5\",\n  6: \"grid-cols-6\",\n  7: \"grid-cols-7\",\n  8: \"grid-cols-8\",\n  9: \"grid-cols-9\",\n  10: \"grid-cols-10\",\n  11: \"grid-cols-11\",\n  12: \"grid-cols-12\",\n};\n\nexport const gridColsSm: GridClassesMapping = {\n  0: \"sm:grid-cols-none\",\n  1: \"sm:grid-cols-1\",\n  2: \"sm:grid-cols-2\",\n  3: \"sm:grid-cols-3\",\n  4: \"sm:grid-cols-4\",\n  5: \"sm:grid-cols-5\",\n  6: \"sm:grid-cols-6\",\n  7: \"sm:grid-cols-7\",\n  8: \"sm:grid-cols-8\",\n  9: \"sm:grid-cols-9\",\n  10: \"sm:grid-cols-10\",\n  11: \"sm:grid-cols-11\",\n  12: \"sm:grid-cols-12\",\n};\n\nexport const gridColsMd: GridClassesMapping = {\n  0: \"md:grid-cols-none\",\n  1: \"md:grid-cols-1\",\n  2: \"md:grid-cols-2\",\n  3: \"md:grid-cols-3\",\n  4: \"md:grid-cols-4\",\n  5: \"md:grid-cols-5\",\n  6: \"md:grid-cols-6\",\n  7: \"md:grid-cols-7\",\n  8: \"md:grid-cols-8\",\n  9: \"md:grid-cols-9\",\n  10: \"md:grid-cols-10\",\n  11: \"md:grid-cols-11\",\n  12: \"md:grid-cols-12\",\n};\n\nexport const gridColsLg: GridClassesMapping = {\n  0: \"lg:grid-cols-none\",\n  1: \"lg:grid-cols-1\",\n  2: \"lg:grid-cols-2\",\n  3: \"lg:grid-cols-3\",\n  4: \"lg:grid-cols-4\",\n  5: \"lg:grid-cols-5\",\n  6: \"lg:grid-cols-6\",\n  7: \"lg:grid-cols-7\",\n  8: \"lg:grid-cols-8\",\n  9: \"lg:grid-cols-9\",\n  10: \"lg:grid-cols-10\",\n  11: \"lg:grid-cols-11\",\n  12: \"lg:grid-cols-12\",\n};\n\nexport const colSpan: GridClassesMapping = {\n  1: \"col-span-1\",\n  2: \"col-span-2\",\n  3: \"col-span-3\",\n  4: \"col-span-4\",\n  5: \"col-span-5\",\n  6: \"col-span-6\",\n  7: \"col-span-7\",\n  8: \"col-span-8\",\n  9: \"col-span-9\",\n  10: \"col-span-10\",\n  11: \"col-span-11\",\n  12: \"col-span-12\",\n  13: \"col-span-13\",\n};\n\nexport const colSpanSm: GridClassesMapping = {\n  1: \"sm:col-span-1\",\n  2: \"sm:col-span-2\",\n  3: \"sm:col-span-3\",\n  4: \"sm:col-span-4\",\n  5: \"sm:col-span-5\",\n  6: \"sm:col-span-6\",\n  7: \"sm:col-span-7\",\n  8: \"sm:col-span-8\",\n  9: \"sm:col-span-9\",\n  10: \"sm:col-span-10\",\n  11: \"sm:col-span-11\",\n  12: \"sm:col-span-12\",\n  13: \"sm:col-span-13\",\n};\n\nexport const colSpanMd: GridClassesMapping = {\n  1: \"md:col-span-1\",\n  2: \"md:col-span-2\",\n  3: \"md:col-span-3\",\n  4: \"md:col-span-4\",\n  5: \"md:col-span-5\",\n  6: \"md:col-span-6\",\n  7: \"md:col-span-7\",\n  8: \"md:col-span-8\",\n  9: \"md:col-span-9\",\n  10: \"md:col-span-10\",\n  11: \"md:col-span-11\",\n  12: \"md:col-span-12\",\n  13: \"md:col-span-13\",\n};\n\nexport const colSpanLg: GridClassesMapping = {\n  1: \"lg:col-span-1\",\n  2: \"lg:col-span-2\",\n  3: \"lg:col-span-3\",\n  4: \"lg:col-span-4\",\n  5: \"lg:col-span-5\",\n  6: \"lg:col-span-6\",\n  7: \"lg:col-span-7\",\n  8: \"lg:col-span-8\",\n  9: \"lg:col-span-9\",\n  10: \"lg:col-span-10\",\n  11: \"lg:col-span-11\",\n  12: \"lg:col-span-12\",\n  13: \"lg:col-span-13\",\n};\n"
  },
  {
    "path": "src/components/layout-elements/index.ts",
    "content": "export * from \"./Accordion\";\nexport * from \"./Card\";\nexport * from \"./Divider\";\nexport * from \"./Flex\";\nexport * from \"./Grid\";\nexport * from \"./Dialog\";\n"
  },
  {
    "path": "src/components/list-elements/List/List.tsx",
    "content": "import { tremorTwMerge } from \"lib\";\nimport React from \"react\";\n\nimport { makeClassName } from \"lib\";\n\nconst makeListClassName = makeClassName(\"List\");\n\nconst List = React.forwardRef<HTMLUListElement, React.HTMLAttributes<HTMLUListElement>>(\n  (props, ref) => {\n    const { children, className, ...other } = props;\n    return (\n      <ul\n        ref={ref}\n        className={tremorTwMerge(\n          makeListClassName(\"root\"),\n          // common\n          \"w-full divide-y\",\n          // light\n          \"divide-tremor-border text-tremor-content\",\n          // dark\n          \"dark:divide-dark-tremor-border dark:text-dark-tremor-content\",\n          className,\n        )}\n        {...other}\n      >\n        {children}\n      </ul>\n    );\n  },\n);\n\nList.displayName = \"List\";\n\nexport default List;\n"
  },
  {
    "path": "src/components/list-elements/List/ListItem.tsx",
    "content": "import React from \"react\";\nimport { makeClassName, tremorTwMerge } from \"lib\";\n\nconst makeListItemClassName = makeClassName(\"ListItem\");\n\nconst ListItem = React.forwardRef<HTMLLIElement, React.HTMLAttributes<HTMLLIElement>>(\n  (props, ref) => {\n    const { children, className, ...other } = props;\n    return (\n      <>\n        <li\n          ref={ref}\n          className={tremorTwMerge(\n            makeListItemClassName(\"root\"),\n            // common\n            \"w-full flex justify-between items-center text-tremor-default py-2\",\n            className,\n          )}\n          {...other}\n        >\n          {children}\n        </li>\n      </>\n    );\n  },\n);\n\nListItem.displayName = \"ListItem\";\n\nexport default ListItem;\n"
  },
  {
    "path": "src/components/list-elements/List/index.ts",
    "content": "export { default as List } from \"./List\";\nexport { default as ListItem } from \"./ListItem\";\n"
  },
  {
    "path": "src/components/list-elements/Table/Table.tsx",
    "content": "import React from \"react\";\nimport { makeClassName, tremorTwMerge } from \"lib\";\n\nconst makeTableClassName = makeClassName(\"Table\");\n\nconst Table = React.forwardRef<HTMLTableElement, React.TableHTMLAttributes<HTMLTableElement>>(\n  (props, ref) => {\n    const { children, className, ...other } = props;\n\n    return (\n      <div className={tremorTwMerge(makeTableClassName(\"root\"), \"overflow-auto\", className)}>\n        <table\n          ref={ref}\n          className={tremorTwMerge(\n            makeTableClassName(\"table\"),\n            // common\n            \"w-full text-tremor-default\",\n            // light\n            \"text-tremor-content\",\n            // dark\n            \"dark:text-dark-tremor-content\",\n          )}\n          {...other}\n        >\n          {children}\n        </table>\n      </div>\n    );\n  },\n);\n\nTable.displayName = \"Table\";\n\nexport default Table;\n"
  },
  {
    "path": "src/components/list-elements/Table/TableBody.tsx",
    "content": "import React from \"react\";\nimport { makeClassName, tremorTwMerge } from \"lib\";\n\nconst makeTableBodyClassName = makeClassName(\"TableBody\");\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>((props, ref) => {\n  const { children, className, ...other } = props;\n  return (\n    <>\n      <tbody\n        ref={ref}\n        className={tremorTwMerge(\n          makeTableBodyClassName(\"root\"),\n          // common\n          \"align-top divide-y\",\n          // light\n          \"divide-tremor-border\",\n          // dark\n          \"dark:divide-dark-tremor-border\",\n          className,\n        )}\n        {...other}\n      >\n        {children}\n      </tbody>\n    </>\n  );\n});\n\nTableBody.displayName = \"TableBody\";\n\nexport default TableBody;\n"
  },
  {
    "path": "src/components/list-elements/Table/TableCell.tsx",
    "content": "import React from \"react\";\nimport { makeClassName, tremorTwMerge } from \"lib\";\n\nconst makeTableCellClassName = makeClassName(\"TableCell\");\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>((props, ref) => {\n  const { children, className, ...other } = props;\n  return (\n    <>\n      <td\n        ref={ref}\n        className={tremorTwMerge(\n          makeTableCellClassName(\"root\"),\n          \"align-middle whitespace-nowrap text-left p-4\",\n          className,\n        )}\n        {...other}\n      >\n        {children}\n      </td>\n    </>\n  );\n});\n\nTableCell.displayName = \"TableCell\";\n\nexport default TableCell;\n"
  },
  {
    "path": "src/components/list-elements/Table/TableFoot.tsx",
    "content": "import React from \"react\";\nimport { makeClassName, tremorTwMerge } from \"lib\";\n\nconst makeTableFootClassName = makeClassName(\"TableFoot\");\n\nconst TableFoot = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>((props, ref) => {\n  const { children, className, ...other } = props;\n  return (\n    <tfoot\n      ref={ref}\n      className={tremorTwMerge(\n        makeTableFootClassName(\"root\"),\n        // common\n        \"text-left font-medium border-t-[1px] \",\n        // light\n        \"text-tremor-content border-tremor-border\",\n        // dark\n        \"dark:text-dark-tremor-content dark:border-dark-tremor-border\",\n        className,\n      )}\n      {...other}\n    >\n      {children}\n    </tfoot>\n  );\n});\n\nTableFoot.displayName = \"TableFoot\";\n\nexport default TableFoot;\n"
  },
  {
    "path": "src/components/list-elements/Table/TableFooterCell.tsx",
    "content": "import React from \"react\";\nimport { makeClassName, tremorTwMerge } from \"lib\";\n\nconst makeTableFooterCellClassName = makeClassName(\"TableFooterCell\");\n\nconst TableFooterCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.HTMLAttributes<HTMLTableCellElement>\n>((props, ref) => {\n  const { children, className, ...other } = props;\n  return (\n    <>\n      <th\n        ref={ref}\n        className={tremorTwMerge(\n          makeTableFooterCellClassName(\"root\"),\n          // common\n          \"top-0 px-4 py-3.5\",\n          // light\n          \"text-tremor-content font-medium\",\n          // dark\n          \"dark:text-dark-tremor-content\",\n          className,\n        )}\n        {...other}\n      >\n        {children}\n      </th>\n    </>\n  );\n});\n\nTableFooterCell.displayName = \"TableFooterCell\";\n\nexport default TableFooterCell;\n"
  },
  {
    "path": "src/components/list-elements/Table/TableHead.tsx",
    "content": "import React from \"react\";\nimport { makeClassName, tremorTwMerge } from \"lib\";\n\nconst makeTableHeadClassName = makeClassName(\"TableHead\");\n\nconst TableHead = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>((props, ref) => {\n  const { children, className, ...other } = props;\n  return (\n    <>\n      <thead\n        ref={ref}\n        className={tremorTwMerge(\n          makeTableHeadClassName(\"root\"),\n          // common\n          \"text-left\",\n          // light\n          \"text-tremor-content\",\n          // dark\n          \"dark:text-dark-tremor-content\",\n          className,\n        )}\n        {...other}\n      >\n        {children}\n      </thead>\n    </>\n  );\n});\n\nTableHead.displayName = \"TableHead\";\n\nexport default TableHead;\n"
  },
  {
    "path": "src/components/list-elements/Table/TableHeaderCell.tsx",
    "content": "import React from \"react\";\nimport { makeClassName, tremorTwMerge } from \"lib\";\n\nconst makeTableHeaderCellClassName = makeClassName(\"TableHeaderCell\");\n\nconst TableHeaderCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>((props, ref) => {\n  const { children, className, ...other } = props;\n  return (\n    <>\n      <th\n        ref={ref}\n        className={tremorTwMerge(\n          makeTableHeaderCellClassName(\"root\"),\n          // common\n          \"whitespace-nowrap text-left font-semibold top-0 px-4 py-3.5\",\n          // light\n          \"text-tremor-content-strong\",\n          // dark\n          \"dark:text-dark-tremor-content-strong\",\n          className,\n        )}\n        {...other}\n      >\n        {children}\n      </th>\n    </>\n  );\n});\n\nTableHeaderCell.displayName = \"TableHeaderCell\";\n\nexport default TableHeaderCell;\n"
  },
  {
    "path": "src/components/list-elements/Table/TableRow.tsx",
    "content": "import React from \"react\";\nimport { makeClassName, tremorTwMerge } from \"lib\";\n\nconst makeRowClassName = makeClassName(\"TableRow\");\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(\n  (props, ref) => {\n    const { children, className, ...other } = props;\n    return (\n      <>\n        <tr ref={ref} className={tremorTwMerge(makeRowClassName(\"row\"), className)} {...other}>\n          {children}\n        </tr>\n      </>\n    );\n  },\n);\n\nTableRow.displayName = \"TableRow\";\n\nexport default TableRow;\n"
  },
  {
    "path": "src/components/list-elements/Table/index.ts",
    "content": "export { default as Table } from \"./Table\";\nexport { default as TableBody } from \"./TableBody\";\nexport { default as TableCell } from \"./TableCell\";\nexport { default as TableFoot } from \"./TableFoot\";\nexport { default as TableFooterCell } from \"./TableFooterCell\";\nexport { default as TableHead } from \"./TableHead\";\nexport { default as TableHeaderCell } from \"./TableHeaderCell\";\nexport { default as TableRow } from \"./TableRow\";\n"
  },
  {
    "path": "src/components/list-elements/index.ts",
    "content": "export * from \"./List\";\nexport * from \"./Table\";\n"
  },
  {
    "path": "src/components/spark-elements/SparkAreaChart/SparkAreaChart.tsx",
    "content": "\"use client\";\nimport React from \"react\";\nimport { Area, AreaChart as ReChartsAreaChart, ResponsiveContainer, XAxis, YAxis } from \"recharts\";\n\nimport { BaseColors, colorPalette, getColorClassNames, themeColorRange, tremorTwMerge } from \"lib\";\nimport { CurveType } from \"../../../lib/inputTypes\";\nimport BaseSparkChartProps from \"../common/BaseSparkChartProps\";\nimport { constructCategoryColors, getYAxisDomain } from \"components/chart-elements/common/utils\";\nimport NoData from \"components/chart-elements/common/NoData\";\nimport { AxisDomain } from \"recharts/types/util/types\";\n\nexport interface SparkAreaChartProps extends BaseSparkChartProps {\n  stack?: boolean;\n  curveType?: CurveType;\n  connectNulls?: boolean;\n  showGradient?: boolean;\n}\n\nconst AreaChart = React.forwardRef<HTMLDivElement, SparkAreaChartProps>((props, ref) => {\n  const {\n    data = [],\n    categories = [],\n    index,\n    stack = false,\n    colors = themeColorRange,\n    showAnimation = false,\n    animationDuration = 900,\n    showGradient = true,\n    curveType = \"linear\",\n    connectNulls = false,\n    noDataText,\n    autoMinValue = false,\n    minValue,\n    maxValue,\n    className,\n    ...other\n  } = props;\n  const categoryColors = constructCategoryColors(categories, colors);\n  const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);\n\n  return (\n    <div ref={ref} className={tremorTwMerge(\"w-28 h-12\", className)} {...other}>\n      <ResponsiveContainer className=\"h-full w-full\">\n        {data?.length ? (\n          <ReChartsAreaChart data={data} margin={{ top: 1, left: 1, right: 1, bottom: 1 }}>\n            <YAxis hide domain={yAxisDomain as AxisDomain} />\n            <XAxis hide dataKey={index} />\n            {categories.map((category) => {\n              return (\n                <defs key={category}>\n                  {showGradient ? (\n                    <linearGradient\n                      className={\n                        getColorClassNames(\n                          categoryColors.get(category) ?? BaseColors.Gray,\n                          colorPalette.text,\n                        ).textColor\n                      }\n                      id={categoryColors.get(category)}\n                      x1=\"0\"\n                      y1=\"0\"\n                      x2=\"0\"\n                      y2=\"1\"\n                    >\n                      <stop offset=\"5%\" stopColor=\"currentColor\" stopOpacity={0.4} />\n                      <stop offset=\"95%\" stopColor=\"currentColor\" stopOpacity={0} />\n                    </linearGradient>\n                  ) : (\n                    <linearGradient\n                      className={\n                        getColorClassNames(\n                          categoryColors.get(category) ?? BaseColors.Gray,\n                          colorPalette.text,\n                        ).textColor\n                      }\n                      id={categoryColors.get(category)}\n                      x1=\"0\"\n                      y1=\"0\"\n                      x2=\"0\"\n                      y2=\"1\"\n                    >\n                      <stop stopColor=\"currentColor\" stopOpacity={0.3} />\n                    </linearGradient>\n                  )}\n                </defs>\n              );\n            })}\n            {categories.map((category) => (\n              <Area\n                className={\n                  getColorClassNames(\n                    categoryColors.get(category) ?? BaseColors.Gray,\n                    colorPalette.text,\n                  ).strokeColor\n                }\n                strokeOpacity={1}\n                dot={false}\n                key={category}\n                name={category}\n                type={curveType}\n                dataKey={category}\n                stroke=\"\"\n                fill={`url(#${categoryColors.get(category)})`}\n                strokeWidth={2}\n                strokeLinejoin=\"round\"\n                strokeLinecap=\"round\"\n                isAnimationActive={showAnimation}\n                animationDuration={animationDuration}\n                stackId={stack ? \"a\" : undefined}\n                connectNulls={connectNulls}\n              />\n            ))}\n          </ReChartsAreaChart>\n        ) : (\n          <NoData noDataText={noDataText} />\n        )}\n      </ResponsiveContainer>\n    </div>\n  );\n});\n\nAreaChart.displayName = \"AreaChart\";\n\nexport default AreaChart;\n"
  },
  {
    "path": "src/components/spark-elements/SparkAreaChart/index.ts",
    "content": "export { default as SparkAreaChart } from \"./SparkAreaChart\";\nexport type { SparkAreaChartProps } from \"./SparkAreaChart\";\n"
  },
  {
    "path": "src/components/spark-elements/SparkBarChart/SparkBarChart.tsx",
    "content": "\"use client\";\nimport { colorPalette, getColorClassNames, tremorTwMerge } from \"lib\";\nimport React from \"react\";\n\nimport { Bar, BarChart as ReChartsBarChart, ResponsiveContainer, XAxis, YAxis } from \"recharts\";\n\nimport { BaseColors, themeColorRange } from \"lib\";\nimport BaseSparkChartProps from \"../common/BaseSparkChartProps\";\nimport { constructCategoryColors, getYAxisDomain } from \"components/chart-elements/common/utils\";\nimport NoData from \"components/chart-elements/common/NoData\";\nimport { AxisDomain } from \"recharts/types/util/types\";\n\nexport interface SparkBarChartProps extends BaseSparkChartProps {\n  stack?: boolean;\n  relative?: boolean;\n}\n\nconst SparkBarChart = React.forwardRef<HTMLDivElement, SparkBarChartProps>((props, ref) => {\n  const {\n    data = [],\n    categories = [],\n    index,\n    colors = themeColorRange,\n    stack = false,\n    relative = false,\n    animationDuration = 900,\n    showAnimation = false,\n    noDataText,\n    autoMinValue = false,\n    minValue,\n    maxValue,\n    className,\n    ...other\n  } = props;\n  const categoryColors = constructCategoryColors(categories, colors);\n  const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);\n\n  return (\n    <div ref={ref} className={tremorTwMerge(\"w-28 h-12\", className)} {...other}>\n      <ResponsiveContainer className=\"h-full w-full\">\n        {data?.length ? (\n          <ReChartsBarChart\n            data={data}\n            stackOffset={relative ? \"expand\" : \"none\"}\n            margin={{ top: 0, left: -1.5, right: -1.5, bottom: 0 }}\n          >\n            <YAxis hide domain={yAxisDomain as AxisDomain} />\n            <XAxis hide dataKey={index} />\n            {categories.map((category) => (\n              <Bar\n                className={tremorTwMerge(\n                  getColorClassNames(\n                    categoryColors.get(category) ?? BaseColors.Gray,\n                    colorPalette.background,\n                  ).fillColor,\n                )}\n                key={category}\n                name={category}\n                type=\"linear\"\n                stackId={stack || relative ? \"a\" : undefined}\n                dataKey={category}\n                fill=\"\"\n                isAnimationActive={showAnimation}\n                animationDuration={animationDuration}\n              />\n            ))}\n          </ReChartsBarChart>\n        ) : (\n          <NoData noDataText={noDataText} />\n        )}\n      </ResponsiveContainer>\n    </div>\n  );\n});\n\nSparkBarChart.displayName = \"SparkBarChart\";\n\nexport default SparkBarChart;\n"
  },
  {
    "path": "src/components/spark-elements/SparkBarChart/index.ts",
    "content": "export { default as SparkBarChart } from \"./SparkBarChart\";\nexport type { SparkBarChartProps } from \"./SparkBarChart\";\n"
  },
  {
    "path": "src/components/spark-elements/SparkLineChart/SparkLineChart.tsx",
    "content": "\"use client\";\nimport React from \"react\";\nimport { Line, LineChart as ReChartsLineChart, ResponsiveContainer, XAxis, YAxis } from \"recharts\";\n\nimport { BaseColors, colorPalette, getColorClassNames, themeColorRange, tremorTwMerge } from \"lib\";\nimport { CurveType } from \"../../../lib/inputTypes\";\nimport BaseSparkChartProps from \"../common/BaseSparkChartProps\";\nimport { constructCategoryColors, getYAxisDomain } from \"components/chart-elements/common/utils\";\nimport NoData from \"components/chart-elements/common/NoData\";\nimport { AxisDomain } from \"recharts/types/util/types\";\n\nexport interface SparkLineChartProps extends BaseSparkChartProps {\n  curveType?: CurveType;\n  connectNulls?: boolean;\n}\n\nconst SparkLineChart = React.forwardRef<HTMLDivElement, SparkLineChartProps>((props, ref) => {\n  const {\n    data = [],\n    categories = [],\n    index,\n    colors = themeColorRange,\n    animationDuration = 900,\n    showAnimation = false,\n    curveType = \"linear\",\n    connectNulls = false,\n    noDataText,\n    autoMinValue = false,\n    minValue,\n    maxValue,\n    className,\n    ...other\n  } = props;\n  const categoryColors = constructCategoryColors(categories, colors);\n  const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);\n\n  return (\n    <div ref={ref} className={tremorTwMerge(\"w-28 h-12\", className)} {...other}>\n      <ResponsiveContainer className=\"h-full w-full\">\n        {data?.length ? (\n          <ReChartsLineChart data={data} margin={{ top: 1, left: 1, right: 1, bottom: 1 }}>\n            <YAxis hide domain={yAxisDomain as AxisDomain} />\n            <XAxis hide dataKey={index} />\n            {categories.map((category) => (\n              <Line\n                className={tremorTwMerge(\n                  getColorClassNames(\n                    categoryColors.get(category) ?? BaseColors.Gray,\n                    colorPalette.text,\n                  ).strokeColor,\n                )}\n                strokeOpacity={1}\n                dot={false}\n                key={category}\n                name={category}\n                type={curveType}\n                dataKey={category}\n                stroke=\"\"\n                strokeWidth={2}\n                strokeLinejoin=\"round\"\n                strokeLinecap=\"round\"\n                isAnimationActive={showAnimation}\n                animationDuration={animationDuration}\n                connectNulls={connectNulls}\n              />\n            ))}\n          </ReChartsLineChart>\n        ) : (\n          <NoData noDataText={noDataText} />\n        )}\n      </ResponsiveContainer>\n    </div>\n  );\n});\n\nSparkLineChart.displayName = \"SparkLineChart\";\n\nexport default SparkLineChart;\n"
  },
  {
    "path": "src/components/spark-elements/SparkLineChart/index.ts",
    "content": "export { default as SparkLineChart } from \"./SparkLineChart\";\nexport type { SparkLineChartProps } from \"./SparkLineChart\";\n"
  },
  {
    "path": "src/components/spark-elements/common/BaseSparkChartProps.tsx",
    "content": "import BaseAnimationTimingProps from \"components/chart-elements/common/BaseAnimationTimingProps\";\nimport { Color } from \"../../../lib\";\n\ntype FixedProps = {\n  eventType: \"dot\" | \"category\" | \"bar\" | \"slice\" | \"bubble\";\n  categoryClicked: string;\n};\n\ntype BaseEventProps = FixedProps & {\n  [key: string]: number | string;\n};\n\nexport type EventProps = BaseEventProps | null | undefined;\n\ninterface BaseSparkChartProps\n  extends BaseAnimationTimingProps,\n    React.HTMLAttributes<HTMLDivElement> {\n  data: any[];\n  categories: string[];\n  index: string;\n  colors?: (Color | string)[];\n  noDataText?: string;\n  autoMinValue?: boolean;\n  minValue?: number;\n  maxValue?: number;\n}\n\nexport default BaseSparkChartProps;\n"
  },
  {
    "path": "src/components/spark-elements/index.ts",
    "content": "export * from \"./SparkBarChart\";\nexport * from \"./SparkLineChart\";\nexport * from \"./SparkAreaChart\";\n"
  },
  {
    "path": "src/components/text-elements/Bold/Bold.tsx",
    "content": "import { tremorTwMerge } from \"lib\";\nimport React from \"react\";\n\nconst Bold = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>((props, ref) => {\n  const { children, className, ...other } = props;\n  return (\n    <b ref={ref} className={tremorTwMerge(\"text-inherit font-bold\", className)} {...other}>\n      {children}\n    </b>\n  );\n});\n\nBold.displayName = \"Bold\";\n\nexport default Bold;\n"
  },
  {
    "path": "src/components/text-elements/Bold/index.ts",
    "content": "export { default as Bold } from \"./Bold\";\n"
  },
  {
    "path": "src/components/text-elements/Callout/Callout.tsx",
    "content": "import React from \"react\";\nimport { getColorClassNames, makeClassName, tremorTwMerge, Color } from \"lib\";\nimport { colorPalette } from \"lib/theme\";\n\nconst makeCalloutClassName = makeClassName(\"Callout\");\n\nexport interface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {\n  title: string;\n  icon?: React.ElementType;\n  color?: Color;\n}\n\nconst Callout = React.forwardRef<HTMLDivElement, CalloutProps>((props, ref) => {\n  const { title, icon, color, className, children, ...other } = props;\n  const Icon = icon;\n  return (\n    <div\n      ref={ref}\n      className={tremorTwMerge(\n        makeCalloutClassName(\"root\"),\n        \"flex flex-col overflow-hidden rounded-tremor-default text-tremor-default border-l-4 py-3 pr-3 pl-4\",\n        color\n          ? tremorTwMerge(\n              getColorClassNames(color, colorPalette.background).bgColor,\n              getColorClassNames(color, colorPalette.darkBorder).borderColor,\n              getColorClassNames(color, colorPalette.darkText).textColor,\n              \"dark:bg-opacity-10 bg-opacity-10\",\n            )\n          : tremorTwMerge(\n              // light\n              \"bg-tremor-brand-faint border-tremor-brand-emphasis text-tremor-brand-emphasis\",\n              // dark\n              \"dark:bg-dark-tremor-brand-muted/70 dark:border-dark-tremor-brand-emphasis dark:text-dark-tremor-brand-emphasis\",\n            ),\n        className,\n      )}\n      {...other}\n    >\n      <div className={tremorTwMerge(makeCalloutClassName(\"header\"), \"flex items-start\")}>\n        {Icon ? (\n          <Icon\n            className={tremorTwMerge(makeCalloutClassName(\"icon\"), \"flex-none h-5 w-5 mr-1.5\")}\n          />\n        ) : null}\n        <h4 className={tremorTwMerge(makeCalloutClassName(\"title\"), \"font-semibold\")}>{title}</h4>\n      </div>\n      <p\n        className={tremorTwMerge(\n          makeCalloutClassName(\"body\"),\n          \"overflow-y-auto\",\n          children ? \"mt-2\" : \"\",\n        )}\n      >\n        {children}\n      </p>\n    </div>\n  );\n});\n\nCallout.displayName = \"Callout\";\n\nexport default Callout;\n"
  },
  {
    "path": "src/components/text-elements/Callout/index.ts",
    "content": "export { default as Callout } from \"./Callout\";\nexport type { CalloutProps } from \"./Callout\";\n"
  },
  {
    "path": "src/components/text-elements/Italic/Italic.tsx",
    "content": "import { tremorTwMerge } from \"lib\";\nimport React from \"react\";\n\nconst Italic = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>((props, ref) => {\n  const { children, className, ...other } = props;\n  return (\n    <i ref={ref} className={tremorTwMerge(\"italic text-inherit\", className)} {...other}>\n      {children}\n    </i>\n  );\n});\n\nItalic.displayName = \"Italic\";\n\nexport default Italic;\n"
  },
  {
    "path": "src/components/text-elements/Italic/index.ts",
    "content": "export { default as Italic } from \"./Italic\";\n"
  },
  {
    "path": "src/components/text-elements/Legend/Legend.tsx",
    "content": "import React, { useEffect, useCallback } from \"react\";\n\nimport { getColorClassNames, makeClassName, themeColorRange, Color, tremorTwMerge } from \"lib\";\nimport { colorPalette } from \"lib/theme\";\nimport { ChevronLeftFill, ChevronRightFill } from \"assets\";\n\nconst makeLegendClassName = makeClassName(\"Legend\");\n\nexport interface LegendItemProps {\n  name: string;\n  color: Color | string;\n  onClick?: (name: string, color: Color | string) => void;\n  activeLegend?: string;\n}\n\nconst LegendItem = ({ name, color, onClick, activeLegend }: LegendItemProps) => {\n  const hasOnValueChange = !!onClick;\n  return (\n    <li\n      className={tremorTwMerge(\n        makeLegendClassName(\"legendItem\"),\n        // common\n        \"group inline-flex items-center px-2 py-0.5 rounded-tremor-small transition whitespace-nowrap\",\n        hasOnValueChange ? \"cursor-pointer\" : \"cursor-default\",\n        // light\n        \"text-tremor-content\",\n        hasOnValueChange ? \"hover:bg-tremor-background-subtle\" : \"\",\n        // dark\n        \"dark:text-dark-tremor-content\",\n        hasOnValueChange ? \"dark:hover:bg-dark-tremor-background-subtle\" : \"\",\n      )}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClick?.(name, color);\n      }}\n    >\n      <svg\n        className={tremorTwMerge(\n          \"flex-none h-2 w-2 mr-1.5\",\n          getColorClassNames(color, colorPalette.text).textColor,\n          activeLegend && activeLegend !== name ? \"opacity-40\" : \"opacity-100\",\n        )}\n        fill=\"currentColor\"\n        viewBox=\"0 0 8 8\"\n      >\n        <circle cx={4} cy={4} r={4} />\n      </svg>\n      <p\n        className={tremorTwMerge(\n          // common\n          \"whitespace-nowrap truncate text-tremor-default\",\n          // light\n          \"text-tremor-content\",\n          hasOnValueChange ? \"group-hover:text-tremor-content-emphasis\" : \"\",\n          // dark\n          \"dark:text-dark-tremor-content\",\n          activeLegend && activeLegend !== name ? \"opacity-40\" : \"opacity-100\",\n          hasOnValueChange ? \"dark:group-hover:text-dark-tremor-content-emphasis\" : \"\",\n        )}\n      >\n        {name}\n      </p>\n    </li>\n  );\n};\n\nexport interface ScrollButtonProps {\n  icon: React.ElementType;\n  onClick?: () => void;\n  disabled?: boolean;\n}\n\nconst ScrollButton = ({ icon, onClick, disabled }: ScrollButtonProps) => {\n  const Icon = icon;\n  const [isPressed, setIsPressed] = React.useState(false);\n  const intervalRef = React.useRef<NodeJS.Timeout | null>(null);\n\n  React.useEffect(() => {\n    if (isPressed) {\n      intervalRef.current = setInterval(() => {\n        onClick?.();\n      }, 300);\n    } else {\n      clearInterval(intervalRef.current as NodeJS.Timeout);\n    }\n    return () => clearInterval(intervalRef.current as NodeJS.Timeout);\n  }, [isPressed, onClick]);\n\n  useEffect(() => {\n    if (disabled) {\n      clearInterval(intervalRef.current as NodeJS.Timeout);\n      setIsPressed(false);\n    }\n  }, [disabled]);\n\n  return (\n    <button\n      type=\"button\"\n      className={tremorTwMerge(\n        makeLegendClassName(\"legendSliderButton\"),\n        // common\n        \"w-5 group inline-flex items-center truncate rounded-tremor-small transition\",\n        disabled ? \"cursor-not-allowed\" : \"cursor-pointer\",\n        // light\n        disabled\n          ? \"text-tremor-content-subtle\"\n          : \"text-tremor-content hover:text-tremor-content-emphasis hover:bg-tremor-background-subtle\",\n        // dark\n        disabled\n          ? \"dark:text-dark-tremor-subtle\"\n          : \"dark:text-dark-tremor dark:hover:text-tremor-content-emphasis dark:hover:bg-dark-tremor-background-subtle\",\n      )}\n      disabled={disabled}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClick?.();\n      }}\n      onMouseDown={(e) => {\n        e.stopPropagation();\n        setIsPressed(true);\n      }}\n      onMouseUp={(e) => {\n        e.stopPropagation();\n        setIsPressed(false);\n      }}\n    >\n      <Icon className={\"w-full\"} />\n    </button>\n  );\n};\n\nexport interface LegendProps extends React.OlHTMLAttributes<HTMLOListElement> {\n  categories: string[];\n  colors?: (Color | string)[];\n  onClickLegendItem?: (category: string, color: Color | string) => void;\n  activeLegend?: string;\n  enableLegendSlider?: boolean;\n}\n\ntype HasScrollProps = {\n  left: boolean;\n  right: boolean;\n};\n\nconst Legend = React.forwardRef<HTMLOListElement, LegendProps>((props, ref) => {\n  const {\n    categories,\n    colors = themeColorRange,\n    className,\n    onClickLegendItem,\n    activeLegend,\n    enableLegendSlider = false,\n    ...other\n  } = props;\n  const scrollableRef = React.useRef<HTMLInputElement>(null);\n  const scrollButtonsRef = React.useRef<HTMLDivElement>(null);\n\n  const [hasScroll, setHasScroll] = React.useState<HasScrollProps | null>(null);\n  const [isKeyDowned, setIsKeyDowned] = React.useState<string | null>(null);\n  const intervalRef = React.useRef<NodeJS.Timeout | null>(null);\n\n  const checkScroll = useCallback(() => {\n    const scrollable = scrollableRef?.current;\n    if (!scrollable) return;\n\n    const hasLeftScroll = scrollable.scrollLeft > 0;\n    const hasRightScroll = scrollable.scrollWidth - scrollable.clientWidth > scrollable.scrollLeft;\n\n    setHasScroll({ left: hasLeftScroll, right: hasRightScroll });\n  }, [setHasScroll]); // dependencies are listed here in the array\n\n  const scrollToTest = useCallback(\n    (direction: \"left\" | \"right\") => {\n      const element = scrollableRef?.current;\n      const scrollButtons = scrollButtonsRef?.current;\n      const width = element?.clientWidth ?? 0;\n      const scrollButtonsWith = scrollButtons?.clientWidth ?? 0;\n\n      if (element && enableLegendSlider) {\n        element.scrollTo({\n          left:\n            direction === \"left\"\n              ? element.scrollLeft - width + scrollButtonsWith\n              : element.scrollLeft + width - scrollButtonsWith,\n          behavior: \"smooth\",\n        });\n        setTimeout(() => {\n          checkScroll();\n        }, 400);\n      }\n    },\n    [enableLegendSlider, checkScroll],\n  );\n\n  React.useEffect(() => {\n    const keyDownHandler = (key: string) => {\n      if (key === \"ArrowLeft\") {\n        scrollToTest(\"left\");\n      } else if (key === \"ArrowRight\") {\n        scrollToTest(\"right\");\n      }\n    };\n    if (isKeyDowned) {\n      keyDownHandler(isKeyDowned);\n      intervalRef.current = setInterval(() => {\n        keyDownHandler(isKeyDowned);\n      }, 300);\n    } else {\n      clearInterval(intervalRef.current as NodeJS.Timeout);\n    }\n    return () => clearInterval(intervalRef.current as NodeJS.Timeout);\n  }, [isKeyDowned, scrollToTest]);\n\n  const keyDown = (e: KeyboardEvent) => {\n    e.stopPropagation();\n    if (e.key === \"ArrowLeft\" || e.key === \"ArrowRight\") {\n      e.preventDefault();\n      setIsKeyDowned(e.key);\n    }\n  };\n  const keyUp = (e: KeyboardEvent) => {\n    e.stopPropagation();\n    setIsKeyDowned(null);\n  };\n\n  React.useEffect(() => {\n    const scrollable = scrollableRef?.current;\n    if (enableLegendSlider) {\n      checkScroll();\n\n      scrollable?.addEventListener(\"keydown\", keyDown);\n      scrollable?.addEventListener(\"keyup\", keyUp);\n    }\n\n    return () => {\n      //   document.removeEventListener(\"keydown\", keyDown);\n      //   document.removeEventListener(\"keyup\", keyUp);\n      scrollable?.removeEventListener(\"keydown\", keyDown);\n      scrollable?.removeEventListener(\"keyup\", keyUp);\n    };\n  }, [checkScroll, enableLegendSlider]);\n\n  return (\n    <ol\n      ref={ref}\n      className={tremorTwMerge(makeLegendClassName(\"root\"), \"relative overflow-hidden\", className)}\n      {...other}\n    >\n      <div\n        ref={scrollableRef}\n        tabIndex={0}\n        className={tremorTwMerge(\n          //common\n          \"h-full flex\",\n          enableLegendSlider\n            ? hasScroll?.right || hasScroll?.left\n              ? \"pl-4 pr-12  items-center overflow-auto snap-mandatory [&::-webkit-scrollbar]:hidden [scrollbar-width:none]\"\n              : \"\"\n            : \"flex-wrap\",\n        )}\n      >\n        {categories.map((category, idx) => (\n          <LegendItem\n            key={`item-${idx}`}\n            name={category}\n            color={colors[idx % colors.length]}\n            onClick={onClickLegendItem}\n            activeLegend={activeLegend}\n          />\n        ))}\n      </div>\n      {enableLegendSlider && (hasScroll?.right || hasScroll?.left) ? (\n        <>\n          <div\n            className={tremorTwMerge(\n              // light mode\n              \"bg-tremor-background\",\n              // dark mode\n              \"dark:bg-dark-tremor-background\",\n              // common\n              \"absolute flex top-0 pr-1 bottom-0 right-0 items-center justify-center h-full\",\n            )}\n            ref={scrollButtonsRef}\n          >\n            <ScrollButton\n              icon={ChevronLeftFill}\n              onClick={() => {\n                setIsKeyDowned(null);\n                scrollToTest(\"left\");\n              }}\n              disabled={!hasScroll?.left}\n            />\n            <ScrollButton\n              icon={ChevronRightFill}\n              onClick={() => {\n                setIsKeyDowned(null);\n                scrollToTest(\"right\");\n              }}\n              disabled={!hasScroll?.right}\n            />\n          </div>\n        </>\n      ) : null}\n    </ol>\n  );\n});\n\nLegend.displayName = \"Legend\";\n\nexport default Legend;\n"
  },
  {
    "path": "src/components/text-elements/Legend/index.ts",
    "content": "export { default as Legend } from \"./Legend\";\nexport type { LegendProps } from \"./Legend\";\n"
  },
  {
    "path": "src/components/text-elements/Metric/Metric.tsx",
    "content": "import { tremorTwMerge } from \"lib\";\nimport React from \"react\";\n\nimport { getColorClassNames } from \"lib\";\nimport { colorPalette } from \"lib/theme\";\nimport { Color } from \"../../../lib\";\n\nexport interface MetricProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  color?: Color;\n}\n\nconst Metric = React.forwardRef<HTMLParagraphElement, MetricProps>((props, ref) => {\n  const { color, children, className, ...other } = props;\n  return (\n    <p\n      ref={ref}\n      className={tremorTwMerge(\n        \"font-semibold text-tremor-metric\",\n        color\n          ? getColorClassNames(color, colorPalette.darkText).textColor\n          : \"text-tremor-content-strong dark:text-dark-tremor-content-strong\",\n        className,\n      )}\n      {...other}\n    >\n      {children}\n    </p>\n  );\n});\n\nMetric.displayName = \"Metric\";\n\nexport default Metric;\n"
  },
  {
    "path": "src/components/text-elements/Metric/index.ts",
    "content": "export { default as Metric } from \"./Metric\";\nexport type { MetricProps } from \"./Metric\";\n"
  },
  {
    "path": "src/components/text-elements/Subtitle/Subtitle.tsx",
    "content": "import { tremorTwMerge } from \"lib\";\nimport React from \"react\";\n\nimport { getColorClassNames } from \"lib\";\nimport { colorPalette } from \"lib/theme\";\nimport { Color } from \"../../../lib\";\n\nexport interface SubtitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  color?: Color;\n}\n\nconst Subtitle = React.forwardRef<HTMLParagraphElement, SubtitleProps>((props, ref) => {\n  const { color, children, className, ...other } = props;\n  return (\n    <p\n      ref={ref}\n      className={tremorTwMerge(\n        color\n          ? getColorClassNames(color, colorPalette.lightText).textColor\n          : \"text-tremor-content-emphasis dark:text-dark-tremor-content-emphasis\",\n        className,\n      )}\n      {...other}\n    >\n      {children}\n    </p>\n  );\n});\n\nSubtitle.displayName = \"Subtitle\";\n\nexport default Subtitle;\n"
  },
  {
    "path": "src/components/text-elements/Subtitle/index.ts",
    "content": "export { default as Subtitle } from \"./Subtitle\";\nexport type { SubtitleProps } from \"./Subtitle\";\n"
  },
  {
    "path": "src/components/text-elements/Text/Text.tsx",
    "content": "import { tremorTwMerge } from \"lib\";\nimport React from \"react\";\n\nimport { getColorClassNames } from \"lib\";\nimport { colorPalette } from \"lib/theme\";\nimport { Color } from \"../../../lib/inputTypes\";\n\nexport interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  color?: Color;\n}\n\nconst Text = React.forwardRef<HTMLParagraphElement, TextProps>((props, ref) => {\n  const { color, className, children } = props;\n  return (\n    <p\n      ref={ref}\n      className={tremorTwMerge(\n        // common\n        \"text-tremor-default\",\n        color\n          ? getColorClassNames(color, colorPalette.text).textColor\n          : tremorTwMerge(\n              // light\n              \"text-tremor-content\",\n              // dark\n              \"dark:text-dark-tremor-content\",\n            ),\n        className,\n      )}\n    >\n      {children}\n    </p>\n  );\n});\n\nText.displayName = \"Text\";\n\nexport default Text;\n"
  },
  {
    "path": "src/components/text-elements/Text/index.ts",
    "content": "export { default as Text } from \"./Text\";\nexport type { TextProps } from \"./Text\";\n"
  },
  {
    "path": "src/components/text-elements/Title/Title.tsx",
    "content": "import { tremorTwMerge } from \"lib\";\nimport React from \"react\";\n\nimport { getColorClassNames } from \"lib\";\nimport { colorPalette } from \"lib/theme\";\nimport { Color } from \"../../../lib\";\n\nexport interface TitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  color?: Color;\n}\n\nconst Title = React.forwardRef<HTMLParagraphElement, TitleProps>((props, ref) => {\n  const { color, children, className, ...other } = props;\n  return (\n    <p\n      ref={ref}\n      className={tremorTwMerge(\n        // common\n        \"font-medium text-tremor-title\",\n        color\n          ? getColorClassNames(color, colorPalette.darkText).textColor\n          : \"text-tremor-content-strong dark:text-dark-tremor-content-strong\",\n        className,\n      )}\n      {...other}\n    >\n      {children}\n    </p>\n  );\n});\n\nTitle.displayName = \"Title\";\n\nexport default Title;\n"
  },
  {
    "path": "src/components/text-elements/Title/index.ts",
    "content": "export { default as Title } from \"./Title\";\nexport type { TitleProps } from \"./Title\";\n"
  },
  {
    "path": "src/components/text-elements/index.ts",
    "content": "export * from \"./Bold\";\nexport * from \"./Callout\";\nexport * from \"./Italic\";\nexport * from \"./Legend\";\nexport * from \"./Metric\";\nexport * from \"./Subtitle\";\nexport * from \"./Text\";\nexport * from \"./Title\";\n"
  },
  {
    "path": "src/components/util-elements/Tooltip/Tooltip.tsx",
    "content": "import {\n  autoUpdate,\n  ExtendedRefs,\n  flip,\n  offset,\n  ReferenceType,\n  shift,\n  Strategy,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport { tremorTwMerge } from \"lib\";\nimport React, { useState } from \"react\";\n\nexport const useTooltip = (delay?: number) => {\n  const [open, setOpen] = useState(false);\n  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout>();\n\n  const handleOpenChange = (isOpen: boolean) => {\n    if (isOpen && delay) {\n      const timer = setTimeout(() => {\n        setOpen(isOpen);\n      }, delay);\n      setTimeoutId(timer);\n      return;\n    }\n    clearTimeout(timeoutId);\n    setOpen(isOpen);\n  };\n\n  const { x, y, refs, strategy, context } = useFloating({\n    open,\n    onOpenChange: handleOpenChange,\n    placement: \"top\",\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      offset(5),\n      flip({\n        fallbackAxisSideDirection: \"start\",\n      }),\n      shift(),\n    ],\n  });\n\n  const hover = useHover(context, { move: false });\n  const focus = useFocus(context);\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: \"tooltip\" });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);\n\n  return {\n    tooltipProps: {\n      open,\n      x,\n      y,\n      refs,\n      strategy,\n      getFloatingProps,\n    },\n    getReferenceProps,\n  };\n};\n\nexport interface TooltipProps {\n  text?: string;\n  open: boolean;\n  x: number | null;\n  y: number | null;\n  refs: ExtendedRefs<ReferenceType>;\n  strategy: Strategy;\n  getFloatingProps: (\n    userProps?: React.HTMLProps<HTMLElement> | undefined,\n  ) => Record<string, unknown>;\n}\n\nconst Tooltip = ({ text, open, x, y, refs, strategy, getFloatingProps }: TooltipProps) => {\n  return open && text ? (\n    <div\n      className={tremorTwMerge(\n        // common\n        \"max-w-xs text-sm z-20 rounded-tremor-default opacity-100 px-2.5 py-1\",\n        // light\n        \"text-white bg-tremor-background-emphasis\",\n        // dark\n        \"dark:text-tremor-content-emphasis dark:bg-white\",\n      )}\n      ref={refs.setFloating}\n      style={{\n        position: strategy,\n        top: y ?? 0,\n        left: x ?? 0,\n      }}\n      {...getFloatingProps()}\n    >\n      {text}\n    </div>\n  ) : null;\n};\n\nTooltip.displayName = \"Tooltip\";\n\nexport default Tooltip;\n"
  },
  {
    "path": "src/components/util-elements/Tooltip/index.ts",
    "content": "export { default as Tooltip } from \"./Tooltip\";\nexport type { TooltipProps } from \"./Tooltip\";\n"
  },
  {
    "path": "src/components/util-elements/index.ts",
    "content": "export * from \"./Tooltip\";\n"
  },
  {
    "path": "src/components/vis-elements/BarList/BarList.tsx",
    "content": "\"use client\";\n\nimport React from \"react\";\nimport {\n  Color,\n  defaultValueFormatter,\n  getColorClassNames,\n  makeClassName,\n  tremorTwMerge,\n  ValueFormatter,\n} from \"lib\";\nimport { colorPalette } from \"lib/theme\";\n\nconst makeBarListClassName = makeClassName(\"BarList\");\n\ntype Bar<T> = T & {\n  key?: string;\n  value: number;\n  name: React.ReactNode;\n  icon?: React.JSXElementConstructor<any>;\n  href?: string;\n  target?: string;\n  color?: Color;\n};\n\nexport interface BarListProps<T = any> extends React.HTMLAttributes<HTMLDivElement> {\n  data: Bar<T>[];\n  valueFormatter?: ValueFormatter;\n  color?: Color;\n  showAnimation?: boolean;\n  onValueChange?: (payload: Bar<T>) => void;\n  sortOrder?: \"ascending\" | \"descending\" | \"none\";\n}\n\nfunction BarListInner<T>(props: BarListProps<T>, ref: React.ForwardedRef<HTMLDivElement>) {\n  const {\n    data = [],\n    color,\n    valueFormatter = defaultValueFormatter,\n    showAnimation = false,\n    onValueChange,\n    sortOrder = \"descending\",\n    className,\n    ...other\n  } = props;\n\n  const Component = onValueChange ? \"button\" : \"div\";\n  const sortedData = React.useMemo(() => {\n    if (sortOrder === \"none\") {\n      return data;\n    }\n    return [...data].sort((a, b) => {\n      return sortOrder === \"ascending\" ? a.value - b.value : b.value - a.value;\n    });\n  }, [data, sortOrder]);\n\n  const widths = React.useMemo(() => {\n    const maxValue = Math.max(...sortedData.map((item) => item.value), 0);\n    return sortedData.map((item) =>\n      item.value === 0 ? 0 : Math.max((item.value / maxValue) * 100, 2),\n    );\n  }, [sortedData]);\n\n  const rowHeight = \"h-8\";\n\n  return (\n    <div\n      ref={ref}\n      className={tremorTwMerge(\n        makeBarListClassName(\"root\"),\n        \"flex justify-between space-x-6\",\n        className,\n      )}\n      aria-sort={sortOrder}\n      {...other}\n    >\n      <div className={tremorTwMerge(makeBarListClassName(\"bars\"), \"relative w-full space-y-1.5\")}>\n        {sortedData.map((item, index) => {\n          const Icon = item.icon;\n\n          return (\n            <Component\n              key={item.key ?? index}\n              onClick={() => {\n                onValueChange?.(item);\n              }}\n              className={tremorTwMerge(\n                makeBarListClassName(\"bar\"),\n                // common\n                \"group w-full flex items-center rounded-tremor-small\",\n                onValueChange\n                  ? [\n                      \"cursor-pointer\",\n                      // hover\n                      \"hover:bg-tremor-background-muted dark:hover:bg-dark-tremor-background-subtle/40\",\n                    ]\n                  : \"\",\n              )}\n            >\n              <div\n                className={tremorTwMerge(\n                  \"flex items-center rounded transition-all bg-opacity-40\",\n                  rowHeight,\n                  item.color || color\n                    ? [\n                        getColorClassNames(item.color ?? (color as Color), colorPalette.background)\n                          .bgColor,\n                        onValueChange ? \"group-hover:bg-opacity-30\" : \"\",\n                      ]\n                    : \"bg-tremor-brand-subtle dark:bg-dark-tremor-brand-subtle/60\",\n                  onValueChange && !(item.color || color)\n                    ? \"group-hover:bg-tremor-brand-subtle/30 group-hover:dark:bg-dark-tremor-brand-subtle/70\"\n                    : \"\",\n                  // margin\n                  index === sortedData.length - 1 ? \"mb-0\" : \"\",\n                  // duration\n                  showAnimation ? \"duration-500\" : \"\",\n                )}\n                style={{ width: `${widths[index]}%`, transition: showAnimation ? \"all 1s\" : \"\" }}\n              >\n                <div className={tremorTwMerge(\"absolute left-2 pr-4 flex max-w-full\")}>\n                  {Icon ? (\n                    <Icon\n                      className={tremorTwMerge(\n                        makeBarListClassName(\"barIcon\"),\n                        // common\n                        \"flex-none h-5 w-5 mr-2\",\n                        // light\n                        \"text-tremor-content\",\n                        // dark\n                        \"dark:text-dark-tremor-content\",\n                      )}\n                    />\n                  ) : null}\n                  {item.href ? (\n                    <a\n                      href={item.href}\n                      target={item.target ?? \"_blank\"}\n                      rel=\"noreferrer\"\n                      className={tremorTwMerge(\n                        makeBarListClassName(\"barLink\"),\n                        // common\n                        \"whitespace-nowrap hover:underline truncate text-tremor-default\",\n                        onValueChange ? \"cursor-pointer\" : \"\",\n                        // light\n                        \"text-tremor-content-emphasis\",\n                        // dark\n                        \"dark:text-dark-tremor-content-emphasis\",\n                      )}\n                      onClick={(event) => event.stopPropagation()}\n                    >\n                      {item.name}\n                    </a>\n                  ) : (\n                    <p\n                      className={tremorTwMerge(\n                        makeBarListClassName(\"barText\"),\n                        // common\n                        \"whitespace-nowrap truncate text-tremor-default\",\n                        // light\n                        \"text-tremor-content-emphasis\",\n                        // dark\n                        \"dark:text-dark-tremor-content-emphasis\",\n                      )}\n                    >\n                      {item.name}\n                    </p>\n                  )}\n                </div>\n              </div>\n            </Component>\n          );\n        })}\n      </div>\n      <div className={makeBarListClassName(\"labels\")}>\n        {sortedData.map((item, index) => (\n          <div\n            key={item.key ?? index}\n            className={tremorTwMerge(\n              makeBarListClassName(\"labelWrapper\"),\n              \"flex justify-end items-center\",\n              rowHeight,\n              index === sortedData.length - 1 ? \"mb-0\" : \"mb-1.5\",\n            )}\n          >\n            <p\n              className={tremorTwMerge(\n                makeBarListClassName(\"labelText\"),\n                // common\n                \"whitespace-nowrap leading-none truncate text-tremor-default\",\n                // light\n                \"text-tremor-content-emphasis\",\n                // dark\n                \"dark:text-dark-tremor-content-emphasis\",\n              )}\n            >\n              {valueFormatter(item.value)}\n            </p>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nBarListInner.displayName = \"BarList\";\n\nconst BarList = React.forwardRef(BarListInner) as <T>(\n  p: BarListProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> },\n) => ReturnType<typeof BarListInner>;\n\nexport default BarList;\n"
  },
  {
    "path": "src/components/vis-elements/BarList/index.ts",
    "content": "export { default as BarList } from \"./BarList\";\nexport type { BarListProps } from \"./BarList\";\n"
  },
  {
    "path": "src/components/vis-elements/CategoryBar/CategoryBar.tsx",
    "content": "\"use client\";\nimport React, { useMemo } from \"react\";\nimport Tooltip, { useTooltip } from \"components/util-elements/Tooltip/Tooltip\";\nimport {\n  getColorClassNames,\n  makeClassName,\n  sumNumericArray,\n  themeColorRange,\n  tremorTwMerge,\n} from \"lib\";\nimport { colorPalette } from \"lib/theme\";\nimport { Color } from \"../../../lib\";\n\nconst makeCategoryBarClassName = makeClassName(\"CategoryBar\");\n\nconst getMarkerBgColor = (\n  markerValue: number | undefined,\n  values: number[],\n  colors: Color[],\n): string => {\n  if (markerValue === undefined) return \"\";\n\n  let prefixSum = 0;\n  for (let i = 0; i < values.length; i++) {\n    const currentWidthPercentage = values[i];\n    const currentBgColor = getColorClassNames(colors[i], colorPalette.background).bgColor;\n\n    prefixSum += currentWidthPercentage;\n    if (prefixSum >= markerValue) return currentBgColor;\n  }\n\n  return \"\";\n};\n\nconst getPositionLeft = (value: number | undefined, maxValue: number): number =>\n  value ? (value / maxValue) * 100 : 0;\n\nconst BarLabels = ({ values }: { values: number[] }) => {\n  const sumValues = useMemo(() => sumNumericArray(values), [values]);\n  let prefixSum = 0;\n  let sumConsecutiveHiddenLabels = 0;\n  return (\n    <div\n      className={tremorTwMerge(\n        makeCategoryBarClassName(\"labels\"),\n        // common\n        \"relative flex w-full text-tremor-default h-5 mb-2\",\n        // light\n        \"text-tremor-content\",\n        // dark\n        \"dark:text-dark-tremor-content\",\n      )}\n    >\n      {values.slice(0, values.length).map((widthPercentage, idx) => {\n        prefixSum += widthPercentage;\n        const showLabel =\n          (widthPercentage >= 0.1 * sumValues || sumConsecutiveHiddenLabels >= 0.09 * sumValues) &&\n          sumValues - prefixSum >= 0.15 * sumValues &&\n          prefixSum >= 0.1 * sumValues;\n        sumConsecutiveHiddenLabels = showLabel\n          ? 0\n          : (sumConsecutiveHiddenLabels += widthPercentage);\n\n        const widthPositionLeft = getPositionLeft(widthPercentage, sumValues);\n\n        return (\n          <div\n            key={`item-${idx}`}\n            className=\"flex items-center justify-end\"\n            style={{ width: `${widthPositionLeft}%` }}\n          >\n            <span\n              className={tremorTwMerge(showLabel ? \"block\" : \"hidden\", \"left-1/2 translate-x-1/2\")}\n            >\n              {prefixSum}\n            </span>\n          </div>\n        );\n      })}\n      <div className={tremorTwMerge(\"absolute bottom-0 flex items-center left-0\")}>0</div>\n      <div className={tremorTwMerge(\"absolute bottom-0 flex items-center right-0\")}>\n        {sumValues}\n      </div>\n    </div>\n  );\n};\n\nexport interface CategoryBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  values: number[];\n  colors?: Color[];\n  markerValue?: number;\n  showLabels?: boolean;\n  tooltip?: string;\n  showAnimation?: boolean;\n}\n\nconst CategoryBar = React.forwardRef<HTMLDivElement, CategoryBarProps>((props, ref) => {\n  const {\n    values = [],\n    colors = themeColorRange,\n    markerValue,\n    showLabels = true,\n    tooltip,\n    showAnimation = false,\n    className,\n    ...other\n  } = props;\n\n  const markerBgColor = useMemo(\n    () => getMarkerBgColor(markerValue, values, colors),\n    [markerValue, values, colors],\n  );\n\n  const { tooltipProps, getReferenceProps } = useTooltip();\n\n  const maxValue = useMemo(() => sumNumericArray(values), [values]);\n\n  const markerPositionLeft: number = useMemo(\n    () => getPositionLeft(markerValue, maxValue),\n    [markerValue, maxValue],\n  );\n\n  return (\n    <>\n      <Tooltip text={tooltip} {...tooltipProps} />\n      <div\n        ref={ref}\n        className={tremorTwMerge(makeCategoryBarClassName(\"root\"), className)}\n        {...other}\n      >\n        {showLabels ? <BarLabels values={values} /> : null}\n        <div\n          className={tremorTwMerge(\n            makeCategoryBarClassName(\"barWrapper\"),\n            \"relative w-full flex items-center h-2\",\n          )}\n        >\n          <div\n            className={tremorTwMerge(\n              // common\n              \"flex-1 flex items-center h-full overflow-hidden rounded-tremor-full\",\n            )}\n          >\n            {values.map((value, idx) => {\n              const baseColor = colors[idx] ?? \"gray\";\n              const percentage = (value / maxValue) * 100;\n              return (\n                <div\n                  key={`item-${idx}`}\n                  className={tremorTwMerge(\n                    makeCategoryBarClassName(\"categoryBar\"),\n                    \"h-full\",\n                    getColorClassNames(baseColor, colorPalette.background).bgColor,\n                  )}\n                  style={{ width: `${percentage}%` }}\n                />\n              );\n            })}\n          </div>\n          {markerValue !== undefined ? (\n            <div\n              ref={tooltipProps.refs.setReference}\n              className={tremorTwMerge(\n                makeCategoryBarClassName(\"markerWrapper\"),\n                \"absolute right-1/2 -translate-x-1/2 w-5\",\n              )}\n              style={{\n                left: `${markerPositionLeft}%`,\n                transition: showAnimation ? \"all 1s\" : \"\",\n              }}\n              {...getReferenceProps}\n            >\n              <div\n                className={tremorTwMerge(\n                  makeCategoryBarClassName(\"marker\"),\n                  // common\n                  \"ring-2 mx-auto rounded-tremor-full h-4 w-1\",\n                  // light\n                  \"ring-tremor-brand-inverted\",\n                  // dark\n                  \"dark:ring-dark-tremor-brand-inverted\",\n                  markerBgColor,\n                )}\n              />\n            </div>\n          ) : null}\n        </div>\n      </div>\n    </>\n  );\n});\n\nCategoryBar.displayName = \"CategoryBar\";\n\nexport default CategoryBar;\n"
  },
  {
    "path": "src/components/vis-elements/CategoryBar/index.ts",
    "content": "export { default as CategoryBar } from \"./CategoryBar\";\nexport type { CategoryBarProps } from \"./CategoryBar\";\n"
  },
  {
    "path": "src/components/vis-elements/DeltaBar/DeltaBar.tsx",
    "content": "\"use client\";\nimport React from \"react\";\nimport Tooltip, { useTooltip } from \"components/util-elements/Tooltip/Tooltip\";\nimport { DeltaTypes, makeClassName, mapInputsToDeltaType, tremorTwMerge } from \"lib\";\nimport { colors } from \"./styles\";\n\nconst makeDeltaBarClassName = makeClassName(\"DeltaBar\");\n\nconst getDeltaType = (value: number) => (value >= 0 ? DeltaTypes.Increase : DeltaTypes.Decrease);\n\nexport interface DeltaBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: number;\n  isIncreasePositive?: boolean;\n  tooltip?: string;\n  showAnimation?: boolean;\n}\n\nconst DeltaBar = React.forwardRef<HTMLDivElement, DeltaBarProps>((props, ref) => {\n  const {\n    value,\n    isIncreasePositive = true,\n    showAnimation = false,\n    className,\n    tooltip,\n    ...other\n  } = props;\n  const deltaType = mapInputsToDeltaType(getDeltaType(value), isIncreasePositive);\n\n  const { tooltipProps, getReferenceProps } = useTooltip();\n\n  return (\n    <>\n      <Tooltip text={tooltip} {...tooltipProps} />\n      <div\n        ref={ref}\n        className={tremorTwMerge(\n          makeDeltaBarClassName(\"root\"),\n          // common\n          \"relative flex items-center w-full rounded-tremor-full h-2\",\n          // light\n          \"bg-tremor-background-subtle\",\n          // dark\n          \"dark:bg-dark-tremor-background-subtle\",\n          className,\n        )}\n        {...other}\n      >\n        <div\n          className={\n            (makeDeltaBarClassName(\"negativeDeltaBarWrapper\"), \"flex justify-end h-full w-1/2\")\n          }\n        >\n          {value < 0 ? (\n            <div\n              ref={tooltipProps.refs.setReference}\n              className={tremorTwMerge(\n                makeDeltaBarClassName(\"negativeDeltaBar\"),\n                // common\n                \"rounded-l-tremor-full\",\n                colors[deltaType].bgColor,\n              )}\n              style={{\n                width: `${Math.abs(value)}%`,\n                transition: showAnimation ? \"all duration-300\" : \"\",\n              }}\n              {...getReferenceProps}\n            />\n          ) : null}\n        </div>\n        <div\n          className={tremorTwMerge(\n            makeDeltaBarClassName(\"separator\"),\n            // common\n            \"ring-2 z-10 rounded-tremor-full h-4 w-1\",\n            // light\n            \"ring-tremor-brand-inverted bg-tremor-background-emphasis\",\n            // dark\n            \"dark:ring-dark-tremor-brand-inverted dark:bg-dark-tremor-background-emphasis\",\n          )}\n        />\n        <div\n          className={tremorTwMerge(\n            makeDeltaBarClassName(\"positiveDeltaBarWrapper\"),\n            \"flex justify-start h-full w-1/2\",\n          )}\n        >\n          {value >= 0 ? (\n            <div\n              ref={tooltipProps.refs.setReference}\n              className={tremorTwMerge(\n                makeDeltaBarClassName(\"positiveDeltaBar\"),\n                // common\n                \"rounded-r-tremor-full\",\n                colors[deltaType].bgColor,\n              )}\n              style={{\n                width: `${Math.abs(value)}%`,\n                transition: showAnimation ? \"all 1s\" : \"\",\n              }}\n              {...getReferenceProps}\n            />\n          ) : null}\n        </div>\n      </div>\n    </>\n  );\n});\n\nDeltaBar.displayName = \"DeltaBar\";\n\nexport default DeltaBar;\n"
  },
  {
    "path": "src/components/vis-elements/DeltaBar/index.ts",
    "content": "export { default as DeltaBar } from \"./DeltaBar\";\nexport type { DeltaBarProps } from \"./DeltaBar\";\n"
  },
  {
    "path": "src/components/vis-elements/DeltaBar/styles.ts",
    "content": "import { BaseColors, DeltaTypes, getColorClassNames } from \"lib\";\nimport { colorPalette } from \"lib/theme\";\n\nexport type ColorTypes = {\n  bgColor: string;\n};\n\nexport const colors: { [key: string]: ColorTypes } = {\n  [DeltaTypes.Increase]: {\n    bgColor: getColorClassNames(BaseColors.Emerald, colorPalette.background).bgColor,\n  },\n  [DeltaTypes.ModerateIncrease]: {\n    bgColor: getColorClassNames(BaseColors.Emerald, colorPalette.background).bgColor,\n  },\n  [DeltaTypes.Decrease]: {\n    bgColor: getColorClassNames(BaseColors.Rose, colorPalette.background).bgColor,\n  },\n  [DeltaTypes.ModerateDecrease]: {\n    bgColor: getColorClassNames(BaseColors.Rose, colorPalette.background).bgColor,\n  },\n  [DeltaTypes.Unchanged]: {\n    bgColor: getColorClassNames(BaseColors.Orange, colorPalette.background).bgColor,\n  },\n};\n"
  },
  {
    "path": "src/components/vis-elements/MarkerBar/MarkerBar.tsx",
    "content": "\"use client\";\nimport React from \"react\";\n\nimport Tooltip, { useTooltip } from \"components/util-elements/Tooltip/Tooltip\";\nimport { getColorClassNames, makeClassName, tremorTwMerge } from \"lib\";\nimport { colorPalette } from \"lib/theme\";\nimport { Color } from \"../../../lib\";\n\nconst makeMarkerBarClassName = makeClassName(\"MarkerBar\");\n\nexport interface MarkerBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: number;\n  minValue?: number;\n  maxValue?: number;\n  markerTooltip?: string;\n  rangeTooltip?: string;\n  showAnimation?: boolean;\n  color?: Color;\n}\n\nconst MarkerBar = React.forwardRef<HTMLDivElement, MarkerBarProps>((props, ref) => {\n  const {\n    value,\n    minValue,\n    maxValue,\n    markerTooltip,\n    rangeTooltip,\n    showAnimation = false,\n    color,\n    className,\n    ...other\n  } = props;\n\n  const { tooltipProps: markerTooltipProps, getReferenceProps: getMarkerReferenceProps } =\n    useTooltip();\n  const { tooltipProps: rangeTooltipProps, getReferenceProps: getRangeReferenceProps } =\n    useTooltip();\n\n  return (\n    <div\n      ref={ref}\n      className={tremorTwMerge(\n        makeMarkerBarClassName(\"root\"),\n        // common\n        \"relative flex items-center w-full rounded-tremor-full h-2\",\n        // light\n        \"bg-tremor-background-subtle\",\n        // dark\n        \"dark:bg-dark-tremor-background-subtle\",\n        className,\n      )}\n      {...other}\n    >\n      {minValue !== undefined && maxValue !== undefined ? (\n        <>\n          <Tooltip text={rangeTooltip} {...rangeTooltipProps} />\n          <div\n            ref={rangeTooltipProps.refs.setReference}\n            className={tremorTwMerge(\n              makeMarkerBarClassName(\"rangeBar\"),\n              // common\n              \"absolute h-full rounded-tremor-full\",\n              // light\n              \"bg-tremor-content-subtle\",\n              // dark\n              \"dark:bg-dark-tremor-content-subtle\",\n            )}\n            style={{\n              left: `${minValue}%`,\n              width: `${maxValue - minValue}%`,\n              transition: showAnimation ? \"all duration-300\" : \"\",\n            }}\n            {...getRangeReferenceProps}\n          />\n        </>\n      ) : null}\n      <Tooltip text={markerTooltip} {...markerTooltipProps} />\n      <div\n        ref={markerTooltipProps.refs.setReference}\n        className={tremorTwMerge(\n          makeMarkerBarClassName(\"markerWrapper\"),\n          \"absolute right-1/2 -translate-x-1/2 w-5\",\n        )}\n        style={{\n          left: `${value}%`,\n          transition: showAnimation ? \"all 1s\" : \"\",\n        }}\n        {...getMarkerReferenceProps}\n      >\n        <div\n          className={tremorTwMerge(\n            makeMarkerBarClassName(\"marker\"),\n            \"ring-2 mx-auto rounded-tremor-full h-4 w-1\",\n            \"ring-tremor-brand-inverted\",\n            \"dark:ring-dark-tremor-brand-inverted\",\n            color\n              ? getColorClassNames(color, colorPalette.background).bgColor\n              : \"dark:bg-dark-tremor-brand bg-tremor-brand\",\n          )}\n        />\n      </div>\n    </div>\n  );\n});\n\nMarkerBar.displayName = \"MarkerBar\";\n\nexport default MarkerBar;\n"
  },
  {
    "path": "src/components/vis-elements/MarkerBar/index.ts",
    "content": "export { default as MarkerBar } from \"./MarkerBar\";\nexport type { MarkerBarProps } from \"./MarkerBar\";\n"
  },
  {
    "path": "src/components/vis-elements/ProgressBar/ProgressBar.tsx",
    "content": "import React from \"react\";\nimport Tooltip, { useTooltip } from \"components/util-elements/Tooltip/Tooltip\";\nimport { getColorClassNames, makeClassName, tremorTwMerge } from \"lib\";\nimport { colorPalette } from \"lib/theme\";\nimport { Color } from \"../../../lib/inputTypes\";\n\nconst makeProgressBarClassName = makeClassName(\"ProgressBar\");\n\nexport interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: number;\n  label?: string;\n  tooltip?: string;\n  showAnimation?: boolean;\n  color?: Color;\n}\n\nconst ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>((props, ref) => {\n  const { value, label, color, tooltip, showAnimation = false, className, ...other } = props;\n  const { tooltipProps, getReferenceProps } = useTooltip();\n\n  return (\n    <>\n      <Tooltip text={tooltip} {...tooltipProps} />\n      <div\n        ref={ref}\n        className={tremorTwMerge(\n          makeProgressBarClassName(\"root\"),\n          \"flex items-center w-full\",\n          className,\n        )}\n        {...other}\n      >\n        <div\n          ref={tooltipProps.refs.setReference}\n          className={tremorTwMerge(\n            makeProgressBarClassName(\"progressBarWrapper\"),\n            \"relative flex items-center w-full rounded-tremor-full bg-opacity-20 h-2\",\n            color\n              ? getColorClassNames(color, colorPalette.background).bgColor\n              : \"bg-tremor-brand-muted/50 dark:bg-dark-tremor-brand-muted\",\n          )}\n          {...getReferenceProps}\n        >\n          <div\n            className={tremorTwMerge(\n              makeProgressBarClassName(\"progressBar\"),\n              \"flex-col h-full rounded-tremor-full\",\n              color\n                ? getColorClassNames(color, colorPalette.background).bgColor\n                : \"bg-tremor-brand dark:bg-dark-tremor-brand\",\n              showAnimation ? \"transition-all duration-300 ease-in-out\" : \"\",\n            )}\n            style={{\n              width: `${value}%`,\n            }}\n          />\n        </div>\n        {label ? (\n          <div\n            className={tremorTwMerge(\n              makeProgressBarClassName(\"labelWrapper\"),\n              \"w-16 truncate text-right ml-2\",\n              \"text-tremor-content-emphasis\",\n              \"dark:text-dark-tremor-content-emphasis\",\n            )}\n          >\n            <p\n              className={tremorTwMerge(\n                makeProgressBarClassName(\"label\"),\n                \"shrink-0 whitespace-nowrap truncate text-tremor-default\",\n              )}\n            >\n              {label}\n            </p>\n          </div>\n        ) : null}\n      </div>\n    </>\n  );\n});\n\nProgressBar.displayName = \"ProgressBar\";\n\nexport default ProgressBar;\n"
  },
  {
    "path": "src/components/vis-elements/ProgressBar/index.ts",
    "content": "export { default as ProgressBar } from \"./ProgressBar\";\nexport type { ProgressBarProps } from \"./ProgressBar\";\n"
  },
  {
    "path": "src/components/vis-elements/ProgressCircle/ProgressCircle.tsx",
    "content": "import Tooltip, { useTooltip } from \"components/util-elements/Tooltip/Tooltip\";\nimport { Color, colorPalette, getColorClassNames, makeClassName, tremorTwMerge } from \"lib\";\nimport React from \"react\";\n\nconst makeProgressCircleClassName = makeClassName(\"ProgressBar\");\n\nexport type Size = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface ProgressCircleProps extends React.HTMLAttributes<HTMLDivElement> {\n  value?: number;\n  size?: Size;\n  color?: Color;\n  showAnimation?: boolean;\n  tooltip?: string;\n  radius?: number;\n  strokeWidth?: number;\n  children?: React.ReactNode;\n}\n\nconst size2config: Record<Size, { strokeWidth: number; radius: number }> = {\n  xs: {\n    radius: 15,\n    strokeWidth: 3,\n  },\n  sm: {\n    radius: 19,\n    strokeWidth: 4,\n  },\n  md: {\n    radius: 32,\n    strokeWidth: 6,\n  },\n  lg: {\n    radius: 52,\n    strokeWidth: 8,\n  },\n  xl: {\n    radius: 80,\n    strokeWidth: 10,\n  },\n};\n\nfunction getLimitedValue(input: number | undefined) {\n  if (input === undefined) {\n    return 0;\n  } else if (input > 100) {\n    return 100;\n  } else {\n    return input;\n  }\n}\n\nconst ProgressCircle = React.forwardRef<HTMLDivElement, ProgressCircleProps>((props, ref) => {\n  const {\n    value: inputValue,\n    size = \"md\",\n    className,\n    showAnimation = true,\n    color,\n    tooltip,\n    radius: inputRadius,\n    strokeWidth: inputStrokeWidth,\n    children,\n    ...other\n  } = props;\n\n  // sanitize input\n  const value = getLimitedValue(inputValue);\n  const radius = inputRadius ?? size2config[size].radius;\n  const strokeWidth = inputStrokeWidth ?? size2config[size].strokeWidth;\n  const normalizedRadius = radius - strokeWidth / 2;\n  const circumference = normalizedRadius * 2 * Math.PI;\n  const strokeDashoffset = (value / 100) * circumference;\n  const offset = circumference - strokeDashoffset;\n\n  const { tooltipProps, getReferenceProps } = useTooltip();\n\n  return (\n    <>\n      <Tooltip text={tooltip} {...tooltipProps} />\n      <div\n        ref={ref}\n        className={tremorTwMerge(\n          makeProgressCircleClassName(\"root\"),\n          \"flex flex-col items-center justify-center\",\n          className,\n        )}\n        {...other}\n      >\n        <svg\n          ref={tooltipProps.refs.setReference}\n          width={radius * 2}\n          height={radius * 2}\n          viewBox={`0 0 ${radius * 2} ${radius * 2}`}\n          className=\"transform -rotate-90\"\n          {...getReferenceProps}\n        >\n          <circle\n            r={normalizedRadius}\n            cx={radius}\n            cy={radius}\n            strokeWidth={strokeWidth}\n            fill=\"transparent\"\n            stroke=\"\"\n            strokeLinecap=\"round\"\n            className={tremorTwMerge(\n              \"transition-colors ease-linear\",\n              color\n                ? `${\n                    getColorClassNames(color, colorPalette.background).strokeColor\n                  } opacity-20 dark:opacity-25`\n                : \"stroke-tremor-brand-muted/50 dark:stroke-dark-tremor-brand-muted\",\n            )}\n          />\n          {value >= 0 ? (\n            <circle\n              r={normalizedRadius}\n              cx={radius}\n              cy={radius}\n              strokeWidth={strokeWidth}\n              strokeDasharray={circumference + \" \" + circumference}\n              strokeDashoffset={offset}\n              fill=\"transparent\"\n              stroke=\"\"\n              strokeLinecap=\"round\"\n              className={tremorTwMerge(\n                \"transition-colors ease-linear\",\n                color\n                  ? getColorClassNames(color, colorPalette.background).strokeColor\n                  : \"stroke-tremor-brand dark:stroke-dark-tremor-brand\",\n                showAnimation ? \"transition-all duration-300 ease-in-out\" : \"\",\n              )}\n            />\n          ) : null}\n        </svg>\n        <div className={tremorTwMerge(\"absolute flex\")}>{children}</div>\n      </div>\n    </>\n  );\n});\n\nProgressCircle.displayName = \"ProgressCircle\";\n\nexport default ProgressCircle;\n"
  },
  {
    "path": "src/components/vis-elements/ProgressCircle/index.ts",
    "content": "export { default as ProgressCircle } from \"./ProgressCircle\";\nexport type { ProgressCircleProps } from \"./ProgressCircle\";\n"
  },
  {
    "path": "src/components/vis-elements/Tracker/Tracker.tsx",
    "content": "\"use client\";\nimport { tremorTwMerge } from \"lib\";\nimport React from \"react\";\n\nimport Tooltip, { useTooltip } from \"components/util-elements/Tooltip/Tooltip\";\nimport { colorPalette, getColorClassNames, makeClassName, mergeRefs } from \"lib\";\nimport { Color } from \"../../../lib/inputTypes\";\n\nexport const makeTrackerClassName = makeClassName(\"Tracker\");\n\nexport interface TrackerBlockProps {\n  key?: string | number;\n  color?: Color | string;\n  tooltip?: string;\n}\n\nconst TrackerBlock = React.forwardRef<HTMLDivElement, TrackerBlockProps>((props, ref) => {\n  const { color, tooltip, ...other } = props;\n\n  const { tooltipProps, getReferenceProps } = useTooltip();\n\n  return (\n    <div\n      ref={mergeRefs([ref, tooltipProps.refs.setReference])}\n      className={tremorTwMerge(\n        makeTrackerClassName(\"trackingBlock\"),\n        \"w-full h-full rounded-[1px] first:rounded-l-[4px] last:rounded-r-[4px]\",\n        getColorClassNames(color ?? \"gray\", colorPalette.background).bgColor,\n      )}\n      {...other}\n      {...getReferenceProps}\n    >\n      <Tooltip text={tooltip} {...tooltipProps} />\n    </div>\n  );\n});\n\nTrackerBlock.displayName = \"TrackerBlock\";\n\nexport interface TrackerProps extends React.HTMLAttributes<HTMLDivElement> {\n  data: TrackerBlockProps[];\n}\n\nconst Tracker = React.forwardRef<HTMLDivElement, TrackerProps>((props, ref) => {\n  const { data = [], className, ...other } = props;\n  return (\n    <div\n      ref={ref}\n      className={tremorTwMerge(\n        makeTrackerClassName(\"root\"),\n        \"h-10 flex items-center space-x-0.5\",\n        className,\n      )}\n      {...other}\n    >\n      {data.map((item, idx) => (\n        <TrackerBlock key={item.key ?? idx} color={item.color} tooltip={item.tooltip} />\n      ))}\n    </div>\n  );\n});\n\nTracker.displayName = \"Tracker\";\n\nexport default Tracker;\n"
  },
  {
    "path": "src/components/vis-elements/Tracker/index.ts",
    "content": "export { default as Tracker } from \"./Tracker\";\nexport type { TrackerProps } from \"./Tracker\";\n"
  },
  {
    "path": "src/components/vis-elements/index.ts",
    "content": "export * from \"./BarList\";\nexport * from \"./CategoryBar\";\nexport * from \"./DeltaBar\";\nexport * from \"./MarkerBar\";\nexport * from \"./ProgressBar\";\nexport * from \"./ProgressCircle\";\nexport * from \"./Tracker\";\n"
  },
  {
    "path": "src/contexts/BaseColorContext.tsx",
    "content": "import { createContext } from \"react\";\n\nimport { BaseColors } from \"lib\";\nimport { Color } from \"../lib/inputTypes\";\n\nconst BaseColorContext = createContext<Color | undefined>(BaseColors.Blue);\n\nexport default BaseColorContext;\n"
  },
  {
    "path": "src/contexts/IndexContext.tsx",
    "content": "import { createContext } from \"react\";\n\nconst IndexContext = createContext<number>(0);\n\nexport default IndexContext;\n"
  },
  {
    "path": "src/contexts/RootStylesContext.tsx",
    "content": "import { createContext } from \"react\";\n\nconst RootStylesContext = createContext<string | undefined>(undefined);\n\nexport default RootStylesContext;\n"
  },
  {
    "path": "src/contexts/SelectedValueContext.tsx",
    "content": "import { createContext } from \"react\";\n\nexport interface SelectedValueContextValue {\n  selectedValue: any;\n  handleValueChange?: (value: any) => void;\n}\n\nconst SelectedValueContext = createContext<SelectedValueContextValue>({\n  selectedValue: undefined,\n  handleValueChange: undefined,\n});\n\nexport default SelectedValueContext;\n"
  },
  {
    "path": "src/contexts/index.ts",
    "content": "export { default as BaseColorContext } from \"./BaseColorContext\";\nexport { default as IndexContext } from \"./IndexContext\";\nexport { default as RootStylesContext } from \"./RootStylesContext\";\nexport { default as SelectedValueContext } from \"./SelectedValueContext\";\n"
  },
  {
    "path": "src/hooks/index.ts",
    "content": "export { default as useInternalState } from \"./useInternalState\";\nexport { default as useOnWindowResize } from \"./useOnWindowResize\";\n"
  },
  {
    "path": "src/hooks/useInternalState.tsx",
    "content": "import { useState } from \"react\";\n\nconst useInternalState = <T,>(defaultValueProp: T, valueProp: T) => {\n  const isControlled = valueProp !== undefined;\n  const [valueState, setValueState] = useState(defaultValueProp);\n\n  const value = isControlled ? valueProp : valueState;\n  const setValue = (nextValue: T) => {\n    if (isControlled) {\n      return;\n    }\n    setValueState(nextValue);\n  };\n\n  return [value, setValue] as [T, React.Dispatch<React.SetStateAction<T>>];\n};\n\nexport default useInternalState;\n"
  },
  {
    "path": "src/hooks/useOnWindowResize.tsx",
    "content": "import * as React from \"react\";\n\nconst useOnWindowResize = (handler: { (): void }) => {\n  React.useEffect(() => {\n    const handleResize = () => {\n      handler();\n    };\n    handleResize();\n    window.addEventListener(\"resize\", handleResize);\n\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, [handler]);\n};\n\nexport default useOnWindowResize;\n"
  },
  {
    "path": "src/index.ts",
    "content": "export * from \"./components\";\nexport * from \"./lib/inputTypes\";\n"
  },
  {
    "path": "src/lib/constants.ts",
    "content": "import { Color, DeltaType, HorizontalPosition, Size, VerticalPosition } from \"./inputTypes\";\n\nexport const DeltaTypes: { [key: string]: DeltaType } = {\n  Increase: \"increase\",\n  ModerateIncrease: \"moderateIncrease\",\n  Decrease: \"decrease\",\n  ModerateDecrease: \"moderateDecrease\",\n  Unchanged: \"unchanged\",\n};\n\nexport const BaseColors: { [key: string]: Color } = {\n  Slate: \"slate\",\n  Gray: \"gray\",\n  Zinc: \"zinc\",\n  Neutral: \"neutral\",\n  Stone: \"stone\",\n  Red: \"red\",\n  Orange: \"orange\",\n  Amber: \"amber\",\n  Yellow: \"yellow\",\n  Lime: \"lime\",\n  Green: \"green\",\n  Emerald: \"emerald\",\n  Teal: \"teal\",\n  Cyan: \"cyan\",\n  Sky: \"sky\",\n  Blue: \"blue\",\n  Indigo: \"indigo\",\n  Violet: \"violet\",\n  Purple: \"purple\",\n  Fuchsia: \"fuchsia\",\n  Pink: \"pink\",\n  Rose: \"rose\",\n};\n\nexport const Sizes: { [key: string]: Size } = {\n  XS: \"xs\",\n  SM: \"sm\",\n  MD: \"md\",\n  LG: \"lg\",\n  XL: \"xl\",\n};\n\nexport const HorizontalPositions: { [key: string]: HorizontalPosition } = {\n  Left: \"left\",\n  Right: \"right\",\n};\n\nexport const VerticalPositions: { [key: string]: VerticalPosition } = {\n  Top: \"top\",\n  Bottom: \"bottom\",\n};\n"
  },
  {
    "path": "src/lib/index.ts",
    "content": "export * from \"./constants\";\nexport * from \"./inputTypes\";\nexport * from \"./theme\";\nexport * from \"./tremorTwMerge\";\nexport * from \"./utils\";\n"
  },
  {
    "path": "src/lib/inputTypes.ts",
    "content": "export type ValueFormatter = {\n  (value: number): string;\n};\n\nexport type CurveType = \"linear\" | \"natural\" | \"monotone\" | \"step\";\n\nexport type Interval = \"preserveStartEnd\" | \"equidistantPreserveStart\";\n\nexport type IntervalType = \"preserveStartEnd\" | Interval;\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst iconVariantValues = [\"simple\", \"light\", \"shadow\", \"solid\", \"outlined\"] as const;\n\nexport type IconVariant = (typeof iconVariantValues)[number];\n\nexport type HorizontalPosition = \"left\" | \"right\";\n\nexport type VerticalPosition = \"top\" | \"bottom\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"light\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst deltaTypeValues = [\n  \"increase\",\n  \"moderateIncrease\",\n  \"decrease\",\n  \"moderateDecrease\",\n  \"unchanged\",\n] as const;\n\nexport type DeltaType = (typeof deltaTypeValues)[number];\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst sizeValues = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"] as const;\n\nexport type Size = (typeof sizeValues)[number];\n\nconst colorValues = [\n  \"slate\",\n  \"gray\",\n  \"zinc\",\n  \"neutral\",\n  \"stone\",\n  \"red\",\n  \"orange\",\n  \"amber\",\n  \"yellow\",\n  \"lime\",\n  \"green\",\n  \"emerald\",\n  \"teal\",\n  \"cyan\",\n  \"sky\",\n  \"blue\",\n  \"indigo\",\n  \"violet\",\n  \"purple\",\n  \"fuchsia\",\n  \"pink\",\n  \"rose\",\n] as const;\n\nexport type Color = (typeof colorValues)[number];\nexport type CustomColor = Color | string;\nexport const getIsBaseColor = (color: Color | string) => colorValues.includes(color as Color);\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst justifyContentValues = [\"start\", \"end\", \"center\", \"between\", \"around\", \"evenly\"] as const;\nexport type JustifyContent = (typeof justifyContentValues)[number];\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst alignItemsValues = [\"start\", \"end\", \"center\", \"baseline\", \"stretch\"] as const;\nexport type AlignItems = (typeof alignItemsValues)[number];\n\nexport type FlexDirection = \"row\" | \"col\" | \"row-reverse\" | \"col-reverse\";\n\nexport type FunnelVariantType = \"base\" | \"center\";\n"
  },
  {
    "path": "src/lib/theme.ts",
    "content": "import { BaseColors } from \"./constants\";\nimport { Color } from \"./inputTypes\";\n\nexport const DEFAULT_COLOR: Color = \"gray\";\nexport const WHITE = \"white\";\nexport const TRANSPARENT = \"transparent\";\n\nexport const colorPalette = {\n  canvasBackground: 50,\n  lightBackground: 100,\n  background: 500,\n  darkBackground: 600,\n  darkestBackground: 800,\n  lightBorder: 200,\n  border: 500,\n  darkBorder: 700,\n  lightRing: 200,\n  ring: 300,\n  iconRing: 500,\n  lightText: 400,\n  text: 500,\n  iconText: 600,\n  darkText: 700,\n  darkestText: 900,\n  icon: 500,\n};\n\nexport const themeColorRange: Color[] = [\n  BaseColors.Blue,\n  BaseColors.Cyan,\n  BaseColors.Sky,\n  BaseColors.Indigo,\n  BaseColors.Violet,\n  BaseColors.Purple,\n  BaseColors.Fuchsia,\n  BaseColors.Slate,\n  BaseColors.Gray,\n  BaseColors.Zinc,\n  BaseColors.Neutral,\n  BaseColors.Stone,\n  BaseColors.Red,\n  BaseColors.Orange,\n  BaseColors.Amber,\n  BaseColors.Yellow,\n  BaseColors.Lime,\n  BaseColors.Green,\n  BaseColors.Emerald,\n  BaseColors.Teal,\n  BaseColors.Pink,\n  BaseColors.Rose,\n];\n"
  },
  {
    "path": "src/lib/tremorTwMerge.ts",
    "content": "import { extendTailwindMerge } from \"tailwind-merge\";\n\nexport const tremorTwMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      shadow: [\n        {\n          shadow: [\n            {\n              tremor: [\"input\", \"card\", \"dropdown\"],\n              \"dark-tremor\": [\"input\", \"card\", \"dropdown\"],\n            },\n          ],\n        },\n      ],\n      rounded: [\n        {\n          rounded: [\n            {\n              tremor: [\"small\", \"default\", \"full\"],\n              \"dark-tremor\": [\"small\", \"default\", \"full\"],\n            },\n          ],\n        },\n      ],\n      \"font-size\": [\n        {\n          text: [\n            {\n              tremor: [\"default\", \"title\", \"metric\"],\n              \"dark-tremor\": [\"default\", \"title\", \"metric\"],\n            },\n          ],\n        },\n      ],\n    },\n  },\n});\n"
  },
  {
    "path": "src/lib/utils.tsx",
    "content": "import { DeltaTypes } from \"./constants\";\nimport { Color, getIsBaseColor, ValueFormatter } from \"./inputTypes\";\n\nexport const mapInputsToDeltaType = (deltaType: string, isIncreasePositive: boolean): string => {\n  if (isIncreasePositive || deltaType === DeltaTypes.Unchanged) {\n    return deltaType;\n  }\n  switch (deltaType) {\n    case DeltaTypes.Increase:\n      return DeltaTypes.Decrease;\n    case DeltaTypes.ModerateIncrease:\n      return DeltaTypes.ModerateDecrease;\n    case DeltaTypes.Decrease:\n      return DeltaTypes.Increase;\n    case DeltaTypes.ModerateDecrease:\n      return DeltaTypes.ModerateIncrease;\n  }\n  return \"\";\n};\n\nexport const defaultValueFormatter: ValueFormatter = (value: number) => value.toString();\n\nexport const currencyValueFormatter: ValueFormatter = (e: number) =>\n  `$ ${Intl.NumberFormat(\"en-US\").format(e)}`;\n\nexport const sumNumericArray = (arr: number[]) =>\n  arr.reduce((prefixSum, num) => prefixSum + num, 0);\n\nexport const isValueInArray = (value: any, array: any[]): boolean => {\n  for (let i = 0; i < array.length; i++) {\n    if (array[i] === value) {\n      return true;\n    }\n  }\n  return false;\n};\n\nexport function mergeRefs<T = any>(\n  refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>,\n): React.RefCallback<T> {\n  return (value) => {\n    refs.forEach((ref) => {\n      if (typeof ref === \"function\") {\n        ref(value);\n      } else if (ref != null) {\n        (ref as React.MutableRefObject<T | null>).current = value;\n      }\n    });\n  };\n}\n\nexport function makeClassName(componentName: string) {\n  return (className: string) => {\n    return `tremor-${componentName}-${className}`;\n  };\n}\n\ninterface ColorClassNames {\n  bgColor: string;\n  hoverBgColor: string;\n  selectBgColor: string;\n  textColor: string;\n  selectTextColor: string;\n  hoverTextColor: string;\n  borderColor: string;\n  selectBorderColor: string;\n  hoverBorderColor: string;\n  ringColor: string;\n  strokeColor: string;\n  fillColor: string;\n}\n\n/**\n * Returns boolean based on a determination that a color should be considered an \"arbitrary\"\n * Tailwind CSS class.\n * @see {@link https://tailwindcss.com/docs/background-color#arbitrary-values | Tailwind CSS docs}\n */\nconst getIsArbitraryColor = (color: Color | string) =>\n  color.includes(\"#\") || color.includes(\"--\") || color.includes(\"rgb\");\n\nexport function getColorClassNames(color: Color | string, shade?: number): ColorClassNames {\n  const isBaseColor = getIsBaseColor(color);\n  if (color === \"white\" || color === \"black\" || color === \"transparent\" || !shade || !isBaseColor) {\n    const unshadedColor = !getIsArbitraryColor(color) ? color : `[${color}]`;\n    return {\n      bgColor: `bg-${unshadedColor} dark:bg-${unshadedColor}`,\n      hoverBgColor: `hover:bg-${unshadedColor} dark:hover:bg-${unshadedColor}`,\n      selectBgColor: `data-[selected]:bg-${unshadedColor} dark:data-[selected]:bg-${unshadedColor}`,\n      textColor: `text-${unshadedColor} dark:text-${unshadedColor}`,\n      selectTextColor: `data-[selected]:text-${unshadedColor} dark:data-[selected]:text-${unshadedColor}`,\n      hoverTextColor: `hover:text-${unshadedColor} dark:hover:text-${unshadedColor}`,\n      borderColor: `border-${unshadedColor} dark:border-${unshadedColor}`,\n      selectBorderColor: `data-[selected]:border-${unshadedColor} dark:data-[selected]:border-${unshadedColor}`,\n      hoverBorderColor: `hover:border-${unshadedColor} dark:hover:border-${unshadedColor}`,\n      ringColor: `ring-${unshadedColor} dark:ring-${unshadedColor}`,\n      strokeColor: `stroke-${unshadedColor} dark:stroke-${unshadedColor}`,\n      fillColor: `fill-${unshadedColor} dark:fill-${unshadedColor}`,\n    };\n  }\n  return {\n    bgColor: `bg-${color}-${shade} dark:bg-${color}-${shade}`,\n    selectBgColor: `data-[selected]:bg-${color}-${shade} dark:data-[selected]:bg-${color}-${shade}`,\n    hoverBgColor: `hover:bg-${color}-${shade} dark:hover:bg-${color}-${shade}`,\n    textColor: `text-${color}-${shade} dark:text-${color}-${shade}`,\n    selectTextColor: `data-[selected]:text-${color}-${shade} dark:data-[selected]:text-${color}-${shade}`,\n    hoverTextColor: `hover:text-${color}-${shade} dark:hover:text-${color}-${shade}`,\n    borderColor: `border-${color}-${shade} dark:border-${color}-${shade}`,\n    selectBorderColor: `data-[selected]:border-${color}-${shade} dark:data-[selected]:border-${color}-${shade}`,\n    hoverBorderColor: `hover:border-${color}-${shade} dark:hover:border-${color}-${shade}`,\n    ringColor: `ring-${color}-${shade} dark:ring-${color}-${shade}`,\n    strokeColor: `stroke-${color}-${shade} dark:stroke-${color}-${shade}`,\n    fillColor: `fill-${color}-${shade} dark:fill-${color}-${shade}`,\n  };\n}\n"
  },
  {
    "path": "src/stories/chart-elements/AreaChart.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { AreaChart } from \"components\";\nimport { CustomTooltipProps } from \"components/chart-elements/common/CustomTooltipProps\";\nimport { Color, currencyValueFormatter } from \"lib\";\nimport {\n  simpleBaseChartData as data,\n  simpleBaseChartDataWithNulls,\n  singleAndMultipleData,\n  longBaseChartData,\n  longIndexBaseChartData,\n  simpleBaseChartWithNegativeValues,\n} from \"./helpers/testData\";\nimport { valueFormatter } from \"./helpers/utils\";\n\nconst meta: Meta<typeof AreaChart> = {\n  title: \"Visualizations/Chart/AreaChart\",\n  component: AreaChart,\n  args: { categories: [\"Sales\", \"Successful Payments\"], index: \"month\", data, className: \"h-72\" },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof AreaChart>;\n\nexport const Default: Story = {\n  args: {},\n};\n\nexport const DefaultNegativeValues: Story = {\n  args: {\n    data: simpleBaseChartWithNegativeValues,\n  },\n};\n\nexport const Stacked: Story = {\n  args: {\n    stack: true,\n  },\n};\n\nexport const ValueFormatter: Story = {\n  args: { valueFormatter: valueFormatter, yAxisWidth: 60 },\n};\n\nexport const AutoMinValue: Story = {\n  args: { autoMinValue: true },\n};\n\nexport const MinValueAndMaxValue: Story = {\n  args: { minValue: -1000, maxValue: 4000 },\n};\n\nexport const OtherColors: Story = {\n  args: { colors: [\"rose\", \"purple\"] },\n};\n\nexport const CustomColors: Story = {\n  args: {\n    colors: [\"#32a852\", \"orange-600\"],\n  },\n};\n\nexport const NoGradient: Story = {\n  args: { showGradient: false },\n};\n\nexport const ChangedCategoriesOrder: Story = {\n  args: { categories: [\"Successful Payments\", \"Sales\"] },\n};\n\nexport const LongValues: Story = {\n  args: { categories: [\"This is an edge case\"] },\n};\n\nexport const MultipleCategories: Story = {\n  args: {\n    categories: [\"Sales\", \"Successful Payments\"],\n    yAxisWidth: 110,\n  },\n};\n\nexport const NoData: Story = {\n  args: { data: [] },\n};\n\nexport const NoDataText: Story = {\n  args: { data: [], noDataText: \"No data, try again later.\" },\n};\n\nexport const NoCategories: Story = {\n  args: { categories: undefined },\n};\n\nexport const NoIndex: Story = {\n  args: { index: undefined },\n};\n\nexport const CurveTypeNatural: Story = {\n  args: { curveType: \"natural\" },\n};\n\nexport const ConnectNullsTrue: Story = {\n  args: { data: simpleBaseChartDataWithNulls, connectNulls: true },\n};\n\nexport const ConnectNullsFalse: Story = {\n  args: { data: simpleBaseChartDataWithNulls, connectNulls: false },\n};\n\nexport const Animation: Story = {\n  args: { showAnimation: true },\n};\n\nexport const LongAnimationDuration: Story = {\n  args: { showAnimation: true, animationDuration: 5000 },\n};\n\nexport const OnValueChange: Story = {\n  args: { onValueChange: (v: any) => alert(JSON.stringify(v)) },\n};\n\nexport const OneDataValue: Story = {\n  args: { data: data.slice(0, 1) },\n};\n\nexport const OneDataValueAndOnValueChange: Story = {\n  args: { data: data.slice(0, 1), onValueChange: (v: any) => alert(JSON.stringify(v)) },\n};\n\nexport const SingleAndMultipleData: Story = {\n  args: { data: singleAndMultipleData },\n};\n\nexport const SingleAndMultipleDataAndOnValueChange: Story = {\n  args: { data: singleAndMultipleData, onValueChange: (v: any) => alert(JSON.stringify(v)) },\n};\n\nexport const PreserveStartEnd: Story = {\n  args: { intervalType: \"preserveStartEnd\" },\n};\n\nexport const LongDataInput: Story = {\n  args: { data: longBaseChartData },\n};\n\nexport const LongDataInputAndPreserveStartEnd: Story = {\n  args: { data: longBaseChartData, intervalType: \"preserveStartEnd\" },\n};\n\nexport const LongIndexName: Story = {\n  args: { data: longIndexBaseChartData },\n};\n\nexport const LongIndexNameAndPreserveStartEnd: Story = {\n  args: { data: longIndexBaseChartData, intervalType: \"preserveStartEnd\" },\n};\n\nexport const MultipleZeroValues: Story = {\n  args: {\n    data: [\n      {\n        month: \"May 21\",\n        Sales: 2390,\n        \"Successful Payments\": 0,\n      },\n      {\n        month: \"Jun 21\",\n        Sales: 2390,\n        \"Successful Payments\": 0,\n      },\n      {\n        month: \"Jul 21\",\n        Sales: 3490,\n        \"Successful Payments\": 0,\n      },\n    ],\n  },\n};\n\nexport const RotateXLabels: Story = {\n  args: {\n    data: longBaseChartData,\n    rotateLabelX: { angle: -45, verticalShift: 15, xAxisHeight: 50 },\n  },\n};\n\nexport const LegendSlider: Story = {\n  args: {\n    enableLegendSlider: true,\n    categories: [\"Sales\", \"Successful Payments\", \"Test\"],\n  },\n};\n\nexport const NoAxes: Story = {\n  args: {\n    showXAxis: false,\n    showYAxis: false,\n  },\n};\n\nexport const NoYAxisStartEndOnly: Story = {\n  args: { showYAxis: false, startEndOnly: true },\n};\n\n//Custom tooltips\nconst customTooltipColors: Color[] = [\"cyan\"];\nconst customTooltipIndex = \"month\";\nconst getBadgeColor = (percentage: number | undefined) => {\n  if (!percentage || percentage === 0) return \"gray\";\n  else if (percentage > 0) return \"emerald\";\n  else return \"red\";\n};\n\nexport const CustomTooltipSimple: Story = {\n  args: {\n    yAxisWidth: 65,\n    index: customTooltipIndex,\n    categories: [\"Sales\"],\n    colors: customTooltipColors,\n    valueFormatter: currencyValueFormatter,\n    customTooltip: (props: CustomTooltipProps) => {\n      const { payload, active, label } = props;\n      if (!active || !payload) return null;\n\n      const categoryPayload = payload?.[0];\n      if (!categoryPayload) return null;\n      return (\n        <div className=\"w-56 rounded-tremor-default text-tremor-default bg-tremor-background p-2 shadow-tremor-dropdown border border-tremor-border\">\n          <div className=\"flex flex-1 space-x-2.5\">\n            <div className={`w-1.5 flex flex-col bg-${categoryPayload.color}-500 rounded`} />\n            <div className=\"w-full\">\n              <p className=\"font-medium text-tremor-content-emphasis\">{label}</p>\n              <div className=\"flex items-center justify-between space-x-8\">\n                <p className=\"text-right text-tremor-content whitespace-nowrap\">\n                  {categoryPayload.dataKey}\n                </p>\n                <p className=\"font-medium text-right whitespace-nowrap text-tremor-content-emphasis\">\n                  {currencyValueFormatter(categoryPayload.value as number)}\n                </p>\n              </div>\n            </div>\n          </div>\n        </div>\n      );\n    },\n  },\n};\n\nexport const CustomTooltipPreviousDay: Story = {\n  args: {\n    yAxisWidth: 65,\n    index: customTooltipIndex,\n    categories: [\"Sales\"],\n    colors: customTooltipColors,\n    valueFormatter: currencyValueFormatter,\n    customTooltip: (props: CustomTooltipProps) => {\n      const { payload, active, label } = props;\n      if (!active || !payload) return null;\n\n      const categoryPayload = payload?.[0];\n      if (!categoryPayload) return null;\n      const value = categoryPayload.value as number;\n      const dataKey = categoryPayload.dataKey as number;\n\n      const previousIndex = data.findIndex((e) => e[customTooltipIndex] === label);\n      const previousValues: any = previousIndex > 0 ? data[previousIndex - 1] : {};\n      const prev = previousValues ? previousValues[dataKey] : undefined;\n      const percentage = ((value - prev) / prev) * 100;\n      const color = getBadgeColor(percentage);\n\n      return (\n        <div className=\"w-56 translate-y-14 flex items-center justify-between rounded-tremor-default text-tremor-default bg-tremor-background p-2 shadow-tremor-dropdown border border-tremor-border\">\n          <span className=\"text-right text-tremor-content whitespace-nowrap\">{dataKey}</span>\n          <div className=\"flex items-center space-x-2\">\n            <span className=\"font-medium text-right whitespace-nowrap text-tremor-content-emphasis\">\n              {currencyValueFormatter(value)}\n            </span>\n            {percentage ? (\n              <span\n                className={`inline-flex text-xs px-1.5 py-0.5 bg-${color}-100 text-${color}-600 rounded`}\n              >\n                {percentage > 0 ? \"+\" : \"\"}\n                {percentage.toFixed(1)}%\n              </span>\n            ) : null}\n          </div>\n        </div>\n      );\n    },\n  },\n};\n\nexport const CustomTooltipComplex: Story = {\n  args: {\n    yAxisWidth: 65,\n    index: customTooltipIndex,\n    categories: [\"Sales\"],\n    colors: customTooltipColors,\n    valueFormatter: currencyValueFormatter,\n    customTooltip: (props: CustomTooltipProps) => {\n      const { payload, active, label } = props;\n      if (!active || !payload) return null;\n\n      const categoryPayload = payload?.[0];\n      if (!categoryPayload) return null;\n      const value = categoryPayload.value as number;\n      const dataKey = categoryPayload.dataKey as number;\n\n      const previousIndex = data.findIndex((e) => e[customTooltipIndex] === label);\n      const previousValues: any = previousIndex > 0 ? data[previousIndex - 1] : {};\n      const prev = previousValues ? previousValues[dataKey] : undefined;\n      const percentage = ((value - prev) / prev) * 100;\n      const badgeColor = getBadgeColor(percentage);\n\n      return (\n        <div className=\"rounded-tremor-default bg-tremor-background p-2 shadow-tremor-dropdown border border-tremor-border\">\n          <div className=\"flex flex-1 space-x-2.5\">\n            <div className={`w-1 flex flex-col bg-${categoryPayload.color}-500 rounded`} />\n            <div className=\"w-full\">\n              <p className=\"text-tremor-default font-medium text-tremor-content-emphasis\">\n                {dataKey}\n              </p>\n              <p className=\"text-tremor-default text-tremor-content-subtle\">{label}</p>\n              <p className=\"mt-2 font-medium whitespace-nowrap text-tremor-content-emphasis\">\n                {currencyValueFormatter(value)}\n              </p>\n              {percentage ? (\n                <div className=\"mt-1 flex items-end space-x-2\">\n                  <div\n                    className={`inline-flex text-tremor-default px-1.5 py-0.5 bg-${badgeColor}-100 text-${badgeColor}-600 rounded`}\n                  >\n                    {percentage > 0 ? \"+\" : null}\n                    {percentage.toFixed(1)}%\n                  </div>\n                  <div className=\"whitespace-nowrap text-tremor-default text-tremor-content-subtle\">\n                    from previous month\n                  </div>\n                </div>\n              ) : null}\n            </div>\n          </div>\n        </div>\n      );\n    },\n  },\n};\n\nexport const Padding: Story = {\n  args: {\n    padding: { left: 0, right: 0 },\n  },\n};\n\n// keep because of if statement\n// const ResponsiveTemplate: ComponentStory<typeof AreaChart> = (args) => {\n//   if (args.onValueChange?.length === 0) {\n//     args.onValueChange = undefined;\n//   }\n\n//   return (\n//     <>\n//       <Title>Desktop</Title>\n//       <Card>\n//         <AreaChart {...args} yAxisWidth={60} />\n//       </Card>\n//       <Title className=\"mt-5\">Mobile</Title>\n//       <div className=\"w-64\">\n//         <Card>\n//           <AreaChart {...args} yAxisWidth={60} />\n//         </Card>\n//       </div>\n//     </>\n//   );\n// };\n\n// const DefaultTemplate: ComponentStory<typeof AreaChart> = ({ ...args }) => {\n//   if (args.onValueChange?.length === 0) {\n//     args.onValueChange = undefined;\n//   }\n\n//   return (\n//     <Card>\n//       <AreaChart {...args} yAxisWidth={60} />\n//     </Card>\n//   );\n//\n\nexport const tickGap: Story = {\n  args: {\n    data: longBaseChartData,\n    tickGap: 200,\n  },\n};\n\nexport const AxisLabels: Story = {\n  args: {\n    xAxisLabel: \"Month of Year\",\n    yAxisLabel: \"Amount (USD)\",\n  },\n};\n"
  },
  {
    "path": "src/stories/chart-elements/BarChart.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { BarChart } from \"components\";\nimport { CustomTooltipProps } from \"components/chart-elements/common/CustomTooltipProps\";\nimport { Color, currencyValueFormatter } from \"lib\";\nimport {\n  simpleBaseChartData as data,\n  singleAndMultipleData,\n  longBaseChartData,\n  longIndexBaseChartData,\n  simpleBaseChartWithNegativeValues,\n} from \"./helpers/testData\";\n\nconst meta: Meta<typeof BarChart> = {\n  title: \"Visualizations/Chart/BarChart\",\n  component: BarChart,\n  args: { categories: [\"Sales\", \"Successful Payments\"], index: \"month\", data, className: \"h-72\" },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof BarChart>;\n\nexport const Default: Story = {\n  args: {},\n};\n\nexport const DefaultNegativeValues: Story = {\n  args: {\n    data: simpleBaseChartWithNegativeValues,\n  },\n};\n\nexport const DefaultNegativeValuesVertical: Story = {\n  args: {\n    data: simpleBaseChartWithNegativeValues,\n    layout: \"vertical\",\n  },\n};\n\nexport const DefaultNegativeValuesStacked: Story = {\n  args: {\n    data: simpleBaseChartWithNegativeValues,\n    stack: true,\n  },\n};\n\nexport const DefaultNegativeValuesVerticalStacked: Story = {\n  args: {\n    data: simpleBaseChartWithNegativeValues,\n    layout: \"vertical\",\n    stack: true,\n  },\n};\n\nexport const Stacked: Story = {\n  args: { stack: true },\n};\n\nexport const Relative: Story = {\n  args: { relative: true },\n};\n\nexport const LayoutVertical: Story = {\n  args: { layout: \"vertical\" },\n};\n\nexport const AutoMinValue: Story = {\n  args: { autoMinValue: true },\n};\n\nexport const AutoMinValueAndLayoutVertical: Story = {\n  args: { autoMinValue: true, layout: \"vertical\" },\n};\n\nexport const MinValueAndMaxValue: Story = {\n  args: { minValue: -1000, maxValue: 5000 },\n};\n\nexport const ValueFormatter: Story = {\n  args: { valueFormatter: currencyValueFormatter },\n};\n\nexport const OtherColors: Story = {\n  args: { colors: [\"blue\", \"green\"] },\n};\n\nexport const CustomColors: Story = {\n  args: {\n    colors: [\"#32a852\", \"orange-600\"],\n  },\n};\n\nexport const ChangedCategoriesOrder: Story = {\n  args: { categories: [\"Successful Payments\", \"Sales\"] },\n};\n\nexport const LongValues: Story = {\n  args: { categories: [\"This is an edge case\"] },\n};\n\nexport const MultipleCategories: Story = {\n  args: {\n    categories: [\"Sales\", \"Successful Payments\", \"This is an edge case\", \"Test\"],\n    yAxisWidth: 110,\n  },\n};\n\nexport const NoData: Story = {\n  args: { data: [] },\n};\n\nexport const NoDataText: Story = {\n  args: { data: [], noDataText: \"No data, try again later.\" },\n};\n\nexport const NoCategories: Story = {\n  args: { categories: undefined },\n};\n\nexport const NoIndex: Story = {\n  args: { index: undefined },\n};\n\nexport const Animation: Story = {\n  args: { showAnimation: true },\n};\n\nexport const LongAnimationDuration: Story = {\n  args: { showAnimation: true, animationDuration: 5000 },\n};\n\nexport const OnValueChange: Story = {\n  args: { onValueChange: (v: any) => alert(JSON.stringify(v)) },\n};\n\nexport const OneDataValue: Story = {\n  args: { data: data.slice(0, 1) },\n};\n\nexport const OneDataValueAndOnValueChange: Story = {\n  args: { data: data.slice(0, 1), onValueChange: (v: any) => alert(JSON.stringify(v)) },\n};\n\nexport const SingleAndMultipleData: Story = {\n  args: { data: singleAndMultipleData },\n};\n\nexport const SingleAndMultipleDataAndOnValueChange: Story = {\n  args: { data: singleAndMultipleData, onValueChange: (v: any) => alert(JSON.stringify(v)) },\n};\n\nexport const LegendSlider: Story = {\n  args: { enableLegendSlider: true },\n};\n\nexport const PreserveStartEnd: Story = {\n  args: { intervalType: \"preserveStartEnd\" },\n};\n\nexport const LongDataInput: Story = {\n  args: { data: longBaseChartData },\n};\n\nexport const LongDataInputAndPreserveStartEnd: Story = {\n  args: { data: longBaseChartData, intervalType: \"preserveStartEnd\" },\n};\n\nexport const LongIndexName: Story = {\n  args: { data: longIndexBaseChartData },\n};\n\nexport const LongIndexNameAndPreserveStartEnd: Story = {\n  args: { data: longIndexBaseChartData, intervalType: \"preserveStartEnd\" },\n};\n\nexport const MultipleZeroValues: Story = {\n  args: {\n    data: [\n      {\n        month: \"May 21\",\n        Sales: 2390,\n        \"Successful Payments\": 0,\n      },\n      {\n        month: \"Jun 21\",\n        Sales: 2390,\n        \"Successful Payments\": 0,\n      },\n      {\n        month: \"Jul 21\",\n        Sales: 3490,\n        \"Successful Payments\": 0,\n      },\n    ],\n  },\n};\n\nexport const RotateXLabelsHorizontal: Story = {\n  args: {\n    data: longBaseChartData,\n    rotateLabelX: { angle: -45, verticalShift: 15, xAxisHeight: 50 },\n  },\n};\n\nexport const RotateXLabelVertical: Story = {\n  args: {\n    data: longBaseChartData,\n    rotateLabelX: { angle: -45, verticalShift: 15, xAxisHeight: 50 },\n    layout: \"vertical\",\n  },\n};\n\nexport const NoAxes: Story = {\n  args: { showXAxis: false, showYAxis: false },\n};\n\nexport const NoYAxisStartEndOnly: Story = {\n  args: { showYAxis: false, startEndOnly: true },\n};\n\n//Custom tooltips\nconst customTooltipColors: Color[] = [\"cyan\"];\nconst customTooltipIndex = \"month\";\nconst getBadgeColor = (percentage: number | undefined) => {\n  if (!percentage || percentage === 0) return \"gray\";\n  else if (percentage > 0) return \"emerald\";\n  else return \"red\";\n};\n\nexport const CustomTooltipSimple: Story = {\n  args: {\n    yAxisWidth: 65,\n    index: customTooltipIndex,\n    categories: [\"Sales\"],\n    colors: customTooltipColors,\n    valueFormatter: currencyValueFormatter,\n    customTooltip: (props: CustomTooltipProps) => {\n      const { payload, active, label } = props;\n      if (!active || !payload) return null;\n\n      const categoryPayload = payload?.[0];\n      if (!categoryPayload) return null;\n      return (\n        <div className=\"w-56 rounded-tremor-default text-tremor-default bg-tremor-background p-2 shadow-tremor-dropdown border border-tremor-border\">\n          <div className=\"flex flex-1 space-x-2.5\">\n            <div className={`w-1.5 flex flex-col bg-${categoryPayload.color}-500 rounded`} />\n            <div className=\"w-full\">\n              <p className=\"font-medium text-tremor-content-emphasis\">{label}</p>\n              <div className=\"flex items-center justify-between space-x-8\">\n                <p className=\"text-right text-tremor-content whitespace-nowrap\">\n                  {categoryPayload.dataKey}\n                </p>\n                <p className=\"font-medium text-right whitespace-nowrap text-tremor-content-emphasis\">\n                  {currencyValueFormatter(categoryPayload.value as number)}\n                </p>\n              </div>\n            </div>\n          </div>\n        </div>\n      );\n    },\n  },\n};\n\nexport const CustomTooltipPreviousDay: Story = {\n  args: {\n    yAxisWidth: 65,\n    index: customTooltipIndex,\n    categories: [\"Sales\"],\n    colors: customTooltipColors,\n    valueFormatter: currencyValueFormatter,\n    customTooltip: (props: CustomTooltipProps) => {\n      const { payload, active, label } = props;\n      if (!active || !payload) return null;\n\n      const categoryPayload = payload?.[0];\n      if (!categoryPayload) return null;\n      const value = categoryPayload.value as number;\n      const dataKey = categoryPayload.dataKey as number;\n\n      const previousIndex = data.findIndex((e) => e[customTooltipIndex] === label);\n      const previousValues: any = previousIndex > 0 ? data[previousIndex - 1] : {};\n      const prev = previousValues ? previousValues[dataKey] : undefined;\n      const percentage = ((value - prev) / prev) * 100;\n      const color = getBadgeColor(percentage);\n\n      return (\n        <div className=\"w-56 translate-y-14 flex items-center justify-between rounded-tremor-default text-tremor-default bg-tremor-background p-2 shadow-tremor-dropdown border border-tremor-border\">\n          <span className=\"text-right text-tremor-content whitespace-nowrap\">{dataKey}</span>\n          <div className=\"flex items-center space-x-2\">\n            <span className=\"font-medium text-right whitespace-nowrap text-tremor-content-emphasis\">\n              {currencyValueFormatter(value)}\n            </span>\n            {percentage ? (\n              <span\n                className={`inline-flex text-xs px-1.5 py-0.5 bg-${color}-100 text-${color}-600 rounded`}\n              >\n                {percentage > 0 ? \"+\" : \"\"}\n                {percentage.toFixed(1)}%\n              </span>\n            ) : null}\n          </div>\n        </div>\n      );\n    },\n  },\n};\n\nexport const CustomTooltipComplex: Story = {\n  args: {\n    yAxisWidth: 65,\n    index: customTooltipIndex,\n    categories: [\"Sales\"],\n    colors: customTooltipColors,\n    valueFormatter: currencyValueFormatter,\n    customTooltip: (props: CustomTooltipProps) => {\n      const { payload, active, label } = props;\n      if (!active || !payload) return null;\n\n      const categoryPayload = payload?.[0];\n      if (!categoryPayload) return null;\n      const value = categoryPayload.value as number;\n      const dataKey = categoryPayload.dataKey as number;\n\n      const previousIndex = data.findIndex((e) => e[customTooltipIndex] === label);\n      const previousValues: any = previousIndex > 0 ? data[previousIndex - 1] : {};\n      const prev = previousValues ? previousValues[dataKey] : undefined;\n      const percentage = ((value - prev) / prev) * 100;\n      const badgeColor = getBadgeColor(percentage);\n\n      return (\n        <div className=\"rounded-tremor-default bg-tremor-background p-2 shadow-tremor-dropdown border border-tremor-border\">\n          <div className=\"flex flex-1 space-x-2.5\">\n            <div className={`w-1 flex flex-col bg-${categoryPayload.color}-500 rounded`} />\n            <div className=\"w-full\">\n              <p className=\"text-tremor-default font-medium text-tremor-content-emphasis\">\n                {dataKey}\n              </p>\n              <p className=\"text-tremor-default text-tremor-content-subtle\">{label}</p>\n              <p className=\"mt-2 font-medium whitespace-nowrap text-tremor-content-emphasis\">\n                {currencyValueFormatter(value)}\n              </p>\n              {percentage ? (\n                <div className=\"mt-1 flex items-end space-x-2\">\n                  <div\n                    className={`inline-flex text-tremor-default px-1.5 py-0.5 bg-${badgeColor}-100 text-${badgeColor}-600 rounded`}\n                  >\n                    {percentage > 0 ? \"+\" : null}\n                    {percentage.toFixed(1)}%\n                  </div>\n                  <div className=\"whitespace-nowrap text-tremor-default text-tremor-content-subtle\">\n                    from previous month\n                  </div>\n                </div>\n              ) : null}\n            </div>\n          </div>\n        </div>\n      );\n    },\n  },\n};\n\nexport const Padding: Story = {\n  args: {\n    padding: { left: 0, right: 0 },\n  },\n};\nexport const tickGap: Story = {\n  args: {\n    data: longBaseChartData,\n    tickGap: 200,\n  },\n};\n\nexport const barCategoryGap: Story = {\n  args: {\n    data: data,\n    barCategoryGap: \"20%\",\n  },\n};\n\nexport const AxisLabels: Story = {\n  args: {\n    xAxisLabel: \"Month of Year\",\n    yAxisLabel: \"Amount (USD)\",\n  },\n};\n"
  },
  {
    "path": "src/stories/chart-elements/DonutChart.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { DonutChart } from \"components\";\n\nimport { CustomTooltipProps } from \"components/chart-elements/common/CustomTooltipProps\";\nimport { currencyValueFormatter } from \"lib\";\nimport {\n  simpleBaseChartData as data2,\n  simpleSingleCategoryData as data,\n} from \"stories/chart-elements/helpers/testData\";\n\nconst meta: Meta<typeof DonutChart> = {\n  title: \"Visualizations/Chart/DonutChart\",\n  component: DonutChart,\n  args: { category: \"sales\", index: \"city\", data },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof DonutChart>;\n//   if (args.onValueChange?.length === 0) {\n//     args.onValueChange = undefined;\n//   }\n//   return (\n//     <>\n//       <Title>Base Layer (Beta)</Title>\n//       <div className=\"w-full mt-4\">\n//         <Card>\n//           <Title>Sales</Title>\n//           <DonutChart className=\"mt-5\" {...args} />\n//           <div className=\"mt-6\">\n//             <List>\n//               {data.map((item) => (\n//                 <ListItem key={item.city}>\n//                   <span> {item.city} </span>\n//                   <Flex className=\"space-x-2\" justifyContent=\"end\">\n//                     <BadgeDelta\n//                       deltaType={item.deltaType as DeltaType}\n//                       isIncreasePositive={true}\n//                       size=\"xs\"\n//                     >\n//                       {item.delta}\n//                     </BadgeDelta>\n//                   </Flex>\n//                 </ListItem>\n//               ))}\n//             </List>\n//           </div>\n//         </Card>\n//       </div>\n//     </>\n//   );\n// };\n\nexport const Default: Story = {\n  args: {},\n};\n\nexport const ValueFormatter: Story = {\n  args: { valueFormatter: currencyValueFormatter },\n};\n\nexport const CustomLabel: Story = {\n  args: { valueFormatter: currencyValueFormatter, label: \"Hello there\" },\n};\n\nexport const LabelDisabled: Story = {\n  args: { valueFormatter: currencyValueFormatter, label: \"Hello there\", showLabel: false },\n};\n\nexport const OtherColors: Story = {\n  args: { colors: [\"blue\", \"amber\", \"sky\", \"emerald\", \"rose\", \"orange\"] },\n};\n\nexport const CustomColors: Story = {\n  args: {\n    colors: [\"#32a852\", \"#fcba03\", \"orange-600\", \"blue-400\", \"violet-400\", \"rose-400\"],\n  },\n};\n\nexport const MoreDatapointsThanColors: Story = {\n  args: {\n    data: [\n      // extra long data array\n      ...data,\n      ...data,\n    ],\n    colors: [\"blue\", \"amber\", \"sky\", \"emerald\", \"rose\", \"orange\"],\n  },\n};\n\nexport const LongValues: Story = {\n  args: {\n    data: data.map((dataPoint) => ({\n      ...dataPoint,\n      sales: dataPoint.sales * 10000000,\n    })),\n    valueFormatter: currencyValueFormatter,\n  },\n};\n\nexport const VariantPie: Story = {\n  args: { variant: \"pie\" },\n};\n\nexport const NoData: Story = {\n  args: { data: [] },\n};\n\nexport const NoDataText: Story = {\n  args: { data: [], noDataText: \"No data, try again later.\" },\n};\n\nexport const Animation: Story = {\n  args: {\n    showAnimation: true,\n  },\n};\n\nexport const LongAnimation: Story = {\n  args: {\n    showAnimation: true,\n    animationDuration: 5000,\n  },\n};\n\nexport const OnValueChangeExample: Story = {\n  args: { onValueChange: (value) => alert(JSON.stringify(value)) },\n};\n\nexport const OnValueChangePieExample: Story = {\n  args: { variant: \"pie\", onValueChange: (value) => alert(JSON.stringify(value)) },\n};\n\n//Custom tooltips\nexport const CustomTooltipSimple: Story = {\n  args: {\n    data: data2,\n    index: \"month\",\n    category: \"Sales\",\n    valueFormatter: currencyValueFormatter,\n    customTooltip: (props: CustomTooltipProps) => {\n      const { payload, active, label } = props;\n      if (!active || !payload) return null;\n      const categoryPayload = payload?.[0];\n      if (!categoryPayload) return null;\n      return (\n        <div className=\"w-56 rounded-tremor-default text-tremor-default bg-tremor-background p-2 shadow-tremor-dropdown border border-tremor-border\">\n          <div className=\"flex flex-1 space-x-2.5\">\n            <div className={`w-1.5 flex flex-col bg-${categoryPayload?.color}-500 rounded`} />\n            <div className=\"w-full\">\n              <div className=\"flex items-center justify-between space-x-8\">\n                <p className=\"text-right text-tremor-content whitespace-nowrap\">\n                  {categoryPayload.name}\n                </p>\n                <p className=\"font-medium text-right whitespace-nowrap text-tremor-content-emphasis\">\n                  {currencyValueFormatter(categoryPayload.value as number)}\n                </p>\n              </div>\n              <p>{label}</p>\n              <p>{categoryPayload.dataKey}</p>\n            </div>\n          </div>\n        </div>\n      );\n    },\n  },\n};\n"
  },
  {
    "path": "src/stories/chart-elements/FunnelChart.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { FunnelChart } from \"components\";\nimport { CustomTooltipProps } from \"components/chart-elements/common/CustomTooltipProps\";\nimport { currencyValueFormatter } from \"lib\";\n\nconst data = [\n  { name: \"opens\", value: 351 },\n  { name: \"visitors\", value: 200 },\n  {\n    name: `added to cart`,\n    value: 191,\n  },\n  { name: \"orders and a longer label to test the truncate class\", value: 10 },\n];\n\nconst meta: Meta<typeof FunnelChart> = {\n  title: \"Visualizations/Chart/FunnelChart\",\n  component: FunnelChart,\n  args: { data, className: \"h-72\" },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof FunnelChart>;\n\nexport const Default: Story = {\n  args: {},\n};\n\nexport const Variant: Story = {\n  args: {\n    gradient: false,\n    evolutionGradient: true,\n  },\n};\n\nexport const CustomColor: Story = {\n  args: {\n    color: \"#32a852\",\n  },\n};\n\nexport const ShowArrowFalse: Story = {\n  args: {\n    showArrow: false,\n  },\n};\n\nexport const CustomHeight: Story = {\n  args: { className: \"h-30\" },\n};\n\nexport const PreviousValueSmallerThanNext: Story = {\n  args: {\n    data: [\n      { name: \"opens\", value: 200 },\n      { name: \"visitors\", value: 351 },\n      {\n        name: `added to cart`,\n        value: 191,\n      },\n      { name: \"orders\", value: 10 },\n    ],\n  },\n};\n\nexport const fromPrevious: Story = {\n  args: {\n    calculateFrom: \"previous\",\n  },\n};\n\nexport const fromPreviousWithPreviousValueSmallerThanNext: Story = {\n  args: {\n    calculateFrom: \"previous\",\n    data: [\n      { name: \"opens\", value: 200 },\n      { name: \"visitors\", value: 351 },\n      {\n        name: `added to cart`,\n        value: 191,\n      },\n      { name: \"orders\", value: 10 },\n    ],\n  },\n};\n\nexport const With0: Story = {\n  args: {\n    data: [\n      { name: \"opens\", value: 0 },\n      { name: \"visitors\", value: 351 },\n      {\n        name: `added to cart`,\n        value: 191,\n      },\n      { name: \"orders\", value: 10 },\n    ],\n  },\n};\n\nexport const fromPreviousWith0ErrorExpected: Story = {\n  args: {\n    calculateFrom: \"previous\",\n    data: [\n      { name: \"opens\", value: 0 },\n      { name: \"visitors\", value: 351 },\n      {\n        name: `added to cart`,\n        value: 191,\n      },\n      { name: \"orders\", value: 10 },\n    ],\n  },\n};\n\nexport const fromPreviousWithEvolutionGradient: Story = {\n  args: {\n    calculateFrom: \"previous\",\n    gradient: false,\n    evolutionGradient: true,\n  },\n};\n\nexport const variantCenter: Story = {\n  args: {\n    variant: \"center\",\n  },\n};\n\nexport const variantCenterWithoutGradient: Story = {\n  args: {\n    variant: \"center\",\n    gradient: false,\n  },\n};\n\nexport const variantCenterWithEvolutionGradient: Story = {\n  args: {\n    variant: \"center\",\n    gradient: false,\n    evolutionGradient: true,\n  },\n};\n\nexport const withoutGridLines: Story = {\n  args: {\n    showGridLines: false,\n  },\n};\n\nexport const withoutYLabels: Story = {\n  args: {\n    showYAxis: false,\n  },\n};\n\nexport const withouXAxis: Story = {\n  args: {\n    showXAxis: false,\n  },\n};\n\nexport const NoAxes: Story = {\n  args: { showXAxis: false, showYAxis: false },\n};\n\nexport const onValueChange: Story = {\n  args: {\n    onValueChange: (value) => alert(JSON.stringify(value)),\n  },\n};\n\nexport const NoData = {\n  args: {\n    data: [],\n  },\n};\n\nexport const NoDataText: Story = {\n  args: {\n    data: [],\n    noDataText: \"No data, try again later.\",\n  },\n};\n\nexport const RotateXLabelsHorizontal: Story = {\n  args: {\n    rotateLabelX: { angle: -45, verticalShift: 0, xAxisHeight: 100 },\n  },\n};\n\nexport const ValueFormatter: Story = {\n  args: {\n    valueFormatter: (e) => currencyValueFormatter(e),\n  },\n};\n\nexport const CustomTooltipSimple: Story = {\n  args: {\n    customTooltip: (props: CustomTooltipProps) => {\n      const { payload, active, label } = props;\n\n      if (!active || !payload) return null;\n\n      const categoryPayload = payload?.[0];\n      if (!categoryPayload) return null;\n      return (\n        <div className=\"w-56 rounded-tremor-default text-tremor-default bg-tremor-background p-2 shadow-tremor-dropdown border border-tremor-border\">\n          <div className=\"flex flex-1 space-x-2.5\">\n            <div className={`w-1.5 flex flex-col bg-${categoryPayload.color}-500 rounded`} />\n            <div className=\"w-full\">\n              <p className=\"font-medium text-tremor-content-emphasis\">{label}</p>\n              <div className=\"flex items-center justify-between space-x-8\">\n                <p className=\"text-right text-tremor-content whitespace-nowrap\">\n                  {(categoryPayload.payload.normalizedValue * 100).toFixed(2)}%\n                </p>\n                <p className=\"font-medium text-right whitespace-nowrap text-tremor-content-emphasis\">\n                  {currencyValueFormatter(categoryPayload.value as number)}\n                </p>\n              </div>\n            </div>\n          </div>\n        </div>\n      );\n    },\n  },\n};\n\nexport const AxisLabels: Story = {\n  args: {\n    xAxisLabel: \"Flow\",\n    yAxisLabel: \"Amount (USD)\",\n  },\n};\n"
  },
  {
    "path": "src/stories/chart-elements/LineChart.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { LineChart } from \"components\";\nimport { CustomTooltipProps } from \"components/chart-elements/common/CustomTooltipProps\";\nimport { Color, currencyValueFormatter } from \"lib\";\nimport {\n  simpleBaseChartData as data,\n  simpleBaseChartDataWithNulls,\n  singleAndMultipleData,\n  longBaseChartData,\n  longIndexBaseChartData,\n  simpleBaseChartWithNegativeValues,\n} from \"./helpers/testData\";\nimport { valueFormatter } from \"./helpers/utils\";\n\nconst meta: Meta<typeof LineChart> = {\n  title: \"Visualizations/Chart/LineChart\",\n  component: LineChart,\n  args: { categories: [\"Sales\", \"Successful Payments\"], index: \"month\", data, className: \"h-72\" },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof LineChart>;\n\nexport const Default: Story = {\n  args: {},\n};\n\nexport const DefaultNegativeValues: Story = {\n  args: {\n    data: simpleBaseChartWithNegativeValues,\n  },\n};\n\nexport const ValueFormatter: Story = {\n  args: { valueFormatter: valueFormatter, yAxisWidth: 60 },\n};\n\nexport const AutoMinValue: Story = {\n  args: { autoMinValue: true },\n};\n\nexport const MinValueAndMaxValue: Story = {\n  args: { minValue: -1000, maxValue: 4000 },\n};\n\nexport const OtherColors: Story = {\n  args: { colors: [\"rose\", \"purple\"] },\n};\n\nexport const CustomColors: Story = {\n  args: {\n    colors: [\"#32a852\", \"orange-600\"],\n  },\n};\n\nexport const ChangedCategoriesOrder: Story = {\n  args: { categories: [\"Successful Payments\", \"Sales\"] },\n};\n\nexport const LongValues: Story = {\n  args: { categories: [\"This is an edge case\"] },\n};\n\nexport const MultipleCategories: Story = {\n  args: {\n    categories: [\"Sales\", \"Successful Payments\"],\n    yAxisWidth: 110,\n  },\n};\n\nexport const NoData: Story = {\n  args: { data: [] },\n};\n\nexport const NoDataText: Story = {\n  args: { data: [], noDataText: \"No data, try again later.\" },\n};\n\nexport const NoCategories: Story = {\n  args: { categories: undefined },\n};\n\nexport const NoIndex: Story = {\n  args: { index: undefined },\n};\nexport const CurveTypeNatural: Story = {\n  args: { curveType: \"natural\" },\n};\n\nexport const ConnectNullsTrue: Story = {\n  args: { data: simpleBaseChartDataWithNulls, connectNulls: true },\n};\n\nexport const ConnectNullsFalse: Story = {\n  args: { data: simpleBaseChartDataWithNulls, connectNulls: false },\n};\n\nexport const Animation: Story = {\n  args: { showAnimation: true },\n};\n\nexport const LongAnimationDuration: Story = {\n  args: { showAnimation: true, animationDuration: 5000 },\n};\n\nexport const OnValueChange: Story = {\n  args: { onValueChange: (v: any) => alert(JSON.stringify(v)) },\n};\n\nexport const OneDataValue: Story = {\n  args: { data: data.slice(0, 1) },\n};\n\nexport const OneDataValueAndOnValueChange: Story = {\n  args: { data: data.slice(0, 1), onValueChange: (v: any) => alert(JSON.stringify(v)) },\n};\n\nexport const SingleAndMultipleData: Story = {\n  args: { data: singleAndMultipleData },\n};\n\nexport const SingleAndMultipleDataAndOnValueChange: Story = {\n  args: { data: singleAndMultipleData, onValueChange: (v: any) => alert(JSON.stringify(v)) },\n};\n\nexport const LegendSlider: Story = {\n  args: { enableLegendSlider: true },\n};\nexport const PreserveStartEnd: Story = {\n  args: { intervalType: \"preserveStartEnd\" },\n};\n\nexport const LongDataInput: Story = {\n  args: { data: longBaseChartData },\n};\n\nexport const LongDataInputAndPreserveStartEnd: Story = {\n  args: { data: longBaseChartData, intervalType: \"preserveStartEnd\" },\n};\n\nexport const LongIndexName: Story = {\n  args: { data: longIndexBaseChartData },\n};\n\nexport const LongIndexNameAndPreserveStartEnd: Story = {\n  args: { data: longIndexBaseChartData, intervalType: \"preserveStartEnd\" },\n};\n\nexport const NoAxes: Story = {\n  args: { showXAxis: false, showYAxis: false },\n};\n\nexport const NoYAxisStartEndOnly: Story = {\n  args: { showYAxis: false, startEndOnly: true },\n};\n\nexport const RotateXLabels: Story = {\n  args: {\n    data: longBaseChartData,\n    rotateLabelX: { angle: -45, verticalShift: 15, xAxisHeight: 50 },\n  },\n};\n\n//Custom tooltips\nconst customTooltipColors: Color[] = [\"cyan\"];\nconst customTooltipIndex = \"month\";\nconst getBadgeColor = (percentage: number | undefined) => {\n  if (!percentage || percentage === 0) return \"gray\";\n  else if (percentage > 0) return \"emerald\";\n  else return \"red\";\n};\n\nexport const CustomTooltipSimple: Story = {\n  args: {\n    yAxisWidth: 65,\n    index: customTooltipIndex,\n    categories: [\"Sales\"],\n    colors: customTooltipColors,\n    valueFormatter: currencyValueFormatter,\n    customTooltip: (props: CustomTooltipProps) => {\n      const { payload, active, label } = props;\n      if (!active || !payload) return null;\n\n      const categoryPayload = payload?.[0];\n      if (!categoryPayload) return null;\n      return (\n        <div className=\"w-56 rounded-tremor-default text-tremor-default bg-tremor-background p-2 shadow-tremor-dropdown border border-tremor-border\">\n          <div className=\"flex flex-1 space-x-2.5\">\n            <div className={`w-1.5 flex flex-col bg-${categoryPayload.color}-500 rounded`} />\n            <div className=\"w-full\">\n              <p className=\"font-medium text-tremor-content-emphasis\">{label}</p>\n              <div className=\"flex items-center justify-between space-x-8\">\n                <p className=\"text-right text-tremor-content whitespace-nowrap\">\n                  {categoryPayload.dataKey}\n                </p>\n                <p className=\"font-medium text-right whitespace-nowrap text-tremor-content-emphasis\">\n                  {currencyValueFormatter(categoryPayload.value as number)}\n                </p>\n              </div>\n            </div>\n          </div>\n        </div>\n      );\n    },\n  },\n};\n\nexport const CustomTooltipPreviousDay: Story = {\n  args: {\n    yAxisWidth: 65,\n    index: customTooltipIndex,\n    categories: [\"Sales\"],\n    colors: customTooltipColors,\n    valueFormatter: currencyValueFormatter,\n    customTooltip: (props: CustomTooltipProps) => {\n      const { payload, active, label } = props;\n      if (!active || !payload) return null;\n\n      const categoryPayload = payload?.[0];\n      if (!categoryPayload) return null;\n      const value = categoryPayload.value as number;\n      const dataKey = categoryPayload.dataKey as number;\n\n      const previousIndex = data.findIndex((e) => e[customTooltipIndex] === label);\n      const previousValues: any = previousIndex > 0 ? data[previousIndex - 1] : {};\n      const prev = previousValues ? previousValues[dataKey] : undefined;\n      const percentage = ((value - prev) / prev) * 100;\n      const color = getBadgeColor(percentage);\n\n      return (\n        <div className=\"w-56 translate-y-14 flex items-center justify-between rounded-tremor-default text-tremor-default bg-tremor-background p-2 shadow-tremor-dropdown border border-tremor-border\">\n          <span className=\"text-right text-tremor-content whitespace-nowrap\">{dataKey}</span>\n          <div className=\"flex items-center space-x-2\">\n            <span className=\"font-medium text-right whitespace-nowrap text-tremor-content-emphasis\">\n              {currencyValueFormatter(value)}\n            </span>\n            {percentage ? (\n              <span\n                className={`inline-flex text-xs px-1.5 py-0.5 bg-${color}-100 text-${color}-600 rounded`}\n              >\n                {percentage > 0 ? \"+\" : \"\"}\n                {percentage.toFixed(1)}%\n              </span>\n            ) : null}\n          </div>\n        </div>\n      );\n    },\n  },\n};\n\nexport const CustomTooltipComplex: Story = {\n  args: {\n    yAxisWidth: 65,\n    index: customTooltipIndex,\n    categories: [\"Sales\"],\n    colors: customTooltipColors,\n    valueFormatter: currencyValueFormatter,\n    customTooltip: (props: CustomTooltipProps) => {\n      const { payload, active, label } = props;\n      if (!active || !payload) return null;\n\n      const categoryPayload = payload?.[0];\n      if (!categoryPayload) return null;\n      const value = categoryPayload.value as number;\n      const dataKey = categoryPayload.dataKey as number;\n\n      const previousIndex = data.findIndex((e) => e[customTooltipIndex] === label);\n      const previousValues: any = previousIndex > 0 ? data[previousIndex - 1] : {};\n      const prev = previousValues ? previousValues[dataKey] : undefined;\n      const percentage = ((value - prev) / prev) * 100;\n      const badgeColor = getBadgeColor(percentage);\n\n      return (\n        <div className=\"rounded-tremor-default bg-tremor-background p-2 shadow-tremor-dropdown border border-tremor-border\">\n          <div className=\"flex flex-1 space-x-2.5\">\n            <div className={`w-1 flex flex-col bg-${categoryPayload.color}-500 rounded`} />\n            <div className=\"w-full\">\n              <p className=\"text-tremor-default font-medium text-tremor-content-emphasis\">\n                {dataKey}\n              </p>\n              <p className=\"text-tremor-default text-tremor-content-subtle\">{label}</p>\n              <p className=\"mt-2 font-medium whitespace-nowrap text-tremor-content-emphasis\">\n                {currencyValueFormatter(value)}\n              </p>\n              {percentage ? (\n                <div className=\"mt-1 flex items-end space-x-2\">\n                  <div\n                    className={`inline-flex text-tremor-default px-1.5 py-0.5 bg-${badgeColor}-100 text-${badgeColor}-600 rounded`}\n                  >\n                    {percentage > 0 ? \"+\" : null}\n                    {percentage.toFixed(1)}%\n                  </div>\n                  <div className=\"whitespace-nowrap text-tremor-default text-tremor-content-subtle\">\n                    from previous month\n                  </div>\n                </div>\n              ) : null}\n            </div>\n          </div>\n        </div>\n      );\n    },\n  },\n};\n\nexport const Padding: Story = {\n  args: {\n    padding: { left: 0, right: 0 },\n  },\n};\nexport const tickGap: Story = {\n  args: {\n    data: longBaseChartData,\n    tickGap: 200,\n  },\n};\n\nexport const AxisLabels: Story = {\n  args: {\n    xAxisLabel: \"Month of Year\",\n    yAxisLabel: \"Amount (USD)\",\n  },\n};\n"
  },
  {
    "path": "src/stories/chart-elements/ScatterChart.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { ScatterChart } from \"components\";\nimport { CustomTooltipProps } from \"components/chart-elements/common/CustomTooltipProps\";\nimport { Color } from \"lib\";\nimport {\n  simpleScatterChartData as data,\n  simpleScatterChartData2 as data2,\n} from \"./helpers/testDataScatterChart\";\n\nconst meta: Meta<typeof ScatterChart> = {\n  title: \"Visualizations/Chart/ScatterChart\",\n  component: ScatterChart,\n  args: { x: \"x\", y: \"y\", size: \"z\", category: \"location\", data, className: \"h-72\" },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ScatterChart>;\n\nexport const Default: Story = {\n  args: {},\n};\n\nexport const NoSize: Story = {\n  args: {\n    size: undefined,\n  },\n};\n\nexport const CustomSizeRange: Story = {\n  args: {\n    sizeRange: [1, 10],\n  },\n};\n\nexport const OtherColors: Story = {\n  args: {\n    colors: [\"red\", \"green\", \"blue\", \"yellow\"],\n  },\n};\n\nexport const CustomColors: Story = {\n  args: {\n    colors: [\"#32a852\", \"#fcba03\", \"orange-600\", \"blue-400\"],\n  },\n};\n\nexport const WithCustomValueFormatters: Story = {\n  args: {\n    valueFormatter: {\n      x: (x) => `${x} m`,\n      y: (y) => `${y} cm`,\n      size: (size) => `${size} kg`,\n    },\n  },\n};\n\nexport const AutoMinXValue: Story = {\n  args: {\n    autoMinXValue: true,\n  },\n};\n\nexport const NoData: Story = {\n  args: {\n    data: [],\n  },\n};\n\nexport const NoDataText: Story = {\n  args: {\n    data: [],\n    noDataText: \"No data, try again later.\",\n  },\n};\n\nexport const Animation: Story = {\n  args: { showAnimation: true },\n};\n\nexport const LongAnimationDuration: Story = {\n  args: { showAnimation: true, animationDuration: 5000 },\n};\n\nexport const OnValueChange: Story = {\n  args: {\n    onValueChange: (value) => alert(JSON.stringify(value)),\n  },\n};\n\nexport const IntervalTypePreserve: Story = {\n  args: { intervalType: \"preserveStartEnd\" },\n};\n\nexport const RichDataExample: Story = {\n  args: {\n    data: data2,\n    x: \"gdpPercap\",\n    y: \"lifeExp\",\n    category: \"continent\",\n    size: \"population\",\n    valueFormatter: {\n      x: (x) => `${x} $`,\n      y: (y) => `${y} yrs`,\n    },\n    colors: [\"red\", \"green\", \"blue\"],\n  },\n};\n\nexport const LegendSlider: Story = {\n  args: { enableLegendSlider: true },\n};\n\nexport const PreserveStartEnd: Story = {\n  args: { intervalType: \"preserveStartEnd\" },\n};\n\nexport const MultipleZeroValues: Story = {\n  args: {\n    data: [\n      {\n        month: \"May 21\",\n        Sales: 2390,\n        \"Successful Payments\": 0,\n      },\n      {\n        month: \"Jun 21\",\n        Sales: 2390,\n        \"Successful Payments\": 0,\n      },\n      {\n        month: \"Jul 21\",\n        Sales: 3490,\n        \"Successful Payments\": 0,\n      },\n    ],\n  },\n};\n\nexport const RotateXLabel: Story = {\n  args: {\n    rotateLabelX: { angle: -45, verticalShift: 15, xAxisHeight: 50 },\n  },\n};\n\n//Custom tooltips\nconst customTooltipColors: Color[] = [\"red\", \"green\", \"blue\", \"yellow\"];\nconst customTooltipIndex = \"location\";\n\nexport const CustomTooltip: Story = {\n  args: {\n    colors: customTooltipColors,\n    category: customTooltipIndex,\n    customTooltip: (props: CustomTooltipProps) => {\n      const { payload, active, label } = props;\n      if (!active || !payload) return null;\n\n      return (\n        <div className=\"w-48 rounded-tremor-default text-tremor-default bg-tremor-background p-2 shadow-tremor-dropdown border border-tremor-border\">\n          <div className=\"flex flex-1 space-x-2.5\">\n            <div className={`w-1.5 flex flex-col bg-${payload?.[0]?.color}-500 rounded`} />\n            <div className=\"w-full\">\n              <p className=\"mb-2 font-medium text-tremor-content-emphasis\">{label}</p>\n              {payload.map((payloadItem: any, index: number) => (\n                <div key={index} className=\"flex items-center justify-between space-x-8\">\n                  <p className=\"text-right text-tremor-content whitespace-nowrap\">\n                    {payloadItem.name}\n                  </p>\n                  <p className=\"font-medium text-right whitespace-nowrap text-tremor-content-emphasis\">\n                    {payloadItem.value}\n                  </p>\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      );\n    },\n  },\n};\n\nexport const tickGap: Story = {\n  args: {\n    tickGap: 500,\n  },\n};\n\nexport const AxisLabels: Story = {\n  args: {\n    xAxisLabel: \"Month of Year\",\n    yAxisLabel: \"Amount (USD)\",\n  },\n};\n"
  },
  {
    "path": "src/stories/chart-elements/helpers/testData.tsx",
    "content": "export const longBaseChartData = [\n  {\n    month: \"Jan 21\",\n    Sales: 4400,\n    \"Successful Payments\": 5026,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Feb 21\",\n    Sales: 3612,\n    \"Successful Payments\": 4181,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Mar 21\",\n    Sales: 145,\n    \"Successful Payments\": 1131,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Apr 21\",\n    Sales: 5142,\n    \"Successful Payments\": 2159,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"May 21\",\n    Sales: 2743,\n    \"Successful Payments\": 956,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jun 21\",\n    Sales: 4496,\n    \"Successful Payments\": 2838,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jul 21\",\n    Sales: 4534,\n    \"Successful Payments\": 3135,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Aug 21\",\n    Sales: 398,\n    \"Successful Payments\": 3958,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Sep 21\",\n    Sales: 4953,\n    \"Successful Payments\": 1448,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Oct 21\",\n    Sales: 3246,\n    \"Successful Payments\": 3059,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Nov 21\",\n    Sales: 1980,\n    \"Successful Payments\": 867,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Dec 21\",\n    Sales: 2775,\n    \"Successful Payments\": 982,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jan 22\",\n    Sales: 3869,\n    \"Successful Payments\": 571,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Feb 22\",\n    Sales: 1219,\n    \"Successful Payments\": 1813,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Mar 22\",\n    Sales: 3551,\n    \"Successful Payments\": 2068,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Apr 22\",\n    Sales: 1969,\n    \"Successful Payments\": 1155,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"May 22\",\n    Sales: 3513,\n    \"Successful Payments\": 4703,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jun 22\",\n    Sales: 1524,\n    \"Successful Payments\": 1176,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jul 22\",\n    Sales: 1462,\n    \"Successful Payments\": 4463,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Aug 22\",\n    Sales: 3828,\n    \"Successful Payments\": 167,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Sep 22\",\n    Sales: 3110,\n    \"Successful Payments\": 3903,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Oct 22\",\n    Sales: 2311,\n    \"Successful Payments\": 3669,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Nov 22\",\n    Sales: 3821,\n    \"Successful Payments\": 3376,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Dec 22\",\n    Sales: 5115,\n    \"Successful Payments\": 4914,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jan 23\",\n    Sales: 1413,\n    \"Successful Payments\": 1872,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Feb 23\",\n    Sales: 1305,\n    \"Successful Payments\": 4073,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Mar 23\",\n    Sales: 2218,\n    \"Successful Payments\": 559,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Apr 23\",\n    Sales: 5051,\n    \"Successful Payments\": 3968,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"May 23\",\n    Sales: 3411,\n    \"Successful Payments\": 4837,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jun 23\",\n    Sales: 3464,\n    \"Successful Payments\": 4570,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jul 23\",\n    Sales: 1482,\n    \"Successful Payments\": 1760,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Aug 23\",\n    Sales: 1180,\n    \"Successful Payments\": 1806,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Sep 23\",\n    Sales: 1320,\n    \"Successful Payments\": 4531,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Oct 23\",\n    Sales: 2860,\n    \"Successful Payments\": 3168,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Nov 23\",\n    Sales: 672,\n    \"Successful Payments\": 1499,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Dec 23\",\n    Sales: 995,\n    \"Successful Payments\": 1146,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jan 24\",\n    Sales: 2230,\n    \"Successful Payments\": 2761,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Feb 24\",\n    Sales: 3019,\n    \"Successful Payments\": 4286,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Mar 24\",\n    Sales: 4489,\n    \"Successful Payments\": 1722,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Apr 24\",\n    Sales: 940,\n    \"Successful Payments\": 3497,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"May 24\",\n    Sales: 1973,\n    \"Successful Payments\": 858,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jun 24\",\n    Sales: 3195,\n    \"Successful Payments\": 2873,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jul 24\",\n    Sales: 3556,\n    \"Successful Payments\": 391,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Aug 24\",\n    Sales: 4431,\n    \"Successful Payments\": 3194,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Sep 24\",\n    Sales: 2693,\n    \"Successful Payments\": 2404,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Oct 24\",\n    Sales: 3076,\n    \"Successful Payments\": 2455,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Nov 24\",\n    Sales: 1908,\n    \"Successful Payments\": 1209,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Dec 24\",\n    Sales: 3925,\n    \"Successful Payments\": 1499,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jan 25\",\n    Sales: 3842,\n    \"Successful Payments\": 658,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Feb 25\",\n    Sales: 463,\n    \"Successful Payments\": 637,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Mar 25\",\n    Sales: 4560,\n    \"Successful Payments\": 1227,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Apr 25\",\n    Sales: 4702,\n    \"Successful Payments\": 877,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"May 25\",\n    Sales: 4622,\n    \"Successful Payments\": 3463,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jun 25\",\n    Sales: 3831,\n    \"Successful Payments\": 1241,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jul 25\",\n    Sales: 1276,\n    \"Successful Payments\": 1618,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Aug 25\",\n    Sales: 4722,\n    \"Successful Payments\": 3496,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Sep 25\",\n    Sales: 386,\n    \"Successful Payments\": 5080,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Oct 25\",\n    Sales: 786,\n    \"Successful Payments\": 179,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Nov 25\",\n    Sales: 883,\n    \"Successful Payments\": 2458,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Dec 25\",\n    Sales: 5079,\n    \"Successful Payments\": 3292,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jan 26\",\n    Sales: 528,\n    \"Successful Payments\": 1778,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Feb 26\",\n    Sales: 1039,\n    \"Successful Payments\": 3136,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Mar 26\",\n    Sales: 4336,\n    \"Successful Payments\": 264,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Apr 26\",\n    Sales: 1460,\n    \"Successful Payments\": 426,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"May 26\",\n    Sales: 3026,\n    \"Successful Payments\": 2190,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jun 26\",\n    Sales: 3758,\n    \"Successful Payments\": 4651,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jul 26\",\n    Sales: 170,\n    \"Successful Payments\": 217,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Aug 26\",\n    Sales: 4784,\n    \"Successful Payments\": 4014,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Sep 26\",\n    Sales: 3665,\n    \"Successful Payments\": 4634,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Oct 26\",\n    Sales: 4041,\n    \"Successful Payments\": 3762,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Nov 26\",\n    Sales: 969,\n    \"Successful Payments\": 682,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Dec 26\",\n    Sales: 4068,\n    \"Successful Payments\": 4044,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jan 27\",\n    Sales: 2136,\n    \"Successful Payments\": 824,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Feb 27\",\n    Sales: 3122,\n    \"Successful Payments\": 2852,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Mar 27\",\n    Sales: 2931,\n    \"Successful Payments\": 2205,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Apr 27\",\n    Sales: 517,\n    \"Successful Payments\": 1112,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"May 27\",\n    Sales: 3641,\n    \"Successful Payments\": 1254,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jun 27\",\n    Sales: 4115,\n    \"Successful Payments\": 1336,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jul 27\",\n    Sales: 3027,\n    \"Successful Payments\": 3751,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Aug 27\",\n    Sales: 5069,\n    \"Successful Payments\": 4319,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Sep 27\",\n    Sales: 4139,\n    \"Successful Payments\": 1462,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Oct 27\",\n    Sales: 4424,\n    \"Successful Payments\": 4044,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Nov 27\",\n    Sales: 1268,\n    \"Successful Payments\": 3087,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Dec 27\",\n    Sales: 3590,\n    \"Successful Payments\": 4176,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jan 28\",\n    Sales: 4202,\n    \"Successful Payments\": 1155,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Feb 28\",\n    Sales: 3543,\n    \"Successful Payments\": 1596,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Mar 28\",\n    Sales: 4993,\n    \"Successful Payments\": 4487,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Apr 28\",\n    Sales: 3035,\n    \"Successful Payments\": 4952,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"May 28\",\n    Sales: 285,\n    \"Successful Payments\": 1839,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jun 28\",\n    Sales: 1058,\n    \"Successful Payments\": 2728,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jul 28\",\n    Sales: 482,\n    \"Successful Payments\": 3933,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Aug 28\",\n    Sales: 3508,\n    \"Successful Payments\": 3357,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Sep 28\",\n    Sales: 1575,\n    \"Successful Payments\": 1610,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Oct 28\",\n    Sales: 2815,\n    \"Successful Payments\": 3759,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Nov 28\",\n    Sales: 2472,\n    \"Successful Payments\": 1015,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Dec 28\",\n    Sales: 1825,\n    \"Successful Payments\": 496,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jan 29\",\n    Sales: 514,\n    \"Successful Payments\": 4661,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Feb 29\",\n    Sales: 672,\n    \"Successful Payments\": 1476,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Mar 29\",\n    Sales: 1255,\n    \"Successful Payments\": 781,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Apr 29\",\n    Sales: 2507,\n    \"Successful Payments\": 2985,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"May 29\",\n    Sales: 1333,\n    \"Successful Payments\": 714,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jun 29\",\n    Sales: 5103,\n    \"Successful Payments\": 4948,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jul 29\",\n    Sales: 2306,\n    \"Successful Payments\": 5054,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Aug 29\",\n    Sales: 3519,\n    \"Successful Payments\": 1149,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Sep 29\",\n    Sales: 4068,\n    \"Successful Payments\": 1012,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Oct 29\",\n    Sales: 1616,\n    \"Successful Payments\": 740,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Nov 29\",\n    Sales: 403,\n    \"Successful Payments\": 1843,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Dec 29\",\n    Sales: 2792,\n    \"Successful Payments\": 988,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jan 30\",\n    Sales: 4727,\n    \"Successful Payments\": 1272,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Feb 30\",\n    Sales: 4911,\n    \"Successful Payments\": 892,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Mar 30\",\n    Sales: 1603,\n    \"Successful Payments\": 4490,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Apr 30\",\n    Sales: 2728,\n    \"Successful Payments\": 4928,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"May 30\",\n    Sales: 3696,\n    \"Successful Payments\": 1040,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jun 30\",\n    Sales: 3351,\n    \"Successful Payments\": 1407,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jul 30\",\n    Sales: 1960,\n    \"Successful Payments\": 1132,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Aug 30\",\n    Sales: 1928,\n    \"Successful Payments\": 3968,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Sep 30\",\n    Sales: 1977,\n    \"Successful Payments\": 2742,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Oct 30\",\n    Sales: 2603,\n    \"Successful Payments\": 182,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Nov 30\",\n    Sales: 1079,\n    \"Successful Payments\": 999,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Dec 30\",\n    Sales: 2501,\n    \"Successful Payments\": 3661,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jan 31\",\n    Sales: 2975,\n    \"Successful Payments\": 3461,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Feb 31\",\n    Sales: 296,\n    \"Successful Payments\": 737,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Mar 31\",\n    Sales: 3986,\n    \"Successful Payments\": 2366,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Apr 31\",\n    Sales: 2085,\n    \"Successful Payments\": 3704,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"May 31\",\n    Sales: 2333,\n    \"Successful Payments\": 3056,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jun 31\",\n    Sales: 256,\n    \"Successful Payments\": 3338,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jul 31\",\n    Sales: 449,\n    \"Successful Payments\": 2095,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Aug 31\",\n    Sales: 975,\n    \"Successful Payments\": 1714,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Sep 31\",\n    Sales: 4346,\n    \"Successful Payments\": 1323,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Oct 31\",\n    Sales: 4407,\n    \"Successful Payments\": 3066,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Nov 31\",\n    Sales: 5215,\n    \"Successful Payments\": 3643,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Dec 31\",\n    Sales: 3021,\n    \"Successful Payments\": 850,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jan 32\",\n    Sales: 3373,\n    \"Successful Payments\": 1793,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Feb 32\",\n    Sales: 2742,\n    \"Successful Payments\": 1352,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Mar 32\",\n    Sales: 720,\n    \"Successful Payments\": 1203,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Apr 32\",\n    Sales: 5002,\n    \"Successful Payments\": 310,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"May 32\",\n    Sales: 3405,\n    \"Successful Payments\": 254,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jun 32\",\n    Sales: 1065,\n    \"Successful Payments\": 1183,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jul 32\",\n    Sales: 4807,\n    \"Successful Payments\": 1758,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Aug 32\",\n    Sales: 3850,\n    \"Successful Payments\": 3150,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Sep 32\",\n    Sales: 3530,\n    \"Successful Payments\": 4923,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Oct 32\",\n    Sales: 2895,\n    \"Successful Payments\": 4767,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Nov 32\",\n    Sales: 1909,\n    \"Successful Payments\": 4908,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Dec 32\",\n    Sales: 1776,\n    \"Successful Payments\": 385,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jan 33\",\n    Sales: 3108,\n    \"Successful Payments\": 1484,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Feb 33\",\n    Sales: 3488,\n    \"Successful Payments\": 4389,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Mar 33\",\n    Sales: 1010,\n    \"Successful Payments\": 3971,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Apr 33\",\n    Sales: 3779,\n    \"Successful Payments\": 5182,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"May 33\",\n    Sales: 1595,\n    \"Successful Payments\": 3604,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jun 33\",\n    Sales: 3256,\n    \"Successful Payments\": 4592,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jul 33\",\n    Sales: 3920,\n    \"Successful Payments\": 568,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Aug 33\",\n    Sales: 4521,\n    \"Successful Payments\": 3269,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Sep 33\",\n    Sales: 977,\n    \"Successful Payments\": 3448,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Oct 33\",\n    Sales: 3874,\n    \"Successful Payments\": 3813,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Nov 33\",\n    Sales: 1431,\n    \"Successful Payments\": 642,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Dec 33\",\n    Sales: 2735,\n    \"Successful Payments\": 5057,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jan 34\",\n    Sales: 3940,\n    \"Successful Payments\": 3990,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Feb 34\",\n    Sales: 3982,\n    \"Successful Payments\": 457,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Mar 34\",\n    Sales: 4382,\n    \"Successful Payments\": 504,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Apr 34\",\n    Sales: 4832,\n    \"Successful Payments\": 4964,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"May 34\",\n    Sales: 3883,\n    \"Successful Payments\": 4266,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jun 34\",\n    Sales: 3740,\n    \"Successful Payments\": 4395,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jul 34\",\n    Sales: 4958,\n    \"Successful Payments\": 2027,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Aug 34\",\n    Sales: 523,\n    \"Successful Payments\": 1190,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Sep 34\",\n    Sales: 2062,\n    \"Successful Payments\": 2328,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Oct 34\",\n    Sales: 371,\n    \"Successful Payments\": 3029,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Nov 34\",\n    Sales: 2243,\n    \"Successful Payments\": 5201,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Dec 34\",\n    Sales: 3091,\n    \"Successful Payments\": 2705,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jan 35\",\n    Sales: 2489,\n    \"Successful Payments\": 2514,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Feb 35\",\n    Sales: 372,\n    \"Successful Payments\": 2182,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Mar 35\",\n    Sales: 5195,\n    \"Successful Payments\": 3913,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Apr 35\",\n    Sales: 3120,\n    \"Successful Payments\": 466,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"May 35\",\n    Sales: 2391,\n    \"Successful Payments\": 5118,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jun 35\",\n    Sales: 731,\n    \"Successful Payments\": 4544,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jul 35\",\n    Sales: 3070,\n    \"Successful Payments\": 2037,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Aug 35\",\n    Sales: 2332,\n    \"Successful Payments\": 565,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Sep 35\",\n    Sales: 2237,\n    \"Successful Payments\": 2344,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Oct 35\",\n    Sales: 797,\n    \"Successful Payments\": 759,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Nov 35\",\n    Sales: 819,\n    \"Successful Payments\": 318,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Dec 35\",\n    Sales: 4213,\n    \"Successful Payments\": 2206,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jan 36\",\n    Sales: 1396,\n    \"Successful Payments\": 5064,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Feb 36\",\n    Sales: 796,\n    \"Successful Payments\": 1753,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Mar 36\",\n    Sales: 3034,\n    \"Successful Payments\": 2392,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Apr 36\",\n    Sales: 4255,\n    \"Successful Payments\": 3744,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"May 36\",\n    Sales: 1646,\n    \"Successful Payments\": 950,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jun 36\",\n    Sales: 1298,\n    \"Successful Payments\": 3106,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jul 36\",\n    Sales: 4171,\n    \"Successful Payments\": 3261,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Aug 36\",\n    Sales: 5071,\n    \"Successful Payments\": 1507,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Sep 36\",\n    Sales: 2159,\n    \"Successful Payments\": 2281,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Oct 36\",\n    Sales: 3749,\n    \"Successful Payments\": 3600,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Nov 36\",\n    Sales: 807,\n    \"Successful Payments\": 4300,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Dec 36\",\n    Sales: 5210,\n    \"Successful Payments\": 2508,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jan 37\",\n    Sales: 3039,\n    \"Successful Payments\": 4666,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Feb 37\",\n    Sales: 837,\n    \"Successful Payments\": 5142,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Mar 37\",\n    Sales: 2174,\n    \"Successful Payments\": 1575,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Apr 37\",\n    Sales: 235,\n    \"Successful Payments\": 4356,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"May 37\",\n    Sales: 3107,\n    \"Successful Payments\": 4315,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jun 37\",\n    Sales: 4580,\n    \"Successful Payments\": 3622,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jul 37\",\n    Sales: 2259,\n    \"Successful Payments\": 3271,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Aug 37\",\n    Sales: 1293,\n    \"Successful Payments\": 4797,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Sep 37\",\n    Sales: 506,\n    \"Successful Payments\": 2371,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Oct 37\",\n    Sales: 4375,\n    \"Successful Payments\": 4833,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Nov 37\",\n    Sales: 3761,\n    \"Successful Payments\": 3628,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Dec 37\",\n    Sales: 3444,\n    \"Successful Payments\": 580,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jan 38\",\n    Sales: 4747,\n    \"Successful Payments\": 5152,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Feb 38\",\n    Sales: 1145,\n    \"Successful Payments\": 161,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Mar 38\",\n    Sales: 2373,\n    \"Successful Payments\": 2389,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Apr 38\",\n    Sales: 4420,\n    \"Successful Payments\": 2918,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"May 38\",\n    Sales: 3850,\n    \"Successful Payments\": 3100,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jun 38\",\n    Sales: 2842,\n    \"Successful Payments\": 1320,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jul 38\",\n    Sales: 2268,\n    \"Successful Payments\": 477,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Aug 38\",\n    Sales: 4464,\n    \"Successful Payments\": 787,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Sep 38\",\n    Sales: 210,\n    \"Successful Payments\": 789,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Oct 38\",\n    Sales: 2413,\n    \"Successful Payments\": 3672,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Nov 38\",\n    Sales: 2083,\n    \"Successful Payments\": 3114,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Dec 38\",\n    Sales: 4763,\n    \"Successful Payments\": 1431,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n];\n\nexport const simpleBaseChartData = [\n  {\n    month: \"Jan 21\",\n    Sales: 4000,\n    \"Successful Payments\": 3000,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Feb 21\",\n    Sales: 3000,\n    \"Successful Payments\": 2000,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Mar 21\",\n    Sales: 2000,\n    \"Successful Payments\": 1700,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Apr 21\",\n    Sales: 2780,\n    \"Successful Payments\": 2500,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"May 21\",\n    Sales: 1890,\n    \"Successful Payments\": 1890,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jun 21\",\n    Sales: 2390,\n    \"Successful Payments\": 2000,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jul 21\",\n    Sales: 3490,\n    \"Successful Payments\": 3000,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n];\n\nexport const simpleBaseChartWithNegativeValues = [\n  {\n    month: \"Jan 21\",\n    Sales: 4000,\n    \"Successful Payments\": 3000,\n  },\n  {\n    month: \"Feb 21\",\n    Sales: 3000,\n    \"Successful Payments\": 2000,\n  },\n  {\n    month: \"Mar 21\",\n    Sales: 2000,\n    \"Successful Payments\": 1700,\n  },\n  {\n    month: \"Apr 21\",\n    Sales: 2780,\n    \"Successful Payments\": -2500,\n  },\n  {\n    month: \"May 21\",\n    Sales: 1890,\n    \"Successful Payments\": -1890,\n  },\n  {\n    month: \"Jun 21\",\n    Sales: 2390,\n    \"Successful Payments\": -2000,\n  },\n  {\n    month: \"Jul 21\",\n    Sales: 100,\n    \"Successful Payments\": -3000,\n  },\n];\n\nexport const longIndexBaseChartData = [\n  {\n    month: \"Januar 2023\",\n    Sales: 4000,\n    \"Successful Payments\": 3000,\n  },\n  {\n    month: \"Februar 2023\",\n    Sales: 3000,\n    \"Successful Payments\": 2000,\n  },\n  {\n    month: \"Maerz 2023\",\n    Sales: 2000,\n    \"Successful Payments\": 1700,\n  },\n  {\n    month: \"April 2023\",\n    Sales: 2780,\n    \"Successful Payments\": 2500,\n  },\n  {\n    month: \"Mai 2023\",\n    Sales: 3780,\n    \"Successful Payments\": 2200,\n  },\n  {\n    month: \"Juni 2023\",\n    Sales: 4580,\n    \"Successful Payments\": 2100,\n  },\n  {\n    month: \"Juli 2023\",\n    Sales: 2280,\n    \"Successful Payments\": 4500,\n  },\n  {\n    month: \"August 2023\",\n    Sales: 2680,\n    \"Successful Payments\": 4500,\n  },\n  {\n    month: \"September 2023\",\n    Sales: 2700,\n    \"Successful Payments\": 2900,\n  },\n];\n\nexport const simpleBaseChartDataWithNulls = [\n  {\n    month: \"Jan 21\",\n    Sales: 4000,\n    \"Successful Payments\": 3000,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Feb 21\",\n    Sales: 3000,\n    \"Successful Payments\": 2000,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Mar 21\",\n    Sales: 2000,\n    \"Successful Payments\": 1700,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Apr 21\",\n    \"Successful Payments\": 2500,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"May 21\",\n    \"Successful Payments\": 1000,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jun 21\",\n    Sales: 2390,\n    \"Successful Payments\": 2000,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n  {\n    month: \"Jul 21\",\n    Sales: 3490,\n    \"Successful Payments\": 3000,\n    \"This is an edge case\": 100000000,\n    Test: 5000,\n  },\n];\n\nexport const simpleSingleCategoryData = [\n  {\n    city: \"New York\",\n    sales: 9800,\n    delta: \"6.1%\",\n    deltaType: \"increase\",\n  },\n  {\n    city: \"London\",\n    sales: 4567,\n    delta: \"1.2%\",\n    deltaType: \"moderateDecrease\",\n  },\n  {\n    city: \"Hong Kong\",\n    sales: 3908,\n    delta: \"0.5%\",\n    deltaType: \"moderateDecrease\",\n  },\n  {\n    city: \"San Francisco\",\n    sales: 2400,\n    delta: \"2.3%\",\n    deltaType: \"moderateIncrease\",\n  },\n  {\n    city: \"Zurich\",\n    sales: 2198,\n    delta: \"3.4%\",\n    deltaType: \"decrease\",\n  },\n  {\n    city: \"Toronto\",\n    sales: 1908,\n    delta: \"1.8%\",\n    deltaType: \"moderateIncrease\",\n  },\n];\n\nexport const singleAndMultipleData = [\n  {\n    month: \"Jan 21\",\n    Sales: 4400,\n    \"Successful Payments\": 5026,\n  },\n  {\n    month: \"Feb 21\",\n    Sales: 3612,\n  },\n];\n"
  },
  {
    "path": "src/stories/chart-elements/helpers/testDataScatterChart.tsx",
    "content": "export const simpleScatterChartData = [\n  {\n    location: \"Location A\",\n    x: 100,\n    y: 200,\n    z: 200,\n  },\n  {\n    location: \"Location A\",\n    x: 120,\n    y: 100,\n    z: 260,\n  },\n  {\n    location: \"Location A\",\n    x: 170,\n    y: 300,\n    z: 400,\n  },\n  {\n    location: \"Location B\",\n    x: 140,\n    y: 250,\n    z: 280,\n  },\n  {\n    location: \"Location B\",\n    x: 150,\n    y: 400,\n    z: 500,\n  },\n  {\n    location: \"Location B\",\n    x: 110,\n    y: 280,\n    z: 200,\n  },\n  {\n    location: \"Location C\",\n    x: 200,\n    y: 260,\n    z: 240,\n  },\n  {\n    location: \"Location C\",\n    x: 220,\n    y: 290,\n    z: 120,\n  },\n  {\n    location: \"Location D\",\n    x: 0,\n    y: 190,\n    z: 250,\n  },\n  {\n    location: \"Location D\",\n    x: 70,\n    y: 0,\n    z: 950,\n  },\n];\n\nexport const simpleScatterChartData2 = [\n  {\n    country: \"Afghanistan\",\n    lifeExp: 27.7,\n    gdpPercap: 1156,\n    population: 7480464,\n    continent: \"Asia\",\n    happinessLev: 4.5,\n  },\n  {\n    country: \"Albania\",\n    lifeExp: 46.5,\n    gdpPercap: 1736,\n    population: 1366747,\n    continent: \"Europe\",\n    happinessLev: 5.5,\n  },\n  {\n    country: \"France\",\n    lifeExp: 86.5,\n    gdpPercap: 5636,\n    population: 7000000,\n    continent: \"Europe\",\n    happinessLev: 8.5,\n  },\n  {\n    country: \"South Africa\",\n    lifeExp: 75.5,\n    gdpPercap: 3694,\n    population: 4100000,\n    continent: \"Africa\",\n    happinessLev: 6.5,\n  },\n];\n"
  },
  {
    "path": "src/stories/chart-elements/helpers/utils.ts",
    "content": "export const valueFormatter = (number: number) => {\n  return Intl.NumberFormat(\"us\").format(number).toString() + \" $\";\n};\n"
  },
  {
    "path": "src/stories/icon-elements/Badge.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { BaseColors, Sizes as InputSizes } from \"lib/constants\";\n\nimport { ArrowUpIcon } from \"assets\";\nimport { Badge, Grid } from \"components\";\n\nconst meta: Meta<typeof Badge> = {\n  title: \"UI/Icon/Badge\",\n  component: Badge,\n  args: {\n    children: \"Live\",\n    tooltip: \"Tooltip\",\n    icon: ArrowUpIcon,\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Badge>;\n\nconst BadgeTemplateColors: Story = {\n  render: ({ ...args }) => {\n    return (\n      <Grid className=\"gap-y-2\">\n        <Badge tooltip=\"Tooltip\" {...args} />\n        {Object.values(BaseColors).map((color) => (\n          <Badge key={color} color={color} tooltip=\"Tooltip\" {...args} />\n        ))}\n      </Grid>\n    );\n  },\n};\n\nconst BadgeTemplateSizes: Story = {\n  render: ({ ...args }) => {\n    return (\n      <Grid className=\"gap-y-2\">\n        {Object.values(InputSizes).map((size) => (\n          <Badge key={size} size={size} tooltip=\"Tooltip\" {...args} />\n        ))}\n      </Grid>\n    );\n  },\n};\n\nexport const Default: Story = {\n  args: {},\n};\n\nexport const Sizes: Story = {\n  ...BadgeTemplateSizes,\n};\n\nexport const Colors: Story = {\n  ...BadgeTemplateColors,\n};\n\nexport const NoIcon: Story = {\n  args: {\n    icon: undefined,\n  },\n};\n"
  },
  {
    "path": "src/stories/icon-elements/BadgeDelta.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { DeltaTypes as InputDeltaTypes, Sizes as InputSizes } from \"lib/constants\";\n\nimport { BadgeDelta, Grid } from \"components\";\n\nconst meta: Meta<typeof BadgeDelta> = {\n  title: \"UI/Icon/BadgeDelta\",\n  component: BadgeDelta,\n  args: {\n    children: \"12.5%\",\n    tooltip: \"Tooltip\",\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof BadgeDelta>;\n\nconst BadgeDeltaTemplateSizes: Story = {\n  render: ({ ...args }) => {\n    return (\n      <Grid numItems={1} className=\"gap-y-2\">\n        {Object.values(InputSizes).map((size) => (\n          <>\n            <BadgeDelta size={size} deltaType=\"moderateIncrease\" {...args} />\n          </>\n        ))}\n      </Grid>\n    );\n  },\n};\n\nconst BadgeDeltaTemplateTypes: Story = {\n  render: ({ ...args }) => {\n    return (\n      <Grid className=\"gap-y-1\">\n        <BadgeDelta deltaType=\"increase\" {...args} />\n        {Object.values(InputDeltaTypes).map((deltaType) => (\n          <BadgeDelta key={deltaType} deltaType={deltaType} {...args} />\n        ))}\n      </Grid>\n    );\n  },\n};\n\nexport const Default: Story = {\n  args: {},\n};\n\nexport const Sizes: Story = {\n  ...BadgeDeltaTemplateSizes,\n};\n\nexport const Types: Story = {\n  ...BadgeDeltaTemplateTypes,\n};\n"
  },
  {
    "path": "src/stories/icon-elements/Icon.stories.tsx",
    "content": "import React from \"react\";\n\nimport { Meta, StoryObj } from \"@storybook/react\";\nimport { ArrowUpIcon } from \"assets\";\n\nimport { Grid } from \"components\";\nimport { BaseColors, Sizes as InputSizes } from \"lib/constants\";\n\nimport { IconVariants } from \"components/icon-elements/Icon/Icon\";\n\nimport Icon from \"components/icon-elements/Icon/Icon\";\n\nconst meta: Meta<typeof Icon> = {\n  title: \"UI/Icon/Icon\",\n  component: Icon,\n  args: {\n    icon: ArrowUpIcon,\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Icon>;\n\nconst IconTemplateSizes: Story = {\n  render: ({ ...args }) => {\n    return (\n      <Grid numItems={5}>\n        {Object.values(IconVariants).map((variant) => (\n          <div key={variant}>\n            <p>{variant}</p>\n            {Object.values(InputSizes).map((size) => (\n              <div key={size} className=\"mt-2\">\n                <Icon variant={variant} size={size} tooltip=\"Tooltip\" {...args} />\n              </div>\n            ))}\n          </div>\n        ))}\n      </Grid>\n    );\n  },\n};\n\nconst IconTemplateColors: Story = {\n  render: ({ ...args }) => {\n    return (\n      <Grid numItemsLg={2} className=\"gap-x-2 gap-y-2\">\n        {Object.values(IconVariants).map((variant) => (\n          <>\n            <Grid numItems={5}>\n              {Object.values(BaseColors).map((color) => (\n                <>\n                  <div key={color} className=\"mt-2\">\n                    <Icon variant={variant} color={color} {...args} />\n                  </div>\n                </>\n              ))}\n            </Grid>\n          </>\n        ))}\n      </Grid>\n    );\n  },\n};\n\nconst IconShrink: Story = {\n  render: ({ ...args }) => {\n    return (\n      <div className=\"flex flex-wrap items-center justify-center space-x-3 sm:space-x-12\">\n        <Icon variant=\"simple\" tooltip=\"simple\" {...args} />\n        <Icon variant=\"shadow\" tooltip=\"shadow\" {...args} />\n        <Icon variant=\"outlined\" tooltip=\"outlined\" {...args} />\n        <Icon variant=\"light\" tooltip=\"light\" {...args} />\n        <Icon variant=\"solid\" tooltip=\"solid\" {...args} />\n      </div>\n    );\n  },\n};\n\nexport const Default: Story = {\n  args: {},\n};\n\nexport const Sizes: Story = {\n  ...IconTemplateSizes,\n};\n\nexport const Colors: Story = {\n  ...IconTemplateColors,\n};\n\nexport const Shrink: Story = {\n  ...IconShrink,\n};\n"
  },
  {
    "path": "src/stories/input-elements/Button.stories.tsx",
    "content": "import React, { useState } from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ArrowRightIcon } from \"assets\";\nimport { Button, Grid } from \"components\";\nimport { BaseColors, Sizes as InputSizes } from \"lib/constants\";\n\nconst meta: Meta<typeof Button> = {\n  title: \"UI/Input/Button\",\n  component: Button,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Button>;\n\nconst SizesTemplate: Story = {\n  render: ({ ...args }) => {\n    return (\n      <Grid numItems={5} className=\"gap-4\">\n        <Button {...args}>Button</Button>\n        <Button {...args} icon={ArrowRightIcon}>\n          Button\n        </Button>\n        <Button {...args} icon={ArrowRightIcon} iconPosition=\"right\">\n          Button\n        </Button>\n        <Button {...args} variant=\"secondary\" icon={ArrowRightIcon} iconPosition=\"left\">\n          Button\n        </Button>\n        <Button {...args} variant=\"light\" icon={ArrowRightIcon} iconPosition=\"right\">\n          Button\n        </Button>\n        {Object.values(InputSizes).map((size) => (\n          <>\n            <Button {...args} size={size}>\n              Button\n            </Button>\n            <Button {...args} size={size} icon={ArrowRightIcon}>\n              Button\n            </Button>\n            <Button {...args} size={size} icon={ArrowRightIcon} iconPosition=\"right\">\n              Button\n            </Button>\n            <Button\n              {...args}\n              size={size}\n              variant=\"secondary\"\n              icon={ArrowRightIcon}\n              iconPosition=\"left\"\n            >\n              Button\n            </Button>\n            <Button\n              {...args}\n              size={size}\n              variant=\"light\"\n              icon={ArrowRightIcon}\n              iconPosition=\"right\"\n            >\n              Button\n            </Button>\n          </>\n        ))}\n      </Grid>\n    );\n  },\n};\n\nconst SizesTemplateNoText: Story = {\n  render: ({ ...args }) => {\n    return (\n      <Grid numItems={5} className=\"gap-4\">\n        <Button {...args} icon={ArrowRightIcon}></Button>\n        <Button {...args} icon={ArrowRightIcon}></Button>\n        <Button {...args} variant=\"secondary\" icon={ArrowRightIcon}></Button>\n        <Button {...args} variant=\"light\" icon={ArrowRightIcon}></Button>\n        {Object.values(InputSizes).map((size) => (\n          <>\n            <Button {...args} size={size}></Button>\n            <Button {...args} size={size} icon={ArrowRightIcon}></Button>\n            <Button {...args} size={size} icon={ArrowRightIcon}></Button>\n            <Button {...args} size={size} variant=\"secondary\" icon={ArrowRightIcon}></Button>\n            <Button {...args} size={size} variant=\"light\" icon={ArrowRightIcon}></Button>\n          </>\n        ))}\n      </Grid>\n    );\n  },\n};\n\nconst ColorsTemplate: Story = {\n  render: ({ ...args }) => {\n    return (\n      <Grid numItems={4} numItemsLg={4} className=\"gap-y-2\">\n        {Object.values(BaseColors).map((color) => (\n          <>\n            <Button {...args} color={color}>\n              Button\n            </Button>\n            <Button {...args} color={color} icon={ArrowRightIcon}>\n              Button\n            </Button>\n            <Button {...args} color={color} variant=\"secondary\">\n              Button\n            </Button>\n            <Button {...args} color={color} variant=\"light\">\n              Button\n            </Button>\n          </>\n        ))}\n      </Grid>\n    );\n  },\n};\n\nfunction LoadingState({ ...args }) {\n  const [loading, setLoading] = useState(false);\n  function RenderButtons(args: any, loading: any) {\n    return (\n      <>\n        <Button {...args} loading={loading}>\n          Button\n        </Button>\n        <Button {...args} icon={ArrowRightIcon} loading={loading}>\n          Button\n        </Button>\n        <Button {...args} icon={ArrowRightIcon} iconPosition=\"right\" loading={loading}>\n          Button\n        </Button>\n        <Button {...args} variant=\"secondary\" loading={loading}>\n          Button\n        </Button>\n      </>\n    );\n  }\n\n  return (\n    <>\n      <Button onClick={() => setLoading(!loading)} color=\"gray\">\n        Click to Load\n      </Button>\n      <div className=\"flex flex-col max-w-fit gap-y-2 mt-10\">\n        {Object.values(InputSizes).map((size, index) => (\n          <React.Fragment key={index}>{RenderButtons(args, loading)}</React.Fragment>\n        ))}\n      </div>\n      With Loading Text\n      <div className=\"flex flex-col max-w-fit gap-y-2 mt-10\">\n        {RenderButtons({ ...args, loadingText: \"Loading\" }, loading)}\n      </div>\n    </>\n  );\n}\n\nconst LoadingStateTemplate: Story = {\n  render: ({ ...args }) => <LoadingState {...args} />,\n};\n\nexport const Default: Story = {\n  args: {\n    children: \"Default\",\n  },\n};\n\nexport const Sizes: Story = {\n  ...SizesTemplate,\n  args: {\n    onClick: () => alert(2),\n    className: \"max-w-fit\",\n  },\n};\n\nexport const SizesNoText: Story = {\n  ...SizesTemplateNoText,\n  args: {\n    onClick: () => alert(2),\n    className: \"max-w-fit\",\n  },\n};\n\nexport const Colors: Story = {\n  ...ColorsTemplate,\n  args: {\n    onClick: () => alert(2),\n    className: \"max-w-fit\",\n  },\n};\n\nexport const Disabled: Story = {\n  args: {\n    children: \"Disabled\",\n    disabled: true,\n  },\n};\n\nexport const TooltipDisabled: Story = {\n  args: {\n    children: \"Disabled\",\n    tooltip: \"Disabled\",\n    disabled: true,\n  },\n};\n\nexport const LoadingStates: Story = {\n  ...LoadingStateTemplate,\n  args: {},\n};\n"
  },
  {
    "path": "src/stories/input-elements/DatePicker.stories.tsx",
    "content": "import React, { useState } from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Button, DatePicker } from \"components\";\nimport { fr } from \"date-fns/locale\";\n\nconst meta: Meta<typeof DatePicker> = {\n  title: \"UI/Input/DatePicker\",\n  component: DatePicker,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof DatePicker>;\n\n// Components\nfunction Uncontrolled({ ...args }) {\n  const [value, setValue] = useState<Date>();\n\n  return (\n    <div className=\"space-y-4\">\n      <DatePicker {...args} onValueChange={(value: Date | undefined) => setValue(value)} />\n      <div className=\"text-slate-500\">\n        <p>Filtered Data</p>\n        <p>Date: {String(value)} </p>\n      </div>\n    </div>\n  );\n}\n\nfunction Controlled({ ...args }) {\n  const [value, setValue] = useState<Date | undefined>(args.value!);\n  return (\n    <div className=\"space-y-4\">\n      <DatePicker {...args} value={value} onValueChange={(v: Date | undefined) => setValue(v)} />\n      <DatePicker {...args} value={value} onValueChange={(v: Date | undefined) => setValue(v)} />\n      <Button\n        onClick={() => {\n          setValue(undefined);\n        }}\n      >\n        Reset\n      </Button>\n      <div className=\"text-slate-500\">\n        <p>Filtered Data</p>\n        <p>Date: {String(value)} </p>\n      </div>\n    </div>\n  );\n}\n\n// Templates\n\nconst UncontrolledTemplate: Story = {\n  render: ({ ...args }) => <Uncontrolled {...args} />,\n};\n\nconst ControlledTemplate: Story = {\n  render: ({ ...args }) => <Controlled {...args} />,\n};\n\n// Stories\nexport const UncontrolledDefault: Story = {\n  ...UncontrolledTemplate,\n};\n\nexport const UncontrolledDefaultValue: Story = {\n  ...UncontrolledTemplate,\n  args: {\n    defaultValue: new Date(2022, 10, 1),\n  },\n};\n\nexport const UncontrolledDisplayFormat: Story = {\n  ...UncontrolledTemplate,\n  args: {\n    displayFormat: \"dd/MM/yyyy\",\n  },\n};\n\nexport const UncontrolledFrLocale: Story = {\n  ...UncontrolledTemplate,\n  args: {\n    locale: fr,\n    placeholder: \"Sélectionnez...\",\n  },\n};\n\nexport const UncontrolledMinMax: Story = {\n  ...UncontrolledTemplate,\n  args: {\n    defaultValue: new Date(2022, 10, 1),\n    minDate: new Date(2023, 4, 1),\n    maxDate: new Date(2023, 4, 15),\n  },\n};\n\nexport const UncontrolledDisabled: Story = {\n  ...UncontrolledTemplate,\n  args: {\n    defaultValue: new Date(2022, 10, 1),\n    disabled: true,\n  },\n};\n\nexport const UncontrolledDisabledDates: Story = {\n  ...UncontrolledTemplate,\n  args: {\n    defaultValue: new Date(2023, 10, 25),\n    minDate: new Date(2023, 10, 5),\n    maxDate: new Date(2023, 10, 28),\n    disabledDates: [new Date(2023, 10, 10), new Date(2023, 10, 11)],\n  },\n};\n\nexport const UncontrolledYearNavigation: Story = {\n  ...UncontrolledTemplate,\n  args: {\n    enableYearNavigation: true,\n  },\n};\n\nexport const UncontrolledoutEnableClear: Story = {\n  ...UncontrolledTemplate,\n  args: {\n    defaultValue: new Date(2022, 10, 1),\n    enableClear: false,\n  },\n};\n\nexport const UncontrolledWeekStartsOnWednesday: Story = {\n  ...UncontrolledTemplate,\n  args: {\n    defaultValue: new Date(2022, 10, 1),\n    weekStartsOn: 3,\n  },\n};\n\nexport const ControlledDefault: Story = {\n  ...ControlledTemplate,\n};\n\nexport const ControlledDefaultValue: Story = {\n  ...ControlledTemplate,\n  args: {\n    defaultValue: new Date(2022, 10, 1),\n  },\n};\n"
  },
  {
    "path": "src/stories/input-elements/DateRangePicker.stories.tsx",
    "content": "import type { Meta, StoryObj } from \"@storybook/react\";\nimport React, { useState } from \"react\";\n\nimport { Button, DateRangePicker, DateRangePickerItem, DateRangePickerValue } from \"components\";\n\nimport { fr } from \"date-fns/locale\";\nimport { dateRangePickerData } from \"stories/input-elements/helpers/testData\";\n\nconst meta: Meta<typeof DateRangePicker> = {\n  title: \"UI/Input/DateRangePicker\",\n  component: DateRangePicker,\n  decorators: [(Story) => <Story />],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof DateRangePicker>;\n\n// Components\nfunction Uncontrolled({ ...args }) {\n  const [value, setValue] = useState<DateRangePickerValue>({});\n  const startDate = value.from;\n  const endDate = value.to;\n\n  return (\n    <div className=\"space-y-4\">\n      <DateRangePicker {...args} onValueChange={(value) => setValue(value)} />\n      <div className=\"text-slate-500\">\n        <p>Filtered Data</p>\n        <p>StartDate: {String(startDate)} </p>\n        <p>EndDate: {String(endDate)} </p>\n      </div>\n      <div>\n        {dateRangePickerData\n          .filter(\n            (datapoint) =>\n              startDate && endDate && datapoint.date >= startDate && datapoint.date <= endDate,\n          )\n          .map((datapoint) => (\n            <p key={String(datapoint.date)}>{String(datapoint.date)}</p>\n          ))}\n      </div>\n    </div>\n  );\n}\n\nfunction UncontrolledChildren({ ...args }) {\n  const [value, setValue] = useState<DateRangePickerValue>({});\n  const startDate = value.from;\n  const endDate = value.to;\n\n  return (\n    <div className=\"space-y-4\">\n      <DateRangePicker {...args} onValueChange={(value) => setValue(value)}>\n        <DateRangePickerItem key=\"one\" value=\"one\" from={new Date(2023, 0, 1)}>\n          2023/1/1 - Today\n        </DateRangePickerItem>\n        <DateRangePickerItem\n          key=\"two\"\n          value=\"two\"\n          from={new Date(2023, 0, 1)}\n          to={new Date(2023, 4, 1)}\n        >\n          2023/1/1 - 2023/5/1\n        </DateRangePickerItem>\n      </DateRangePicker>\n      <div className=\"text-slate-500\">\n        <p>Filtered Data</p>\n        <p>StartDate: {String(startDate)} </p>\n        <p>EndDate: {String(endDate)} </p>\n      </div>\n      <div>\n        {dateRangePickerData\n          .filter(\n            (datapoint) =>\n              startDate && endDate && datapoint.date >= startDate && datapoint.date <= endDate,\n          )\n          .map((datapoint) => (\n            <p key={String(datapoint.date)}>{String(datapoint.date)}</p>\n          ))}\n      </div>\n    </div>\n  );\n}\n\nfunction Controlled({ ...args }) {\n  const [value, setValue] = useState<DateRangePickerValue>(args.value!);\n\n  const startDate = value?.from;\n  const endDate = value?.to;\n\n  return (\n    <div className=\"space-y-4\">\n      <DateRangePicker {...args} value={value} onValueChange={(v) => setValue(v)} />\n      <DateRangePicker {...args} value={value} onValueChange={(v) => setValue(v)} />\n      <Button\n        onClick={() => {\n          setValue({});\n        }}\n      >\n        Reset\n      </Button>\n      <Button\n        onClick={() => {\n          setValue({ selectValue: \"tdy\" });\n        }}\n      >\n        Today\n      </Button>\n      <div className=\"text-slate-500\">\n        <p>Filtered Data</p>\n        <p>StartDate: {String(startDate)} </p>\n        <p>EndDate: {String(endDate)} </p>\n      </div>\n      <div>\n        {dateRangePickerData\n          .filter(\n            (datapoint) =>\n              startDate && endDate && datapoint.date >= startDate && datapoint.date <= endDate,\n          )\n          .map((datapoint) => (\n            <p key={String(datapoint.date)}>{String(datapoint.date)}</p>\n          ))}\n      </div>\n    </div>\n  );\n}\n\n// Templates\nconst UncontrolledTemplate: Story = {\n  render: ({ ...args }) => <Uncontrolled {...args} />,\n};\n\nconst UncontrolledChildrenTemplate: Story = {\n  render: ({ ...args }) => <UncontrolledChildren {...args} />,\n};\n\nconst ControlledTemplate: Story = {\n  render: ({ ...args }) => <Controlled {...args} />,\n};\n\n// Stories\nexport const UncontrolledDefault: Story = {\n  ...UncontrolledTemplate,\n};\n\nexport const UncontrolledDefaultDateRange: Story = {\n  ...UncontrolledTemplate,\n  args: {\n    defaultValue: { from: new Date(2022, 10, 1), to: new Date() },\n  },\n};\n\nexport const UncontrolledDefaultDisplayFormat: Story = {\n  ...UncontrolledTemplate,\n  args: {\n    displayFormat: \"dd/MM/yyyy\",\n  },\n};\n\nexport const UncontrolledDefaultFrLocale: Story = {\n  ...UncontrolledTemplate,\n  args: {\n    locale: fr,\n    selectPlaceholder: \"Sélectionnez\",\n    placeholder: \"Sélectionnez...\",\n  },\n};\n\nexport const UncontrolledDefaultSelectOption: Story = {\n  ...UncontrolledTemplate,\n  args: {\n    defaultValue: { selectValue: \"tdy\" },\n  },\n};\n\nexport const UncontrolledDefaultValue: Story = {\n  ...UncontrolledTemplate,\n  args: {\n    defaultValue: { from: new Date(2022, 10, 1), to: new Date() },\n  },\n};\n\nexport const UncontrolledSelectDisabled: Story = {\n  ...UncontrolledTemplate,\n  args: {\n    defaultValue: { from: new Date(2022, 10, 1), to: new Date() },\n    enableSelect: false,\n  },\n};\n\nexport const UncontrolledMinMax: Story = {\n  ...UncontrolledTemplate,\n  args: {\n    defaultValue: { from: new Date(2022, 10, 1), to: new Date() },\n    minDate: new Date(2023, 4, 1),\n    maxDate: new Date(2023, 4, 15),\n  },\n};\n\nexport const UncontrolledDropdownOptions: Story = {\n  ...UncontrolledChildrenTemplate,\n  args: {\n    defaultValue: { from: new Date(2022, 10, 1), to: new Date(), selectValue: \"one\" },\n  },\n};\n\nexport const UncontrolledDisabled: Story = {\n  ...UncontrolledTemplate,\n  args: {\n    defaultValue: { from: new Date(2022, 10, 1), to: new Date(), selectValue: \"tdy\" },\n    disabled: true,\n  },\n};\n\nexport const UncontrolledDisabledDates: Story = {\n  ...UncontrolledTemplate,\n  args: {\n    defaultValue: { from: new Date(2023, 10, 25), to: new Date() },\n    minDate: new Date(2023, 10, 5),\n    maxDate: new Date(2023, 10, 28),\n    disabledDates: [new Date(2023, 10, 10), new Date(2023, 10, 11)],\n  },\n};\n\nexport const UncontrolledDefaultYearNavigation: Story = {\n  ...UncontrolledTemplate,\n  args: {\n    enableYearNavigation: true,\n  },\n};\n\nexport const ControlledDefault: Story = {\n  ...ControlledTemplate,\n  args: {},\n};\n\nexport const ControlledDefaultDateRange: Story = {\n  ...ControlledTemplate,\n  args: {\n    value: { from: new Date(2022, 10, 1), to: new Date() },\n  },\n};\n\nexport const ControlledDefaultSelectOption: Story = {\n  ...ControlledTemplate,\n  args: {\n    value: { from: undefined, to: undefined, selectValue: \"t\" },\n  },\n};\n\nexport const ControlledDefaultValue: Story = {\n  ...ControlledTemplate,\n  args: {\n    value: { from: new Date(2022, 10, 1), to: new Date(), selectValue: \"t\" },\n  },\n};\n\nexport const UncontrolledoutEnableClear: Story = {\n  ...UncontrolledTemplate,\n  args: {\n    defaultValue: { from: new Date(2022, 10, 1), to: new Date() },\n    enableClear: false,\n  },\n};\n\nexport const UncontrolledWeekStartsOnTuesday: Story = {\n  ...UncontrolledTemplate,\n  args: {\n    defaultValue: { from: new Date(2022, 10, 1), to: new Date() },\n    weekStartsOn: 2,\n  },\n};\n"
  },
  {
    "path": "src/stories/input-elements/MultiSelect.stories.tsx",
    "content": "import type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { MultiSelect } from \"components\";\nimport {\n  SimpleMultiSelect,\n  SimpleMultiSelectControlled,\n  SimpleMultiSelectForm,\n  SimpleMultiSelectWithStaticAndDynamicChildren,\n} from \"./helpers/SimpleMultiSelect\";\n\nimport { CalendarIcon } from \"assets\";\n\nconst meta: Meta<typeof MultiSelect> = {\n  title: \"UI/Input/MultiSelect\",\n  component: MultiSelect,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MultiSelect>;\n\nexport const UncontrolledDefault: Story = {\n  render: SimpleMultiSelect,\n  args: {},\n};\n\nexport const UncontrolledDefaultWithStaticAndDynamicChildren: Story = {\n  render: SimpleMultiSelectWithStaticAndDynamicChildren,\n  args: {},\n};\n\nexport const UncontrolledDefaultValues: Story = {\n  render: SimpleMultiSelect,\n  args: { defaultValue: [\"5\", \"1\"] },\n};\n\nexport const UncontrolledIcon: Story = {\n  render: SimpleMultiSelect,\n  args: { icon: CalendarIcon, defaultValue: [\"5\", \"1\"] },\n};\n\nexport const UncontrolledDisabled: Story = {\n  render: SimpleMultiSelect,\n  args: { icon: CalendarIcon, defaultValue: [\"5\", \"1\"], disabled: true },\n};\n\nexport const Controlled: Story = {\n  render: SimpleMultiSelectControlled,\n  args: {},\n};\n\nexport const Error: Story = {\n  render: SimpleMultiSelect,\n  args: {\n    error: true,\n    errorMessage: \"Error message\",\n  },\n};\n\nexport const Form: Story = {\n  render: SimpleMultiSelectForm,\n  args: {\n    required: true,\n  },\n};\n\nexport const WithCustomMinWidth: Story = {\n  render: SimpleMultiSelect,\n  args: {\n    className: \"min-w-min w-[95px]\",\n  },\n};\n"
  },
  {
    "path": "src/stories/input-elements/NumberInput.stories.tsx",
    "content": "import type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { CalendarIcon } from \"assets\";\nimport { NumberInput } from \"components\";\nimport { SimpleNumberInput, SimpleNumberInputControlled } from \"./helpers/SimpleNumberInput\";\n\nconst meta: Meta<typeof NumberInput> = {\n  title: \"UI/Input/NumberInput\",\n  component: NumberInput,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof NumberInput>;\n\nexport const Default: Story = {\n  args: {},\n};\n\nexport const DefaultSet: Story = {\n  render: SimpleNumberInput,\n  args: {},\n};\n\nexport const Icon: Story = {\n  render: SimpleNumberInput,\n  args: {\n    icon: CalendarIcon,\n  },\n};\n\nexport const NoPlaceholder: Story = {\n  render: SimpleNumberInput,\n  args: {\n    placeholder: \"\",\n  },\n};\n\nexport const DefaultValue: Story = {\n  render: SimpleNumberInput,\n  args: {\n    value: 123,\n  },\n};\n\nexport const StepProp: Story = {\n  render: SimpleNumberInput,\n  args: {\n    step: \".1\",\n  },\n};\n\nexport const StepPropNumber: Story = {\n  render: SimpleNumberInput,\n  args: {\n    step: 0.1,\n  },\n};\n\nexport const MinMaxProp: Story = {\n  render: SimpleNumberInput,\n  args: {\n    min: \"2\",\n    max: \"10\",\n  },\n};\n\nexport const Error: Story = {\n  render: SimpleNumberInput,\n  args: {\n    value: 123,\n    error: true,\n  },\n};\n\nexport const ErrorMessage: Story = {\n  render: SimpleNumberInput,\n  args: {\n    value: 123,\n    error: true,\n    errorMessage: \"Something is wrong\",\n  },\n};\n\nexport const Disabled: Story = {\n  render: SimpleNumberInput,\n  args: {\n    value: 123,\n    disabled: true,\n  },\n};\n\nexport const DisabledAndError: Story = {\n  render: SimpleNumberInput,\n  args: {\n    value: 123,\n    error: true,\n    disabled: true,\n  },\n};\n\nexport const ControlledWithOnChange: Story = {\n  render: SimpleNumberInputControlled,\n  args: {},\n};\n"
  },
  {
    "path": "src/stories/input-elements/SearchSelect.stories.tsx",
    "content": "import type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { SearchSelect } from \"components\";\nimport {\n  SimpleSearchSelect,\n  SimpleSearchSelectControlled,\n  SimpleSearchSelectWithStaticAndDynamicChildren,\n  SimpleSearchSelectForm,\n  SimpleSearchSelectServerSideRendering,\n} from \"./helpers/SimpleSearchSelect\";\n\nimport { CalendarIcon } from \"assets\";\n\nconst meta: Meta<typeof SearchSelect> = {\n  title: \"UI/Input/SearchSelect\",\n  component: SearchSelect,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof SearchSelect>;\n\nexport const UncontrolledDefault: Story = {\n  render: SimpleSearchSelect,\n  args: {},\n};\n\nexport const UncontrolledDefaultWithStaticAndDynamicChildren: Story = {\n  render: SimpleSearchSelectWithStaticAndDynamicChildren,\n  args: {},\n};\n\nexport const UncontrolledOnValueChange: Story = {\n  render: SimpleSearchSelect,\n  args: { onValueChange: (v: string) => alert(v) },\n};\n\nexport const UncontrolledEnableClear: Story = {\n  render: SimpleSearchSelect,\n  args: { onValueChange: (v: string) => alert(v), enableClear: true },\n};\n\nexport const UncontrolledDefaultValue: Story = {\n  render: SimpleSearchSelect,\n  args: {\n    defaultValue: \"5\",\n  },\n};\n\nexport const Icon: Story = {\n  render: SimpleSearchSelect,\n  args: {\n    defaultValue: \"5\",\n    icon: CalendarIcon,\n  },\n};\n\nexport const Error: Story = {\n  render: SimpleSearchSelect,\n  args: {\n    error: true,\n    errorMessage: \"Error message\",\n  },\n};\n\nexport const Disabled: Story = {\n  render: SimpleSearchSelect,\n  args: {\n    onValueChange: (v: string) => alert(v),\n    disabled: true,\n  },\n};\n\nexport const Controlled: Story = {\n  render: SimpleSearchSelectControlled,\n  args: {},\n};\n\nexport const Form: Story = {\n  render: SimpleSearchSelectForm,\n  args: {\n    required: true,\n  },\n};\n\nexport const ServerSideRendering: Story = {\n  render: SimpleSearchSelectServerSideRendering,\n  args: {\n    required: true,\n  },\n};\n\nexport const WithCustomMinWidth: Story = {\n  render: SimpleSearchSelect,\n  args: {\n    className: \"min-w-min w-[95px]\",\n  },\n};\n"
  },
  {
    "path": "src/stories/input-elements/Select.stories.tsx",
    "content": "import type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Select } from \"components\";\nimport {\n  SimpleSelect,\n  SimpleSelectControlled,\n  SimpleSelectForm,\n  SimpleSelectWithStaticAndDynamicChildren,\n} from \"./helpers/SimpleSelect\";\n\nimport { CalendarIcon } from \"assets\";\n\nconst meta: Meta<typeof Select> = {\n  title: \"UI/Input/Select\",\n  component: Select,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Select>;\n\nexport const UncontrolledDefault: Story = {\n  render: SimpleSelect,\n  args: {},\n};\n\nexport const UncontrolledDefaultWithStaticAndDynamicChildren: Story = {\n  render: SimpleSelectWithStaticAndDynamicChildren,\n  args: {},\n};\n\nexport const UncontrolledOnValueChange: Story = {\n  render: SimpleSelect,\n  args: { onValueChange: (v: string) => alert(v) },\n};\n\nexport const UncontrolledEnableClear: Story = {\n  render: SimpleSelect,\n  args: { onValueChange: (v: string) => alert(v), enableClear: true },\n};\n\nexport const UncontrolledDefaultValue: Story = {\n  render: SimpleSelect,\n  args: {\n    defaultValue: \"5\",\n  },\n};\n\nexport const Icon: Story = {\n  render: SimpleSelect,\n  args: {\n    defaultValue: \"5\",\n    icon: CalendarIcon,\n  },\n};\n\nexport const UncontrolledDisabled: Story = {\n  render: SimpleSelect,\n  args: {\n    icon: CalendarIcon,\n    disabled: true,\n  },\n};\n\nexport const Controlled: Story = {\n  render: SimpleSelectControlled,\n};\n\nexport const Error: Story = {\n  render: SimpleSelect,\n  args: {\n    error: true,\n    errorMessage: \"Error message\",\n  },\n};\n\nexport const Form: Story = {\n  render: SimpleSelectForm,\n  args: {\n    required: true,\n  },\n};\n\nexport const WithCustomMinWidth: Story = {\n  render: SimpleSelect,\n  args: {\n    className: \"min-w-min w-[95px]\",\n  },\n};\n"
  },
  {
    "path": "src/stories/input-elements/Switch.stories.tsx",
    "content": "import type { Meta, StoryObj } from \"@storybook/react\";\nimport { Switch } from \"components\";\nimport { SimpleSwitch, SimpleIdSwitch } from \"./helpers/SimpleSwitch\";\n\nconst meta: Meta<typeof Switch> = {\n  title: \"UI/Input/Switch\",\n  component: Switch,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Switch>;\n\nexport const Uncontrolled: Story = {\n  args: {},\n};\n\nexport const DefaultChecked: Story = {\n  args: {\n    defaultChecked: true,\n  },\n};\n\nexport const Disabled: Story = {\n  args: {\n    disabled: true,\n  },\n};\n\nexport const CustomColor: Story = {\n  args: {\n    color: \"emerald\",\n  },\n};\n\nexport const Tooltip: Story = {\n  args: {\n    tooltip: \"Action disabled\",\n  },\n};\n\nexport const TooltipDisabled: Story = {\n  args: {\n    tooltip: \"Action disabled\",\n    disabled: true,\n  },\n};\n\nexport const Controlled: Story = {\n  render: SimpleSwitch,\n};\n\nexport const Required: Story = {\n  render: SimpleSwitch,\n  args: {\n    required: true,\n  },\n};\n\nexport const Error: Story = {\n  args: {\n    error: true,\n    errorMessage: \"Something is wrong\",\n  },\n};\n\nexport const Id: Story = {\n  render: SimpleIdSwitch,\n  args: {\n    required: true,\n  },\n};\n"
  },
  {
    "path": "src/stories/input-elements/Tabs.stories.tsx",
    "content": "import React, { useState } from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { CalendarIcon } from \"assets\";\nimport { Button, Tab, TabGroup, TabList, TabPanel, TabPanels } from \"components\";\nimport { BaseColors, Color } from \"lib\";\n\nconst meta: Meta<typeof TabGroup> = {\n  title: \"UI/Input/Tabs\",\n  component: TabGroup,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof TabGroup>;\n\ninterface MyTabProps {\n  variant?: \"line\" | \"solid\";\n  defaultIndex?: number;\n  showText?: boolean;\n  color: Color;\n  args?: any;\n}\n\n//Components\nfunction MyTab(props: MyTabProps) {\n  const { variant = \"line\", defaultIndex = 0, showText = true, color, args } = props;\n\n  const tabLabels = [\"This is a very Long Tab Value that is used as an edge case\", \"Three\", \"One\"];\n\n  return (\n    <TabGroup defaultIndex={defaultIndex} {...args}>\n      <TabList variant={variant} color={color}>\n        {tabLabels.map((label, index) => (\n          <Tab icon={CalendarIcon} key={index}>\n            {showText ? label : null}\n          </Tab>\n        ))}\n      </TabList>\n      <TabPanels>\n        <TabPanel>One</TabPanel>\n        <TabPanel>Two</TabPanel>\n        <TabPanel>Three</TabPanel>\n      </TabPanels>\n    </TabGroup>\n  );\n}\n\nfunction WithControlledStateTemplate({ ...args }) {\n  const [index, setIndex] = useState(0);\n  return (\n    <>\n      <TabGroup index={index} onIndexChange={setIndex} {...args}>\n        <TabList>\n          <Tab>One</Tab>\n          <Tab>Five</Tab>\n          <Tab>Three</Tab>\n        </TabList>\n      </TabGroup>\n      <div className=\"mt-4 space-x-2\">\n        <Button onClick={() => setIndex(0)}>Reset</Button>\n        <Button onClick={() => setIndex(2)}>Three</Button>\n        <p>index: {index}</p>\n      </div>\n    </>\n  );\n}\n\nfunction TabSet({ showText = true, ...args }) {\n  return (\n    <>\n      <div className=\"space-y-4\">\n        <MyTab variant=\"line\" showText={showText} {...args} color={args.color} />\n        <MyTab variant=\"solid\" showText={showText} {...args} color={args.color} />\n      </div>\n    </>\n  );\n}\n\n// Templates\nconst TabSetTemplate: Story = {\n  render: ({ ...args }) => <TabSet {...args} />,\n};\n\nconst TabSetNoTextTemplate: Story = {\n  render: ({ ...args }) => <TabSet {...args} />,\n};\n\nconst TabSetColorsTemplate: Story = {\n  render: ({ ...args }) => (\n    <div className=\"space-y-4\">\n      {Object.values(BaseColors).map((color) => (\n        <div key={color} className=\"space-x-5\">\n          <TabSet {...args} color={color} />\n        </div>\n      ))}\n    </div>\n  ),\n};\n\nconst ControlledTabSetTemplate: Story = {\n  render: WithControlledStateTemplate,\n};\n\n// Stories\n\nexport const Default: Story = {\n  ...TabSetTemplate,\n};\n\nexport const DefaultNoText: Story = {\n  ...TabSetNoTextTemplate,\n};\n\nexport const OnIndexChange: Story = {\n  ...TabSetTemplate,\n  args: { onIndexChange: (index) => console.log(index) },\n};\n\nexport const OnIndexChangeNoText: Story = {\n  ...TabSetNoTextTemplate,\n  args: { onIndexChange: (index) => console.log(index) },\n};\n\nexport const DefaultIndex: Story = {\n  ...TabSetTemplate,\n  args: { defaultIndex: 3 },\n};\n\nexport const Colors: Story = {\n  ...TabSetColorsTemplate,\n};\n\nexport const Controlled: Story = {\n  ...ControlledTabSetTemplate,\n};\n"
  },
  {
    "path": "src/stories/input-elements/TextArea.stories.tsx",
    "content": "import type { Meta, StoryObj } from \"@storybook/react\";\nimport { Button, Textarea } from \"components\";\nimport React from \"react\";\n\nconst meta: Meta<typeof Textarea> = {\n  title: \"UI/Input/Textarea\",\n  component: Textarea,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Textarea>;\n\nfunction Controlled({ ...args }) {\n  const [value, setValue] = React.useState<string>(\"Default Value\");\n  return (\n    <div className=\"space-y-4\">\n      <Textarea {...args} value={value} onValueChange={(v: string) => setValue(v)} />\n      <Button\n        onClick={() => {\n          setValue(\"\");\n        }}\n      >\n        Reset\n      </Button>\n      <div className=\"text-slate-500\">\n        <p>Filtered Data</p>\n        <p>Data: {String(value)} </p>\n      </div>\n    </div>\n  );\n}\n\nconst ControlledTemplate: Story = {\n  render: ({ ...args }) => <Controlled {...args} />,\n};\n\nexport const Default: Story = {};\n\nexport const MaxLength5Cols10: Story = {\n  args: {\n    maxLength: 5,\n  },\n};\n\nexport const Rows5: Story = {\n  args: {\n    rows: 5,\n  },\n};\n\nexport const Disabled: Story = {\n  args: {\n    disabled: true,\n  },\n};\n\nexport const Placeholder: Story = {\n  args: {\n    placeholder: \"This is some placeholder text\",\n  },\n};\n\nexport const Error: Story = {\n  args: {\n    error: true,\n  },\n};\n\nexport const ErrorMessage: Story = {\n  args: {\n    error: true,\n    errorMessage: \"An unkown error occured.\",\n  },\n};\n\nexport const DefaultValue: Story = {\n  args: {\n    defaultValue:\n      \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor lorem non est congue blandit. Praesent non lorem sodales, suscipit est sed, hendrerit dolor.\",\n  },\n};\n\nexport const ControlledDefault: Story = {\n  ...ControlledTemplate,\n};\n\nexport const AutoHeight: Story = {\n  args: {\n    autoHeight: true,\n  },\n};\n"
  },
  {
    "path": "src/stories/input-elements/TextInput.stories.tsx",
    "content": "import type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { CalendarIcon } from \"assets\";\nimport { TextInput } from \"components\";\nimport { SimpleTextInput } from \"./helpers/SimpleTextInput\";\n\nconst meta: Meta<typeof TextInput> = {\n  title: \"UI/Input/TextInput\",\n  component: TextInput,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof TextInput>;\n\nexport const Default: Story = {\n  args: {},\n};\n\nexport const DefaultSet: Story = {\n  render: SimpleTextInput,\n  args: {},\n};\n\nexport const WithIcon: Story = {\n  render: SimpleTextInput,\n  args: {\n    icon: CalendarIcon,\n  },\n};\n\nexport const WithNoPlaceholder: Story = {\n  render: SimpleTextInput,\n  args: {\n    placeholder: \"\",\n  },\n};\n\nexport const WithDefaultValue: Story = {\n  render: SimpleTextInput,\n  args: {\n    value: \"Hello\",\n  },\n};\n\nexport const WithError: Story = {\n  render: SimpleTextInput,\n  args: {\n    value: \"Hello\",\n    error: true,\n  },\n};\n\nexport const WithErrorMessage: Story = {\n  render: SimpleTextInput,\n  args: {\n    value: \"Hello\",\n    error: true,\n    errorMessage: \"Something is wrong\",\n  },\n};\n\nexport const WithDisabled: Story = {\n  render: SimpleTextInput,\n  args: {\n    value: \"Hello\",\n    disabled: true,\n  },\n};\n\nexport const WithDisabledAndError: Story = {\n  render: SimpleTextInput,\n  args: {\n    value: \"Hello\",\n    error: true,\n    disabled: true,\n  },\n};\n\nexport const WithTypePassword: Story = {\n  render: SimpleTextInput,\n  args: {\n    type: \"password\",\n  },\n};\n\nexport const WithTypePasswordError: Story = {\n  render: SimpleTextInput,\n  args: {\n    type: \"password\",\n    error: true,\n  },\n};\n\nexport const WithAutoFocus: Story = {\n  args: {\n    autoFocus: true,\n  },\n};\n\nexport const WithTypeEmail: Story = {\n  render: SimpleTextInput,\n  args: {\n    type: \"email\",\n  },\n};\n\nexport const WithTypeUrl: Story = {\n  render: SimpleTextInput,\n  args: {\n    type: \"url\",\n  },\n};\n\nexport const WithTypeSearch: Story = {\n  render: SimpleTextInput,\n  args: {\n    type: \"search\",\n  },\n};\n"
  },
  {
    "path": "src/stories/input-elements/helpers/SimpleMultiSelect.tsx",
    "content": "import React from \"react\";\n\nimport { Button, MultiSelect, MultiSelectItem, TextInput } from \"components\";\n\nexport const SimpleMultiSelect = (args: any) => (\n  <MultiSelect {...args}>\n    <MultiSelectItem value={\"5\"}>Very Long DropdownItem Value as an edge case</MultiSelectItem>\n    <MultiSelectItem value=\"Three\" />\n    <MultiSelectItem value={\"1\"}>One</MultiSelectItem>\n  </MultiSelect>\n);\n\nexport const SimpleMultiSelectWithStaticAndDynamicChildren = (args: any) => {\n  const items = [\"item1\", \"item2\"];\n  return (\n    <MultiSelect {...args}>\n      <MultiSelectItem value=\"item0\">item0</MultiSelectItem>\n      {items.map((item) => {\n        return <MultiSelectItem value={item} key={item} />;\n      })}\n    </MultiSelect>\n  );\n};\n\nexport const SimpleMultiSelectForm = (args: any) => {\n  return (\n    <form\n      className=\"flex flex-col gap-3 items-start max-w-md\"\n      method=\"GET\"\n      action=\"http://localhost:6006/\"\n    >\n      <label htmlFor=\"path\" className=\"w-full\">\n        <p>Redirect path</p>\n        <TextInput name=\"path\" id=\"path\" defaultValue=\"/story/ui-input-multiselect--form\" />\n      </label>\n      <label htmlFor=\"multi-select-test\">Label</label>\n      <MultiSelect {...args} name=\"MultiSelect\" id=\"multi-select-test\">\n        <MultiSelectItem value={\"5\"}>Five</MultiSelectItem>\n        <MultiSelectItem value={\"3\"}>Three</MultiSelectItem>\n        <MultiSelectItem value={\"1\"}>One</MultiSelectItem>\n      </MultiSelect>\n      <Button type=\"submit\">Submit</Button>\n      <p>You will find your selected value in the URL params after submiting the form</p>\n    </form>\n  );\n};\n\nexport const SimpleMultiSelectControlled = () => {\n  const [value, setValue] = React.useState<string[]>([]);\n\n  const handleValueChange = (values: string[]) => {\n    setValue(values);\n  };\n\n  const handleReset = () => {\n    setValue([]);\n  };\n\n  const handleSetToOne = () => {\n    setValue([\"1\"]);\n  };\n\n  return (\n    <div className=\"space-y-2\">\n      <MultiSelect value={value} onValueChange={handleValueChange}>\n        <MultiSelectItem value=\"1\">One</MultiSelectItem>\n        <MultiSelectItem value=\"2\">Two</MultiSelectItem>\n        <MultiSelectItem value=\"3\">Three</MultiSelectItem>\n        <MultiSelectItem value=\"4\">Four</MultiSelectItem>\n        <MultiSelectItem value=\"5\">Five</MultiSelectItem>\n        <MultiSelectItem value=\"6\">Six</MultiSelectItem>\n        <MultiSelectItem value=\"7\">Seven</MultiSelectItem>\n        <MultiSelectItem value=\"8\">Eight</MultiSelectItem>\n        <MultiSelectItem value=\"9\">Nine</MultiSelectItem>\n        <MultiSelectItem value=\"10\">Ten</MultiSelectItem>\n      </MultiSelect>\n      <MultiSelect value={value} onValueChange={handleValueChange}>\n        <MultiSelectItem value=\"1\">One</MultiSelectItem>\n        <MultiSelectItem value=\"2\">Two</MultiSelectItem>\n        <MultiSelectItem value=\"3\">Three</MultiSelectItem>\n        <MultiSelectItem value=\"4\">Four</MultiSelectItem>\n        <MultiSelectItem value=\"5\">Five</MultiSelectItem>\n        <MultiSelectItem value=\"6\">Six</MultiSelectItem>\n        <MultiSelectItem value=\"7\">Seven</MultiSelectItem>\n        <MultiSelectItem value=\"8\">Eight</MultiSelectItem>\n        <MultiSelectItem value=\"9\">Nine</MultiSelectItem>\n        <MultiSelectItem value=\"10\">Ten</MultiSelectItem>\n      </MultiSelect>\n      <Button onClick={handleReset}>Reset</Button>\n      <Button onClick={handleSetToOne}>Set to One</Button>\n      <p>value: {value.join(\", \")}</p>\n    </div>\n  );\n};\n"
  },
  {
    "path": "src/stories/input-elements/helpers/SimpleNumberInput.tsx",
    "content": "import { Button, NumberInput } from \"components\";\nimport React from \"react\";\n\nexport const SimpleNumberInput = (args: any) => {\n  const [value, setValue] = React.useState(0);\n  return (\n    <>\n      <form\n        onSubmit={(e) => {\n          e.preventDefault();\n        }}\n        onReset={() => setValue(0)}\n        className=\"text-slate-500\"\n      >\n        <p>Uncontrolled</p>\n        <NumberInput {...args} onSubmit={(value: number) => alert(value)} />\n\n        <p>Uncontrolled with defaultValue</p>\n        <NumberInput {...args} defaultValue={123} onSubmit={(value: number) => alert(value)} />\n\n        <p>Controlled without onValueChange</p>\n        <NumberInput {...args} value={value} onSubmit={(value: number) => alert(value)} />\n\n        <label htmlFor=\"a\">\n          <p>Controlled with onValueChange</p>\n        </label>\n        <NumberInput\n          {...args}\n          id={\"a\"}\n          value={value}\n          onValueChange={(e) => setValue(e)}\n          onSubmit={(value: number) => alert(value)}\n        />\n        <Button type=\"submit\" className=\"mt-2\">\n          Submit\n        </Button>\n        <Button type=\"reset\" variant=\"secondary\" className=\"mt-2\">\n          Reset Input\n        </Button>\n      </form>\n      <p>value: {value}</p>\n    </>\n  );\n};\n\nexport const SimpleNumberInputControlled = (args: any) => {\n  const [value, setValue] = React.useState(0);\n  return (\n    <>\n      <form\n        onSubmit={(e) => {\n          e.preventDefault();\n        }}\n        onReset={() => setValue(0)}\n      >\n        <label htmlFor=\"a\">\n          <p>Controlled with onChange</p>\n        </label>\n        <NumberInput\n          {...args}\n          id={\"a\"}\n          value={value}\n          onChange={(e) => setValue(Number(e.target.value))}\n        />\n        <Button type=\"submit\" className=\"mt-2\">\n          Submit\n        </Button>\n      </form>\n      <p>value: {value}</p>\n    </>\n  );\n};\n"
  },
  {
    "path": "src/stories/input-elements/helpers/SimpleSearchSelect.tsx",
    "content": "import React from \"react\";\n\nimport { CalendarIcon } from \"assets\";\nimport { Button, SearchSelect, SearchSelectItem, TextInput } from \"components\";\n\nexport const SimpleSearchSelect = (args: any) => (\n  <SearchSelect {...args}>\n    <SearchSelectItem value=\"5\" icon={CalendarIcon}>\n      Very Long DropdownItem Value as an edge case\n    </SearchSelectItem>\n    <SearchSelectItem value=\"Three\" icon={CalendarIcon} />\n    <SearchSelectItem value=\"1\" icon={CalendarIcon}>\n      One\n    </SearchSelectItem>\n  </SearchSelect>\n);\n\nexport const SimpleSearchSelectWithStaticAndDynamicChildren = (args: any) => {\n  const items = [\"item1\", \"item2\"];\n  return (\n    <SearchSelect {...args}>\n      <SearchSelectItem value=\"item0\">item0</SearchSelectItem>\n      {items.map((item) => {\n        return <SearchSelectItem value={item} key={item} />;\n      })}\n    </SearchSelect>\n  );\n};\n\nexport const SimpleSearchSelectForm = (args: any) => {\n  return (\n    <form\n      className=\"flex flex-col gap-3 items-start max-w-md\"\n      method=\"GET\"\n      action=\"http://localhost:6006/\"\n    >\n      <label htmlFor=\"path\" className=\"w-full\">\n        <p>Redirect path</p>\n        <TextInput name=\"path\" id=\"path\" defaultValue=\"/story/ui-input-searchselect--form\" />\n      </label>\n      <label htmlFor=\"search-select-test\">Label</label>\n      <SearchSelect {...args} id=\"search-select-test\" name=\"Searchselect\">\n        <SearchSelectItem value={\"5\"}>Five</SearchSelectItem>\n        <SearchSelectItem value={\"3\"}>Three</SearchSelectItem>\n        <SearchSelectItem value={\"1\"}>One</SearchSelectItem>\n      </SearchSelect>\n      <Button type=\"submit\">Submit</Button>\n      <p>You will find your selected value in the URL params after submiting the form</p>\n    </form>\n  );\n};\n\nexport function SimpleSearchSelectControlled() {\n  const [value, setValue] = React.useState(\"5\");\n\n  const handleValueChange = (newValue: string) => {\n    setValue(newValue);\n  };\n\n  const handleReset = () => {\n    setValue(\"\");\n  };\n\n  const handleSetToOne = () => {\n    setValue(\"1\");\n  };\n\n  return (\n    <div className=\"space-y-4\">\n      <SearchSelect value={value} onValueChange={handleValueChange}>\n        <SearchSelectItem value=\"1\">One</SearchSelectItem>\n        <SearchSelectItem value=\"2\">Two</SearchSelectItem>\n        <SearchSelectItem value=\"3\">Three</SearchSelectItem>\n        <SearchSelectItem value=\"4\">Four</SearchSelectItem>\n        <SearchSelectItem value=\"5\">Five</SearchSelectItem>\n        <SearchSelectItem value=\"6\">Six</SearchSelectItem>\n        <SearchSelectItem value=\"7\">Seven</SearchSelectItem>\n        <SearchSelectItem value=\"8\">Eight</SearchSelectItem>\n        <SearchSelectItem value=\"9\">Nine</SearchSelectItem>\n        <SearchSelectItem value=\"10\">Ten</SearchSelectItem>\n      </SearchSelect>\n      <SearchSelect enableClear={false} value={value} onValueChange={handleValueChange}>\n        <SearchSelectItem value=\"1\">One</SearchSelectItem>\n        <SearchSelectItem value=\"2\">Two</SearchSelectItem>\n        <SearchSelectItem value=\"3\">Three</SearchSelectItem>\n        <SearchSelectItem value=\"4\">Four</SearchSelectItem>\n        <SearchSelectItem value=\"5\">Five</SearchSelectItem>\n        <SearchSelectItem value=\"6\">Six</SearchSelectItem>\n        <SearchSelectItem value=\"7\">Seven</SearchSelectItem>\n        <SearchSelectItem value=\"8\">Eight</SearchSelectItem>\n        <SearchSelectItem value=\"9\">Nine</SearchSelectItem>\n        <SearchSelectItem value=\"10\">Ten</SearchSelectItem>\n      </SearchSelect>\n      <Button onClick={handleReset}>Reset</Button>\n      <Button onClick={handleSetToOne}>Set to One</Button>\n      <p>value: {value}</p>\n    </div>\n  );\n}\n\nexport function SimpleSearchSelectServerSideRendering() {\n  const [searchQuery, setSearchQuery] = React.useState(\"\");\n\n  interface User {\n    id: number;\n    name: string;\n    email: string;\n  }\n  const [options, setOptions] = React.useState<User[]>([]);\n\n  const [value, setValue] = React.useState<string>();\n\n  const handleSearchQueryChange = (query: string) => {\n    setSearchQuery(query);\n  };\n\n  const handleValueChange = (newValue: string) => {\n    setValue(newValue);\n  };\n\n  const handleReset = () => {\n    setValue(\"\");\n  };\n\n  React.useEffect(() => {\n    if (searchQuery) {\n      fetch(\"https://jsonplaceholder.typicode.com/users\")\n        .then((response) => response.json())\n        .then((data) => {\n          setOptions(data);\n        })\n        .catch((error) => console.error(\"Error fetching user data:\", error));\n    }\n  }, [searchQuery]);\n\n  return (\n    <div className=\"space-y-4\">\n      <SearchSelect\n        value={value}\n        onValueChange={handleValueChange}\n        searchValue={searchQuery}\n        onSearchValueChange={handleSearchQueryChange}\n      >\n        {options.map((option) => (\n          <SearchSelectItem key={option.id} value={option.id.toString()}>\n            {`${option.name} (${option.email})`}\n          </SearchSelectItem>\n        ))}\n      </SearchSelect>\n      <Button onClick={handleReset}>Reset</Button>\n      <p>Selected User ID: {value}</p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "src/stories/input-elements/helpers/SimpleSelect.tsx",
    "content": "import React from \"react\";\n\nimport { CalendarIcon } from \"assets\";\nimport { Button, Select, SelectItem, TextInput } from \"components\";\n\nexport const SimpleSelect = (args: any) => (\n  <Select {...args}>\n    <SelectItem value={\"5\"} icon={CalendarIcon}>\n      Very Long SelectItem Value as an edge case\n    </SelectItem>\n    <SelectItem value=\"3\" icon={CalendarIcon}>\n      Three\n    </SelectItem>\n    <SelectItem value={\"1\"} icon={CalendarIcon}>\n      One\n    </SelectItem>\n  </Select>\n);\n\nexport const SimpleSelectWithStaticAndDynamicChildren = (args: any) => {\n  const items = [\"item1\", \"item2\"];\n  return (\n    <Select {...args}>\n      <SelectItem value=\"item0\">item0</SelectItem>\n      {items.map((item) => {\n        return <SelectItem value={item} key={item} />;\n      })}\n    </Select>\n  );\n};\n\nexport function SimpleSelectControlled() {\n  const [value, setValue] = React.useState(\"5\");\n\n  const handleValueChange = (newValue: string) => {\n    setValue(newValue);\n  };\n\n  const handleReset = () => {\n    setValue(\"\");\n  };\n\n  const handleSetToOne = () => {\n    setValue(\"1\");\n  };\n\n  return (\n    <div className=\"space-y-4\">\n      <Select enableClear={true} value={value} onValueChange={handleValueChange}>\n        <SelectItem value=\"1\">One</SelectItem>\n        <SelectItem value=\"2\">Two</SelectItem>\n        <SelectItem value=\"3\">Three</SelectItem>\n        <SelectItem value=\"4\">Four</SelectItem>\n        <SelectItem value=\"5\">Five</SelectItem>\n        <SelectItem value=\"6\">Six</SelectItem>\n        <SelectItem value=\"7\">Seven</SelectItem>\n        <SelectItem value=\"8\">Eight</SelectItem>\n        <SelectItem value=\"9\">Nine</SelectItem>\n        <SelectItem value=\"10\">Ten</SelectItem>\n      </Select>\n      <Select value={value} onValueChange={handleValueChange}>\n        <SelectItem value=\"1\">One</SelectItem>\n        <SelectItem value=\"2\">Two</SelectItem>\n        <SelectItem value=\"3\">Three</SelectItem>\n        <SelectItem value=\"4\">Four</SelectItem>\n        <SelectItem value=\"5\">Five</SelectItem>\n        <SelectItem value=\"6\">Six</SelectItem>\n        <SelectItem value=\"7\">Seven</SelectItem>\n        <SelectItem value=\"8\">Eight</SelectItem>\n        <SelectItem value=\"9\">Nine</SelectItem>\n        <SelectItem value=\"10\">Ten</SelectItem>\n      </Select>\n      <Button onClick={handleReset}>Reset</Button>\n      <Button onClick={handleSetToOne}>Set to One</Button>\n      <p>value: {value}</p>\n    </div>\n  );\n}\n\nexport const SimpleSelectForm = (args: any) => {\n  return (\n    <form\n      className=\"flex flex-col gap-3 items-start max-w-md\"\n      method=\"GET\"\n      action=\"http://localhost:6006/\"\n    >\n      <label htmlFor=\"path\" className=\"w-full\">\n        <p>Redirect path</p>\n        <TextInput name=\"path\" id=\"path\" defaultValue=\"/story/ui-input-select--form\" />\n      </label>\n      <label htmlFor=\"select-test\">Label</label>\n      <Select enableClear={true} {...args} name=\"select\" id=\"select-test\">\n        <SelectItem value={\"5\"}>Five</SelectItem>\n        <SelectItem value={\"3\"}>Three</SelectItem>\n        <SelectItem value={\"1\"}>One</SelectItem>\n      </Select>\n      <Button type=\"submit\">Submit</Button>\n      <p>You will find your selected value in the URL params after submiting the form</p>\n    </form>\n  );\n};\n"
  },
  {
    "path": "src/stories/input-elements/helpers/SimpleSwitch.tsx",
    "content": "/* eslint-disable @typescript-eslint/no-unused-expressions */\nimport { Button, Switch } from \"components\";\nimport React from \"react\";\n\nexport const SimpleSwitch = (args: any) => {\n  const [checked, setChecked] = React.useState<boolean>(false);\n\n  return (\n    <div className=\"space-y-4\">\n      <form\n        onSubmit={(e) => {\n          e.preventDefault(), alert(\"Submitted\");\n        }}\n        onReset={() => setChecked(false)}\n      >\n        <input type=\"hidden\" name=\"path\" value={\"/docs/components-input-switch--docs\"} />\n        <Switch {...args} checked={checked} onChange={setChecked} />\n\n        <div className=\"flex gap-4 mt-2\">\n          <Button type=\"submit\" className=\"mt-2 w-fit\">\n            Submit\n          </Button>\n\n          <Button type=\"reset\" variant=\"secondary\" className=\"mt-2 w-fit\">\n            Reset Input\n          </Button>\n        </div>\n      </form>\n\n      <p>{checked ? \"On\" : \"Off\"}</p>\n    </div>\n  );\n};\n\nexport const SimpleIdSwitch = (args: any) => {\n  const [checked, setChecked] = React.useState<boolean>(false);\n\n  return (\n    <div className=\"space-y-4\">\n      <form\n        onSubmit={(e) => {\n          e.preventDefault(), alert(\"Submitted\");\n        }}\n        onReset={() => setChecked(false)}\n      >\n        <div className=\"flex gap-3 items-center\">\n          <label htmlFor=\"a\">Label</label>\n          <Switch id=\"a\" {...args} checked={checked} onChange={setChecked} />\n        </div>\n        <div className=\"flex gap-4 mt-2\">\n          <Button type=\"submit\" className=\"mt-2 w-fit\">\n            Submit\n          </Button>\n\n          <Button type=\"reset\" variant=\"secondary\" className=\"mt-2 w-fit\">\n            Reset Input\n          </Button>\n        </div>\n      </form>\n\n      <p>{checked ? \"On\" : \"Off\"}</p>\n    </div>\n  );\n};\n"
  },
  {
    "path": "src/stories/input-elements/helpers/SimpleTextInput.tsx",
    "content": "import { Button, TextInput } from \"components\";\nimport React from \"react\";\n\nexport const SimpleTextInput = (args: any) => {\n  const [value, setValue] = React.useState(\"\");\n  return (\n    <div className=\"space-y-4\">\n      <form\n        onSubmit={(e) => {\n          alert(value);\n          e.preventDefault();\n        }}\n        onReset={() => setValue(\"\")}\n      >\n        <p>Uncontrolled</p>\n        <TextInput {...args} />\n        <p>Uncontrolled with defaultValue</p>\n        <TextInput {...args} defaultValue=\"hello\" />\n        <p>Conrolled without onChange</p>\n        <TextInput {...args} value={value} />\n        <label htmlFor=\"a\">\n          <p>Controlled with on Change</p>\n        </label>\n        <TextInput {...args} id={\"a\"} value={value} onChange={(e) => setValue(e.target.value)} />\n        <label htmlFor=\"a\">\n          <p>Controlled with onValueChange</p>\n        </label>\n        <TextInput {...args} id={\"a\"} value={value} onValueChange={setValue} />\n        <Button type=\"submit\" className=\"mt-2\">\n          Submit\n        </Button>\n        <Button type=\"reset\" variant=\"secondary\" className=\"mt-2\">\n          Reset Input\n        </Button>\n      </form>\n      <p>value: {value}</p>\n    </div>\n  );\n};\n"
  },
  {
    "path": "src/stories/input-elements/helpers/testData.ts",
    "content": "import { sub } from \"date-fns\";\n\nexport const dateRangePickerData = [\n  { date: sub(new Date(), { days: 0 }) },\n  { date: sub(new Date(), { days: 2 }) },\n  { date: sub(new Date(), { days: 4 }) },\n  { date: sub(new Date(), { days: 6 }) },\n  { date: sub(new Date(), { days: 8 }) },\n  { date: sub(new Date(), { days: 10 }) },\n  { date: sub(new Date(), { days: 12 }) },\n  { date: sub(new Date(), { days: 14 }) },\n  { date: sub(new Date(), { days: 16 }) },\n  { date: sub(new Date(), { days: 18 }) },\n  { date: sub(new Date(), { days: 20 }) },\n  { date: sub(new Date(), { days: 22 }) },\n  { date: sub(new Date(), { days: 24 }) },\n  { date: sub(new Date(), { days: 26 }) },\n  { date: sub(new Date(), { days: 28 }) },\n  { date: sub(new Date(), { days: 30 }) },\n];\n"
  },
  {
    "path": "src/stories/layout-elements/Accordion.stories.tsx",
    "content": "import type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Accordion } from \"components\";\nimport { SimpleAccordion } from \"./helpers/SimpleAccordion\";\n\nconst meta: Meta<typeof Accordion> = {\n  title: \"UI/Layout/Accordion\",\n  component: Accordion,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Accordion>;\n\nexport const Default: Story = {\n  render: SimpleAccordion,\n};\n\nexport const DefaultOpen: Story = {\n  render: SimpleAccordion,\n  args: {\n    defaultOpen: true,\n  },\n};\n"
  },
  {
    "path": "src/stories/layout-elements/AccordionList.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { AccordionList } from \"components\";\nimport { SimpleAccordion, SimpleAccordionList } from \"./helpers/SimpleAccordion\";\n\nconst meta: Meta<typeof AccordionList> = {\n  title: \"UI/Layout/AccordionList\",\n  component: AccordionList,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof AccordionList>;\n\nexport const Default: Story = {\n  render: SimpleAccordionList,\n};\n\nexport const WithLessThanThreeChildren: Story = {\n  render: (args) => (\n    <>\n      <AccordionList {...args}>\n        <SimpleAccordion />\n      </AccordionList>\n      <AccordionList className=\"mt-5\">\n        <SimpleAccordion />\n        <SimpleAccordion />\n      </AccordionList>\n    </>\n  ),\n};\n"
  },
  {
    "path": "src/stories/layout-elements/Card.stories.tsx",
    "content": "import React from \"react\";\n\nimport { Card, Grid } from \"components\";\nimport { BaseColors, HorizontalPosition, VerticalPosition } from \"lib\";\nimport { SimpleCard } from \"./helpers/SimpleCard\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nconst meta: Meta<typeof Card> = {\n  title: \"UI/Layout/Card\",\n  component: Card,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Card>;\n\nexport const Default: Story = {\n  render: SimpleCard,\n};\n\nexport const DecorationPosition: Story = {\n  render: (args) => (\n    <Grid numItems={2} className=\"gap-x-2 gap-y-2\">\n      {[\"left\", \"top\", \"right\", \"bottom\", \"mistyped\"].map((position) => (\n        <Card\n          {...args}\n          key={position}\n          decoration={position as HorizontalPosition | VerticalPosition | \"\"}\n        >\n          <p>{`Decoration ${position}`}</p>\n        </Card>\n      ))}\n    </Grid>\n  ),\n};\n\nexport const DecorationColors: Story = {\n  render: (args) => (\n    <Grid numItems={3} className=\"gap-x-2 gap-y-2\">\n      {Object.values(BaseColors).map((color) => (\n        <Card {...args} key={color} decoration=\"top\" decorationColor={color}>\n          <p>{`Decoration Color: ${color}`}</p>\n        </Card>\n      ))}\n    </Grid>\n  ),\n};\n"
  },
  {
    "path": "src/stories/layout-elements/Dialog.stories.tsx",
    "content": "import type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Dialog, DialogPanel, Button, Title } from \"components\";\nimport React from \"react\";\n\nconst SimpleDialog = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  return (\n    <>\n      <div className=\"text-center\">\n        <Button onClick={() => setIsOpen(true)}>Open Dialog</Button>\n      </div>\n      <Dialog open={isOpen} onClose={(val) => setIsOpen(val)} static={true}>\n        <DialogPanel>\n          <Title className=\"mb-3\">Account Created Successfully</Title>\n          Your account has been created successfully. You can now login to your account. For more\n          information, please contact us.\n          <div className=\"mt-3\">\n            <Button variant=\"light\" onClick={() => setIsOpen(false)}>\n              Got it!\n            </Button>\n          </div>\n        </DialogPanel>\n      </Dialog>\n    </>\n  );\n};\n\nconst meta: Meta<typeof Dialog> = {\n  title: \"UI/Layout/Dialog\",\n  component: Dialog,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Dialog>;\n\nexport const Default: Story = {\n  render: SimpleDialog,\n  parameters: {},\n};\n"
  },
  {
    "path": "src/stories/layout-elements/Divider.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { CalendarIcon } from \"assets\";\nimport { Divider } from \"components\";\nimport { SimpleCard } from \"stories/layout-elements/helpers/SimpleCard\";\n\nconst meta: Meta<typeof Divider> = {\n  title: \"UI/Layout/Divider\",\n  component: Divider,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Divider>;\n\nconst DividerTemplate: Story = {\n  render: () => (\n    <>\n      <div>\n        <SimpleCard />\n        <Divider />\n        <Divider>\n          <CalendarIcon className=\"h-5 w-5\" />\n        </Divider>\n        <Divider>Divider</Divider>\n        <SimpleCard />\n      </div>\n    </>\n  ),\n};\n\nexport const Default: Story = {\n  ...DividerTemplate,\n};\n"
  },
  {
    "path": "src/stories/layout-elements/Flex.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Card, Flex, Metric } from \"components\";\nimport { SimpleCard } from \"stories/layout-elements/helpers/SimpleCard\";\nimport { SimpleText } from \"stories/layout-elements/helpers/SimpleText\";\n\nconst meta: Meta<typeof Flex> = {\n  title: \"UI/Layout/Flex\",\n  component: Flex,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Flex>;\n\nconst MaxWidthSmTemplate: Story = {\n  render: ({ ...args }) => (\n    <Flex {...args}>\n      <div>\n        <SimpleCard maxWidth=\"max-w-sm\" />\n      </div>\n      <div>\n        <Card className=\"max-w-sm\">\n          <Metric>$ 40,000</Metric>\n          <SimpleText />\n        </Card>\n      </div>\n    </Flex>\n  ),\n};\n\nconst WFullTemplate: Story = {\n  render: ({ ...args }) => (\n    <Flex {...args}>\n      <SimpleCard />\n      <Card>\n        <Metric>$ 40,000</Metric>\n        <SimpleText />\n      </Card>\n    </Flex>\n  ),\n};\n\nexport const Default: Story = {\n  ...MaxWidthSmTemplate,\n  args: {},\n};\n\nexport const JustifyEnd: Story = {\n  ...MaxWidthSmTemplate,\n  args: {\n    justifyContent: \"end\",\n  },\n};\n\nexport const JustifyStart: Story = {\n  ...MaxWidthSmTemplate,\n  args: {\n    justifyContent: \"start\",\n  },\n};\n\nexport const ItemsStart: Story = {\n  ...MaxWidthSmTemplate,\n  args: {\n    alignItems: \"start\",\n  },\n};\n\nexport const ItemsEnd: Story = {\n  ...MaxWidthSmTemplate,\n  args: {\n    alignItems: \"end\",\n  },\n};\n\nexport const ItemsStretch: Story = {\n  ...WFullTemplate,\n  args: {\n    alignItems: \"stretch\",\n  },\n};\n\nexport const SpaceX: Story = {\n  ...MaxWidthSmTemplate,\n  args: {\n    justifyContent: \"start\",\n    alignItems: \"baseline\",\n    className: \"space-x-8\",\n  },\n};\n"
  },
  {
    "path": "src/stories/layout-elements/Grid.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Card, Col, Grid, Metric } from \"components\";\nimport { SimpleCard } from \"./helpers/SimpleCard\";\nimport { SimpleText } from \"./helpers/SimpleText\";\n\nconst meta: Meta<typeof Grid> = {\n  title: \"UI/Layout/Grid\",\n  component: Grid,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Grid>;\n\nexport const ThreeItems: Story = {\n  render: ({ ...args }) => (\n    <Grid {...args}>\n      <Col numColSpanMd={2}>\n        <SimpleCard />\n      </Col>\n      <SimpleCard />\n      <SimpleCard />\n      <SimpleCard />\n      <Card>\n        <Metric>$ 40,000</Metric>\n        <SimpleText />\n      </Card>\n    </Grid>\n  ),\n  args: { numItemsMd: 3, className: \"gap-x-2 gap-y-2\" },\n};\n"
  },
  {
    "path": "src/stories/layout-elements/helpers/SimpleAccordion.tsx",
    "content": "import React from \"react\";\n\nimport { ArrowRightIcon } from \"assets\";\nimport { Accordion, AccordionBody, AccordionHeader, AccordionList, Callout } from \"components\";\n\nexport const SimpleAccordion = (args: any) => (\n  <Accordion {...args}>\n    <AccordionHeader>Product A</AccordionHeader>\n    <AccordionBody>\n      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod. Sit amet,\n      consetetur sadipscing elitr. Per aspera ad astra.\n      <Callout\n        title={\"Performing as Average\"}\n        icon={ArrowRightIcon}\n        color=\"gray\"\n        className=\"mt-2\"\n      ></Callout>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor lorem non est congue\n      blandit. Praesent non lorem sodales, suscipit est sed, hendrerit dolor.\n    </AccordionBody>\n  </Accordion>\n);\n\nexport const SimpleAccordionList = (args: any) => {\n  return (\n    <AccordionList {...args}>\n      <SimpleAccordion />\n      <SimpleAccordion />\n      <SimpleAccordion />\n    </AccordionList>\n  );\n};\n"
  },
  {
    "path": "src/stories/layout-elements/helpers/SimpleCard.tsx",
    "content": "import React from \"react\";\n\nimport { BadgeDelta, Card, Flex, Metric, Text } from \"components\";\n\nexport const SimpleCard = (args: any) => (\n  <Card {...args}>\n    <Flex>\n      <Metric>23,000</Metric>\n      <BadgeDelta deltaType=\"increase\">19.14%</BadgeDelta>\n    </Flex>\n    <Text>Sample Text</Text>\n  </Card>\n);\n"
  },
  {
    "path": "src/stories/layout-elements/helpers/SimpleText.tsx",
    "content": "import React from \"react\";\n\nimport { Text } from \"components\";\n\nexport const SimpleText = () => (\n  <Text>\n    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been\n    the industry&apos;s standard dummy text ever since the 900s, when an unknown printer took a\n    galley of type and scrambled it to make a type specimen book. It has survived not only five\n    centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It\n    was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum\n    passages, and more recently with desktop publishing software like Aldus PageMaker including\n    versions of Lorem Ipsum.\n  </Text>\n);\n"
  },
  {
    "path": "src/stories/list-elements/List.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { List, ListItem } from \"components\";\n\nconst meta: Meta<typeof List> = {\n  title: \"UI/List/List\",\n  component: List,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof List>;\n\nexport const Default: Story = {\n  render: (args) => (\n    <List {...args}>\n      <ListItem>\n        <div>Hello</div>\n        <div>World</div>\n      </ListItem>\n      <ListItem>\n        <div>Hello</div>\n        <div>World</div>\n      </ListItem>\n    </List>\n  ),\n  args: {\n    className: \"mt-5\",\n    children: undefined,\n  },\n};\n"
  },
  {
    "path": "src/stories/list-elements/Table.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from \"components\";\n\nimport BadgeDelta from \"components/icon-elements/BadgeDelta/BadgeDelta\";\nimport { DeltaType } from \"lib\";\n\nconst meta: Meta<typeof Table> = {\n  title: \"UI/List/Table\",\n  component: Table,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Table>;\n\nconst data = [\n  {\n    id: 1,\n    name: \"Peter Doe\",\n    sales: \"1.000.000\",\n    region: \"Region A\",\n    status: \"overperforming\",\n    deltaType: \"moderateIncrease\",\n    hours: 100,\n  },\n  {\n    id: 2,\n    name: \"Jon Doe\",\n    sales: \"2.202.000\",\n    region: \"Region B\",\n    status: \"overperforming\",\n    deltaType: \"moderateIncrease\",\n    hours: 110,\n  },\n  {\n    id: 3,\n    name: \"Peter Doe\",\n    sales: \"1.505.000\",\n    region: \"Region C\",\n    status: \"underperforming\",\n    deltaType: \"moderateDecrease\",\n    hours: 90,\n  },\n  {\n    id: 4,\n    name: \"Employee 4\",\n    sales: \"500000\",\n    region: \"Region D\",\n    status: \"overperforming\",\n    deltaType: \"moderateDecrease\",\n    hours: 92,\n  },\n  {\n    id: 5,\n    name: \"Employee 5\",\n    sales: \"600000\",\n    region: \"Region E\",\n    status: \"underperforming\",\n    deltaType: \"moderateDecrease\",\n    hours: 95,\n  },\n  {\n    id: 6,\n    name: \"Employee 6\",\n    sales: \"700000\",\n    region: \"Region F\",\n    status: \"overperforming\",\n    deltaType: \"moderateIncrease\",\n    hours: 98,\n  },\n  {\n    id: 7,\n    name: \"Employee 7\",\n    sales: \"800000\",\n    region: \"Region G\",\n    status: \"average\",\n    deltaType: \"unchanged\",\n    hours: 101,\n  },\n  {\n    id: 8,\n    name: \"Employee 8\",\n    sales: \"900000\",\n    region: \"Region H\",\n    status: \"overperforming\",\n    deltaType: \"moderateDecrease\",\n    hours: 104,\n  },\n  {\n    id: 9,\n    name: \"Employee 9\",\n    sales: \"1000000\",\n    region: \"Region I\",\n    status: \"underperforming\",\n    deltaType: \"moderateIncrease\",\n    hours: 107,\n  },\n  {\n    id: 10,\n    name: \"Employee 10\",\n    sales: \"1100000\",\n    region: \"Region J\",\n    status: \"average\",\n    deltaType: \"unchanged\",\n    hours: 110,\n  },\n  {\n    id: 11,\n    name: \"Employee 11\",\n    sales: \"1200000\",\n    region: \"Region K\",\n    status: \"underperforming\",\n    deltaType: \"moderateDecrease\",\n    hours: 113,\n  },\n  {\n    id: 12,\n    name: \"Employee 12\",\n    sales: \"1300000\",\n    region: \"Region L\",\n    status: \"overperforming\",\n    deltaType: \"moderateIncrease\",\n    hours: 116,\n  },\n  {\n    id: 13,\n    name: \"Employee 13\",\n    sales: \"1400000\",\n    region: \"Region M\",\n    status: \"underperforming\",\n    deltaType: \"moderateDecrease\",\n    hours: 119,\n  },\n];\n\nexport const Default: Story = {\n  render: (args) => (\n    <Table {...args}>\n      <TableHead>\n        <TableRow>\n          <TableHeaderCell colSpan={3}>Name</TableHeaderCell>\n          <TableHeaderCell>Sales ($)</TableHeaderCell>\n          <TableHeaderCell>Region</TableHeaderCell>\n          <TableHeaderCell>Status</TableHeaderCell>\n          <TableHeaderCell className=\"text-right\">Working Hours (h)</TableHeaderCell>\n        </TableRow>\n      </TableHead>\n      <TableBody>\n        {data.map((item) => (\n          <TableRow key={item.id}>\n            <TableCell>{item.name}</TableCell>\n            <TableCell className=\"text-right\">{item.sales}</TableCell>\n            <TableCell>{item.region}</TableCell>\n            <TableCell>\n              <BadgeDelta deltaType={item.deltaType as DeltaType} size=\"sm\">\n                {item.status}\n              </BadgeDelta>\n            </TableCell>\n            <TableCell className=\"text-right\">{item.hours}</TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  ),\n  args: {\n    children: undefined,\n  },\n};\n"
  },
  {
    "path": "src/stories/spark-elements/SparkAreaChart.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport {\n  simpleBaseChartData as data,\n  longBaseChartData,\n  simpleBaseChartDataWithNulls,\n  singleAndMultipleData,\n} from \"../chart-elements/helpers/testData\";\nimport { SparkAreaChart } from \"components/spark-elements\";\nimport ExampleCard from \"./helpers/ExampleCard\";\nimport { smallVariantionDatas } from \"./helpers/testData\";\n\nconst meta: Meta<typeof SparkAreaChart> = {\n  title: \"Visualizations/Chart/SparkAreaChart\",\n  component: SparkAreaChart,\n  args: {\n    categories: [\"Sales\", \"Successful Payments\"],\n    index: \"month\",\n    data,\n    colors: [\"emerald\", \"rose\"],\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof SparkAreaChart>;\n\nexport const Default: Story = { args: { categories: [\"Sales\"] } };\n\nexport const Stacked: Story = {\n  args: {\n    stack: true,\n  },\n};\n\nexport const OtherColors: Story = {\n  args: { colors: [\"rose\", \"purple\"] },\n};\n\nexport const CustomColors: Story = {\n  args: {\n    colors: [\"#32a852\", \"orange-600\"],\n  },\n};\n\nexport const NoGradient: Story = {\n  args: { showGradient: false },\n};\n\nexport const ChangedCategoriesOrder: Story = {\n  args: { categories: [\"Successful Payments\", \"Sales\"] },\n};\n\nexport const NoData: Story = {\n  args: { data: [] },\n};\n\nexport const NoDataText: Story = {\n  args: { data: [], noDataText: \"No data, try again later.\" },\n};\n\nexport const NoCategories: Story = {\n  args: { categories: undefined },\n};\n\nexport const NoIndex: Story = {\n  args: { index: undefined },\n};\n\nexport const CurveTypeNatural: Story = {\n  args: { curveType: \"natural\" },\n};\n\nexport const ConnectNullsTrue: Story = {\n  args: { data: simpleBaseChartDataWithNulls, connectNulls: true },\n};\n\nexport const ConnectNullsFalse: Story = {\n  args: { data: simpleBaseChartDataWithNulls, connectNulls: false },\n};\n\nexport const Animation: Story = {\n  args: { showAnimation: true },\n};\n\nexport const LongAnimationDuration: Story = {\n  args: { showAnimation: true, animationDuration: 5000 },\n};\n\nexport const OneDataValue: Story = {\n  args: { data: data.slice(0, 1) },\n};\n\nexport const SingleAndMultipleData: Story = {\n  args: { data: singleAndMultipleData },\n};\nexport const LongDataInput: Story = {\n  args: { data: longBaseChartData },\n};\n\nexport const MultipleZeroValues: Story = {\n  args: {\n    data: [\n      {\n        month: \"May 21\",\n        Sales: 2390,\n        \"Successful Payments\": 0,\n      },\n      {\n        month: \"Jun 21\",\n        Sales: 2390,\n        \"Successful Payments\": 0,\n      },\n      {\n        month: \"Jul 21\",\n        Sales: 3490,\n        \"Successful Payments\": 0,\n      },\n    ],\n  },\n};\n\nexport const WithCard: Story = {\n  args: {\n    categories: [\"Sales\"],\n  },\n  decorators: [\n    (Story) => (\n      <ExampleCard>\n        <Story />\n      </ExampleCard>\n    ),\n  ],\n};\n\nexport const WithAutoMinValue: Story = {\n  args: {\n    data: smallVariantionDatas,\n    index: \"ts\",\n    categories: [\"avg_price\"],\n    autoMinValue: true,\n  },\n};\n"
  },
  {
    "path": "src/stories/spark-elements/SparkBarChart.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport {\n  simpleBaseChartData as data,\n  longBaseChartData,\n  simpleBaseChartWithNegativeValues,\n  singleAndMultipleData,\n} from \"../chart-elements/helpers/testData\";\nimport { SparkBarChart } from \"components/spark-elements\";\nimport ExampleCard from \"./helpers/ExampleCard\";\nimport { smallVariantionDatas } from \"./helpers/testData\";\n\nconst meta: Meta<typeof SparkBarChart> = {\n  title: \"Visualizations/Chart/SparkBarChart\",\n  component: SparkBarChart,\n  args: {\n    categories: [\"Sales\", \"Successful Payments\"],\n    index: \"month\",\n    data,\n    colors: [\"emerald\", \"rose\"],\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof SparkBarChart>;\n\nexport const Default: Story = {\n  args: { categories: [\"Sales\"] },\n};\n\nexport const DefaultNegativeValues: Story = {\n  args: {\n    data: simpleBaseChartWithNegativeValues,\n  },\n};\n\nexport const Stacked: Story = {\n  args: { stack: true },\n};\n\nexport const Relative: Story = {\n  args: { relative: true },\n};\n\nexport const OtherColors: Story = {\n  args: { colors: [\"blue\", \"green\"] },\n};\n\nexport const CustomColors: Story = {\n  args: { colors: [\"#32a852\", \"orange-600\"] },\n};\n\nexport const ChangedCategoriesOrder: Story = {\n  args: { categories: [\"Successful Payments\", \"Sales\"] },\n};\n\nexport const NoData: Story = {\n  args: { data: [] },\n};\n\nexport const NoDataText: Story = {\n  args: { data: [], noDataText: \"No data, try again later.\" },\n};\n\nexport const NoCategories: Story = {\n  args: { categories: undefined },\n};\n\nexport const NoIndex: Story = {\n  args: { index: undefined },\n};\n\nexport const Animation: Story = {\n  args: { showAnimation: true },\n};\n\nexport const LongAnimationDuration: Story = {\n  args: { showAnimation: true, animationDuration: 5000 },\n};\n\nexport const OneDataValue: Story = {\n  args: { data: data.slice(0, 1) },\n};\n\nexport const SingleAndMultipleData: Story = {\n  args: { data: singleAndMultipleData },\n};\n\nexport const LongDataInput: Story = {\n  args: { data: longBaseChartData },\n};\n\nexport const MultipleZeroValues: Story = {\n  args: {\n    data: [\n      {\n        month: \"May 21\",\n        Sales: 2390,\n        \"Successful Payments\": 0,\n      },\n      {\n        month: \"Jun 21\",\n        Sales: 2390,\n        \"Successful Payments\": 0,\n      },\n      {\n        month: \"Jul 21\",\n        Sales: 3490,\n        \"Successful Payments\": 0,\n      },\n    ],\n  },\n};\n\nexport const WithCard: Story = {\n  args: {\n    categories: [\"Sales\"],\n  },\n  decorators: [\n    (Story) => (\n      <ExampleCard>\n        <Story />\n      </ExampleCard>\n    ),\n  ],\n};\n\nexport const WithAutoMinValue: Story = {\n  args: {\n    data: smallVariantionDatas,\n    index: \"ts\",\n    categories: [\"avg_price\"],\n    autoMinValue: true,\n  },\n};\n"
  },
  {
    "path": "src/stories/spark-elements/SparkLineChart.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport {\n  simpleBaseChartData as data,\n  longBaseChartData,\n  simpleBaseChartDataWithNulls,\n  singleAndMultipleData,\n} from \"../chart-elements/helpers/testData\";\nimport { SparkLineChart } from \"components/spark-elements\";\nimport ExampleCard from \"./helpers/ExampleCard\";\nimport { smallVariantionDatas } from \"./helpers/testData\";\n\nconst meta: Meta<typeof SparkLineChart> = {\n  title: \"Visualizations/Chart/SparkLineChart\",\n  component: SparkLineChart,\n  args: {\n    categories: [\"Sales\", \"Successful Payments\"],\n    index: \"month\",\n    data,\n    colors: [\"emerald\", \"rose\"],\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof SparkLineChart>;\n\nexport const Default: Story = { args: { categories: [\"Sales\"] } };\n\nexport const OtherColors: Story = {\n  args: { colors: [\"rose\", \"purple\"] },\n};\n\nexport const CustomColors: Story = {\n  args: {\n    colors: [\"#32a852\", \"orange-600\"],\n  },\n};\n\nexport const ChangedCategoriesOrder: Story = {\n  args: { categories: [\"Successful Payments\", \"Sales\"] },\n};\n\nexport const NoData: Story = {\n  args: { data: [] },\n};\n\nexport const NoDataText: Story = {\n  args: { data: [], noDataText: \"No data, try again later.\" },\n};\n\nexport const NoCategories: Story = {\n  args: { categories: undefined },\n};\n\nexport const NoIndex: Story = {\n  args: { index: undefined },\n};\n\nexport const CurveTypeNatural: Story = {\n  args: { curveType: \"natural\" },\n};\n\nexport const ConnectNullsTrue: Story = {\n  args: { data: simpleBaseChartDataWithNulls, connectNulls: true },\n};\n\nexport const ConnectNullsFalse: Story = {\n  args: { data: simpleBaseChartDataWithNulls, connectNulls: false },\n};\n\nexport const Animation: Story = {\n  args: { showAnimation: true },\n};\n\nexport const LongAnimationDuration: Story = {\n  args: { showAnimation: true, animationDuration: 5000 },\n};\n\nexport const OneDataValue: Story = {\n  args: { data: data.slice(0, 1) },\n};\n\nexport const SingleAndMultipleData: Story = {\n  args: { data: singleAndMultipleData },\n};\nexport const LongDataInput: Story = {\n  args: { data: longBaseChartData },\n};\n\nexport const MultipleZeroValues: Story = {\n  args: {\n    data: [\n      {\n        month: \"May 21\",\n        Sales: 2390,\n        \"Successful Payments\": 0,\n      },\n      {\n        month: \"Jun 21\",\n        Sales: 2390,\n        \"Successful Payments\": 0,\n      },\n      {\n        month: \"Jul 21\",\n        Sales: 3490,\n        \"Successful Payments\": 0,\n      },\n    ],\n  },\n};\n\nexport const WithCard: Story = {\n  args: {\n    categories: [\"Sales\"],\n  },\n  decorators: [\n    (Story) => (\n      <ExampleCard>\n        <Story />\n      </ExampleCard>\n    ),\n  ],\n};\n\nexport const WithAutoMinValue: Story = {\n  args: {\n    data: smallVariantionDatas,\n    index: \"ts\",\n    categories: [\"avg_price\"],\n    autoMinValue: true,\n  },\n};\n"
  },
  {
    "path": "src/stories/spark-elements/helpers/ExampleCard.tsx",
    "content": "import React from \"react\";\nimport { Card, Title } from \"components\";\n\nconst ExampleCard = ({ children }: { children: React.ReactNode }) => (\n  <Card className=\"w-96 flex items-center justify-between\">\n    <div>\n      <Title>AAPL</Title>\n      <span className=\"text-sm text-gray-500\">Apple Inc.</span>\n    </div>\n    <div className=\"flex items-center gap-x-4\">\n      {children}\n      <div className=\"text-right\">\n        <Title>196.26</Title>\n        <span className=\"text-sm text-emerald-600\">+2.69%</span>\n      </div>\n    </div>\n  </Card>\n);\n\nexport default ExampleCard;\n"
  },
  {
    "path": "src/stories/spark-elements/helpers/testData.ts",
    "content": "export const smallVariantionDatas = [\n  { ts: \"2024-02-05T18:36:00.000Z\", avg_price: 3112.96 },\n  { ts: \"2024-02-05T18:37:00.000Z\", avg_price: 3112.8749999999995 },\n  { ts: \"2024-02-05T18:38:00.000Z\", avg_price: 3112.62 },\n  { ts: \"2024-02-05T18:39:00.000Z\", avg_price: 3113.4491666666668 },\n  { ts: \"2024-02-05T18:40:00.000Z\", avg_price: 3113.5900000000006 },\n  { ts: \"2024-02-05T18:41:00.000Z\", avg_price: 3113.5900000000006 },\n  { ts: \"2024-02-05T18:42:00.000Z\", avg_price: 3113.5900000000006 },\n  { ts: \"2024-02-05T18:43:00.000Z\", avg_price: 3113.590000000001 },\n  { ts: \"2024-02-05T18:44:00.000Z\", avg_price: 3113.590000000001 },\n  { ts: \"2024-02-05T18:45:00.000Z\", avg_price: 3113.590000000001 },\n  { ts: \"2024-02-05T18:46:00.000Z\", avg_price: 3113.590000000001 },\n  { ts: \"2024-02-05T18:47:00.000Z\", avg_price: 3113.590000000001 },\n  { ts: \"2024-02-05T18:48:00.000Z\", avg_price: 3113.590000000001 },\n  { ts: \"2024-02-05T18:49:00.000Z\", avg_price: 3113.882 },\n  { ts: \"2024-02-05T18:50:00.000Z\", avg_price: 3115.05 },\n  { ts: \"2024-02-05T18:51:00.000Z\", avg_price: 3115.0499999999997 },\n  { ts: \"2024-02-05T18:52:00.000Z\", avg_price: 3112.694333333334 },\n  { ts: \"2024-02-05T18:53:00.000Z\", avg_price: 3111.2300000000005 },\n  { ts: \"2024-02-05T18:54:00.000Z\", avg_price: 3111.2300000000005 },\n  { ts: \"2024-02-05T18:55:00.000Z\", avg_price: 3111.230000000001 },\n  { ts: \"2024-02-05T18:56:00.000Z\", avg_price: 3111.230000000001 },\n  { ts: \"2024-02-05T18:57:00.000Z\", avg_price: 3111.2300000000005 },\n  { ts: \"2024-02-05T18:58:00.000Z\", avg_price: 3111.2300000000005 },\n  { ts: \"2024-02-05T18:59:00.000Z\", avg_price: 3111.2300000000005 },\n  { ts: \"2024-02-05T19:00:00.000Z\", avg_price: 3111.230000000001 },\n  { ts: \"2024-02-05T19:01:00.000Z\", avg_price: 3111.958 },\n  { ts: \"2024-02-05T19:02:00.000Z\", avg_price: 3112.01 },\n  { ts: \"2024-02-05T19:03:00.000Z\", avg_price: 3112.0099999999998 },\n  { ts: \"2024-02-05T19:04:00.000Z\", avg_price: 3111.989 },\n  { ts: \"2024-02-05T19:05:00.000Z\", avg_price: 3111.8221666666664 },\n  { ts: \"2024-02-05T19:06:00.000Z\", avg_price: 3111.87 },\n  { ts: \"2024-02-05T19:07:00.000Z\", avg_price: 3111.87 },\n  { ts: \"2024-02-05T19:08:00.000Z\", avg_price: 3111.87 },\n  { ts: \"2024-02-05T19:09:00.000Z\", avg_price: 3111.87 },\n  { ts: \"2024-02-05T19:10:00.000Z\", avg_price: 3111.8700000000003 },\n  { ts: \"2024-02-05T19:11:00.000Z\", avg_price: 3111.8699999999994 },\n  { ts: \"2024-02-05T19:12:00.000Z\", avg_price: 3111.8700000000003 },\n  { ts: \"2024-02-05T19:13:00.000Z\", avg_price: 3112.026 },\n  { ts: \"2024-02-05T19:14:00.000Z\", avg_price: 3112.2300000000005 },\n  { ts: \"2024-02-05T19:15:00.000Z\", avg_price: 3111.4049999999997 },\n  { ts: \"2024-02-05T19:16:00.000Z\", avg_price: 3111.252 },\n  { ts: \"2024-02-05T19:17:00.000Z\", avg_price: 3111.846666666667 },\n  { ts: \"2024-02-05T19:18:00.000Z\", avg_price: 3112.86 },\n  { ts: \"2024-02-05T19:19:00.000Z\", avg_price: 3112.692 },\n  { ts: \"2024-02-05T19:20:00.000Z\", avg_price: 3112.019999999999 },\n  { ts: \"2024-02-05T19:21:00.000Z\", avg_price: 3112.0199999999995 },\n  { ts: \"2024-02-05T19:22:00.000Z\", avg_price: 3112.0199999999995 },\n  { ts: \"2024-02-05T19:23:00.000Z\", avg_price: 3113.5308333333332 },\n  { ts: \"2024-02-05T19:24:00.000Z\", avg_price: 3114.61 },\n  { ts: \"2024-02-05T19:25:00.000Z\", avg_price: 3114.6099999999997 },\n  { ts: \"2024-02-05T19:26:00.000Z\", avg_price: 3114.61 },\n  { ts: \"2024-02-05T19:27:00.000Z\", avg_price: 3114.61 },\n  { ts: \"2024-02-05T19:28:00.000Z\", avg_price: 3114.6820000000002 },\n  { ts: \"2024-02-05T19:29:00.000Z\", avg_price: 3114.7699999999995 },\n  { ts: \"2024-02-05T19:30:00.000Z\", avg_price: 3114.769999999999 },\n  { ts: \"2024-02-05T19:31:00.000Z\", avg_price: 3114.769999999999 },\n  { ts: \"2024-02-05T19:32:00.000Z\", avg_price: 3114.7699999999995 },\n  { ts: \"2024-02-05T19:33:00.000Z\", avg_price: 3114.7699999999995 },\n  { ts: \"2024-02-05T19:34:00.000Z\", avg_price: 3114.7699999999995 },\n  { ts: \"2024-02-05T19:35:00.000Z\", avg_price: 3114.769999999999 },\n  { ts: \"2024-02-05T19:36:00.000Z\", avg_price: 3114.769999999999 },\n  { ts: \"2024-02-05T19:37:00.000Z\", avg_price: 3114.5096666666664 },\n  { ts: \"2024-02-05T19:38:00.000Z\", avg_price: 3113.3500000000004 },\n  { ts: \"2024-02-05T19:39:00.000Z\", avg_price: 3113.3500000000004 },\n  { ts: \"2024-02-05T19:40:00.000Z\", avg_price: 3113.3500000000004 },\n  { ts: \"2024-02-05T19:41:00.000Z\", avg_price: 3113.402 },\n  { ts: \"2024-02-05T19:42:00.000Z\", avg_price: 3113.61 },\n  { ts: \"2024-02-05T19:43:00.000Z\", avg_price: 3113.61 },\n  { ts: \"2024-02-05T19:44:00.000Z\", avg_price: 3113.61 },\n  { ts: \"2024-02-05T19:45:00.000Z\", avg_price: 3113.6099999999997 },\n  { ts: \"2024-02-05T19:46:00.000Z\", avg_price: 3113.61 },\n  { ts: \"2024-02-05T19:47:00.000Z\", avg_price: 3113.61 },\n  { ts: \"2024-02-05T19:48:00.000Z\", avg_price: 3113.61 },\n  { ts: \"2024-02-05T19:49:00.000Z\", avg_price: 3113.508166666667 },\n  { ts: \"2024-02-05T19:50:00.000Z\", avg_price: 3113.4800000000005 },\n  { ts: \"2024-02-05T19:51:00.000Z\", avg_price: 3113.480000000001 },\n  { ts: \"2024-02-05T19:52:00.000Z\", avg_price: 3115.1179999999995 },\n  { ts: \"2024-02-05T19:53:00.000Z\", avg_price: 3115.2999999999997 },\n  { ts: \"2024-02-05T19:54:00.000Z\", avg_price: 3115.564833333333 },\n  { ts: \"2024-02-05T19:55:00.000Z\", avg_price: 3117.5700000000006 },\n  { ts: \"2024-02-05T19:56:00.000Z\", avg_price: 3118.8389999999995 },\n  { ts: \"2024-02-05T19:57:00.000Z\", avg_price: 3121.8 },\n  { ts: \"2024-02-05T19:58:00.000Z\", avg_price: 3121.7999999999997 },\n  { ts: \"2024-02-05T19:59:00.000Z\", avg_price: 3121.7999999999997 },\n  { ts: \"2024-02-05T20:00:00.000Z\", avg_price: 3120.780333333333 },\n  { ts: \"2024-02-05T20:01:00.000Z\", avg_price: 3117.4299999999994 },\n  { ts: \"2024-02-05T20:02:00.000Z\", avg_price: 3117.7874999999995 },\n  { ts: \"2024-02-05T20:03:00.000Z\", avg_price: 3116.5 },\n  { ts: \"2024-02-05T20:04:00.000Z\", avg_price: 3115.8933333333325 },\n  { ts: \"2024-02-05T20:05:00.000Z\", avg_price: 3114.6799999999994 },\n  { ts: \"2024-02-05T20:06:00.000Z\", avg_price: 3114.6799999999994 },\n  { ts: \"2024-02-05T20:07:00.000Z\", avg_price: 3117.9186666666665 },\n  { ts: \"2024-02-05T20:08:00.000Z\", avg_price: 3120.36 },\n  { ts: \"2024-02-05T20:09:00.000Z\", avg_price: 3120.36 },\n  { ts: \"2024-02-05T20:10:00.000Z\", avg_price: 3120.36 },\n  { ts: \"2024-02-05T20:11:00.000Z\", avg_price: 3120.301999999999 },\n  { ts: \"2024-02-05T20:12:00.000Z\", avg_price: 3120.6383333333333 },\n  { ts: \"2024-02-05T20:13:00.000Z\", avg_price: 3121.2480000000005 },\n  { ts: \"2024-02-05T20:14:00.000Z\", avg_price: 3122.21 },\n  { ts: \"2024-02-05T20:15:00.000Z\", avg_price: 3120.6016666666674 },\n  { ts: \"2024-02-05T20:16:00.000Z\", avg_price: 3119.83 },\n  { ts: \"2024-02-05T20:17:00.000Z\", avg_price: 3119.83 },\n  { ts: \"2024-02-05T20:18:00.000Z\", avg_price: 3119.8300000000004 },\n  { ts: \"2024-02-05T20:19:00.000Z\", avg_price: 3119.8300000000004 },\n  { ts: \"2024-02-05T20:20:00.000Z\", avg_price: 3119.83 },\n  { ts: \"2024-02-05T20:21:00.000Z\", avg_price: 3119.83 },\n  { ts: \"2024-02-05T20:22:00.000Z\", avg_price: 3119.8300000000004 },\n  { ts: \"2024-02-05T20:23:00.000Z\", avg_price: 3119.83 },\n  { ts: \"2024-02-05T20:24:00.000Z\", avg_price: 3119.83 },\n  { ts: \"2024-02-05T20:25:00.000Z\", avg_price: 3119.8300000000004 },\n  { ts: \"2024-02-05T20:26:00.000Z\", avg_price: 3119.83 },\n  { ts: \"2024-02-05T20:27:00.000Z\", avg_price: 3119.83 },\n  { ts: \"2024-02-05T20:28:00.000Z\", avg_price: 3119.83 },\n  { ts: \"2024-02-05T20:29:00.000Z\", avg_price: 3119.8300000000004 },\n  { ts: \"2024-02-05T20:30:00.000Z\", avg_price: 3119.8300000000004 },\n  { ts: \"2024-02-05T20:31:00.000Z\", avg_price: 3119.83 },\n  { ts: \"2024-02-05T20:32:00.000Z\", avg_price: 3119.8300000000004 },\n  { ts: \"2024-02-05T20:33:00.000Z\", avg_price: 3119.8300000000004 },\n  { ts: \"2024-02-05T20:34:00.000Z\", avg_price: 3119.067666666667 },\n  { ts: \"2024-02-05T20:35:00.000Z\", avg_price: 3118.343500000001 },\n  { ts: \"2024-02-05T20:36:00.000Z\", avg_price: 3120.8791666666666 },\n  { ts: \"2024-02-05T20:37:00.000Z\", avg_price: 3121.9400000000005 },\n  { ts: \"2024-02-05T20:38:00.000Z\", avg_price: 3123.2384999999995 },\n  { ts: \"2024-02-05T20:39:00.000Z\", avg_price: 3123.5299999999993 },\n  { ts: \"2024-02-05T20:40:00.000Z\", avg_price: 3125.2688333333335 },\n  { ts: \"2024-02-05T20:41:00.000Z\", avg_price: 3126.2200000000007 },\n  { ts: \"2024-02-05T20:42:00.000Z\", avg_price: 3130.6138333333333 },\n  { ts: \"2024-02-05T20:43:00.000Z\", avg_price: 3132.65 },\n  { ts: \"2024-02-05T20:44:00.000Z\", avg_price: 3132.902833333333 },\n  { ts: \"2024-02-05T20:45:00.000Z\", avg_price: 3133.0599999999995 },\n  { ts: \"2024-02-05T20:46:00.000Z\", avg_price: 3132.617333333333 },\n  { ts: \"2024-02-05T20:47:00.000Z\", avg_price: 3131.4 },\n  { ts: \"2024-02-05T20:48:00.000Z\", avg_price: 3131.3999999999996 },\n  { ts: \"2024-02-05T20:49:00.000Z\", avg_price: 3131.4 },\n  { ts: \"2024-02-05T20:50:00.000Z\", avg_price: 3136.072 },\n  { ts: \"2024-02-05T20:51:00.000Z\", avg_price: 3137.2400000000002 },\n  { ts: \"2024-02-05T20:52:00.000Z\", avg_price: 3137.24 },\n  { ts: \"2024-02-05T20:53:00.000Z\", avg_price: 3137.24 },\n  { ts: \"2024-02-05T20:54:00.000Z\", avg_price: 3137.2400000000002 },\n  { ts: \"2024-02-05T20:55:00.000Z\", avg_price: 3137.24 },\n];\n"
  },
  {
    "path": "src/stories/text-elements/Callout.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ArrowUpRightIcon } from \"assets\";\n\nimport { Callout } from \"components\";\nimport { BaseColors } from \"lib/constants\";\n\nconst meta: Meta<typeof Callout> = {\n  title: \"UI/Text/Callout\",\n  component: Callout,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Callout>;\n\nconst CalloutTemplate: Story = {\n  render: ({ ...args }) => (\n    <>\n      <div className=\"mb-5 max-w-lg\">\n        <Callout {...args} className=\"mt-5\" />\n      </div>\n      <div className=\"mb-5 max-w-lg\">\n        {Object.values(BaseColors).map((color) => (\n          <div key={color} className=\"mb-5 max-w-lg\">\n            <Callout {...args} color={color} className=\"h-24 mt-5\" />\n          </div>\n        ))}\n      </div>\n    </>\n  ),\n};\n\nexport const Default: Story = {\n  args: {\n    title: \"Performance Metric\",\n    children:\n      \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor lorem non est congue blandit. Praesent non lorem sodales, suscipit est sed, hendrerit dolor.\",\n  },\n};\n\nexport const Colors: Story = {\n  ...CalloutTemplate,\n  args: {\n    title: \"Performance Metric\",\n    children:\n      \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor lorem non est congue blandit. Praesent non lorem sodales, suscipit est sed, hendrerit dolor.\",\n  },\n};\n\nexport const Icon: Story = {\n  ...CalloutTemplate,\n  args: {\n    title: \"Performance Metric\",\n    children:\n      \"You are outranking 83% of the sales representatives in your cohort. Sit repellendus qui ut at blanditis \\\n      et quo et molestiae. Doloribus dolores nostrum quia qui natus officia quod et dolorem. Sit repellendus \\\n      qui ut at blanditiis et quo et molestiae\",\n    icon: ArrowUpRightIcon,\n  },\n};\n"
  },
  {
    "path": "src/stories/text-elements/Legend.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Legend } from \"components\";\n\nconst meta: Meta<typeof Legend> = {\n  title: \"UI/Text/Legend\",\n  component: Legend,\n  args: {\n    categories: [\n      \"Critical\",\n      \"This is a very long category name to test an edge case\",\n      \"Category C\",\n      \"Category D\",\n    ],\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Legend>;\n\nfunction LegendComponent(args: any) {\n  // if (args.onClickLegendItem?.length === 0) {\n  //   args.onClickLegendItem = undefined;\n  // }\n  return <Legend {...args} />;\n}\n\nconst LegendTemplate: Story = {\n  render: ({ ...args }) => <LegendComponent {...args} />,\n};\n\nexport const Default: Story = {\n  ...LegendTemplate,\n};\n\nexport const OnClick: Story = {\n  ...LegendTemplate,\n  args: {\n    onClickLegendItem: (e: any) => alert(JSON.stringify(e)),\n  },\n};\n\nexport const ActiveLegend: Story = {\n  ...LegendTemplate,\n  args: {\n    activeLegend: \"Category C\",\n  },\n};\n\nexport const ManyCategories: Story = {\n  ...LegendTemplate,\n  args: {\n    categories: [\n      \"Critical\",\n      \"This is a very long category name to test an edge case\",\n      \"Category C\",\n      \"Category D\",\n      \"Critical\",\n      \"This is a very long category name to test an edge case\",\n      \"Category C\",\n      \"Category D\",\n    ],\n  },\n};\n\nexport const ManyCategoriesWithScroll: Story = {\n  ...LegendTemplate,\n  args: {\n    categories: [\n      \"Critical\",\n      \"This is a very long category name to test an edge case\",\n      \"Category C\",\n      \"Category D\",\n      \"Critical\",\n      \"This is a very long category name to test an edge case\",\n      \"Category C\",\n      \"Category D\",\n    ],\n    enableLegendSlider: true,\n  },\n};\n\nexport const MoreCategoriesThanColors: Story = {\n  ...LegendTemplate,\n  args: {\n    categories: [\n      \"Blueberry Pie\",\n      \"Electric Sheep\",\n      \"Moonlight Sonata\",\n      \"Quantum Leap\",\n      \"Crimson Clover\",\n      \"Neon Mirage\",\n      \"Solar Flare\",\n      \"Velvet Thunder\",\n      \"Silent Echo\",\n      \"Shadow Dance\",\n      \"Silver Lining\",\n      \"Golden Hour\",\n      \"Eclipse Chaser\",\n      \"Starry Night\",\n      \"Mystic Dawn\",\n      \"Enchanted Forest\",\n      \"Aurora Borealis\",\n      \"Dream Weaver\",\n      \"Celestial Harmony\",\n      \"Frosted Twilight\",\n      \"Thunderstrike\",\n      \"Lunar Eclipse\",\n      \"Galactic Voyage\",\n    ],\n  },\n};\n\nexport const CustomColors: Story = {\n  ...LegendTemplate,\n  args: {\n    colors: [\"red\", \"rose\", \"green\", \"blue\"],\n  },\n};\n\nexport const CustomColorsConClick: Story = {\n  ...LegendTemplate,\n  args: {\n    colors: [\"red\", \"rose\", \"green\", \"#32a852\"],\n    onClickLegendItem: (e) => {\n      console.log(e);\n    },\n  },\n};\n"
  },
  {
    "path": "src/stories/text-elements/Metric.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Metric } from \"components\";\nimport { BaseColors } from \"lib/constants\";\n\nconst meta: Meta<typeof Metric> = {\n  title: \"UI/Text/Metric\",\n  component: Metric,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Metric>;\n\nexport const Default: Story = {\n  args: { children: \"USD 80.000\" },\n};\n\nexport const Colors: Story = {\n  render: (args) => (\n    <>\n      <Metric {...args} />\n      {Object.values(BaseColors).map((color) => (\n        <Metric key={color} color={color} {...args} />\n      ))}\n    </>\n  ),\n  args: { children: \"USD 80.000\" },\n};\n"
  },
  {
    "path": "src/stories/text-elements/Subtitle.stories.tsx",
    "content": "import type { Meta, StoryObj } from \"@storybook/react\";\n\nimport Subtitle from \"components/text-elements/Subtitle/Subtitle\";\n\nconst meta: Meta<typeof Subtitle> = {\n  title: \"UI/Text/Subtitle\",\n  component: Subtitle,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Subtitle>;\n\nexport const Default: Story = {\n  args: {\n    children:\n      \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor lorem non est congue blandit. Praesent non lorem sodales, suscipit est sed, hendrerit dolor.\",\n  },\n};\n\nexport const Color: Story = {\n  args: {\n    children:\n      \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor lorem non est congue blandit. Praesent non lorem sodales, suscipit est sed, hendrerit dolor.\",\n    color: \"green\",\n    className: \"text-left\",\n  },\n};\n"
  },
  {
    "path": "src/stories/text-elements/Text.stories.tsx",
    "content": "import type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Text } from \"components\";\n\nconst meta: Meta<typeof Text> = {\n  title: \"UI/Text/Text\",\n  component: Text,\n  args: {\n    children:\n      \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor lorem non est congue blandit. Praesent non lorem sodales, suscipit est sed, hendrerit dolor.\",\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Text>;\n\nexport const Default: Story = {\n  args: {},\n};\n\nexport const TextCenter: Story = {\n  args: {\n    className: \"text-center\",\n  },\n};\n\nexport const TextRight: Story = {\n  args: {\n    className: \"text-right\",\n  },\n};\n\nexport const TextJustify: Story = {\n  args: {\n    className: \"text-justify\",\n  },\n};\n\nexport const Color: Story = {\n  args: {\n    color: \"green\",\n  },\n};\n"
  },
  {
    "path": "src/stories/text-elements/TextElements.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Bold, Italic, Text, Title } from \"components\";\n\nconst meta: Meta<typeof Title> = {\n  title: \"UI/Text/TextElements\",\n  component: Title,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Title>;\n\nexport const Default: Story = {\n  render: () => (\n    <Text>\n      Text with <Bold>bold text</Bold> and <Italic>Italics Text</Italic> and{\" \"}\n      <Bold>\n        <Italic>Bold italics text</Italic>\n      </Bold>\n    </Text>\n  ),\n};\n"
  },
  {
    "path": "src/stories/text-elements/Title.stories.tsx",
    "content": "import React from \"react\";\n\nimport { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Title } from \"components\";\n\nconst meta: Meta<typeof Title> = {\n  title: \"UI/Text/Title\",\n  component: Title,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Title>;\n\nexport const Default: Story = {\n  render: (args) => <Title {...args}>Title</Title>,\n};\n\nexport const Color: Story = {\n  render: (args) => <Title {...args}>Title</Title>,\n  args: {\n    color: \"green\",\n    className: \"text-left\",\n    children: null,\n  },\n};\n"
  },
  {
    "path": "src/stories/vis-elements/BarList.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { CalendarIcon } from \"assets\";\nimport { BarList } from \"components\";\nimport { BarListProps } from \"components/vis-elements/BarList/BarList\";\nimport { BaseColors } from \"lib\";\n\nconst meta: Meta<typeof BarList> = {\n  title: \"Visualizations/Vis/BarList\",\n  component: BarList,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof BarList>;\n\nconst getData = (\n  additionalProps: Array<Record<string, unknown>> = [],\n  additionalItems: BarListProps[\"data\"] = [],\n) => {\n  const basicData = [\n    { name: \"/home\", value: 10000 },\n    { name: \"/cancellation\", value: 271 },\n    { name: \"/imprint\", value: 3351 },\n    {\n      name: `/special-offer-august-getsahdkjhagskdfjhgakshjgdfkjahsgdfjkgasdjkhfgajkshgdfjkhagsdkjhfgajhksdgfjkhasdg\n          fjkhagsdjhkgfasjkdgfjkasdhgkjgfdsk`,\n      value: 191,\n    },\n    { name: \"/documentation\", value: 0 },\n  ];\n  const updatedData = additionalProps\n    ? basicData.map((value, index) => ({ ...value, ...(additionalProps[index] || {}) }))\n    : basicData;\n\n  return [...updatedData, ...additionalItems];\n};\n\nexport const Default: Story = {\n  args: {\n    data: getData(),\n    valueFormatter: (value) => `${value} USD`,\n  },\n};\n\nexport const Icon: Story = {\n  args: {\n    data: getData(Array(5).fill({ icon: CalendarIcon })),\n    valueFormatter: (value) => `${value} USD`,\n  },\n};\n\nexport const Links: Story = {\n  args: {\n    data: getData(Array(4).fill({ href: \"https://npm.tremor.so/\" })),\n    valueFormatter: (value) => `${value} USD`,\n  },\n};\n\nexport const Colors: Story = {\n  render: (args) => (\n    <div className=\"space-y-2\">\n      {Object.values(BaseColors).map((color) => (\n        <BarList key={color} {...args} color={color} />\n      ))}\n    </div>\n  ),\n  args: {\n    data: getData(Array(3).fill({ href: \"https://npm.tremor.so/\" })),\n    valueFormatter: (value) => `${value} USD`,\n    onValueChange: (data) => alert(JSON.stringify(data)),\n  },\n};\n\nexport const IndividualColors: Story = {\n  render: (args) => <BarList {...args} />,\n  args: {\n    data: getData([\"blue\", \"amber\", \"cyan\", \"emerald\", \"indigo\"].map((color) => ({ color }))),\n    valueFormatter: (value) => `${value} USD`,\n  },\n};\n\nexport const WithOnValueChange: Story = {\n  render: (args) => <BarList {...args} />,\n  args: {\n    data: getData(),\n    onValueChange: (data) => alert(JSON.stringify(data)),\n  },\n};\n\nexport const SortOrderDescending: Story = {\n  render: (args) => <BarList {...args} />,\n  args: {\n    data: getData(),\n  },\n};\n\nexport const SortOrderAscending: Story = {\n  render: (args) => <BarList {...args} />,\n  args: {\n    data: getData(),\n    sortOrder: \"ascending\",\n  },\n};\n\nexport const SortOrderNone: Story = {\n  render: (args) => <BarList {...args} />,\n  args: {\n    data: getData(),\n    sortOrder: \"none\",\n  },\n};\n"
  },
  {
    "path": "src/stories/vis-elements/CategoryBar.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport CategoryBar from \"components/vis-elements/CategoryBar/CategoryBar\";\n\nconst meta: Meta<typeof CategoryBar> = {\n  title: \"Visualizations/Vis/CategoryBar\",\n  component: CategoryBar,\n  render: (args) => <CategoryBar {...args} />,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CategoryBar>;\n\nexport const Default: Story = {\n  args: {\n    values: [60, 10, 20, 10],\n    className: \"mt-5\",\n  },\n};\n\nexport const WithMarker: Story = {\n  args: {\n    values: [20, 15, 45, 20],\n    colors: [\"emerald\", \"yellow\", \"orange\", \"rose\"],\n    markerValue: 50,\n    tooltip: \"90%\",\n    className: \"mt-5\",\n  },\n};\n\nexport const WithMarkerOnLabel: Story = {\n  args: {\n    values: [0, 50, 50],\n    colors: [\"emerald\", \"yellow\", \"orange\", \"rose\"],\n    markerValue: 50,\n    tooltip: \"90%\",\n    className: \"mt-5\",\n  },\n};\n\nexport const WithSmallStartValue: Story = {\n  args: {\n    values: [10, 25, 45, 20],\n    colors: [\"emerald\", \"yellow\", \"orange\", \"rose\"],\n    markerValue: 50,\n    tooltip: \"90%\",\n    className: \"mt-5\",\n  },\n};\n\nexport const WithCloseEndValue: Story = {\n  args: {\n    values: [10, 25, 50, 15],\n    colors: [\"emerald\", \"yellow\", \"orange\", \"rose\"],\n    markerValue: 50,\n    tooltip: \"90%\",\n    className: \"mt-5\",\n  },\n};\n\nexport const WithZeroValues: Story = {\n  args: {\n    values: [10, 25, 0, 50, 0, 15, 0],\n    colors: [\"emerald\", \"yellow\", \"orange\", \"rose\"],\n    markerValue: 50,\n    tooltip: \"90%\",\n    className: \"mt-5\",\n  },\n};\n\nexport const WithValuesMoreThan100: Story = {\n  args: {\n    values: [400, 400, 800],\n    colors: [\"emerald\", \"yellow\", \"orange\", \"rose\"],\n    markerValue: 1400,\n    tooltip: \"90%\",\n    className: \"mt-5\",\n  },\n};\n\nexport const WithValuesLessThan100: Story = {\n  args: {\n    values: [8, 7, 9, 8],\n    colors: [\"emerald\", \"yellow\", \"orange\", \"rose\"],\n    markerValue: 20,\n    tooltip: \"90%\",\n    className: \"mt-5\",\n  },\n};\n\nexport const WithConsecutiveSmallValues: Story = {\n  args: {\n    values: [10, 5, 5, 5, 5, 5, 50, 15, 0],\n    markerValue: 50,\n    tooltip: \"90%\",\n    className: \"mt-5\",\n  },\n};\n\nexport const WithNoLabelsInbetween: Story = {\n  args: {\n    values: [5, 95],\n    markerValue: 50,\n    tooltip: \"90%\",\n    className: \"mt-5\",\n  },\n};\n\nexport const WithNoLabels: Story = {\n  args: {\n    values: [5, 95],\n    markerValue: 50,\n    tooltip: \"90%\",\n    className: \"mt-5\",\n    showLabels: false,\n  },\n};\n"
  },
  {
    "path": "src/stories/vis-elements/DeltaBar.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { DeltaBar } from \"components\";\n\nconst meta: Meta<typeof DeltaBar> = {\n  title: \"Visualizations/Vis/DeltaBar\",\n  component: DeltaBar,\n  render: (args) => <DeltaBar {...args} />,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof DeltaBar>;\n\nexport const Increase: Story = {\n  args: {\n    value: 30,\n    className: \"mt-5\",\n    tooltip: \"30%\",\n  },\n};\n\nexport const Decrease: Story = {\n  args: {\n    value: -50,\n    className: \"mt-5\",\n    tooltip: \"-50%\",\n  },\n};\n\nexport const IncreaseReversed: Story = {\n  args: {\n    value: 50,\n    isIncreasePositive: false,\n    className: \"mt-5\",\n  },\n};\n"
  },
  {
    "path": "src/stories/vis-elements/MarkerBar.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport MarkerBar from \"components/vis-elements/MarkerBar/MarkerBar\";\nimport { BaseColors } from \"lib/constants\";\n\nconst meta: Meta<typeof MarkerBar> = {\n  title: \"Visualizations/Vis/MarkerBar\",\n  component: MarkerBar,\n  render: (args) => <MarkerBar {...args} />,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MarkerBar>;\n\nexport const Default: Story = {\n  args: {\n    value: 50,\n    markerTooltip: \"50%\",\n  },\n};\n\nexport const Range: Story = {\n  args: {\n    value: 50,\n    minValue: 25,\n    maxValue: 75,\n    rangeTooltip: \"Min: 25% Max: 75%\",\n    markerTooltip: \"50%\",\n  },\n};\n\nexport const MinValue0: Story = {\n  args: {\n    value: 0,\n    minValue: 0,\n    maxValue: 60,\n  },\n};\n\nexport const Colors: Story = {\n  render: (args) => (\n    <>\n      {Object.values(BaseColors).map((color) => (\n        <div key={color} className=\"mt-8\">\n          <MarkerBar {...args} color={color} />\n        </div>\n      ))}\n    </>\n  ),\n  args: {\n    value: 10,\n    minValue: 0,\n    maxValue: 60,\n    showAnimation: true,\n  },\n};\n"
  },
  {
    "path": "src/stories/vis-elements/ProgressBar.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { ProgressBar } from \"components\";\n\nimport { BaseColors } from \"lib/constants\";\n\nconst meta: Meta<typeof ProgressBar> = {\n  title: \"Visualizations/Vis/ProgressBar\",\n  component: ProgressBar,\n  render: (args) => <ProgressBar {...args} />,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ProgressBar>;\n\nexport const Default: Story = {\n  args: {\n    showAnimation: true,\n    value: 50,\n    tooltip: \"50%\",\n    label: \"90%\",\n  },\n};\n\nexport const Value0: Story = {\n  args: {\n    value: 0,\n  },\n};\n\nexport const Colors: Story = {\n  render: (args) => (\n    <div>\n      {Object.values(BaseColors).map((color) => (\n        <ProgressBar key={color} {...args} color={color} className=\"mt-8\" />\n      ))}\n    </div>\n  ),\n  args: {\n    value: 50,\n    tooltip: \"50%\",\n  },\n};\n"
  },
  {
    "path": "src/stories/vis-elements/ProgressCircle.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ProgressCircle } from \"components\";\nimport { BaseColors, Sizes } from \"lib/constants\";\n\nconst meta: Meta<typeof ProgressCircle> = {\n  title: \"Visualizations/Vis/ProgressCircle\",\n  component: ProgressCircle,\n  render: (args) => <ProgressCircle {...args} />,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ProgressCircle>;\n\nfunction formatNumber(num: number) {\n  return num.toFixed(2);\n}\n\nconst ColorsTemplate: Story = {\n  render: (args) => (\n    <div>\n      {Object.values(BaseColors).map((color) => (\n        <ProgressCircle key={color} {...args} color={color} />\n      ))}\n    </div>\n  ),\n};\n\nconst SizesTemplate: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-y-5\">\n      {Object.values(Sizes).map((size) => (\n        <ProgressCircle key={size} {...args} size={size} />\n      ))}\n    </div>\n  ),\n};\n\nexport const Default: Story = {\n  args: {\n    value: 55,\n  },\n};\n\nexport const Colors: Story = {\n  ...ColorsTemplate,\n  args: {\n    value: 42,\n  },\n};\n\nexport const differentSizes: Story = {\n  ...SizesTemplate,\n  args: {\n    value: 86,\n  },\n};\n\nexport const withoutAnimation: Story = {\n  args: {\n    value: 56,\n    showAnimation: false,\n  },\n};\n\nexport const withChildrenSpan: Story = {\n  ...SizesTemplate,\n  args: {\n    value: 56,\n    showAnimation: false,\n    children: <span className=\"dark:text-white font-medium font-mono text-sm\">56.3</span>,\n  },\n};\n\nexport const withChildrenAvatar: Story = {\n  args: {\n    value: 76,\n    children: (\n      <div className=\"rounded-full flex items-center justify-center h-12 w-12 bg-gray-100\">\n        <span className=\"text-sm font-medium text-gray-500\">JD</span>\n      </div>\n    ),\n  },\n};\n\nexport const NoArgs: Story = {\n  args: {},\n};\n\nexport const Value0: Story = {\n  args: { value: 0 },\n};\n\nexport const Value100: Story = {\n  args: { value: 100 },\n};\n\nexport const ValueDecimal: Story = {\n  args: { value: 45.37283 },\n};\n\nexport const ChildrenWithFormatterAndClassName: Story = {\n  args: { value: 45.37283, className: \"text-xs text-blue-600\", children: formatNumber(45.37283) },\n};\n\nexport const ValueLargerThan100: Story = {\n  args: { value: 110, children: 110 },\n};\n\nexport const Tooltip: Story = {\n  args: { value: 110, children: 110, tooltip: \"100\" },\n};\n"
  },
  {
    "path": "src/stories/vis-elements/Tracker.stories.tsx",
    "content": "import React from \"react\";\n\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Card, Tracker } from \"components\";\nimport { TrackerBlockProps } from \"components/vis-elements/Tracker/Tracker\";\n\nconst data: TrackerBlockProps[] = [\n  { color: \"emerald\", tooltip: \"Tracker Info asjdfh sk as df sdjfhksadfhjjh asdjfhsk fsk\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"red\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"red\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info  asjdfh sk as df sdjfhksadfhjjh asdjfhsk fsk\" },\n  { color: \"yellow\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"yellow\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"red\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n  { color: \"emerald\", tooltip: \"Tracker Info\" },\n];\n\nconst meta: Meta<typeof Tracker> = {\n  title: \"Visualizations/Vis/Tracker\",\n  component: Tracker,\n  args: {\n    data: data,\n  },\n  render: (args) => <Tracker {...args} />,\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tracker>;\n\nexport const Default: Story = {};\n\nexport const MaxWidthMd: Story = {\n  render: () => (\n    <Card className=\"max-w-md\">\n      <Tracker data={data.slice(60, 90)} className=\"mt-3\" />\n    </Card>\n  ),\n};\n\nexport const MaxWidthXs: Story = {\n  render: () => (\n    <Card className=\"max-w-xs\">\n      <Tracker data={data.slice(60, 90)} className=\"mt-3\" />\n    </Card>\n  ),\n};\n\nexport const CustomColors: Story = {\n  args: {\n    data: [\n      { color: \"#32a852\", tooltip: \"Tracker Info\" },\n      { color: \"#fcba03\", tooltip: \"Tracker Info\" },\n      { color: \"orange-500\", tooltip: \"Tracker Info\" },\n      { color: \"purple-100\", tooltip: \"Tracker Info\" },\n      { color: \"purple-300\", tooltip: \"Tracker Info\" },\n      { color: \"purple-500\", tooltip: \"Tracker Info\" },\n      { color: \"purple-700\", tooltip: \"Tracker Info\" },\n      { color: \"purple-900\", tooltip: \"Tracker Info\" },\n    ],\n  },\n};\n"
  },
  {
    "path": "src/styles.css",
    "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n/* Do not any styles here. Use Tailwnd arbitrary properties */\n"
  },
  {
    "path": "src/tests/chart-elements/AreaChart.test.tsx",
    "content": "import React from \"react\";\nimport { render } from \"@testing-library/react\";\nimport AreaChart from \"components/chart-elements/AreaChart/AreaChart\";\n\ndescribe(\"AreaChart\", () => {\n  beforeAll(() => {\n    global.ResizeObserver = class MockedResizeObserver {\n      observe = jest.fn();\n      unobserve = jest.fn();\n      disconnect = jest.fn();\n    };\n    const mockChildMethod = jest.fn();\n    jest.spyOn(React, \"useRef\").mockReturnValue({\n      current: {\n        childMethod: mockChildMethod,\n      },\n    });\n  });\n  afterAll(() => {\n    jest.restoreAllMocks();\n  });\n  it(\"renders the chart with data\", () => {\n    const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;\n    const data = [\n      { name: \"A\", value: 10 },\n      { name: \"B\", value: 20 },\n      { name: \"C\", value: 30 },\n    ];\n    const { container } = render(\n      <AreaChart data={data} categories={[\"A\", \"B\", \"C\"]} index=\"name\" ref={ref} />,\n    );\n    expect(container.getElementsByClassName(\"w-full h-80\").length).toBe(1);\n  });\n\n  it(\"renders the chart without gradient\", () => {\n    const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;\n    const data = [\n      { name: \"A\", value: 10 },\n      { name: \"B\", value: 20 },\n      { name: \"C\", value: 30 },\n    ];\n    const { container } = render(\n      <AreaChart\n        data={data}\n        categories={[\"A\", \"B\", \"C\"]}\n        index=\"name\"\n        showGradient={false}\n        ref={ref}\n      />,\n    );\n    expect(container.getElementsByClassName(\"w-full h-80\").length).toBe(1);\n  });\n\n  it(\"renders the chart with custom colors\", () => {\n    const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;\n    const data = [\n      { name: \"A\", value: 10 },\n      { name: \"B\", value: 20 },\n      { name: \"C\", value: 30 },\n    ];\n    const { container } = render(\n      <AreaChart\n        data={data}\n        categories={[\"A\", \"B\", \"C\"]}\n        index=\"name\"\n        colors={[\"#ff0000\", \"#00ff00\", \"#0000ff\"]}\n        ref={ref}\n      />,\n    );\n    expect(container.getElementsByClassName(\"w-full h-80\").length).toBe(1);\n  });\n\n  it(\"renders the chart with custom curve type\", () => {\n    const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;\n    const data = [\n      { name: \"A\", value: 10 },\n      { name: \"B\", value: 20 },\n      { name: \"C\", value: 30 },\n    ];\n    const { container } = render(\n      <AreaChart\n        data={data}\n        categories={[\"A\", \"B\", \"C\"]}\n        index=\"name\"\n        curveType=\"monotone\"\n        ref={ref}\n      />,\n    );\n    expect(container.getElementsByClassName(\"w-full h-80\").length).toBe(1);\n  });\n\n  it(\"renders the chart with connectNulls\", () => {\n    const data = [\n      { name: \"A\", value: 10 },\n      { name: \"B\", value: null },\n      { name: \"C\", value: 30 },\n    ];\n    const { container } = render(\n      <AreaChart data={data} categories={[\"A\", \"B\", \"C\"]} index=\"name\" connectNulls />,\n    );\n    expect(container.getElementsByClassName(\"w-full h-80\").length).toBe(1);\n  });\n\n  it(\"renders the chart with no data\", () => {\n    const { getByText } = render(<AreaChart data={[]} categories={[]} index=\"name\" />);\n    expect(getByText(\"No data\")).toBeDefined();\n  });\n});\n"
  },
  {
    "path": "src/tests/chart-elements/BarChart.test.tsx",
    "content": "import React from \"react\";\nimport { render } from \"@testing-library/react\";\nimport BarChart from \"components/chart-elements/BarChart/BarChart\";\n\ndescribe(\"BarChart\", () => {\n  beforeAll(() => {\n    global.ResizeObserver = class MockedResizeObserver {\n      observe = jest.fn();\n      unobserve = jest.fn();\n      disconnect = jest.fn();\n    };\n    const mockChildMethod = jest.fn();\n    jest.spyOn(React, \"useRef\").mockReturnValue({\n      current: {\n        childMethod: mockChildMethod,\n      },\n    });\n  });\n  afterAll(() => {\n    jest.restoreAllMocks();\n  });\n  it(\"renders the chart with data\", () => {\n    const data = [\n      { name: \"A\", value: 10 },\n      { name: \"B\", value: 20 },\n      { name: \"C\", value: 30 },\n    ];\n    const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;\n    render(<BarChart data={data} categories={[\"A\", \"B\", \"C\"]} index=\"name\" ref={ref} />);\n  });\n\n  it(\"renders the chart with no data\", () => {\n    const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;\n    const { getByText } = render(<BarChart data={[]} categories={[]} index=\"name\" ref={ref} />);\n    expect(getByText(\"No data\")).toBeDefined();\n  });\n});\n"
  },
  {
    "path": "src/tests/icon-elements/Badge.test.tsx",
    "content": "/* eslint-disable no-undef */\nimport { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport Badge from \"components/icon-elements/Badge/Badge\";\n\ndescribe(\"Badge\", () => {\n  test(\"renders the Badge component with default props\", () => {\n    render(<Badge>Badge</Badge>);\n  });\n});\n"
  },
  {
    "path": "src/tests/icon-elements/BadgeDelta.test.tsx",
    "content": "/* eslint-disable no-undef */\nimport { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport BadgeDelta from \"components/icon-elements/BadgeDelta/BadgeDelta\";\n\ndescribe(\"BadgeDelta\", () => {\n  test(\"renders the BadgeDelta component with default props\", () => {\n    render(<BadgeDelta deltaType={\"increase\"} />);\n  });\n});\n"
  },
  {
    "path": "src/tests/icon-elements/Icon.test.tsx",
    "content": "/* eslint-disable no-undef */\nimport { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport ArrowUpIcon from \"assets/ArrowUpIcon\";\n\nimport Icon from \"components/icon-elements/Icon/Icon\";\n\ndescribe(\"Icon\", () => {\n  test(\"renders the Icon component with default props\", () => {\n    render(<Icon icon={ArrowUpIcon} />);\n  });\n});\n"
  },
  {
    "path": "src/tests/input-elements/Button.test.tsx",
    "content": "/* eslint-disable no-undef */\nimport { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport Button from \"components/input-elements/Button/Button\";\n\ndescribe(\"Button\", () => {\n  test(\"renders the Button component with default props\", () => {\n    render(<Button>Button</Button>);\n  });\n});\n"
  },
  {
    "path": "src/tests/input-elements/DatePicker.test.tsx",
    "content": "import { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport DatePicker from \"components/input-elements/DatePicker/DatePicker\";\n\ndescribe(\"DatePicker\", () => {\n  test(\"renders the DatePicker component with default props\", () => {\n    render(<DatePicker />);\n  });\n});\n"
  },
  {
    "path": "src/tests/input-elements/DateRangePicker.test.tsx",
    "content": "import { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport DateRangePicker from \"components/input-elements/DateRangePicker/DateRangePicker\";\nimport DateRangePickerItem from \"components/input-elements/DateRangePicker/DateRangePickerItem\";\n\ndescribe(\"DateRangePicker\", () => {\n  test(\"renders the DateRangePicker component with default props\", () => {\n    render(\n      <DateRangePicker>\n        <DateRangePickerItem key=\"one\" value=\"one\" from={new Date(2023, 0, 1)}>\n          2023/1/1 - Today\n        </DateRangePickerItem>\n        <DateRangePickerItem\n          key=\"two\"\n          value=\"two\"\n          from={new Date(2023, 0, 1)}\n          to={new Date(2023, 4, 1)}\n        >\n          2023/1/1 - 2023/5/1\n        </DateRangePickerItem>\n      </DateRangePicker>,\n    );\n  });\n});\n"
  },
  {
    "path": "src/tests/input-elements/MultiSelect.test.tsx",
    "content": "import { fireEvent, render, screen } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport MultiSelect from \"components/input-elements/MultiSelect/MultiSelect\";\nimport MultiSelectItem from \"components/input-elements/MultiSelect/MultiSelectItem\";\n\ndescribe(\"MultiSelect\", () => {\n  test(\"renders the MultiSelect component with default props\", () => {\n    render(\n      <MultiSelect>\n        <MultiSelectItem value=\"1\" />\n        <MultiSelectItem value=\"2\">Option Two</MultiSelectItem>\n        <MultiSelectItem value=\"3\">Option Three</MultiSelectItem>\n      </MultiSelect>,\n    );\n  });\n\n  test(\"renders the MultiSelect component with static and dynamic children\", () => {\n    const placeholder = \"Select options...\";\n    const items = [\"item1\", \"item2\"];\n    render(\n      <MultiSelect data-testid=\"first-select\" placeholder={placeholder}>\n        <MultiSelectItem value=\"item0\">item0</MultiSelectItem>\n        {items.map((item) => {\n          return <MultiSelectItem value={item} key={item} />;\n        })}\n      </MultiSelect>,\n    );\n\n    fireEvent.click(screen.getByTestId(\"first-select\"));\n\n    expect(screen.queryAllByText(\"item0\")).toBeTruthy();\n    expect(screen.queryAllByText(\"item1\")).toBeTruthy();\n    expect(screen.queryAllByText(\"item2\")).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "src/tests/input-elements/NumberInput.test.tsx",
    "content": "import { fireEvent, render, screen } from \"@testing-library/react\";\nimport { NumberInput } from \"components\";\nimport React from \"react\";\n\ndescribe(\"NumberInput\", () => {\n  test(\"renders the NumberInput component with default props\", () => {\n    const { container } = render(<NumberInput defaultValue=\"123\" />);\n    expect(container.querySelector('[data-testid=\"base-input\"]')?.getAttribute(\"type\")).toBe(\n      \"number\",\n    );\n  });\n  test(\"can only type numbers\", () => {\n    render(<NumberInput defaultValue=\"\" />);\n    const inputEl: HTMLInputElement = screen.getByTestId(\"base-input\");\n    fireEvent.change(inputEl, { target: { value: \"Test\" } });\n    expect(inputEl.value).toBe(\"\");\n  });\n\n  test(\".1 step attribute\", () => {\n    render(<NumberInput defaultValue=\"2\" step=\".1\" />);\n    const inputEl: HTMLInputElement = screen.getByTestId(\"base-input\");\n    expect(inputEl.value).toBe(\"2\");\n    const stepUp = screen.getByTestId(\"step-up\");\n    fireEvent.mouseUp(stepUp);\n    expect(inputEl.value).toBe(\"2.1\");\n  });\n\n  test(\"min/max attribute\", () => {\n    render(<NumberInput defaultValue=\"1\" min=\"1\" max=\"2\" />);\n    const inputEl: HTMLInputElement = screen.getByTestId(\"base-input\");\n    const stepUp = screen.getByTestId(\"step-up\");\n    const stepDown = screen.getByTestId(\"step-down\");\n    fireEvent.mouseUp(stepDown);\n    expect(inputEl.value).toBe(\"1\");\n    fireEvent.mouseUp(stepUp);\n    fireEvent.mouseUp(stepUp);\n    expect(inputEl.value).toBe(\"2\");\n  });\n});\n"
  },
  {
    "path": "src/tests/input-elements/SearchSelect.test.tsx",
    "content": "import { fireEvent, render, screen } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport SearchSelect from \"components/input-elements/SearchSelect/SearchSelect\";\nimport SearchSelectItem from \"components/input-elements/SearchSelect/SearchSelectItem\";\n\ndescribe(\"SearchSelect\", () => {\n  test(\"renders the SearchSelect component with default props\", () => {\n    render(\n      <SearchSelect>\n        <SearchSelectItem value=\"1\" />\n        <SearchSelectItem value=\"2\">Option Two</SearchSelectItem>\n        <SearchSelectItem value=\"3\">Option Three</SearchSelectItem>\n      </SearchSelect>,\n    );\n  });\n\n  test(\"renders the SelectBox component with static and dynamic children\", () => {\n    const placeholder = \"Select options...\";\n    const items = [\"item1\", \"item2\"];\n    render(\n      <SearchSelect data-testid=\"first-select\" placeholder={placeholder}>\n        <SearchSelectItem value=\"item0\">item0</SearchSelectItem>\n        {items.map((item) => {\n          return <SearchSelectItem value={item} key={item} />;\n        })}\n      </SearchSelect>,\n    );\n\n    fireEvent.click(screen.getByTestId(\"first-select\"));\n\n    expect(screen.queryAllByText(\"item0\")).toBeTruthy();\n    expect(screen.queryAllByText(\"item1\")).toBeTruthy();\n    expect(screen.queryAllByText(\"item2\")).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "src/tests/input-elements/Select.test.tsx",
    "content": "import { fireEvent, render, screen } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport Select from \"components/input-elements/Select/Select\";\nimport SelectItem from \"components/input-elements/Select/SelectItem\";\n\ndescribe(\"Select\", () => {\n  test(\"renders the Select component with default props\", () => {\n    render(\n      <Select>\n        <SelectItem value={\"5\"} />\n        <SelectItem value={\"3\"}>Three</SelectItem>\n        <SelectItem value={\"1\"}>One</SelectItem>\n      </Select>,\n    );\n  });\n\n  test(\"renders the Select component with static and dynamic children\", () => {\n    const placeholder = \"Select options...\";\n    const items = [\"item1\", \"item2\"];\n    render(\n      <Select data-testid=\"first-select\" placeholder={placeholder}>\n        <SelectItem value=\"item0\">item0</SelectItem>\n        {items.map((item) => {\n          return <SelectItem value={item} key={item} />;\n        })}\n      </Select>,\n    );\n\n    fireEvent.click(screen.getByTestId(\"first-select\"));\n\n    expect(screen.queryAllByText(\"item0\")).toBeTruthy();\n    expect(screen.queryAllByText(\"item1\")).toBeTruthy();\n    expect(screen.queryAllByText(\"item2\")).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "src/tests/input-elements/Switch.text.tsx",
    "content": "/* eslint-disable no-undef */\nimport { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport Switch from \"components/input-elements/Switch/Switch\";\n\ndescribe(\"Switch\", () => {\n  test(\"renders the Switch component with default props\", () => {\n    render(<Switch />);\n  });\n});\n"
  },
  {
    "path": "src/tests/input-elements/Tabs.test.tsx",
    "content": "import { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport Tab from \"components/input-elements/Tabs/Tab\";\nimport TabGroup from \"components/input-elements/Tabs/TabGroup\";\nimport TabList from \"components/input-elements/Tabs/TabList\";\nimport TabPanel from \"components/input-elements/Tabs/TabPanel\";\nimport TabPanels from \"components/input-elements/Tabs/TabPanels\";\n\ndescribe(\"SelectBox\", () => {\n  test(\"renders the SelectBox component with default props\", () => {\n    render(\n      <TabGroup>\n        <TabList>\n          <Tab>Option One</Tab>\n          <Tab>Option Two</Tab>\n          <Tab>Option Three</Tab>\n        </TabList>\n        <TabPanels>\n          <TabPanel>Hello World 1</TabPanel>\n          <TabPanel>Hello World 2</TabPanel>\n          <TabPanel>Hello World 3</TabPanel>\n        </TabPanels>\n      </TabGroup>,\n    );\n  });\n});\n"
  },
  {
    "path": "src/tests/input-elements/TextInput.test.tsx",
    "content": "import { render } from \"@testing-library/react\";\nimport { TextInput } from \"components\";\nimport React from \"react\";\n\ndescribe(\"TextInput\", () => {\n  test(\"renders the TextInput component with text type\", () => {\n    render(<TextInput type=\"text\" defaultValue=\"Test\" />);\n  });\n\n  test(\"renders the TextInput component with password type\", () => {\n    render(<TextInput type=\"password\" defaultValue=\"Test\" />);\n  });\n\n  test(\"renders the TextInput component with email type\", () => {\n    render(<TextInput type=\"email\" defaultValue=\"Test\" />);\n  });\n\n  test(\"renders the TextInput component with url type\", () => {\n    render(<TextInput type=\"url\" defaultValue=\"Test\" />);\n  });\n\n  test(\"renders the TextInput component with tel type\", () => {\n    render(<TextInput type=\"tel\" defaultValue=\"Test\" />);\n  });\n});\n"
  },
  {
    "path": "src/tests/input-elements/Textarea.test.tsx",
    "content": "import { render } from \"@testing-library/react\";\nimport { Textarea } from \"components\";\nimport React from \"react\";\n\ndescribe(\"Texarea\", () => {\n  test(\"renders the Texarea component with default props\", () => {\n    render(\n      <Textarea defaultValue=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor lorem non est congue blandit. Praesent non lorem sodales, suscipit est sed, hendrerit dolor.\" />,\n    );\n  });\n});\n"
  },
  {
    "path": "src/tests/layout-elements/Accordion.test.tsx",
    "content": "import { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport Accordion from \"components/layout-elements/Accordion/Accordion\";\nimport AccordionBody from \"components/layout-elements/Accordion/AccordionBody\";\nimport AccordionHeader from \"components/layout-elements/Accordion/AccordionHeader\";\n\ndescribe(\"Accordion\", () => {\n  test(\"renders the Accordion component with default props\", () => {\n    render(\n      <Accordion>\n        <AccordionHeader>\n          <div>Hello</div>\n        </AccordionHeader>\n        <AccordionBody>\n          <div>World</div>\n        </AccordionBody>\n      </Accordion>,\n    );\n  });\n});\n"
  },
  {
    "path": "src/tests/layout-elements/AccordionList.test.tsx",
    "content": "import { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport Accordion from \"components/layout-elements/Accordion/Accordion\";\nimport AccordionBody from \"components/layout-elements/Accordion/AccordionBody\";\nimport AccordionHeader from \"components/layout-elements/Accordion/AccordionHeader\";\nimport AccordionList from \"components/layout-elements/Accordion/AccordionList\";\n\ndescribe(\"AccordionList\", () => {\n  test(\"renders the AccordionList component with default props\", () => {\n    render(\n      <AccordionList>\n        <Accordion>\n          <AccordionHeader>Hello</AccordionHeader>\n          <AccordionBody>World</AccordionBody>\n        </Accordion>\n        <Accordion>\n          <AccordionHeader>Hello</AccordionHeader>\n          <AccordionBody>World</AccordionBody>\n        </Accordion>\n        <Accordion>\n          <AccordionHeader>Hello</AccordionHeader>\n          <AccordionBody>World</AccordionBody>\n        </Accordion>\n      </AccordionList>,\n    );\n  });\n});\n"
  },
  {
    "path": "src/tests/layout-elements/Card.test.tsx",
    "content": "import { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport Card from \"components/layout-elements/Card/Card\";\n\ndescribe(\"Card\", () => {\n  test(\"renders the Card component with default props\", () => {\n    render(\n      <Card>\n        <div>Hello</div>\n      </Card>,\n    );\n  });\n});\n"
  },
  {
    "path": "src/tests/layout-elements/Dialog.test.tsx",
    "content": "import React from \"react\";\nimport { act, render } from \"@testing-library/react\";\n\nimport { Dialog, DialogPanel } from \"components\";\n\ndescribe(\"Dialog\", () => {\n  test(\"renders the Dialog component\", async () => {\n    const { findByText } = render(\n      <Dialog open={true} onClose={() => {}} static={true}>\n        <DialogPanel>Test</DialogPanel>\n      </Dialog>,\n    );\n    await act(async () => {\n      await new Promise((resolve) => setTimeout(resolve, 300));\n    });\n    const message = await findByText(\"Test\");\n    expect(message.textContent).toBe(\"Test\");\n  });\n});\n"
  },
  {
    "path": "src/tests/layout-elements/Divider.test.tsx",
    "content": "import { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport Divider from \"components/layout-elements/Divider/Divider\";\n\ndescribe(\"Divider\", () => {\n  test(\"renders the Divider component with default props\", () => {\n    render(<Divider />);\n  });\n});\n"
  },
  {
    "path": "src/tests/layout-elements/Flex.test.tsx",
    "content": "import { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport Flex from \"components/layout-elements/Flex/Flex\";\n\ndescribe(\"Flex\", () => {\n  test(\"renders the Flex component with default props\", () => {\n    render(\n      <Flex>\n        <div>Hello</div>\n        <div>World</div>\n      </Flex>,\n    );\n  });\n});\n"
  },
  {
    "path": "src/tests/layout-elements/Grid.test.tsx",
    "content": "import { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport Card from \"components/layout-elements/Card/Card\";\nimport Col from \"components/layout-elements/Grid/Col\";\nimport Grid from \"components/layout-elements/Grid/Grid\";\n\ndescribe(\"Grid\", () => {\n  test(\"renders the Grid component with default props\", () => {\n    render(\n      <Grid>\n        <Col numColSpan={2}>\n          <Card>\n            <div className=\"h-44\" />\n          </Card>\n        </Col>\n        <Card>\n          <div className=\"h-44\" />\n        </Card>\n        <Col>\n          <Card>\n            <div className=\"h-44\" />\n          </Card>\n        </Col>\n        <Card>\n          <div className=\"h-44\" />\n        </Card>\n        <Card>\n          <div className=\"h-44\" />\n        </Card>\n      </Grid>,\n    );\n  });\n});\n"
  },
  {
    "path": "src/tests/list-elements/List.test.tsx",
    "content": "import { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport List from \"components/list-elements/List/List\";\nimport ListItem from \"components/list-elements/List/ListItem\";\n\ndescribe(\"List\", () => {\n  test(\"renders the List component with default props\", () => {\n    render(\n      <List>\n        <ListItem>\n          <div>Hello</div>\n          <div>World</div>\n        </ListItem>\n        <ListItem>\n          <div>Hello</div>\n          <div>World</div>\n        </ListItem>\n      </List>,\n    );\n  });\n});\n"
  },
  {
    "path": "src/tests/list-elements/Table.test.tsx",
    "content": "import { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport Table from \"components/list-elements/Table/Table\";\nimport TableBody from \"components/list-elements/Table/TableBody\";\nimport TableCell from \"components/list-elements/Table/TableCell\";\nimport TableHead from \"components/list-elements/Table/TableHead\";\nimport TableHeaderCell from \"components/list-elements/Table/TableHeaderCell\";\nimport TableRow from \"components/list-elements/Table/TableRow\";\n\ndescribe(\"List\", () => {\n  test(\"renders the List component with default props\", () => {\n    render(\n      <Table>\n        <TableHead>\n          <TableRow>\n            <TableHeaderCell>Name</TableHeaderCell>\n            <TableHeaderCell>Sales ($)</TableHeaderCell>\n            <TableHeaderCell>Region</TableHeaderCell>\n            <TableHeaderCell>Working Hours (h)</TableHeaderCell>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          <TableRow>\n            <TableCell>Peter Doe</TableCell>\n            <TableCell>1.000.000</TableCell>\n            <TableCell>Region A</TableCell>\n            <TableCell>211</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell>Peter Doe</TableCell>\n            <TableCell>1.000.000</TableCell>\n            <TableCell>Region A</TableCell>\n            <TableCell>211</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>,\n    );\n  });\n});\n"
  },
  {
    "path": "src/tests/spark-elements/SparkAreaChart.test.tsx",
    "content": "import React from \"react\";\nimport { render } from \"@testing-library/react\";\nimport AreaChart from \"components/spark-elements/SparkAreaChart/SparkAreaChart\";\n\ndescribe(\"AreaChart\", () => {\n  beforeAll(() => {\n    global.ResizeObserver = class MockedResizeObserver {\n      observe = jest.fn();\n      unobserve = jest.fn();\n      disconnect = jest.fn();\n    };\n    const mockChildMethod = jest.fn();\n    jest.spyOn(React, \"useRef\").mockReturnValue({\n      current: {\n        childMethod: mockChildMethod,\n      },\n    });\n  });\n  afterAll(() => {\n    jest.restoreAllMocks();\n  });\n  it(\"renders the chart with data\", () => {\n    const data = [\n      { name: \"A\", value: 10 },\n      { name: \"B\", value: 20 },\n      { name: \"C\", value: 30 },\n    ];\n    const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;\n    const { container } = render(\n      <AreaChart\n        data={data}\n        className=\"test\"\n        categories={[\"A\", \"B\", \"C\"]}\n        index=\"name\"\n        ref={ref}\n      />,\n    );\n    expect(container.getElementsByClassName(\"w-28 h-12 test\").length).toBe(1);\n  });\n\n  it(\"renders the chart without gradient\", () => {\n    const data = [\n      { name: \"A\", value: 10 },\n      { name: \"B\", value: 20 },\n      { name: \"C\", value: 30 },\n    ];\n    const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;\n    const { container } = render(\n      <AreaChart\n        data={data}\n        categories={[\"A\", \"B\", \"C\"]}\n        index=\"name\"\n        className=\"test\"\n        showGradient={false}\n        ref={ref}\n      />,\n    );\n    expect(container.getElementsByClassName(\"w-28 h-12 test\").length).toBe(1);\n  });\n\n  it(\"renders the chart with custom colors\", () => {\n    const data = [\n      { name: \"A\", value: 10 },\n      { name: \"B\", value: 20 },\n      { name: \"C\", value: 30 },\n    ];\n    const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;\n    const { container } = render(\n      <AreaChart\n        data={data}\n        categories={[\"A\", \"B\", \"C\"]}\n        index=\"name\"\n        className=\"test\"\n        colors={[\"#ff0000\", \"#00ff00\", \"#0000ff\"]}\n        ref={ref}\n      />,\n    );\n    expect(container.getElementsByClassName(\"w-28 h-12 test\").length).toBe(1);\n  });\n\n  it(\"renders the chart with custom curve type\", () => {\n    const data = [\n      { name: \"A\", value: 10 },\n      { name: \"B\", value: 20 },\n      { name: \"C\", value: 30 },\n    ];\n    const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;\n    const { container } = render(\n      <AreaChart\n        data={data}\n        categories={[\"A\", \"B\", \"C\"]}\n        index=\"name\"\n        className=\"test\"\n        curveType=\"monotone\"\n        ref={ref}\n      />,\n    );\n    expect(container.getElementsByClassName(\"w-28 h-12 test\").length).toBe(1);\n  });\n\n  it(\"renders the chart with connectNulls\", () => {\n    const data = [\n      { name: \"A\", value: 10 },\n      { name: \"B\", value: null },\n      { name: \"C\", value: 30 },\n    ];\n    const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;\n    const { container } = render(\n      <AreaChart\n        data={data}\n        categories={[\"A\", \"B\", \"C\"]}\n        index=\"name\"\n        className=\"test\"\n        connectNulls\n        ref={ref}\n      />,\n    );\n    expect(container.getElementsByClassName(\"w-28 h-12 test\").length).toBe(1);\n  });\n\n  it(\"renders the chart with no data\", () => {\n    const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;\n    const { getByText } = render(<AreaChart data={[]} categories={[]} index=\"name\" ref={ref} />);\n    expect(getByText(\"No data\")).toBeDefined();\n  });\n});\n"
  },
  {
    "path": "src/tests/text-elements/Callout.test.tsx",
    "content": "import { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport Callout from \"components/text-elements/Callout/Callout\";\n\ndescribe(\"Callout\", () => {\n  test(\"renders the Callout component with default props\", () => {\n    render(\n      <Callout title=\"Performance Metric\">\n        You are outranking 83% of the sales representatives in your cohort. Sit repellendus qui ut\n        at blanditis et quo et molestiae. Doloribus dolores nostrum quia qui natus officia quod et\n        dolorem. Sit repellendus qui ut at blanditiis et quo et molestiae\n      </Callout>,\n    );\n  });\n});\n"
  },
  {
    "path": "src/tests/text-elements/Legend.test.tsx",
    "content": "import { fireEvent, render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport Legend from \"components/text-elements/Legend/Legend\";\n\ndescribe(\"Legend\", () => {\n  test(\"renders the Legend component with default props\", () => {\n    render(<Legend categories={[\"Category A\", \"Category B\", \"Category C\", \"Category D\"]} />);\n  });\n  it(\"renders the correct legend items\", () => {\n    const { getByText } = render(\n      <Legend categories={[\"Category A\", \"Category B\", \"Category C\", \"Category D\"]} />,\n    );\n    expect(getByText(\"Category A\")).toBeDefined();\n    expect(getByText(\"Category B\")).toBeDefined();\n    expect(getByText(\"Category C\")).toBeDefined();\n    expect(getByText(\"Category D\")).toBeDefined();\n  });\n  it(\"clicks a category item\", () => {\n    const { getByText } = render(<Legend categories={[\"Category A\"]} />);\n    fireEvent.click(getByText(\"Category A\"));\n  });\n  it(\"tests the keydown handler\", () => {\n    render(<Legend categories={[\"Category A\"]} enableLegendSlider={true} />);\n    const event = new KeyboardEvent(\"keydown\", { key: \"ArrowLeft\" });\n    document.dispatchEvent(event);\n  });\n});\n"
  },
  {
    "path": "src/tests/text-elements/Metric.test.tsx",
    "content": "import { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport Metric from \"components/text-elements/Metric/Metric\";\n\ndescribe(\"Metric\", () => {\n  test(\"renders the Metric component with default props\", () => {\n    render(<Metric>USD 70,000.00</Metric>);\n  });\n});\n"
  },
  {
    "path": "src/tests/text-elements/Subtitle.test.tsx",
    "content": "import { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport Subtitle from \"components/text-elements/Subtitle/Subtitle\";\n\ndescribe(\"Subtitle\", () => {\n  test(\"renders the Subtitle component with default props\", () => {\n    render(<Subtitle>Subtitle</Subtitle>);\n  });\n});\n"
  },
  {
    "path": "src/tests/text-elements/Text.test.tsx",
    "content": "import { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport Text from \"components/text-elements/Text/Text\";\n\ndescribe(\"Text\", () => {\n  test(\"renders the Text component with default props\", () => {\n    render(\n      <Text>\n        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has\n        been the industry&apos;s standard dummy text ever since the 900s, when an unknown printer\n        took a galley of type and scrambled it to make a type specimen book.\n      </Text>,\n    );\n  });\n});\n"
  },
  {
    "path": "src/tests/text-elements/Title.test.tsx",
    "content": "import { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport Title from \"components/text-elements/Title/Title\";\n\ndescribe(\"Title\", () => {\n  test(\"renders the Title component with default props\", () => {\n    render(<Title>Subtitle</Title>);\n  });\n});\n"
  },
  {
    "path": "src/tests/vis-elements/BarList.test.tsx",
    "content": "/* eslint-disable no-undef */\nimport { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport BarList from \"components/vis-elements/BarList/BarList\";\n\ndescribe(\"BarList\", () => {\n  test(\"renders the BarList component with default props\", () => {\n    render(\n      <BarList\n        data={[\n          { name: \"/home\", value: 100000000 },\n          { name: \"/imprint\", value: 351 },\n          { name: \"/cancellation\", value: 271 },\n          {\n            name: `/special-offer-august-getsahdkjhagskdfjhgakshjgdfkjahsgdfjkgasdjkhfgajkshgdfjkhagsdkjhfgajh\n                        ksdgfjkhasdgfjkhagsdjhkgfasjkdgfjkasdhgkjgfdsk`,\n            value: 191,\n          },\n          { name: \"/documentation\", value: 91 },\n        ]}\n      />,\n    );\n  });\n});\n"
  },
  {
    "path": "src/tests/vis-elements/CategoryBar.test.tsx",
    "content": "/* eslint-disable no-undef */\nimport { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport CategoryBar from \"components/vis-elements/CategoryBar/CategoryBar\";\n\ndescribe(\"CategoryBar\", () => {\n  test(\"renders the CategoryBar component with default props\", () => {\n    render(<CategoryBar values={[10, 25, 45, 20]} />);\n  });\n  test(\"renders the CategoryBar component with values more than 100\", () => {\n    render(<CategoryBar values={[400, 400, 800]} />);\n  });\n  test(\"renders the CategoryBar component with values less than 100\", () => {\n    render(<CategoryBar values={[8, 7, 9, 8]} />);\n  });\n});\n"
  },
  {
    "path": "src/tests/vis-elements/DeltaBar.test.tsx",
    "content": "/* eslint-disable no-undef */\nimport { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport DeltaBar from \"components/vis-elements/DeltaBar/DeltaBar\";\n\ndescribe(\"DeltaBar\", () => {\n  test(\"renders the DeltaBar component with default props\", () => {\n    render(<DeltaBar value={50} />);\n  });\n});\n"
  },
  {
    "path": "src/tests/vis-elements/MarkerBar.test.tsx",
    "content": "/* eslint-disable no-undef */\nimport { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport MarkerBar from \"components/vis-elements/MarkerBar/MarkerBar\";\n\ndescribe(\"MarkerBar\", () => {\n  test(\"renders the MarkerBar component with default props\", () => {\n    render(<MarkerBar value={50} />);\n  });\n});\n"
  },
  {
    "path": "src/tests/vis-elements/ProgressBar.test.tsx",
    "content": "/* eslint-disable no-undef */\nimport { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport ProgressBar from \"components/vis-elements/ProgressBar/ProgressBar\";\n\ndescribe(\"ProgressBar\", () => {\n  test(\"renders the ProgressBar component with default props\", () => {\n    render(<ProgressBar value={50} />);\n  });\n});\n"
  },
  {
    "path": "src/tests/vis-elements/ProgressCircle.text.tsx",
    "content": "import { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport ProgressCircle from \"components/vis-elements/ProgressCircle/ProgressCircle\";\n\ndescribe(\"ProgressCircle\", () => {\n  test(\"renders the ProgressCircle component with default props\", () => {\n    render(<ProgressCircle value={50} />);\n  });\n});\n"
  },
  {
    "path": "src/tests/vis-elements/Tracker.test.tsx",
    "content": "import { render } from \"@testing-library/react\";\nimport React from \"react\";\n\nimport Tracker from \"components/vis-elements/Tracker/Tracker\";\n\ndescribe(\"Tracker\", () => {\n  test(\"renders the Tracker component with default props\", () => {\n    render(<Tracker data={[{ color: \"green\" }, { color: \"green\" }]} />);\n  });\n});\n"
  },
  {
    "path": "tailwind.config.js",
    "content": "/* eslint-disable @typescript-eslint/no-require-imports */\n// eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports\nconst colors = require(\"tailwindcss/colors\");\n\nmodule.exports = {\n  content: [\"./src/**/*.{html,js,jsx,ts,tsx}\"],\n  darkMode: [\"class\", '[data-mode=\"dark\"]'],\n  theme: {\n    transparent: \"transparent\",\n    current: \"currentColor\",\n    extend: {\n      colors: {\n        // light mode\n        tremor: {\n          brand: {\n            faint: colors.blue[50],\n            muted: colors.blue[200],\n            subtle: colors.blue[400],\n            DEFAULT: colors.blue[500],\n            emphasis: colors.blue[700],\n            inverted: colors.white,\n          },\n          background: {\n            muted: colors.gray[50],\n            subtle: colors.gray[100],\n            DEFAULT: colors.white,\n            emphasis: colors.gray[700],\n          },\n          border: {\n            DEFAULT: colors.gray[200],\n          },\n          ring: {\n            DEFAULT: colors.gray[200],\n          },\n          content: {\n            subtle: colors.gray[400],\n            DEFAULT: colors.gray[500],\n            emphasis: colors.gray[700],\n            strong: colors.gray[900],\n            inverted: colors.white,\n          },\n        },\n        // dark mode\n        \"dark-tremor\": {\n          brand: {\n            faint: \"#0B1229\",\n            muted: colors.blue[950],\n            subtle: colors.blue[800],\n            DEFAULT: colors.blue[500],\n            emphasis: colors.blue[400],\n            inverted: colors.blue[950],\n          },\n          background: {\n            muted: \"#131A2B\",\n            subtle: colors.gray[800],\n            DEFAULT: colors.gray[900],\n            emphasis: colors.gray[300],\n          },\n          border: {\n            DEFAULT: colors.gray[800],\n          },\n          ring: {\n            DEFAULT: colors.gray[800],\n          },\n          content: {\n            subtle: colors.gray[600],\n            DEFAULT: colors.gray[500],\n            emphasis: colors.gray[200],\n            strong: colors.gray[50],\n            inverted: colors.gray[950],\n          },\n        },\n      },\n      boxShadow: {\n        // light\n        \"tremor-input\": \"0 1px 2px 0 rgb(0 0 0 / 0.05)\",\n        \"tremor-card\": \"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)\",\n        \"tremor-dropdown\": \"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)\",\n        // dark\n        \"dark-tremor-input\": \"0 1px 2px 0 rgb(0 0 0 / 0.05)\",\n        \"dark-tremor-card\": \"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)\",\n        \"dark-tremor-dropdown\": \"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)\",\n      },\n      borderRadius: {\n        \"tremor-small\": \"0.375rem\",\n        \"tremor-default\": \"0.5rem\",\n        \"tremor-full\": \"9999px\",\n      },\n      fontSize: {\n        \"tremor-label\": [\"0.75rem\", { lineHeight: \"1rem\" }],\n        \"tremor-default\": [\"0.875rem\", { lineHeight: \"1.25rem\" }],\n        \"tremor-title\": [\"1.125rem\", { lineHeight: \"1.75rem\" }],\n        \"tremor-metric\": [\"1.875rem\", { lineHeight: \"2.25rem\" }],\n      },\n    },\n  },\n  safelist: [\n    {\n      pattern:\n        /^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,\n      variants: [\"hover\", \"data-[selected]\"],\n    },\n    {\n      pattern:\n        /^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,\n      variants: [\"hover\", \"data-[selected]\"],\n    },\n    {\n      pattern:\n        /^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,\n      variants: [\"hover\", \"data-[selected]\"],\n    },\n    {\n      pattern:\n        /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,\n    },\n    {\n      pattern:\n        /^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,\n    },\n    {\n      pattern:\n        /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,\n    },\n\n    // custom colors charts\n    ...[\"[#32a852]\", \"[#fcba03]\"].flatMap((customColor) => [\n      `bg-${customColor}`,\n      `border-${customColor}`,\n      `hover:bg-${customColor}`,\n      `hover:border-${customColor}`,\n      `hover:text-${customColor}`,\n      `fill-${customColor}`,\n      `ring-${customColor}`,\n      `stroke-${customColor}`,\n      `text-${customColor}`,\n      `data-[selected]:bg-${customColor}]`,\n      `data-[selected]:border-${customColor}]`,\n      `data-[selected]:text-${customColor}`,\n    ]),\n  ],\n};\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"es2016\",\n    \"rootDir\": \"src\",\n    \"baseUrl\": \"src/\",\n    \"esModuleInterop\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"strict\": true,\n    \"skipLibCheck\": true,\n    \"jsx\": \"react\",\n    \"module\": \"ESNext\",\n    \"declaration\": true,\n    \"declarationDir\": \"dist\",\n    \"sourceMap\": false,\n    \"moduleResolution\": \"node\",\n    \"allowSyntheticDefaultImports\": true,\n    \"emitDeclarationOnly\": true\n  },\n  \"include\": [\"**/*.tsx\", \"**/*.ts\", \"setupTests.js\"]\n}\n"
  }
]