[ { "path": ".editorconfig", "content": "# http://editorconfig.org\nroot = true\n\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n\n# The JSON files contain newlines inconsistently\n[*.json]\ninsert_final_newline = true\n\n[*.md]\ntrim_trailing_whitespace = false\n\n" }, { "path": ".github/ISSUE_TEMPLATE/apri-una-segnalazione.it.yaml", "content": "name: Apri una segnalazione - IT\ndescription: Per segnalare bug, aprire una discussione o inviare un contributo\nlabels: []\nbody:\n- type: checkboxes\n attributes:\n label: Esiste già una discussione sul tema che ti interessa, o su un tema simile?\n description: |\n Verifica nella [lista delle discussioni](https://github.com/italia/design-react-kit/issues/). Se esiste, vai alla discussione esistente e partecipa lasciando un commento.\n options:\n - label: Ho verificato e non esiste\n required: true\n- type: markdown\n attributes:\n value: \"-------\"\n- type: input\n attributes:\n label: Versione della libreria\n description: |\n Versione utilizzata sulla quale si riscontra un problema o si vuole avviare la discussione.\n validations:\n required: true\n- type: textarea\n attributes:\n label: Cosa\n description: |\n Descrivi in modo chiaro e conciso il tema della tua segnalazione indicando il link della pagina o delle pagine interessate.\n\n Per segnalare un bug indica come riprodurlo per passi: es. (1) Vai a '...'; (2) Fai click su '...'; (3) Ora trovi il bug '...'.\n Per proporre un contributo descrivi la soluzione che immagini, cosa ti aspetti e le eventuali alternative hai già valutato.\n\n Puoi anche aggiungere catture di schermo per arricchire la segnalazione.\n Assicurati di non condividere informazioni personali.\n validations:\n required: true\n- type: textarea\n attributes:\n label: Perché\n description: |\n Spiega perché ritieni rilevante la segnalazione.\n\n Indica analisi, verifiche e test svolti a supporto (es. dati di analytics, analisi euristiche, test di usabilità, verifiche di accessibilità), se disponibili.\n validations:\n required: true\n- type: textarea\n attributes:\n label: Contesto\n description: |\n Se significative, inserisci informazioni su tipo di dispositivo, sistema operativo, browser.\n validations:\n required: false\n- type: textarea\n attributes:\n label: Altro\n description: |\n Inserisci link a esempi, ricerca, design o codice a corredo della segnalazione, se disponibili.\n validations:\n required: false\n- type: markdown\n attributes:\n value: |\n -------\n\n [Conosci il modello di contribuzione del design system del Paese?](https://designers.italia.it/design-system/come-contribuire/modello-di-contribuzione/)\n" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "blank_issues_enabled: false\n" }, { "path": ".github/ISSUE_TEMPLATE/open-an-issue.en.yaml", "content": "name: Open an issue - EN\ndescription: To report bugs, open a discussion, or submit a contribution\nlabels: []\nbody:\n- type: checkboxes\n attributes:\n label: Does a discussion already exist on the topic you are interested in, or on a similar topic?\n description: |\n Please check [issue list](https://github.com/italia/design-react-kit/issues/). If it exists, participate by posting a comment on the already existing issue.\n options:\n - label: I verified and it doesn't exist\n required: true\n- type: markdown\n attributes:\n value: \"-------\"\n- type: input\n attributes:\n label: Library version\n description: |\n Version on which you encounter a problem or want to start a discussion.\n validations:\n required: true\n- type: textarea\n attributes:\n label: What\n description: |\n Please describe the theme of your issue in a clear and concise manner, and include the link to the page(s) of concern and screenshots.\n\n To report a bug, specify how to reproduce it step by step. E.g. (1) Go to '...'; (2) Click '...'; (3) Notice the bug '...'.\n To propose a novel contribution, describe the problem you want to solve and the solution you envision, what you expect, and any alternative solutions you've considered.\n\n Consider adding screen captures to enhance your report.\n Make sure you do not share any personal information in the process.\n validations:\n required: true\n- type: textarea\n attributes:\n label: Why\n description: |\n Explain why you consider this report relevant.\n\n Highlight any analysis, verifications and tests you've conducted to support your issue or contribution (e.g., data analytics, heuristic analysis, usability tests, accessibility checks), if available.\n validations:\n required: true\n- type: textarea\n attributes:\n label: Context\n description: |\n If relevant, please provide details on the device type, operating system and browser.\n validations:\n required: false\n- type: textarea\n attributes:\n label: More\n description: |\n If available, provide links to related examples, research, designs or code.\n validations:\n required: false\n- type: markdown\n attributes:\n value: |\n -------\n\n [Do you know Italia's Design System contribution model?](https://designers.italia.it/design-system/come-contribuire/modello-di-contribuzione/) (Italian language)\n" }, { "path": ".github/PULL_REQUEST_TEMPLATE.md", "content": "\n\n\nFixes #\n\n#### PR Checklist\n\n\n\n- [ ] My branch is up-to-date with the Upstream `main` branch.\n- [ ] The unit tests pass locally with my changes (if applicable).\n- [ ] I have added tests that prove my fix is effective or that my feature works (if applicable).\n- [ ] I have added necessary documentation (if appropriate).\n\n#### Short description of what this resolves:\n\n\n\n#### Changes proposed in this Pull Request:\n\n## \n" }, { "path": ".github/workflows/ci.yml", "content": "name: Lint, Test & Coverage\non:\n push:\n branches: [main]\n pull_request:\n branches: [main]\n\njobs:\n coverage:\n runs-on: ubuntu-latest\n concurrency: ci-test-${{ github.ref }}\n steps:\n - uses: actions/checkout@v4\n - name: Setup Node.js with Yarn cache\n uses: actions/setup-node@v4\n with:\n node-version: '20'\n cache: 'yarn'\n\n - name: Install dependencies\n run: yarn install --frozen-lockfile\n - name: Lint\n run: yarn lint\n - name: Test\n run: yarn test:ci\n\n - name: Upload coverage\n uses: codecov/codecov-action@v2\n with:\n token: ${{ secrets.CODECOV_TOKEN }}\n flags: unittests\n" }, { "path": ".github/workflows/commit-lint.yml", "content": "on:\n push:\n branches:\n - main\n pull_request:\n branches:\n - main\nname: Lint commits\njobs:\n lint-commits:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n with:\n fetch-depth: 0\n - uses: actions/setup-node@v4\n with:\n node-version: 20\n - run: yarn add @commitlint/cli\n - run: npx commitlint --from HEAD~${{ github.event.pull_request.commits }} --to HEAD\n" }, { "path": ".github/workflows/pc-check.yml", "content": "on:\n pull_request:\n branches:\n - main\n workflow_dispatch:\nname: Lint publiccode\njobs:\n publiccode_yml_validation:\n runs-on: ubuntu-latest\n name: publiccode.yml validation\n steps:\n - uses: actions/checkout@v5\n - uses: italia/publiccode-parser-action@v1\n with:\n publiccode: 'publiccode.yml'\n" }, { "path": ".github/workflows/pc-update.yml", "content": "name: Publiccode.yml update\n\non:\n schedule:\n - cron: '30 17 * * *'\n\n workflow_dispatch:\n\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n with:\n fetch-depth: 0\n - name: Check publiccode.yml version and date ✅\n uses: italia/publiccode-softwareversion-check-action@master\n id: pva\n - name: Create Pull Request ⏫\n uses: peter-evans/create-pull-request@v3\n if: failure()\n with:\n title: 'chore: update software version ${{ steps.pva.outputs.version }} and date in publiccode.yml'\n branch: feature/publiccode-${{ steps.pva.outputs.version }}\n" }, { "path": ".github/workflows/publiccode-yml-validation.yml", "content": "name: publiccode.yml validation\n\non: [pull_request, push]\n\njobs:\n publiccode_yml_validation:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - uses: italia/publiccode-parser-action@v1\n with:\n publiccode: 'publiccode.yml'\n" }, { "path": ".github/workflows/publish-release.yml", "content": "name: Generate new release\non:\n push:\n tags:\n - \"v5*\"\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n with:\n fetch-depth: 0\n ref: main\n - uses: actions/setup-node@v4\n with:\n node-version: 20\n registry-url: \"https://registry.npmjs.org\"\n - name: git config\n run: |\n git config user.name \"${GITHUB_ACTOR}\"\n git config user.email \"${GITHUB_ACTOR}@users.noreply.github.com\"\n - run: yarn\n - run: yarn build\n - name: Publish package to NPM\n run: yarn publish\n env:\n NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}\n - run: yarn add extract-changelog-release\n - name: Generate Release Body\n run: yarn --silent extract-changelog-release > RELEASE_BODY.md\n - uses: ncipollo/release-action@v1\n with:\n bodyFile: \"RELEASE_BODY.md\"\n token: ${{ secrets.GITHUB_TOKEN }}\n - uses: italia/slack-notify-release-action@v0.4.0\n with:\n slack_token: ${{ secrets.SLACK_TOKEN }}\n channel_id: ${{ secrets.SLACK_CHANNEL }}\n project_name: Design React Kit\n" }, { "path": ".github/workflows/update-docs.yml", "content": "name: Update documentation\n\non:\n workflow_dispatch:\n push:\n tags:\n - \"v5*\"\n\npermissions: {}\n\njobs:\n deploy:\n runs-on: ubuntu-latest\n permissions:\n contents: write\n steps:\n - name: Checkout\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2\n with:\n fetch-depth: 0\n persist-credentials: false\n\n - name: Setup Node.js\n uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0\n with:\n node-version: 20\n package-manager-cache: false\n\n - name: Git config\n run: |\n git config user.name \"${GITHUB_ACTOR}\"\n git config user.email \"${GITHUB_ACTOR}@users.noreply.github.com\"\n\n - name: Install dependencies\n run: yarn\n\n - name: Build docs\n run: yarn storybook:build\n\n - name: Extract destination folder name\n run: |\n if [[ \"${GITHUB_REF_TYPE}\" == \"tag\" ]]; then\n if [[ \"${GITHUB_REF_NAME}\" =~ ^v5\\.[0-9]+\\.[0-9]+$ ]]; then\n echo \"DEST_FOLDER=${GITHUB_REF_NAME}\" >> $GITHUB_ENV\n else\n echo \"Invalid tag format: ${GITHUB_REF_NAME}. Expected v5..\" >&2\n exit 1\n fi\n else\n echo \"DEST_FOLDER=latest\" >> $GITHUB_ENV\n fi\n\n - name: Deploy docs\n uses: peaceiris/actions-gh-pages@47f197a2200bb9de68ba5f48fad1c088eb1c4a32 # v4.0.0\n with:\n github_token: ${{ secrets.GITHUB_TOKEN }}\n publish_dir: ./storybook-static\n destination_dir: ${{ env.DEST_FOLDER }} # Subfolder name to deploy docs into\n keep_files: false # Clear previous docs in destination subfolder to avoid orphaned files\n\n - name: Create root redirect to latest\n run: |\n mkdir -p /tmp/root\n cat > /tmp/root/index.html << 'REDIRECT'\n \n \n \n \n \n \n \n \n

Redirecting to latest documentation...

\n \n \n REDIRECT\n\n - name: Deploy root redirect\n uses: peaceiris/actions-gh-pages@47f197a2200bb9de68ba5f48fad1c088eb1c4a32 # v4.0.0\n with:\n github_token: ${{ secrets.GITHUB_TOKEN }}\n publish_dir: /tmp/root\n keep_files: true\n" }, { "path": ".gitignore", "content": "# Dependencies\nnode_modules\n\n# Outputs\nstorybook-static\ndist/\n.DS_Store\n.idea\n.cache\ncoverage\n\n# Logs\n*.log\n\n*storybook.log" }, { "path": ".husky/pre-commit", "content": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nnpx lint-staged --verbose\n" }, { "path": ".npmignore", "content": ".circleci\n.storybook\nassets\nscripts\nstories\nstorybook-static\ndist\nsrc/__image_snapshots__/\n" }, { "path": ".nvmrc", "content": "20" }, { "path": ".prettierrc", "content": "{\n \"singleQuote\": true,\n \"jsxSingleQuote\": true,\n \"semi\": true,\n \"tabWidth\": 2,\n \"bracketSpacing\": true,\n \"jsxBracketSameLine\": false,\n \"arrowParens\": \"always\",\n \"trailingComma\": \"none\",\n \"printWidth\": 120\n}\n" }, { "path": ".storybook/main.ts", "content": "import { StorybookConfig } from '@storybook/react-vite';\n\nconst config: StorybookConfig = {\n stories: ['../stories/**/*.@(mdx|stories.@(ts|tsx|js|jsx))'],\n addons: ['@storybook/addon-links', '@storybook/addon-a11y', '@storybook/addon-docs'],\n framework: '@storybook/react-vite',\n core: {\n builder: '@storybook/builder-vite' // 👈 The builder enabled here.\n },\n staticDirs: ['../static', { from: '../assets', to: '/' }],\n docs: {\n defaultName: 'Documentazione',\n docsMode: false\n },\n async viteFinal(config) {\n // Merge custom configuration into the default config\n const { mergeConfig } = await import('vite');\n\n return mergeConfig(config, {\n // Add dependencies to pre-optimization\n base: './',\n build: {\n chunkSizeWarningLimit: 1000,\n minify: false\n }\n });\n }\n};\nexport default config;\n" }, { "path": ".storybook/manager-head.html", "content": "Design React Kit\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n" }, { "path": ".storybook/manager.js", "content": "import { addons } from \"storybook/manager-api\";\r\nimport theme from \"./theme\";\r\n\r\naddons.setConfig({\r\n theme: theme,\r\n});\r\n" }, { "path": ".storybook/preview.ts", "content": "import { Preview } from '@storybook/react-vite';\nimport 'bootstrap-italia/dist/css/bootstrap-italia.min.css';\nimport '../assets/css/storybook-fixes.css';\nimport '../assets/docs/scss/bi-fonts.scss';\nimport '../assets/docs/scss/docs.scss';\n\nimport theme from './theme';\n\nconst preview: Preview = {\n parameters: {\n docs: {\n theme: theme,\n toc: {\n headingSelector: 'h1, h2, h3',\n title: 'Indice'\n },\n source: {\n type: 'dynamic'\n }\n },\n options: {\n storySort: {\n order: [\n 'Documentazione',\n [\n 'Welcome',\n 'Organizzare gli spazi',\n 'Organizzare i contenuti',\n 'Menu di navigazione',\n 'Componenti',\n 'Form',\n 'Utilities'\n ],\n '*'\n ]\n }\n }\n },\n\n tags: ['autodocs']\n};\n\nexport default preview;\n" }, { "path": ".storybook/stories-helper.ts", "content": "export const componentColor = [\"primary\", \"secondary\", \"success\", \"danger\", \"warning\"];\r\n" }, { "path": ".storybook/theme.ts", "content": "import { create } from 'storybook/theming';\r\n\r\nconst theme = create({\r\n base: 'light',\r\n\r\n colorPrimary: '#00C5CA',\r\n colorSecondary: '#0066CC',\r\n\r\n // UI\r\n appBg: '#F3F3F5',\r\n appContentBg: '#FFF',\r\n appBorderColor: 'grey',\r\n appBorderRadius: 4,\r\n\r\n brandTitle: 'Design React Kit',\r\n brandUrl: 'https://github.com/italia/design-react-kit'\r\n});\r\n\r\nexport default theme;\r\n" }, { "path": "AUTHORS", "content": "Copyright (c) 2022 - 2024 Presidenza del Consiglio dei Ministri\n\nThe version control system provides attribution for specific lines of code.\n" }, { "path": "CHANGELOG.md", "content": "## 5.10.0 (2026-03-17)\n\n* chore: update publiccode ([dd7364e](https://github.com/italia/design-react-kit/commit/dd7364e))\n* chore(deps-dev): bump storybook from 9.1.18 to 9.1.19 ([ae57adf](https://github.com/italia/design-react-kit/commit/ae57adf))\n* chore(deps): bump immutable from 5.1.4 to 5.1.5 ([db555e2](https://github.com/italia/design-react-kit/commit/db555e2))\n* chore(deps): bump rollup from 4.57.1 to 4.59.0 ([1f80f56](https://github.com/italia/design-react-kit/commit/1f80f56))\n* chore(deps): upgrade bootstrap italia ([f8cc596](https://github.com/italia/design-react-kit/commit/f8cc596))\n* fix(Collapse): add CSS transition for navbar collapsable open/close ([3daf27d](https://github.com/italia/design-react-kit/commit/3daf27d)), closes [#1132](https://github.com/italia/design-react-kit/issues/1132)\n* fix(collapse): improve navbar collapsable accessibility ([2c78c88](https://github.com/italia/design-react-kit/commit/2c78c88))\n* fix(Input): make adaptive type responsive on small screens ([ce854bd](https://github.com/italia/design-react-kit/commit/ce854bd))\n\n## 5.9.3 (2026-02-17)\n\n* chore: update publiccode ([dc904f7](https://github.com/italia/design-react-kit/commit/dc904f7))\n* chore(deps-dev): bump storybook from 9.1.2 to 9.1.17 ([ceba080](https://github.com/italia/design-react-kit/commit/ceba080))\n* chore(deps): add conventional commits ([4c2eb90](https://github.com/italia/design-react-kit/commit/4c2eb90))\n* chore(deps): bump @modelcontextprotocol/sdk from 1.24.0 to 1.26.0 ([4569daa](https://github.com/italia/design-react-kit/commit/4569daa))\n* chore(deps): bump lodash ([3561daf](https://github.com/italia/design-react-kit/commit/3561daf))\n* chore(deps): bump qs from 6.14.0 to 6.14.1 ([149e22d](https://github.com/italia/design-react-kit/commit/149e22d))\n* chore(deps): bump qs from 6.14.1 to 6.14.2 ([3f1a0ae](https://github.com/italia/design-react-kit/commit/3f1a0ae))\n* fix(deps): upgrade bootstrap italia ([1035525](https://github.com/italia/design-react-kit/commit/1035525))\n\n\n\n## [5.9.2](https://github.com/italia/design-react-kit/compare/v5.9.1...v5.9.2) (2025-12-10)\n\n\n### Bug Fixes\n\n* **a11y:** better guidelines for accordion component ([e4c9a92](https://github.com/italia/design-react-kit/commit/e4c9a929b5192d4ce88138c978a3e1e8af9fd3b6))\n\n\n\n## [5.9.1](https://github.com/italia/design-react-kit/compare/v5.9.0...v5.9.1) (2025-11-10)\n\n\n### Bug Fixes\n\n* add is-invalid class to input-group based on validation ([762d627](https://github.com/italia/design-react-kit/commit/762d62755ec05c16b57e85bbc961a94af97d9c06))\n* prevent numeric input from submitting forms ([c6b3bb8](https://github.com/italia/design-react-kit/commit/c6b3bb8d02e2201dde6839db6f04d427c8bd723d))\n* render pager properly after minimization ([a616a48](https://github.com/italia/design-react-kit/commit/a616a480ae8f1490a287c991a2bf5acb4f4085fb))\n\n\n\n# [5.9.0](https://github.com/italia/design-react-kit/compare/v5.8.3...v5.9.0) (2025-09-17)\n\n\n### Features\n\n* new cards ([bf62d1b](https://github.com/italia/design-react-kit/commit/bf62d1b5e1a6652b6d7c1dd7c36d294e4cbc6140))\n* new storybook ([925fe11](https://github.com/italia/design-react-kit/commit/925fe11a48e2593fb43d5364d5ac733806eb6d61))\n\n\n\n## [5.8.3](https://github.com/italia/design-react-kit/compare/v5.8.2...v5.8.3) (2025-07-15)\n\n* fix: initialize video player component only once ([1d95757](https://github.com/italia/design-react-kit/commit/1d95757))\n\n\n\n## [5.8.2](https://github.com/italia/design-react-kit/compare/v5.8.1...v5.8.2) (2025-06-28)\n\n* fix: upload image svg not found ([877db17](https://github.com/italia/design-react-kit/commit/877db17))\n\n\n\n## [5.8.1](https://github.com/italia/design-react-kit/compare/v5.8.0...v5.8.1) (2025-06-24)\n\n\n### Bug Fixes\n\n* **build:** asset drag n drop icon ([b5b0fd8](https://github.com/italia/design-react-kit/commit/b5b0fd8a26e8ef7d13bd235c7171e1d649c89bf1))\n* dropdown menu in header ([2d6588b](https://github.com/italia/design-react-kit/commit/2d6588b09d4f4c8d45dda2cecc416b00eeee12cf))\n\n\n\n# [5.8.0](https://github.com/italia/design-react-kit/compare/v5.7.3...v5.8.0) (2025-06-20)\n\n\n### Bug Fixes\n\n* put pagination form controls outside list ([419cded](https://github.com/italia/design-react-kit/commit/419cded94a8d13d6e7cdc48052c95f58ded98fb8))\n* remove useless pagination ul element ([66eeceb](https://github.com/italia/design-react-kit/commit/66eeceb4d2165739d522c7a846c23267af72b063))\n\n\n### Features\n\n* add upload component ([2798b78](https://github.com/italia/design-react-kit/commit/2798b7834ba44f54e0b82f0500e4a6ef598122b8))\n\n\n\n## [5.7.3](https://github.com/italia/design-react-kit/compare/v5.7.2...v5.7.3) (2025-05-16)\n\n\n### Bug Fixes\n\n* add missing icons ([c62621a](https://github.com/italia/design-react-kit/commit/c62621a01e9e5a0e972c3b0039139a5fd8457501))\n\n\n\n## [5.7.2](https://github.com/italia/design-react-kit/compare/v5.7.1...v5.7.2) (2025-05-13)\n\n\n### Bug Fixes\n\n* splidejs types ([890df5d](https://github.com/italia/design-react-kit/commit/890df5d440fbac7e9a38e1a9656da44510b3cb86))\n\n\n\n## [5.7.1](https://github.com/italia/design-react-kit/compare/v5.7.0...v5.7.1) (2025-04-10)\n\n\n### Features\n\n* use class sticky-top instead of react-stickup ([da3c86d](https://github.com/italia/design-react-kit/commit/da3c86de49deaf10007a36ef53e50ab39f37ac28))\n\n\n\n# [5.7.0](https://github.com/italia/design-react-kit/compare/v5.6.1...v5.7.0) (2025-03-27)\n\n\n### Bug Fixes\n\n* find dom node method deprecation ([f738af8](https://github.com/italia/design-react-kit/commit/f738af83535fd84aa6b84f8893c867c7349595e7))\n\n\n### Features\n\n* new carousel component ([a8405ce](https://github.com/italia/design-react-kit/commit/a8405ce6d9987f203e74858f7155a7070ffb858f))\n* new transfer component ([0db606d](https://github.com/italia/design-react-kit/commit/0db606d959a03e15c081c61a3fbf3c5eca62de5e))\n* new video component ([f63ad5a](https://github.com/italia/design-react-kit/commit/f63ad5adbac080854b9cba1a9a13912a14344861))\n* upgrade bootstrap italia ([c3c0efb](https://github.com/italia/design-react-kit/commit/c3c0efbe8e4efe5ee8aa7cb4137d0c389a956de3))\n\n\n\n## [5.6.1](https://github.com/italia/design-react-kit/compare/v5.6.0...v5.6.1) (2025-02-13)\n\n\n### Bug Fixes\n\n* disabled checkbox and radio ([aae38ea](https://github.com/italia/design-react-kit/commit/aae38eac8c1f2388a7e1dcf6d12920ebc6f71dcb))\n* symbol label class ([86d01d8](https://github.com/italia/design-react-kit/commit/86d01d809a8c72b9f7e5eaf7071a9116f9f7eb35))\n\n\n\n# [5.6.0](https://github.com/italia/design-react-kit/compare/v5.5.1...v5.6.0) (2025-02-11)\n\n\n### Bug Fixes\n\n* **a11y:** icons ([0408075](https://github.com/italia/design-react-kit/commit/0408075afbdb5a2a93a0e7ca7eae89bd97ac9255))\n* **a11y:** input aria describedby ([396c752](https://github.com/italia/design-react-kit/commit/396c7527560cc0a08c3741cdd2b398b2a8ef8293))\n* back to top is now focusable ([b87db3f](https://github.com/italia/design-react-kit/commit/b87db3f05b45add57f269f198523efcf13652eb3))\n* new label for percentage and currency inputs ([61a8b34](https://github.com/italia/design-react-kit/commit/61a8b340264791575b5683509d62c22ef74a2c32))\n\n\n### Features\n\n* add icons title for steppers ([fff4263](https://github.com/italia/design-react-kit/commit/fff426363197a52b9eba22141cff05a4e65b5b46))\n* new tab component ([b5b9c85](https://github.com/italia/design-react-kit/commit/b5b9c85eda6c3c0ee5ee39a5392dd0f57bca4a6e))\n\n\n\n## [5.5.1](https://github.com/italia/design-react-kit/compare/v5.5.0...v5.5.1) (2025-01-09)\n\n\n### Bug Fixes\n\n* remove dropdown menu offset in slim headers ([52a1149](https://github.com/italia/design-react-kit/commit/52a1149c48303d8e9389000441badf9394c0c674))\n\n\n\n# [5.5.0](https://github.com/italia/design-react-kit/compare/v5.4.1...v5.5.0) (2024-12-18)\n\n\n### Bug Fixes\n\n* add aria hidden to rating icons ([7d62963](https://github.com/italia/design-react-kit/commit/7d62963443023350799438a6d3e948d1c7ed0b0d))\n* focus tracking ([27d3714](https://github.com/italia/design-react-kit/commit/27d37148f4493e1231a4f671101f118c3b10fdbb))\n* improvements on back to top component ([08fb4c7](https://github.com/italia/design-react-kit/commit/08fb4c750f76b5db5ca9a10005a532804d141957))\n* keyboard rating ([bd9ddba](https://github.com/italia/design-react-kit/commit/bd9ddbabc1a997ba8fdd08461172cd6a860623b2))\n\n\n### Features\n\n* header improvements ([f7e2a76](https://github.com/italia/design-react-kit/commit/f7e2a76164e900d7a61dbe0aec7f56eebccf647d))\n* nav mode for skiplinks ([2dc384e](https://github.com/italia/design-react-kit/commit/2dc384eea89caaad426ff46613429226b9eba21b))\n* navscroll refactoring with progressbar ([d0cfd5b](https://github.com/italia/design-react-kit/commit/d0cfd5bc90daed5616ced16b767a94bb5abeba59))\n* new autocomplete component with italian default messages ([b076b91](https://github.com/italia/design-react-kit/commit/b076b912d888682b497f356e69b9a73f6ed98f52))\n\n\n\n## [5.4.1](https://github.com/italia/design-react-kit/compare/v5.4.0...v5.4.1) (2024-11-11)\n\n\n### Bug Fixes\n\n* form control class missing for text area ([be15805](https://github.com/italia/design-react-kit/commit/be15805128978bb02a3ed537f52f5427c9a8e990))\n* remove classname from input wrapper ([5fe3186](https://github.com/italia/design-react-kit/commit/5fe3186574a5b33adf5d1085f01320dcc4b8abf5))\n\n\n\n# [5.4.0](https://github.com/italia/design-react-kit/compare/v5.3.0...v5.4.0) (2024-11-07)\n\n\n### Bug Fixes\n\n* **a11y:** toolbar divider ([5785c9c](https://github.com/italia/design-react-kit/commit/5785c9c288743186eca4ad36294caba86c044f7f))\n* thumbnail extra space ([7c06f04](https://github.com/italia/design-react-kit/commit/7c06f0492b0c78f3c96ed99398748fd20df66995))\n* timeline headers ([6e24aae](https://github.com/italia/design-react-kit/commit/6e24aae08d3a8e5df8483f761d77f0a7dac1c83e))\n* visually hidden in toolbar ([ad00131](https://github.com/italia/design-react-kit/commit/ad00131ded6a8dfbb291f60f11dc77e28bd841ae))\n\n\n### Features\n\n* add text and date description to card category component ([39925bd](https://github.com/italia/design-react-kit/commit/39925bdb4b11cd2c7f2e2515ba8d6a57f5de2833))\n* new lists ([5021fd1](https://github.com/italia/design-react-kit/commit/5021fd120a629f7fb12e818f4e2dcc53a0fda064))\n* new responsive images ([99cf472](https://github.com/italia/design-react-kit/commit/99cf4721822a20f9f69eebfdc84f472fa4131b3b))\n* use href in forward component ([9e20c53](https://github.com/italia/design-react-kit/commit/9e20c5359b7aa68af083984fe3c554cd7c0c0241))\n\n\n\n# [5.3.0](https://github.com/italia/design-react-kit/compare/v5.2.0...v5.3.0) (2024-10-31)\n\n\n### Bug Fixes\n\n* **a11y:** add aria labelled to sections ([eeca34d](https://github.com/italia/design-react-kit/commit/eeca34d39787fa09bf5a499a1e1ee0be15cf1465))\n* **a11y:** hero component ([4d17fe7](https://github.com/italia/design-react-kit/commit/4d17fe71e43cf19d7904cc678439bcffdc76b505))\n* **a11y:** title and doc link for modal ([c0a92be](https://github.com/italia/design-react-kit/commit/c0a92be35a076da3cc68b3531f2e7243777c9555))\n* group form in examples ([239904d](https://github.com/italia/design-react-kit/commit/239904d11c4d0958d634e670edd68cf45ae7a1aa))\n* icons with default title ([14e154b](https://github.com/italia/design-react-kit/commit/14e154b2ad495b18a20cc19774bb2ee3a4fcd722))\n\n\n### Features\n\n* improve dimmer component ([548608a](https://github.com/italia/design-react-kit/commit/548608a15b4a55061e9f2469ea3a5e79fefc4d3a))\n\n\n\n# [5.2.0](https://github.com/italia/design-react-kit/compare/v5.1.0...v5.2.0) (2024-08-05)\n\n\n### Bug Fixes\n\n* thumbnav is a navigation component ([501417e](https://github.com/italia/design-react-kit/commit/501417eda9006de9ea1931d7809aed33125fd90f))\n\n\n### Features\n\n* add list component ([e4c9e14](https://github.com/italia/design-react-kit/commit/e4c9e14f6295343bce7262665fa54ba4085cad30))\n\n\n\n# [5.1.0](https://github.com/italia/design-react-kit/compare/v5.0.4...v5.1.0) (2024-07-02)\n\n\n### Bug Fixes\n\n* alert default props ([39821d9](https://github.com/italia/design-react-kit/commit/39821d93a4b68bf0edd60953e940ebed2c1d5775))\n* dimmer ios bug ([315760a](https://github.com/italia/design-react-kit/commit/315760a217541f9a5b73dc9ea92b8c559f4be362))\n\n\n### Features\n\n* add icon and button to input ([7ad4ca9](https://github.com/italia/design-react-kit/commit/7ad4ca948ee52f35835b6efc19fc424976cd818c))\n* **deps:** update to react 18 ([ac0b4d5](https://github.com/italia/design-react-kit/commit/ac0b4d597442e6045d771be55a1437131b90b305))\n* new dropdown based on reactstrap ([3e4eda6](https://github.com/italia/design-react-kit/commit/3e4eda671f89436587fc315ade8dff0deb2919f2))\n\n\n\n## [5.0.4](https://github.com/italia/design-react-kit/compare/v5.0.3...v5.0.4) (2024-05-02)\n\n\n### Bug Fixes\n\n* refresh callback declaration fix in useNavScroll ([6a9957e](https://github.com/italia/design-react-kit/commit/6a9957e84964018baf095baeee36558815a92de5))\n\n\n\n## [5.0.3](https://github.com/italia/design-react-kit/compare/v5.0.2...v5.0.3) (2024-04-11)\n\n\n### Features\n\n* add to prop to bottomnavitem ([8126a98](https://github.com/italia/design-react-kit/commit/8126a98bf3758b4500d34499adf8d3784001c8ae))\n\n\n\n## [5.0.2](https://github.com/italia/design-react-kit/compare/v5.0.1...v5.0.2) (2024-04-08)\n\n\n### Bug Fixes\n\n* remove to from link list item ([788cf3f](https://github.com/italia/design-react-kit/commit/788cf3f700ca5a4137e114d1265beda26e8364d5))\n* select props on change ([61edd6e](https://github.com/italia/design-react-kit/commit/61edd6eab7922a0a59566ce9d73030d933a1f99f))\n* select should not ignore provided props ([571b334](https://github.com/italia/design-react-kit/commit/571b334bff225de4177556d98790fb87c608cfc2))\n\n\n\n## [5.0.1](https://github.com/italia/design-react-kit/compare/v5.0.0...v5.0.1) (2024-03-22)\n\n\n### Bug Fixes\n\n* accordion types error ([4e854e7](https://github.com/italia/design-react-kit/commit/4e854e7c792ad4b11adaf08b403a75b66609d672))\n\n\n\n# [5.0.0](https://github.com/italia/design-react-kit/compare/v5.0.0-12...v5.0.0) (2024-03-14)\n\n\n### Bug Fixes\n\n* dropdown import type warning ([9e56cc0](https://github.com/italia/design-react-kit/commit/9e56cc03e10c431f77798a575fde6f374ecac8dc))\n\n\n### Features\n\n* integrate nav scroll ([5b773be](https://github.com/italia/design-react-kit/commit/5b773be51c5ba056e7912e78bf7288c356fd1e3d))\n* stable release ([b365007](https://github.com/italia/design-react-kit/commit/b3650072f964072b4fe9d67ebee9b60d85b6bbde))\n\n\n\n# [5.0.0-12](https://github.com/italia/design-react-kit/compare/v5.0.0-11...v5.0.0-12) (2024-03-05)\n\n\n### Bug Fixes\n\n* declaration file ([a93b3fd](https://github.com/italia/design-react-kit/commit/a93b3fd8ac665ff1614e4362f155bf44668adb11))\n\n\n\n# [5.0.0-11](https://github.com/italia/design-react-kit/compare/v5.0.0-10...v5.0.0-11) (2024-02-26)\n\n\n### Features\n\n* new dropdown component ([6a02102](https://github.com/italia/design-react-kit/commit/6a021029e587d58ee0c1929f2dc6f06e902b49c2))\n\n\n\n# [5.0.0-10](https://github.com/italia/design-react-kit/compare/v5.0.0-9...v5.0.0-10) (2024-02-07)\n\n\n### Bug Fixes\n\n* svg import should be launched manually ([aa61aec](https://github.com/italia/design-react-kit/commit/aa61aecdb8a7ed72feb185c223b841f9512a253c))\n\n\n\n# [5.0.0-9](https://github.com/italia/design-react-kit/compare/v5.0.0-8...v5.0.0-9) (2024-02-07)\n\n\n### Bug Fixes\n\n* input validation ([42afc98](https://github.com/italia/design-react-kit/commit/42afc98f53d442f687727deaf8ab87df0c60d270))\n\n\n### Features\n\n* upgrade bsi to latest version ([27016b7](https://github.com/italia/design-react-kit/commit/27016b794e94baebfc18e217a4efa57a38178c6e))\n\n\n\n# [5.0.0-8](https://github.com/italia/design-react-kit/compare/v5.0.0-7...v5.0.0-8) (2024-01-10)\n\n\n### Features\n\n* add datepicker component ([f6d696f](https://github.com/italia/design-react-kit/commit/f6d696f8f537ae6b3affc2a40f6a97db0399b371))\n\n\n\n# [5.0.0-7](https://github.com/italia/design-react-kit/compare/v5.0.0-6...v5.0.0-7) (2023-12-12)\n\n\n### Features\n\n* numeric input component ([d4a299c](https://github.com/italia/design-react-kit/commit/d4a299cb43ad138352deab45d552bd33a3be3b19))\n\n" }, { "path": "CODE_OF_CONDUCT.EN.md", "content": "# Code of Conduct\n\n## 1. Purpose\n\nA primary goal of Developers Italia is to be inclusive to the largest number of contributors, with the most varied and diverse backgrounds possible. As such, we are committed to providing a friendly, safe and welcoming environment for all, regardless of gender, sexual orientation, ability, ethnicity, socioeconomic status, and religion (or lack thereof).\n\nThis code of conduct outlines our expectations for all those who participate in our community, as well as the consequences for unacceptable behavior.\n\nWe invite all those who participate in Developers Italia to help us create safe and positive experiences for everyone.\n\n## 2. Open Source Citizenship\n\nA supplemental goal of this Code of Conduct is to increase open source citizenship by encouraging participants to recognize and strengthen the relationships between our actions and their effects on our community.\n\nCommunities mirror the societies in which they exist and positive action is essential to counteract the many forms of inequality and abuses of power that exist in society.\n\nIf you see someone who is making an extra effort to ensure our community is welcoming, friendly, and encourages all participants to contribute to the fullest extent, we want to know.\n\n## 3. Expected Behavior\n\nThe following behaviors are expected and requested of all community members:\n\n- Participate in an authentic and active way. In doing so, you contribute to the health and longevity of this community.\n- Exercise consideration and respect in your speech and actions.\n- Attempt collaboration before conflict.\n- Refrain from demeaning, discriminatory, or harassing behavior and speech.\n- Be mindful of your surroundings and of your fellow participants. Alert community leaders if you notice a dangerous situation, someone in distress, or violations of this Code of Conduct, even if they seem inconsequential.\n- Remember that community event venues may be shared with members of the public; please be respectful to all patrons of these locations.\n\n## 4. Unacceptable Behavior\n\nThe following behaviors are considered harassment and are unacceptable within our community:\n\n- Violence, threats of violence or violent language directed against another person.\n- Sexist, racist, homophobic, transphobic, ableist or otherwise discriminatory jokes and language.\n- Posting or displaying sexually explicit or violent material.\n- Personal insults, particularly those related to gender, sexual orientation, race, religion, or disability.\n- Unwelcome sexual attention. This includes, sexualized comments or jokes; inappropriate touching, groping, and unwelcomed sexual advances.\n- Deliberate intimidation, stalking or following (online or in person).\n- Advocating for, or encouraging, any of the above behavior.\n- Sustained disruption of community events, including talks and presentations.\n\n## 5. Consequences of Unacceptable Behavior\n\nUnacceptable behavior from any community member, including sponsors and those with decision-making authority, will not be tolerated.\n\nAnyone asked to stop unacceptable behavior is expected to comply immediately.\n\nIf a community member engages in unacceptable behavior, the community organizers may take any action they deem appropriate, up to and including a temporary ban or permanent expulsion from the community without warning.\n\n## 6. Reporting Guidelines\n\nIf you are subject to or witness unacceptable behavior, or have any other concerns, please notify a community organizer as soon as possible. You can do so by e-mailing coc-report@developers.italia.it.\n\nAdditionally, community organizers are available to help community members engage with local law enforcement or to otherwise help those experiencing unacceptable behavior feel safe. In the context of in-person events, organizers will also provide escorts as desired by the person experiencing distress.\n\n## 7. Addressing Grievances\n\nIf you feel you have been falsely or unfairly accused of violating this Code of Conduct, you should notify the managers of Developers Italia with a concise description of your grievance. Your grievance will be handled in accordance with our existing governing policies.\n\n## 8. Scope\n\nWe expect all community participants (contributors, paid or otherwise; sponsors; and other guests) to abide by this Code of Conduct in all community venues–online and in-person–as well as in all one-on-one communications pertaining to community business.\n\nThis code of conduct and its related procedures also applies to unacceptable behavior occurring outside the scope of community activities when such behavior has the potential to adversely affect the safety and well-being of community members.\n\n## 9. Contact info\n\nYou can reach the managers of Developers Italia at coc-report@developers.italia.it\n\n## 10. License and attribution\n\nThis Code of Conduct is distributed under a [Creative Commons Attribution-ShareAlike license](http://creativecommons.org/licenses/by-sa/3.0/).\n\nPortions of text derived from the [Django Code of Conduct](https://www.djangoproject.com/conduct/) and the [Geek Feminism Anti-Harassment Policy](http://geekfeminism.wikia.com/wiki/Conference_anti-harassment/Policy).\n\nRetrieved on November 22, 2016 from [http://citizencodeofconduct.org/](http://citizencodeofconduct.org/)\n" }, { "path": "CODE_OF_CONDUCT.md", "content": "# Codice di condotta\n\n## 1. Scopo\n\nUno degli obiettivi principali di Developers Italia è quello di includere il maggior numero di contributori, con il background più vario e diversificato possibile. Pertanto, ci impegniamo a fornire un ambiente amichevole, sicuro e accogliente per tutti, indipendentemente dal genere, dall'orientamento sessuale, dalle abilità, dall'etnia, dallo status socioeconomico e dalla religione (o dalla sua mancanza).\n\nQuesto codice di condotta delinea le nostre aspettative per tutti coloro che partecipano alla nostra comunità, nonché le conseguenze per comportamenti inaccettabili.\n\nInvitiamo tutti coloro che partecipano a Developers Italia a aiutarci a creare esperienze positive e positive per tutti.\n\n## 2. Cittadinanza open source\n\nUn obiettivo supplementare di questo Codice di condotta è aumentare la cittadinanza open source incoraggiando i partecipanti a riconoscere e rafforzare le relazioni tra le nostre azioni e i loro effetti sulla nostra comunità.\n\nLe comunità rispecchiano le società in cui esistono e l'azione positiva è essenziale per contrastare le molte forme di disuguaglianza e abusi di potere che esistono nella società.\n\nSe vedi qualcuno che sta facendo uno sforzo in più per garantire che la nostra comunità sia accogliente, amichevole e incoraggia tutti i partecipanti a contribuire nella massima misura, vogliamo sapere.\n\n## 3. Comportamento previsto\n\nI seguenti comportamenti sono previsti e richiesti a tutti i membri della comunità:\n\n- Partecipare in modo autentico e attivo. In tal modo, contribuisci alla salute e alla longevità di questa comunità.\n- Esercitare considerazione e rispetto nei propri discorsi e azioni.\n- Tentativo di collaborazione prima del conflitto.\n- Astenersi dal comportamento umiliante, discriminatorio o molesto.\n- Sii consapevole di ciò che ti circonda e dei tuoi compagni partecipanti. Avvisare i leader della comunità se si nota una situazione pericolosa, qualcuno in difficoltà o violazioni di questo Codice di condotta, anche se sembrano irrilevanti.\n- Ricorda che le sedi di eventi comunitari possono essere condivise con membri del pubblico; si prega di essere rispettosi verso tutti i clienti di questi luoghi.\n\n## 4. Comportamento inaccettabile\n\nI seguenti comportamenti sono considerati molestie e inaccettabili all'interno della nostra comunità:\n\n- Violenza, minacce di violenza o linguaggio violento diretto contro un'altra persona.\n- Scherzi e linguaggio sessista, razzista, omofobo, transfobico, o comunque discriminatorio.\n- Pubblicare o visualizzare materiale sessualmente esplicito o violento.\n- Insulti personali, in particolare quelli relativi al genere, orientamento sessuale, razza, religione o disabilità.\n- Attenzione sessuale sgradita. Ciò include commenti o battute sessualizzate; approcci sessuali inappropriati, toccanti e indesiderati.\n- Intimidazione intenzionale, stalking o seguito (online o di persona).\n- Sostenendo o incoraggiando uno qualsiasi dei suddetti comportamenti.\n- Perturbazione continua degli eventi della comunità, inclusi discorsi e presentazioni.\n\n## 5. Conseguenze del comportamento inaccettabile\n\nIl comportamento inaccettabile da parte di qualsiasi membro della comunità, inclusi gli sponsor e coloro che hanno l'autorità decisionale, non sarà tollerato.\n\nCi si aspetta che chiunque chieda di smettere di comportarsi in modo inaccettabile si adegui immediatamente.\n\nSe un membro della comunità si comporta in modo inaccettabile, gli organizzatori della comunità possono intraprendere qualsiasi azione che ritengano appropriata, fino a includere un divieto temporaneo o l'espulsione definitiva dalla comunità senza preavviso.\n\n## 6. Linee guida per la segnalazione\n\nSe sei soggetto a un comportamento inaccettabile o ne sei testimone o se hai altre preoccupazioni, ti preghiamo di avvisare un organizzatore della comunità il prima possibile. Puoi farlo inviando una e-mail a `coc-report@developers.italia.it`.\n\nInoltre, gli organizzatori della comunità sono disponibili per aiutare i membri della comunità a impegnarsi con le forze dell'ordine locali o per aiutare altrimenti coloro che vivono comportamenti inaccettabili a sentirsi al sicuro. Nel contesto di eventi di persona, gli organizzatori forniranno anche le scorte come desiderato dalla persona che soffre.\n\n## 7. Affrontare i reclami\n\nSe ritieni di essere stato accusato ingiustamente di violare questo Codice di condotta, dovresti informare i gestori di Developers Italia con una descrizione sintetica del tuo reclamo. Il tuo reclamo verrà gestito in conformità con le nostre attuali politiche di governance.\n\n## 8. Ambito di applicazione\n\nCi aspettiamo che tutti i partecipanti alla comunità (contributori, pagati o meno, sponsor e altri ospiti) si attengano a questo Codice di condotta in tutte le sedi della comunità, online e di persona, nonché in tutte le comunicazioni individuali relative alla comunità attività commerciale.\n\nQuesto codice di condotta e le relative procedure si applicano anche a comportamenti inaccettabili che si verificano al di fuori dell'ambito delle attività della comunità quando tale comportamento ha il potenziale di influire negativamente sulla sicurezza e il benessere dei membri della comunità.\n\n## 9. Informazioni di contatto\n\nPuoi raggiungere i gestori di Developers Italia all'indirizzo `coc-report@developers.italia`.\n" }, { "path": "CONTRIBUTING.md", "content": "## Come contribuire 💙\n\n👉🏻 È possibile contribuire alla libreria in vari modi:\n\n- Con il proprio codice, prendendo in carico una issue tra quelle aperte e non già assegnate tra [le issue](https://github.com/italia/design-react-kit/issues) di React Kit (è sufficiente anche un commento sulla issue per notificare la volontà di presa in carico).\n- Attraverso la segnalazione di bug o miglioramenti al [repository ufficiale](https://github.com/italia/design-react-kit/) di React Kit.\n- Scrivendoci sul [canale dedicato](https://developersitalia.slack.com/messages/C04J92F9XM2/) di Slack.\n- Con il codice seguendo le [istruzioni riportate nel README.md](https://github.com/italia/design-react-kit?tab=readme-ov-file#con-il-codice)\n" }, { "path": "LICENSE", "content": "Copyright (c) 2018, the respective contributors, as shown by the AUTHORS file.\n\nRedistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:\n\n1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.\n\n2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.\n\n3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\n" }, { "path": "README.EN.md", "content": "

Design React Kit

\n\n

\n \"react-logo\"\n
\n Design React Kit is a toolkit based on Bootstrap Italia \n
to build React web application.\n
\n

\n\n

\n italia.github.io/design-react-kit\n
\n

\n\n

\n \"NPM\"\n \"Build\"\n \"codecov\"\n \"License\"\n \"GitHub\n

\n\n

\n \n \"Join\n \n \n \"Get\n \n

\n\n_Read this in other languages: [Italiano 🇮🇹](README.md)._\n\n_⚠️ Warning: This kit was designed to work with Bootstrap Italia version 2.x. The kit for version 1.x of Bootstrap Italia has been deprecated and is located on the [4.x] branch (https://github.com/italia/design-react-kit/tree/4.x)._\n\n## Intro\n\n**Design React kit** is a set of React components that implements [Bootstrap Italia](https://italia.github.io/bootstrap-italia/) and [Design UI Kit](https://github.com/italia/design-ui-kit) styling.\nComponents are showcased with [Storybook](https://storybook.js.org/).\nPublic version of Storybook is available [here](https://italia.github.io/design-react-kit) for the latest stable release.\nTo play with the library, the [Playground React Kit](https://github.com/italia/design-react-kit-playground) is available.\n\n# Table of contents\n\n- [Table of contents](#table-of-contents)\n - [Usage](#usage)\n - [Add bootstrap-italia and fonts](#add-bootstrap-italia-and-fonts)\n - [Example](#example)\n - [Loading Fonts](#loading-fonts)\n - [Peer dependencies](#peer-dependencies)\n - [How to contribute 💙](#how-to-contribute-)\n - [How to contribute with your own code](#how-to-contribute-with-your-own-code)\n - [How to create new components](#how-to-create-new-components)\n - [Snapshot tests](#snapshot-tests)\n - [Building library](#building-library)\n - [Useful links](#useful-links)\n - [Browsers support](#browsers-support)\n - [TypeScript typing definitions](#typescript-typing-definitions)\n - [Main contributors](#main-contributors)\n\n## Usage\n\nTo use Design React as a dependency in your React project you can install it from [npm](https://www.npmjs.com/~italia). We suggest to use `create vite` to create a new React webapp from scratch as follows:\n\n```sh\nyarn create vite my-react-app --template react\ncd nome-app\nyarn add design-react-kit --save\n```\n\nMore information on creating a new app with React:\n\n- [Official documentation](https://react.dev/learn/start-a-new-react-project)\n- [Vitejs](https://vitejs.dev/guide/#getting-started)\n\n### Add bootstrap-italia and fonts\n\nThe `design-react-kit` module does not include the CSS and font files in the bundle, so this needs to be installed as well:\n\n```sh\nyarn add bootstrap-italia typeface-lora typeface-roboto-mono typeface-titillium-web --save\n```\n\n#### Note for `vite` users\n\nIf you are using `vite` as a bundler and want to customize the standard appearance of Bootstrap Italia, you need to\nadd an alias in the `vite.config.js` file:\n\n```js\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n\nexport default defineConfig({\n plugins: [react()],\n resolve: {\n alias: {\n \"@splidejs/splide/src/css/core/index\":\n \"node_modules/@splidejs/splide/src/css/core/index.scss\",\n }\n }\n});\n```\n\n### Example\n\nThen, you just need to import CSS e font editing `./src/App.js` as shown:\n\n```tsx\nimport React from 'react';\nimport './App.css';\nimport { Alert } from 'design-react-kit';\nimport 'bootstrap-italia/dist/css/bootstrap-italia.min.css';\nimport 'typeface-titillium-web';\nimport 'typeface-roboto-mono';\nimport 'typeface-lora';\n\nfunction App() {\n return This is an Alert;\n}\n\nexport default App;\n```\n\nYou can consult this web template with StackBlitz:\n[Web template](https://stackblitz.com/edit/vitejs-vite-yy8bnk?file=src%2FApp.tsx)\n\n### Loading Fonts\n\nThe Bootstrap Italia theme defines a specific set of font typefaces to work: `titillium-web`, `roboto-mono` and `lora`. The loading of this set of fonts can be left to the browser or controlled: in this last case it is necessary to use the `FontLoader` component exported by the library.\nDeclaring the `FontLoader` on top of the Application tree it is enough to trigger the loading of the fonts.\n\nAs alternative it is required to manually manage the loading via the `webfontloader` package:\n\n```js\nconst WebFont = require('webfontloader');\nWebFont.load({\n custom: {\n families: ['Titillium Web:300,400,600,700:latin-ext', 'Lora:400,700:latin-ext', 'Roboto Mono:400,700:latin-ext']\n }\n});\n```\n\n### Peer dependencies\n\nThe library does not include `react` and `react-dom`, avoiding versions clashing and increasing the size of the bundle.\nFor this reason, for local development it will be necessary to manually install dependencies.\n\nThe command to be executed is\n\n```sh\nyarn install --peers\n```\n\nor alternatively manually\n\n```sh\nyarn install react react-dom\n```\n\n## How to contribute 💙\n\n👉🏻 You can contribute to the library in various ways:\n\n- With your own code, taking charge of an issue among those open and not already assigned among [the issues](https://github.com/italia/design-react-kit/issues) of React Kit (even a comment on the issue to notify the desire to take charge).\n- By reporting bugs or improvements to the React Kit [official repository](https://github.com/italia/design-react-kit/).\n- By writing to us on the [dedicated channel](https://developersitalia.slack.com/messages/C04J92F9XM2/) of Slack.\n\n## How to contribute with your own code\n\nThe minimum requirements of your local environment should be:\n\n- NodeJS (>= 18)\n- Yarn\n\nClone the repo and run `yarn` to install the dependencies.\nThen run the `yarn storybook:serve` command to start the development server.\n\nStorybook will therefore be available at http://localhost:9001/\n\nPublic version of the Storybook is available [here](https://italia.github.io/design-react-kit).\n\nStorybook has been enriched with some `addons` that make it more talented. Check dependencies on the `package.json` file for details.\n\n## How to create new components\n\nThis section explains how to create new components in the repository.\nAll components reside in the `src` directory: each component is a folder with all that is needed to make it work.\n_Storybook_ stories are instead under `stories`. \nUnit tests are under the `test` folder.\n\ni.e. the `Button` component is shown below the `src/Button` path and its structure is as follows:\n\n```\n├── src\n│ └── Button\n│ └── Button.tsx\n├── stories\n│ ├── Components\n│ │ └── Button.stories.tsx\n│ └── Documentation\n│ └── Button.mdx\n└── test\n └── Button.test.tsx\n```\n\nSome basic rules for structuring the components:\n\n- TSX file component files use JSX syntax.\n- The `.stories.tsx` files only contains examples relative to component.\n- The `.mdx` files only contains documentation relative to component.\n- The `.test.tsx` files only contains tests relative to component.\n\nOnce you have created a new component, with its history, starting _Storybook_ will be able to check that everything works as it should.\n\nDocumentation:\n\n- [Storybook](https://storybook.js.org/docs/get-started)\n- [MDX](https://storybook.js.org/docs/writing-docs/mdx)\n\n### Snapshot tests\n\nThe testing system has been provided with a snapshot check on existing stories: this means that each story content is copied into a special file used as reference to check changes in the future. This might fail some test checks on the PR in case of new or changed stories. \nIn such case it is possible to update the snapshot file with the following command:\n\n```sh\nyarn test -u\n```\n\nAt this point create a new commit and update the PR. Make sure to check the new snapshot content whether it is in line with the changes made before pushing.\n\n## Building library\n\nTo build the library and add files into the `dist` folder:\n\n```sh\nyarn build\n```\n\n## Useful links\n\n- [Playground React Kit](https://github.com/italia/design-react-kit-playground)\n\n## Browsers support\n\nThe design kit follows the Guidelines for Public Services Design, within the Section [6.3.1.2.1. Supporto browser](https://docs.italia.it/italia/designers-italia/design-linee-guida-docs/it/2020.1/doc/user-interface/lo-sviluppo-di-un-interfaccia-e-i-web-kit.html#strumenti) via the package `browserslist-config-design-italia`.\n\n## TypeScript typing definitions\n\nThe library has been rewritten in Typescript and types are exported in the bundle.\n\n## Main contributors\n\nA special thank you to those who made the development of this library possible!\n\n| [![Sabatino Galasso](https://github.com/sabato-galasso.png?size=100)](https://github.com/sabato-galasso) | [![Marco Liberati](https://github.com/dej611.png?size=100)](https://github.com/dej611) | [![Matteo Avesani](https://github.com/Virtute90.png?size=100)](https://github.com/Virtute90) | [![Federico Turbino](https://github.com/federico-ntr.png?size=100)](https://github.com/federico-ntr) |\n| -------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |\n| Sabatino Galasso | Marco Liberati | Matteo Avesani | Federico Turbino |\n\nand thanks to [OpenCity Labs](https://opencitylabs.it) team\n\n\"OpenCity\n\n---\n\nAll contributors (_made with [contributors-img](https://contrib.rocks)_)\n\n\n \n\n" }, { "path": "README.md", "content": "

Design React Kit

\n\n

\n \"react-logo\"\n
\n Design React Kit è un toolkit basato su Bootstrap Italia \n
per la creazione di applicazioni web sviluppate con React.\n
\n

\n\n

\n italia.github.io/design-react-kit\n
\n

\n\n

\n \"NPM\"\n \"Build\"\n \"codecov\"\n \"License\"\n \"GitHub\n

\n\n

\n \n \"Join\n \n \n \"Get\n \n

\n\n_Read this in other languages: [English 🇬🇧](README.EN.md)._\n\n_⚠️ Attenzione: questo kit è stato progettato per funzionare con la versione 2.x di Bootstrap Italia. Il kit per la versione 1.x di Bootstrap Italia è stato deprecato e si trova sul branch [4.x](https://github.com/italia/design-react-kit/tree/4.x)._\n\n## Intro\n\n**Design React kit** è un set di componenti React che implementa [Bootstrap Italia](https://italia.github.io/bootstrap-italia/) e gli stili presenti su [Design UI Kit](https://github.com/italia/design-ui-kit).\nPer navigare la libreria e visualizzare i componenti, è stato utilizzato [Storybook](https://storybook.js.org/).\nLa versione pubblica dello Storybook è disponibile [qui](https://italia.github.io/design-react-kit) per l'ultima release stabile pubblicata.\nPer giocare con la libreria è disponibile il [Playground React Kit](https://github.com/italia/design-react-kit-playground).\n\n# Indice\n\n- [Indice](#indice)\n - [Come usare il kit](#come-usare-il-kit)\n - [Aggiungere bootstrap-italia ed i font](#aggiungere-bootstrap-italia-ed-i-font)\n - [Esempio](#esempio)\n - [Caricamento Font](#caricamento-font)\n - [Peer dependencies](#peer-dependencies)\n - [Come contribuire 💙](#come-contribuire-)\n - [Con il codice](#con-il-codice)\n - [Impostare l'ambiente locale](#impostare-lambiente-locale)\n - [Come creare nuovi componenti](#come-creare-nuovi-componenti)\n - [Snapshot tests](#snapshot-tests)\n - [Compilazione libreria](#compilazione-libreria)\n - [Link utili](#link-utili)\n - [Supporto browsers](#supporto-browsers)\n - [TypeScript typings](#typescript-typings)\n - [Contributor della libreria](#contributor-della-libreria)\n\n## Come usare il kit\n\nPer utilizzare Design React come dipendenza in un'app è possibile installarla da [npm](https://www.npmjs.com/~italia). Suggeriamo di usare `create vite` per creare una nuova webapp React, come segue:\n\n```sh\nyarn create vite nome-app --template react\ncd nome-app\nyarn add design-react-kit --save\n```\n\nMaggiori informazioni per crere una nuova app con React:\n\n- [Documentazione ufficiale](https://react.dev/learn/start-a-new-react-project)\n- [Vitejs](https://vitejs.dev/guide/#getting-started)\n\n### Aggiungere bootstrap-italia ed i font\n\nIl `design-react-kit` non include il CSS ed i file font, ed è quindi necessario installarli a parte:\n\n```sh\nyarn add bootstrap-italia typeface-lora typeface-roboto-mono typeface-titillium-web --save\n```\n\n### Esempio\n\nA questo punto, è sufficiente importare esplicitamente nella app CSS e font se si è usato `create vite` all'interno del file `./src/App.js`:\n\n```tsx\nimport React from 'react';\nimport './App.css';\nimport { Alert } from 'design-react-kit';\nimport 'bootstrap-italia/dist/css/bootstrap-italia.min.css';\nimport 'typeface-titillium-web';\nimport 'typeface-roboto-mono';\nimport 'typeface-lora';\n\nfunction App() {\n return This is an Alert;\n}\n\nexport default App;\n```\n\nPuoi consultare questo template web con StackBlitz:\n[Template web](https://stackblitz.com/edit/vitejs-vite-yy8bnk?file=src%2FApp.tsx)\n\n#### Nota per chi utilizza `vite`\n\nSe si utilizza `vite` come bundler e si vuole personalizzare l'aspetto standard di Bootstrap Italia, è necessario\naggiungere un alias nel file `vite.config.js`:\n\n```js\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n\nexport default defineConfig({\n plugins: [react()],\n resolve: {\n alias: {\n \"@splidejs/splide/src/css/core/index\":\n \"node_modules/@splidejs/splide/src/css/core/index.scss\",\n }\n }\n});\n```\n\n### Caricamento Font\n\nIl tema Bootstrap Italia utilizza un set specifico di font typeface: `titillium-web`, `roboto-mono` e `lora`. Il caricamento di questi font è lasciato al browser ma, volendo può essere controllato tramite l'apposito componente `FontLoader`.\nÈ sufficiente dichiarare il componente `FontLoader` in cima all'app react per permettere il caricamento.\n\nIn alternativa è necessario gestire il caricamento dei font manualmente mediante il pacchetto `webfontloader`:\n\n```js\nconst WebFont = require('webfontloader');\nWebFont.load({\n custom: {\n families: ['Titillium Web:300,400,600,700:latin-ext', 'Lora:400,700:latin-ext', 'Roboto Mono:400,700:latin-ext']\n }\n});\n```\n\n### Peer dependencies\n\nLa libreria non include `react` e `react-dom`, evitando clashing di versioni e aumento inutile delle dimensioni del bundle.\nPer questo motivo per lo sviluppo in locale sarà necessario installare manualmente le dipendenze.\n\nIl comando da eseguire è\n\n```sh\nyarn install --peers\n```\n\noppure in alternativa manualmente\n\n```sh\nyarn install react react-dom\n```\n\n## Come contribuire 💙\n\n👉🏻 È possibile contribuire alla libreria in vari modi:\n\n- Con il proprio codice, prendendo in carico una issue tra quelle aperte e non già assegnate tra [le issue](https://github.com/italia/design-react-kit/issues) di React Kit (è sufficiente anche un commento sulla issue per notificare la volontà di presa in carico).\n- Attraverso la segnalazione di bug o miglioramenti al [repository ufficiale](https://github.com/italia/design-react-kit/) di React Kit.\n- Scrivendoci sul [canale dedicato](https://developersitalia.slack.com/messages/C04J92F9XM2/) di Slack.\n\n### Con il codice\n\nVorresti dare una mano su Design React Kit? **Sei nel posto giusto!**\n\nSe non l'hai già fatto, inizia spendendo qualche minuto per approfondire la tua conoscenza sulle\n[linee guida di design per i servizi web della PA](https://design-italia.readthedocs.io/it/stable/index.html),\ne fai riferimento alle [indicazioni su come contribuire a Design React Kit](https://github.com/italia/design-react-kit/blob/main/CONTRIBUTING.md).\n\n### Impostare l'ambiente locale\n\nI requisiti minimi del tuo ambiente locale devono essere:\n\n- NodeJS (>= 18)\n- Yarn\n\nClona il repository ed esegui `yarn` per installare le dipendenze.\nQuindi esegui\n\n```sh\nyarn storybook:serve\n```\n\nper avviare il server di sviluppo.\n\nStorybook sarà quindi disponibile all'indirizzo http://localhost:9001/\n\nStorybook è stato arricchito con alcuni `addons` che lo rendono più parlante.\n\n## Come creare nuovi componenti\n\nQuesta sezione guiderà alla creazione di nuovi componenti nel repository.\nTutti i componenti risiedono nella cartella `src`: ogni componente possiede una sua cartella con tutto ciò che è necessario per farlo funzionare.\nLe storie `Storybook` invece sono sotto `stories`.\nI test unitari risiedono nella cartella `test`.\nIl componente `Button` ad esempio è presente sotto il percorso `src/Button` e la sua struttura è la seguente:\n\n```\n├── src\n│ └── Button\n│ └── Button.tsx\n├── stories\n│ ├── Components\n│ │ └── Button.stories.tsx\n│ └── Documentation\n│ └── Button.mdx\n└── test\n └── Button.test.tsx\n```\n\nAlcune regole di base per strutturare i componenti:\n\n- I file TSX file del componente utilizza la sintassi JSX.\n- I file `.stories.tsx` dovrebbero contenere solo quanto relativo al componente stesso.\n- I file `.mdx` dovrebbero contenere solo documentazione relativa al componente stesso\n- I file `.test.tsx` dovrebbero contenere solo test relativi al componente stesso.\n\nUna volta creato un nuovo componente, con la sua story, avviando Storybook sarà possibile controllare che tutto funzioni come dovrebbe.\n\nDocumentazione:\n\n- [Storybook](https://storybook.js.org/docs/get-started)\n- [MDX](https://storybook.js.org/docs/writing-docs/mdx)\n\n### Snapshot tests\n\nIl sistema di testing prevede un controllo delle storie presenti, mediante una tecnica chiamata \"snapshot\" testing: il contenuto della storia Storybook verrà copiato in un file speciale e preservato per notificare eventuali cambiamenti in futuro. Questo fa si che l'aggiunta di nuove storie potrebbe risultare in un fallimento del task \"test\" in una PR.\nQualora fosse stata aggiunta una nuova storia o modificata una già presente, sarà necessario aggiornare il file di snapshot come segue:\n\n```sh\nyarn test -u\n```\n\nA questo punto creare un nuovo commit ed aggiornare la PR con il file di snapshot aggiornato. Controllare che le modifiche apportate siano corrette prima di aggiornare la PR.\n\n## Compilazione libreria\n\nPer compilare la libreria e generare i file nella cartella `dist`, è sufficiente lanciare il comando dedicato:\n\n```sh\nyarn build\n```\n\n## Link utili\n\n- [Playground React Kit](https://github.com/italia/design-react-kit-playground)\n\n## Supporto browsers\n\nIl kit segue le indicazioni riportate nelle Linee Guida di Design per i servizi web della Pubblica Amministrazione, sezione [6.3.1.2.1. Supporto browser](https://docs.italia.it/italia/designers-italia/design-linee-guida-docs/it/2020.1/doc/user-interface/lo-sviluppo-di-un-interfaccia-e-i-web-kit.html#strumenti) mediante l'utilizzo del pacchetto `browserslist-config-design-italia`.\n\n## TypeScript typings\n\nLa libreria è stata portata a Typescript ed i tipi sono esportati con essa.\n\n## Contributor della libreria\n\nUn grazie speciale a chi ha reso possibile lo sviluppo di questa libreria!\n\n| [![Sabatino Galasso](https://github.com/sabato-galasso.png?size=100)](https://github.com/sabato-galasso) | [![Marco Liberati](https://github.com/dej611.png?size=100)](https://github.com/dej611) | [![Matteo Avesani](https://github.com/Virtute90.png?size=100)](https://github.com/Virtute90) | [![Federico Turbino](https://github.com/federico-ntr.png?size=100)](https://github.com/federico-ntr) |\n| -------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |\n| Sabatino Galasso | Marco Liberati | Matteo Avesani | Federico Turbino |\n\ne al contributo di [OpenCity Labs](https://opencitylabs.it)\n\n\"OpenCity\n\n---\n\nTutti i contributor (_made with [contributors-img](https://contrib.rocks)_)\n\n\n \n\n" }, { "path": "assets/css/accesibility.css", "content": ".bd-callout-accessibility {\n border-left-color: #10925f !important;\n}\n\n.bd-callout {\n padding: 1.25rem;\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n border: 1px solid #eee;\n border-left-width: .25rem;\n border-radius: .25rem;\n}" }, { "path": "assets/css/storybook-fixes.css", "content": "/* ==========================\r\n// `
` and `` tags.\r\n// ========================== */\r\n\r\npre,\r\ncode,\r\nsbdocs-preview > code .token[class],\r\nsbdocs-preview > code .token.comment[class] {\r\n  font-style: normal;\r\n  color: #f8f8f2;\r\n}\r\n\r\npre > code,\r\npre > code[class] {\r\n  outline: 0;\r\n  display: block;\r\n  font-size: 13px;\r\n  tab-size: 2;\r\n  padding: 1em;\r\n  overflow-x: auto;\r\n}\r\n\r\n/* =======================================\r\n// Fix incorrect Storybook implementation.\r\n// ======================================= */\r\n\r\n[class] > pre.hljs[class] {\r\n  overflow: hidden;\r\n  padding: 0;\r\n  white-space: pre;\r\n}\r\n\r\n[class] > pre.hljs[class] > code {\r\n  background-color: transparent;\r\n  border-radius: 0;\r\n}\r\n\r\n/* =======================================\r\n// Specific tweak for the Storybook documentation\r\n// ======================================= */\r\n\r\n/* Fix docs wrapper alignment and padding */\r\n.sbdocs.css-qunf3a {\r\n  justify-content: left;\r\n  padding: 3rem;\r\n}\r\n\r\n/* Fix TOC size */\r\n.css-zpcrvf {\r\n  width: auto !important;\r\n}\r\n\r\n.docs .callout {\r\n  max-width: none;\r\n}\r\n\r\n.bg-grey {\r\n  background-color: #e9e6f2 !important;\r\n}\r\n\r\n.bg-dark {\r\n  background-color: #17324d !important;\r\n}\r\n\r\n.btn-example .btn {\r\n  margin: 4px 8px;\r\n  width: 200px;\r\n}\r\n\r\n.square-color {\r\n  width: 150px;\r\n  height: 150px;\r\n  -webkit-box-sizing: border-box;\r\n  box-sizing: border-box;\r\n  padding: 15px;\r\n  margin-right: 15px;\r\n  float: left;\r\n}\r\n\r\n.c-line {\r\n  height: 60px;\r\n  width: 100%;\r\n  -webkit-box-sizing: border-box;\r\n  box-sizing: border-box;\r\n  padding: 15px;\r\n  margin-bottom: 8px;\r\n}\r\n\r\n.docs-show-dropdown-open div {\r\n  position: relative !important;\r\n  display: block !important;\r\n}\r\n\r\ndiv[id*='story'] .progress + .progress {\r\n  margin-top: 1rem;\r\n}\r\n\r\ndiv[id*='componenti-bottomnav'] > div {\r\n  max-width: 375px;\r\n  height: 240px;\r\n  margin: 0 5px 20px;\r\n  padding: 0;\r\n  border-top-style: dashed;\r\n  position: relative;\r\n  padding: 1rem;\r\n  margin-top: 1rem;\r\n  border: solid #f3f3f5;\r\n  border-width: 4px;\r\n  border-top-left-radius: 4px;\r\n  border-top-right-radius: 4px;\r\n  border-bottom: 0;\r\n  border-width: 0.2rem;\r\n}\r\n\r\ndiv[id*='componenti-bottomnav'] > div::after {\r\n  display: block;\r\n  clear: both;\r\n  content: '';\r\n}\r\n\r\ndiv[id*='componenti-bottomnav'] .bottom-nav {\r\n  position: absolute;\r\n}\r\n\r\n.test-docs .notification {\r\n  position: relative;\r\n}\r\n\r\n.test-desktop {\r\n  width: 100%;\r\n  height: 500px;\r\n  background: #fafafa;\r\n  border: 1px solid #eee;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n.test-desktop .notification {\r\n  position: absolute;\r\n  display: block;\r\n}\r\n\r\n.layout-example.docs .d-flex,\r\n.layout-example.docs .row {\r\n  background-image:\r\n    linear-gradient(45deg, #d9dadb 25%, transparent 25%), linear-gradient(-45deg, #d9dadb 25%, transparent 25%),\r\n    linear-gradient(45deg, transparent 75%, #d9dadb 75%), linear-gradient(-45deg, transparent 75%, #d9dadb 75%);\r\n  background-size: 20px 20px;\r\n  background-position:\r\n    0 0,\r\n    0 10px,\r\n    10px -10px,\r\n    -10px 0;\r\n}\r\n\r\n.layout-example.docs .row > .col,\r\n.layout-example.docs .row > [class^='col-'] {\r\n  padding-top: 0.75rem;\r\n  padding-bottom: 0.75rem;\r\n  background-color: rgba(0, 102, 204, 0.75);\r\n  border: 1px solid #06c;\r\n  color: #fff;\r\n}\r\n\r\n.toolbar-docs-style {\r\n  max-width: 400px;\r\n  height: 400px;\r\n}\r\n\r\n/* =======================================\r\n// Display Back to top button inline in the docs\r\n// ======================================= */\r\n\r\n.back-to-top:not(.example) {\r\n  position: relative;\r\n  bottom: unset;\r\n  right: unset;\r\n  visibility: visible;\r\n  margin: 0 auto;\r\n  opacity: 1;\r\n  transform: scale(1);\r\n}\r\n\r\n.callout-inner p {\r\n  margin-top: 0;\r\n}\r\n"
  },
  {
    "path": "assets/docs/scss/_callouts.scss",
    "content": ".bd-callout {\n    padding: 1.25rem;\n    margin-top: 1.25rem;\n    margin-bottom: 1.25rem;\n    border: 1px solid #eee;\n    border-left-width: 0.25rem;\n    border-radius: 0.25rem;\n  \n    h4 {\n      margin-top: 0;\n      margin-bottom: 0.25rem;\n    }\n    h3 {\n      margin-top: 0;\n      margin-bottom: 0.25rem;\n    }\n  \n    p:last-child {\n      margin-bottom: 0;\n    }\n  \n    code {\n      border-radius: 0.25rem;\n    }\n  \n    & + .bd-callout {\n      margin-top: -0.25rem;\n    }\n  }\n  \n  // Variations\n  @mixin bs-callout-variant($color) {\n    border-left-color: darken($color, 10%);\n    h4 {\n      color: darken($color, 10%);\n    }\n    h3 {\n      color: darken($color, 10%);\n    }\n  }\n  \n  .bd-callout-info {\n    @include bs-callout-variant($docs-info);\n  }\n  \n  .bd-callout-warning {\n    @include bs-callout-variant($docs-warning);\n  }\n  \n  .bd-callout-danger {\n    @include bs-callout-variant($docs-danger);\n  }\n  \n  .bd-callout-accessibility {\n    h4 {\n      color: $docs-accessibility;\n    }\n    border-left-color: lighten($docs-accessibility, 10%);\n    h3 {\n      color: $docs-accessibility;\n    }\n    border-left-color: lighten($docs-accessibility, 10%);\n  }"
  },
  {
    "path": "assets/docs/scss/_colors.scss",
    "content": "//\n// Docs color palette classes\n//\n\n@each $color, $value in $colors {\n    .swatch-#{$color} {\n      color: color-contrast($value);\n      background-color: #{$value};\n    }\n  }\n  \n  @each $color, $value in $theme-colors {\n    .swatch-#{$color} {\n      color: color-contrast($value);\n      background-color: #{$value};\n    }\n  }\n  \n  @each $color, $value in $grays {\n    .swatch-#{$color} {\n      color: color-contrast($value);\n      background-color: #{$value};\n    }\n  }\n  \n  $primary-bright: lighten(saturate($primary, 5%), 15%) !default;\n  $primary-light: lighten(saturate($primary, 5%), 45%) !default;\n  $docs-info: rgb(23, 50, 77) !default;\n  $docs-warning: rgb(255, 151, 0) !default;\n  $docs-danger: rgb(248, 62, 90) !default;\n  $docs-accessibility: rgb(11, 100, 65) !default;\n  $docs-dark: #3e5266 !default;"
  },
  {
    "path": "assets/docs/scss/bi-fonts.scss",
    "content": "$font-path: '../../../node_modules/bootstrap-italia/dist/fonts';\r\n\r\n/* Titillium+Web:300,400,600,700 */\r\n\r\n/* titillium-web-300 - latin-ext_latin */\r\n@font-face {\r\n  font-family: 'Titillium Web';\r\n  font-style: normal;\r\n  font-weight: 300;\r\n  font-display: swap;\r\n  src: url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.eot'); /* IE9 Compat Modes */\r\n  src:\r\n    local(''),\r\n    url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.eot?#iefix') format('embedded-opentype'),\r\n    /* IE6-IE8 */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.woff2') format('woff2'),\r\n    /* Super Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.woff')\r\n      format('woff'),\r\n    /* Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.ttf')\r\n      format('truetype'),\r\n    /* Safari, Android, iOS */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.svg#TitilliumWeb')\r\n      format('svg'); /* Legacy iOS */\r\n}\r\n\r\n/* titillium-web-300italic - latin-ext_latin */\r\n@font-face {\r\n  font-family: 'Titillium Web';\r\n  font-style: italic;\r\n  font-weight: 300;\r\n  font-display: swap;\r\n  src: url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.eot'); /* IE9 Compat Modes */\r\n  src:\r\n    local(''),\r\n    url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.eot?#iefix')\r\n      format('embedded-opentype'),\r\n    /* IE6-IE8 */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.woff2') format('woff2'),\r\n    /* Super Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.woff')\r\n      format('woff'),\r\n    /* Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.ttf')\r\n      format('truetype'),\r\n    /* Safari, Android, iOS */\r\n      url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */\r\n}\r\n\r\n/* titillium-web-regular - latin-ext_latin */\r\n@font-face {\r\n  font-family: 'Titillium Web';\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  font-display: swap;\r\n  src: url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */\r\n  src:\r\n    local(''),\r\n    url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'),\r\n    /* IE6-IE8 */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.woff2') format('woff2'),\r\n    /* Super Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.woff')\r\n      format('woff'),\r\n    /* Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.ttf')\r\n      format('truetype'),\r\n    /* Safari, Android, iOS */\r\n      url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.svg#TitilliumWeb') format('svg'); /* Legacy iOS */\r\n}\r\n\r\n/* titillium-web-italic - latin-ext_latin */\r\n@font-face {\r\n  font-family: 'Titillium Web';\r\n  font-style: italic;\r\n  font-weight: 400;\r\n  font-display: swap;\r\n  src: url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */\r\n  src:\r\n    local(''),\r\n    url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'),\r\n    /* IE6-IE8 */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.woff2') format('woff2'),\r\n    /* Super Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.woff')\r\n      format('woff'),\r\n    /* Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.ttf')\r\n      format('truetype'),\r\n    /* Safari, Android, iOS */\r\n      url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */\r\n}\r\n\r\n/* titillium-web-700 - latin-ext_latin */\r\n@font-face {\r\n  font-family: 'Titillium Web';\r\n  font-style: normal;\r\n  font-weight: 700;\r\n  font-display: swap;\r\n  src: url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.eot'); /* IE9 Compat Modes */\r\n  src:\r\n    local(''),\r\n    url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'),\r\n    /* IE6-IE8 */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.woff2') format('woff2'),\r\n    /* Super Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.woff')\r\n      format('woff'),\r\n    /* Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.ttf')\r\n      format('truetype'),\r\n    /* Safari, Android, iOS */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.svg#TitilliumWeb')\r\n      format('svg'); /* Legacy iOS */\r\n}\r\n\r\n/* titillium-web-700italic - latin-ext_latin */\r\n@font-face {\r\n  font-family: 'Titillium Web';\r\n  font-style: italic;\r\n  font-weight: 700;\r\n  font-display: swap;\r\n  src: url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.eot'); /* IE9 Compat Modes */\r\n  src:\r\n    local(''),\r\n    url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.eot?#iefix')\r\n      format('embedded-opentype'),\r\n    /* IE6-IE8 */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.woff2') format('woff2'),\r\n    /* Super Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.woff')\r\n      format('woff'),\r\n    /* Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.ttf')\r\n      format('truetype'),\r\n    /* Safari, Android, iOS */\r\n      url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */\r\n}\r\n/* titillium-web-600 - latin-ext_latin */\r\n@font-face {\r\n  font-family: 'Titillium Web';\r\n  font-style: normal;\r\n  font-weight: 600;\r\n  font-display: swap;\r\n  src: url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.eot'); /* IE9 Compat Modes */\r\n  src:\r\n    local(''),\r\n    url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.eot?#iefix') format('embedded-opentype'),\r\n    /* IE6-IE8 */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.woff2') format('woff2'),\r\n    /* Super Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.woff')\r\n      format('woff'),\r\n    /* Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.ttf')\r\n      format('truetype'),\r\n    /* Safari, Android, iOS */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.svg#TitilliumWeb')\r\n      format('svg'); /* Legacy iOS */\r\n}\r\n\r\n/* titillium-web-600italic - latin-ext_latin */\r\n@font-face {\r\n  font-family: 'Titillium Web';\r\n  font-style: italic;\r\n  font-weight: 600;\r\n  font-display: swap;\r\n  src: url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.eot'); /* IE9 Compat Modes */\r\n  src:\r\n    local(''),\r\n    url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.eot?#iefix')\r\n      format('embedded-opentype'),\r\n    /* IE6-IE8 */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.woff2') format('woff2'),\r\n    /* Super Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.woff')\r\n      format('woff'),\r\n    /* Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.ttf')\r\n      format('truetype'),\r\n    /* Safari, Android, iOS */\r\n      url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */\r\n}\r\n\r\n/* Lora:400,700 */\r\n\r\n/* lora-regular - latin-ext_latin */\r\n@font-face {\r\n  font-family: 'Lora';\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  font-display: swap;\r\n  src: url('#{$font-path}/Lora/lora-v20-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */\r\n  src:\r\n    local(''),\r\n    url('#{$font-path}/Lora/lora-v20-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'),\r\n    /* IE6-IE8 */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-regular.woff2') format('woff2'),\r\n    /* Super Modern Browsers */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-regular.woff') format('woff'),\r\n    /* Modern Browsers */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-regular.ttf') format('truetype'),\r\n    /* Safari, Android, iOS */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-regular.svg#Lora') format('svg'); /* Legacy iOS */\r\n}\r\n\r\n/* lora-700 - latin-ext_latin */\r\n@font-face {\r\n  font-family: 'Lora';\r\n  font-style: normal;\r\n  font-weight: 700;\r\n  font-display: swap;\r\n  src: url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700.eot'); /* IE9 Compat Modes */\r\n  src:\r\n    local(''),\r\n    url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'),\r\n    /* IE6-IE8 */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700.woff2') format('woff2'),\r\n    /* Super Modern Browsers */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700.woff') format('woff'),\r\n    /* Modern Browsers */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700.ttf') format('truetype'),\r\n    /* Safari, Android, iOS */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700.svg#Lora') format('svg'); /* Legacy iOS */\r\n}\r\n\r\n/* lora-italic - latin-ext_latin */\r\n@font-face {\r\n  font-family: 'Lora';\r\n  font-style: italic;\r\n  font-weight: 400;\r\n  font-display: swap;\r\n  src: url('#{$font-path}/Lora/lora-v20-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */\r\n  src:\r\n    local(''),\r\n    url('#{$font-path}/Lora/lora-v20-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'),\r\n    /* IE6-IE8 */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-italic.woff2') format('woff2'),\r\n    /* Super Modern Browsers */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-italic.woff') format('woff'),\r\n    /* Modern Browsers */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-italic.ttf') format('truetype'),\r\n    /* Safari, Android, iOS */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-italic.svg#Lora') format('svg'); /* Legacy iOS */\r\n}\r\n\r\n/* lora-700italic - latin-ext_latin */\r\n@font-face {\r\n  font-family: 'Lora';\r\n  font-style: italic;\r\n  font-weight: 700;\r\n  font-display: swap;\r\n  src: url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700italic.eot'); /* IE9 Compat Modes */\r\n  src:\r\n    local(''),\r\n    url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700italic.eot?#iefix') format('embedded-opentype'),\r\n    /* IE6-IE8 */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700italic.woff2') format('woff2'),\r\n    /* Super Modern Browsers */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700italic.woff') format('woff'),\r\n    /* Modern Browsers */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700italic.ttf') format('truetype'),\r\n    /* Safari, Android, iOS */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700italic.svg#Lora') format('svg'); /* Legacy iOS */\r\n}\r\n\r\n/* Roboto+Mono:400,700 */\r\n\r\n/* roboto-mono-regular - latin-ext_latin */\r\n@font-face {\r\n  font-family: 'Roboto Mono';\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  font-display: swap;\r\n  src: url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */\r\n  src:\r\n    local(''),\r\n    url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'),\r\n    /* IE6-IE8 */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.woff2') format('woff2'),\r\n    /* Super Modern Browsers */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.woff')\r\n      format('woff'),\r\n    /* Modern Browsers */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.ttf')\r\n      format('truetype'),\r\n    /* Safari, Android, iOS */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.svg#RobotoMono')\r\n      format('svg'); /* Legacy iOS */\r\n}\r\n\r\n/* roboto-mono-700 - latin-ext_latin */\r\n@font-face {\r\n  font-family: 'Roboto Mono';\r\n  font-style: normal;\r\n  font-weight: 700;\r\n  font-display: swap;\r\n  src: url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.eot'); /* IE9 Compat Modes */\r\n  src:\r\n    local(''),\r\n    url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'),\r\n    /* IE6-IE8 */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.woff2') format('woff2'),\r\n    /* Super Modern Browsers */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.woff') format('woff'),\r\n    /* Modern Browsers */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.ttf') format('truetype'),\r\n    /* Safari, Android, iOS */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.svg#RobotoMono')\r\n      format('svg'); /* Legacy iOS */\r\n}\r\n\r\n/* roboto-mono-italic - latin-ext_latin */\r\n@font-face {\r\n  font-family: 'Roboto Mono';\r\n  font-style: italic;\r\n  font-weight: 400;\r\n  font-display: swap;\r\n  src: url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */\r\n  src:\r\n    local(''),\r\n    url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'),\r\n    /* IE6-IE8 */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.woff2') format('woff2'),\r\n    /* Super Modern Browsers */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.woff')\r\n      format('woff'),\r\n    /* Modern Browsers */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.ttf') format('truetype'),\r\n    /* Safari, Android, iOS */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.svg#RobotoMono')\r\n      format('svg'); /* Legacy iOS */\r\n}\r\n\r\n/* roboto-mono-700italic - latin-ext_latin */\r\n@font-face {\r\n  font-family: 'Roboto Mono';\r\n  font-style: italic;\r\n  font-weight: 700;\r\n  font-display: swap;\r\n  src: url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.eot'); /* IE9 Compat Modes */\r\n  src:\r\n    local(''),\r\n    url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.eot?#iefix') format('embedded-opentype'),\r\n    /* IE6-IE8 */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.woff2') format('woff2'),\r\n    /* Super Modern Browsers */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.woff')\r\n      format('woff'),\r\n    /* Modern Browsers */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.ttf')\r\n      format('truetype'),\r\n    /* Safari, Android, iOS */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.svg#RobotoMono')\r\n      format('svg'); /* Legacy iOS */\r\n}\r\n"
  },
  {
    "path": "assets/docs/scss/docs.scss",
    "content": "/*!\n * Bootstrap Docs (https://getbootstrap.com)\n * Copyright 2011-2017 The Bootstrap Authors\n * Copyright 2011-2017 Twitter, Inc.\n * Licensed under the Creative Commons Attribution 3.0 Unported License. For\n * details, see https://creativecommons.org/licenses/by/3.0/.\n */\n// Dev notes\n//\n// Background information on nomenclature and architecture decisions here.\n//\n// - Bootstrap functions, variables, and mixins are included for easy reuse.\n//   Doing so gives us access to the same core utilities provided by Bootstrap.\n//   For example, consistent media queries through those mixins.\n//\n// - Bootstrap's **docs variables** are prefixed with `$docs-`.\n//   These custom colors avoid collision with the components Bootstrap provides.\n//\n// - Classes are prefixed with `.bd-`.\n//   These classes indicate custom-built or modified components for the design\n//   and layout of the Bootstrap docs. They are not included in our builds.\n//\n// Happy Bootstrapping!\n@import '../../../node_modules/bootstrap-italia/src/scss/base/functions';\n@import '../../../node_modules/bootstrap-italia/src/scss/base/mixins';\n@import '../../../node_modules/bootstrap-italia/src/scss/base/variables';\n// Load docs components\n@import 'colors';\n@import 'callouts';"
  },
  {
    "path": "babel.config.json",
    "content": "{\n  \"presets\": [\n    [\n      \"@babel/preset-env\",\n      {\n        \"targets\": {\n          \"chrome\": 100\n        }\n      }\n    ],\n    \"@babel/preset-typescript\",\n    \"@babel/preset-react\"\n  ],\n  \"plugins\": [\"@babel/plugin-transform-optional-chaining\"]\n}\n"
  },
  {
    "path": "codecov.yml",
    "content": "coverage:\n  status:\n    project:\n      default:\n        target: 90%\n        threshold: 5%\n    patch: false\n"
  },
  {
    "path": "commitlint.config.cjs",
    "content": "module.exports = {\n  parserPreset: 'conventional-changelog-conventionalcommits',\n  rules: {\n    'body-leading-blank': [1, 'always'],\n    'body-max-line-length': [2, 'always', 100],\n    'footer-leading-blank': [1, 'always'],\n    'footer-max-line-length': [2, 'always', 100],\n    'header-max-length': [2, 'always', 100],\n    'subject-case': [2, 'never', ['sentence-case', 'start-case', 'pascal-case', 'upper-case']],\n    'subject-empty': [2, 'never'],\n    'subject-full-stop': [2, 'never', '.'],\n    'type-case': [2, 'always', 'lower-case'],\n    'type-empty': [2, 'never'],\n    'type-enum': [\n      2,\n      'always',\n      ['build', 'chore', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test']\n    ]\n  },\n  prompt: {\n    questions: {\n      type: {\n        description: \"Select the type of change that you're committing\",\n        enum: {\n          feat: {\n            description: 'A new feature',\n            title: 'Features',\n            emoji: '✨'\n          },\n          fix: {\n            description: 'A bug fix',\n            title: 'Bug Fixes',\n            emoji: '🐛'\n          },\n          docs: {\n            description: 'Documentation only changes',\n            title: 'Documentation',\n            emoji: '📚'\n          },\n          style: {\n            description:\n              'Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)',\n            title: 'Styles',\n            emoji: '💎'\n          },\n          refactor: {\n            description: 'A code change that neither fixes a bug nor adds a feature',\n            title: 'Code Refactoring',\n            emoji: '📦'\n          },\n          perf: {\n            description: 'A code change that improves performance',\n            title: 'Performance Improvements',\n            emoji: '🚀'\n          },\n          test: {\n            description: 'Adding missing tests or correcting existing tests',\n            title: 'Tests',\n            emoji: '🚨'\n          },\n          build: {\n            description:\n              'Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)',\n            title: 'Builds',\n            emoji: '🛠'\n          },\n          ci: {\n            description:\n              'Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)',\n            title: 'Continuous Integrations',\n            emoji: '⚙️'\n          },\n          chore: {\n            description: \"Other changes that don't modify src or test files\",\n            title: 'Chores',\n            emoji: '♻️'\n          },\n          revert: {\n            description: 'Reverts a previous commit',\n            title: 'Reverts',\n            emoji: '🗑'\n          }\n        }\n      },\n      scope: {\n        description: 'What is the scope of this change (e.g. component or file name)'\n      },\n      subject: {\n        description: 'Write a short, imperative tense description of the change'\n      },\n      body: {\n        description: 'Provide a longer description of the change'\n      },\n      isBreaking: {\n        description: 'Are there any breaking changes?'\n      },\n      breakingBody: {\n        description: 'A BREAKING CHANGE commit requires a body. Please enter a longer description of the commit itself'\n      },\n      breaking: {\n        description: 'Describe the breaking changes'\n      },\n      isIssueAffected: {\n        description: 'Does this change affect any open issues?'\n      },\n      issuesBody: {\n        description:\n          'If issues are closed, the commit requires a body. Please enter a longer description of the commit itself'\n      },\n      issues: {\n        description: 'Add issue references (e.g. \"fix #123\", \"re #123\".)'\n      }\n    }\n  }\n};\n"
  },
  {
    "path": "eslint.config.js",
    "content": "import js from '@eslint/js';\nimport reactRefresh from 'eslint-plugin-react-refresh';\nimport globals from 'globals';\nimport tseslint from 'typescript-eslint';\n\nexport default tseslint.config(\n  { ignores: ['node_modules', 'storybook-static', 'dist', 'coverage'] },\n  {\n    extends: [js.configs.recommended, ...tseslint.configs.recommended],\n    files: ['src/**/*.{ts,tsx}', 'stories/**/*.{ts,tsx}'],\n    languageOptions: {\n      ecmaVersion: 2020,\n      globals: globals.browser\n    },\n    plugins: {\n      'react-refresh': reactRefresh\n    },\n    rules: {\n      'react-refresh/only-export-components': ['off', { allowConstantExport: true }]\n    }\n  }\n);\n"
  },
  {
    "path": "jest-setup.js",
    "content": "import '@testing-library/jest-dom'\n"
  },
  {
    "path": "jest.config.cjs",
    "content": "/**\n * For a detailed explanation regarding each configuration property, visit:\n * https://jestjs.io/docs/configuration\n */\n\n/** @type {import('jest').Config} */\nconst config = {\n    // All imported modules in your tests should be mocked automatically\n    // automock: false,\n  \n    // Stop running tests after `n` failures\n    // bail: 0,\n  \n    // The directory where Jest should store its cached dependency information\n    // cacheDirectory: \"/tmp/jest_rs\",\n  \n    // Automatically clear mock calls, instances, contexts and results before every test\n    clearMocks: true,\n  \n    // Indicates whether the coverage information should be collected while executing the test\n    collectCoverage: true,\n  \n    // An array of glob patterns indicating a set of files for which coverage information should be collected\n    // collectCoverageFrom: undefined,\n  \n    // The directory where Jest should output its coverage files\n    coverageDirectory: 'coverage',\n  \n    // An array of regexp pattern strings used to skip coverage collection\n    // coveragePathIgnorePatterns: [\n    //   \"/node_modules/\"\n    // ],\n  \n    // Indicates which provider should be used to instrument code for coverage\n    coverageProvider: 'v8',\n  \n    // A list of reporter names that Jest uses when writing coverage reports\n    // coverageReporters: [\n    //   \"json\",\n    //   \"text\",\n    //   \"lcov\",\n    //   \"clover\"\n    // ],\n  \n    // An object that configures minimum threshold enforcement for coverage results\n    // coverageThreshold: undefined,\n  \n    // A path to a custom dependency extractor\n    // dependencyExtractor: undefined,\n  \n    // Make calling deprecated APIs throw helpful error messages\n    // errorOnDeprecated: false,\n  \n    // The default configuration for fake timers\n    // fakeTimers: {\n    //   \"enableGlobally\": false\n    // },\n  \n    // Force coverage collection from ignored files using an array of glob patterns\n    // forceCoverageMatch: [],\n  \n    // A path to a module which exports an async function that is triggered once before all test suites\n    // globalSetup: undefined,\n  \n    // A path to a module which exports an async function that is triggered once after all test suites\n    // globalTeardown: undefined,\n  \n    // A set of global variables that need to be available in all test environments\n    // globals: {},\n  \n    // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.\n    // maxWorkers: \"50%\",\n  \n    // An array of directory names to be searched recursively up from the requiring module's location\n    // moduleDirectories: [\n    //   \"node_modules\"\n    // ],\n  \n    // An array of file extensions your modules use\n    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node', 'mdx'],\n  \n    // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module\n    moduleNameMapper: {\n      '^.+.(svg|png|jpg)$': 'jest-transform-stub',\n      '^.+\\\\.css$': 'identity-obj-proxy',\n      '^.+\\\\.mdx$': '@storybook/addon-docs/jest-transform-mdx'\n    },\n  \n    // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader\n    // modulePathIgnorePatterns: [],\n  \n    // Activates notifications for test results\n    // notify: false,\n  \n    // An enum that specifies notification mode. Requires { notify: true }\n    // notifyMode: \"failure-change\",\n  \n    // A preset that is used as a base for Jest's configuration\n    // preset: undefined,\n  \n    // Run tests from one or more projects\n    // projects: undefined,\n  \n    // Use this configuration option to add custom reporters to Jest\n    // reporters: undefined,\n  \n    // Automatically reset mock state before every test\n    // resetMocks: false,\n  \n    // Reset the module registry before running each individual test\n    // resetModules: false,\n  \n    // A path to a custom resolver\n    // resolver: undefined,\n  \n    // Automatically restore mock state and implementation before every test\n    // restoreMocks: false,\n  \n    // The root directory that Jest should scan for tests and modules within\n    // rootDir: undefined,\n  \n    // A list of paths to directories that Jest should use to search for files in\n    // roots: [\n    //   \"\"\n    // ],\n  \n    // Allows you to use a custom runner instead of Jest's default test runner\n    // runner: \"jest-runner\",\n  \n    // The paths to modules that run some code to configure or set up the testing environment before each test\n    // setupFiles: [],\n  \n    // A list of paths to modules that run some code to configure or set up the testing framework before each test\n    setupFilesAfterEnv: ['./jest-setup.js'], //setupFilesAfterEnv: ['/jest-setup.js']\n  \n    // The number of seconds after which a test is considered as slow and reported as such in the results.\n    // slowTestThreshold: 5,\n  \n    // A list of paths to snapshot serializer modules Jest should use for snapshot testing\n    // snapshotSerializers: [],\n  \n    // The test environment that will be used for testing\n    testEnvironment: 'jsdom',\n  \n    // Options that will be passed to the testEnvironment\n    // testEnvironmentOptions: {},\n  \n    // Adds a location field to test results\n    // testLocationInResults: false,\n  \n    // The glob patterns Jest uses to detect test files\n    // testMatch: [\n    //   \"**/__tests__/**/*.[jt]s?(x)\",\n    //   \"**/?(*.)+(spec|test).[tj]s?(x)\"\n    // ],\n  \n    // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped\n    // testPathIgnorePatterns: [\n    //   \"/node_modules/\"\n    // ],\n  \n    // The regexp pattern or array of patterns that Jest uses to detect test files\n    // testRegex: [],\n  \n    // This option allows the use of a custom results processor\n    // testResultsProcessor: undefined,\n  \n    // This option allows use of a custom test runner\n    // testRunner: \"jest-circus/runner\",\n  \n    // A map from regular expressions to paths to transformers\n    transform: {\n      '.(ts|tsx)$': 'ts-jest',\n      '.(js|jsx)$': 'babel-jest'\n    },\n  \n    // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation\n    transformIgnorePatterns: [\n       \"/node_modules/(?!uuid)/\"\n    //   \"\\\\.pnp\\\\.[^\\\\/]+$\"\n    ],\n  \n    // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them\n    // unmockedModulePathPatterns: undefined,\n  \n    // Indicates whether each individual test should be reported during the run\n    // verbose: undefined,\n  \n    // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode\n    // watchPathIgnorePatterns: [],\n  \n    // Whether to use watchman for file crawling\n    // watchman: true,\n  };\n  \n  module.exports = config;"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"design-react-kit\",\n  \"description\": \"Componenti React per Bootstrap 5\",\n  \"keywords\": [\n    \"react\",\n    \"bootstrap\",\n    \"bootstrap-italia\"\n  ],\n  \"author\": \"Presidenza del Consiglio dei Ministri\",\n  \"contributors\": [\n    \"Matteo Avesani\",\n    \"Gianluca Esposito\",\n    \"Matteo Manchi\",\n    \"Paolo Mariotti\",\n    \"Marco Liberati\",\n    \"Francesco Zaia\",\n    \"Sanyam Dogra\",\n    \"Silvio Relli\",\n    \"Sabatino Galasso\",\n    \"Andrea Stagi\",\n    \"Federico Turbino\",\n    \"Nicola Squartini\",\n    \"Davide Bizzi\"\n  ],\n  \"bugs\": {\n    \"url\": \"https://github.com/italia/design-react-kit/issues\"\n  },\n  \"version\": \"5.10.0\",\n  \"license\": \"BSD-3\",\n  \"type\": \"module\",\n  \"module\": \"./dist/index.js\",\n  \"main\": \"./dist/index.cjs\",\n  \"types\": \"./dist/types/index.d.ts\",\n  \"exports\": {\n    \".\": {\n      \"types\": \"./dist/types/index.d.ts\",\n      \"module\": \"./dist/index.js\",\n      \"main\": \"./dist/index.cjs\"\n    }\n  },\n  \"sideEffects\": [\n    \"dist/track-focus.js\",\n    \"src/track-focus.js\",\n    \"dist/index.ts\",\n    \"dist/index.js\",\n    \"src/index.ts\"\n  ],\n  \"files\": [\n    \"dist\",\n    \"src\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/italia/design-react-kit.git\"\n  },\n  \"engines\": {\n    \"node\": \">=20\"\n  },\n  \"scripts\": {\n    \"start\": \"NODE_OPTIONS=--max_old_space_size=16384 npm run storybook:serve\",\n    \"build\": \"tsup && tsc\",\n    \"test\": \"jest ./src ./test --passWithNoTests\",\n    \"test:ci\": \"jest ./src ./test --passWithNoTests --runInBand --ci\",\n    \"lint\": \"npx eslint .\",\n    \"prepare\": \"tsup && tsc && husky install\",\n    \"format-code\": \"npx prettier . --write\",\n    \"storybook:serve\": \"storybook dev -p 9001\",\n    \"storybook:build\": \"storybook build --docs\",\n    \"storybook:build:base\": \"storybook build\",\n    \"version\": \"conventional-changelog -p angular -i CHANGELOG.md -s && node scripts/wait-confirm && git add CHANGELOG.md\",\n    \"postversion\": \"echo \\\"You can now publish your version using 'git push --follow-tags'\\\"\"\n  },\n  \"peerDependencies\": {\n    \"bootstrap-italia\": \"^2.18.0\",\n    \"react\": \">=18.2.0\"\n  },\n  \"browserslist\": [\n    \"extends browserslist-config-design-italia\"\n  ],\n  \"lint-staged\": {\n    \"./{src,stories,test}/**/*.{js,ts,tsx,jsx,mdx}\": \"yarn lint\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.26.0\",\n    \"@babel/preset-env\": \"^7.26.0\",\n    \"@babel/preset-react\": \"^7.25.9\",\n    \"@babel/preset-typescript\": \"^7.26.0\",\n    \"@commitlint/cli\": \"^18.4.3\",\n    \"@commitlint/config-conventional\": \"^18.4.3\",\n    \"@eslint/js\": \"^9.10.0\",\n    \"@storybook/addon-a11y\": \"^9.1.2\",\n    \"@storybook/addon-docs\": \"^9.1.2\",\n    \"@storybook/addon-links\": \"^9.1.2\",\n    \"@storybook/addon-onboarding\": \"^9.1.2\",\n    \"@storybook/react-vite\": \"^9.1.2\",\n    \"@testing-library/dom\": \"^10.4.1\",\n    \"@testing-library/jest-dom\": \"^6.4.2\",\n    \"@testing-library/react\": \"^16.3.0\",\n    \"@types/is-number\": \"^7.0.3\",\n    \"@types/jest\": \"^29.5.12\",\n    \"@types/node\": \"^20.12.2\",\n    \"@types/react\": \"^18.2.75\",\n    \"@types/react-bootstrap\": \"^0.32.37\",\n    \"@types/react-dom\": \"^18.2.24\",\n    \"@types/react-transition-group\": \"^4.4.10\",\n    \"@types/uuid\": \"^10.0.0\",\n    \"bootstrap-italia\": \"^2.18.0\",\n    \"browserslist-config-design-italia\": \"^1.0.0\",\n    \"conventional-changelog\": \"^7.1.1\",\n    \"eslint\": \"^9.10.0\",\n    \"eslint-plugin-mdx\": \"^3.1.5\",\n    \"eslint-plugin-prettier\": \"^5.1.3\",\n    \"eslint-plugin-react-refresh\": \"^0.4.11\",\n    \"eslint-plugin-storybook\": \"^9.1.2\",\n    \"globals\": \"^15.9.0\",\n    \"husky\": \"^8.0.1\",\n    \"jest\": \"^29.7.0\",\n    \"jest-environment-jsdom\": \"^29.7.0\",\n    \"jest-transform-stub\": \"^2.0.0\",\n    \"lint-staged\": \"15.2.10\",\n    \"prettier\": \"^3.2.5\",\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\",\n    \"react-layout-masonry\": \"^1.2.0\",\n    \"sass-embedded\": \"^1.90.0\",\n    \"storybook\": \"^9.1.2\",\n    \"ts-jest\": \"^29.1.2\",\n    \"tslib\": \"^2.4.0\",\n    \"tsup\": \"^8.0.2\",\n    \"typeface-lora\": \"^1.1.13\",\n    \"typeface-roboto-mono\": \"^1.1.13\",\n    \"typescript\": \"^5.4.5\",\n    \"typescript-eslint\": \"^8.4.0\",\n    \"vite\": \"^6.4.2\"\n  },\n  \"dependencies\": {\n    \"@splidejs/react-splide\": \"^0.7.12\",\n    \"accessible-autocomplete\": \"^3.0.1\",\n    \"classnames\": \"^2.3.1\",\n    \"is-number\": \"^7.0.0\",\n    \"react-bootstrap\": \"^2.10.6\",\n    \"react-toastify\": \"^7.0.4\",\n    \"react-transition-group\": \"^4.4.5\",\n    \"reactstrap\": \"9.2.2\",\n    \"webfontloader\": \"^1.6.28\"\n  },\n  \"resolutions\": {\n    \"@types/react\": \"18.2.75\",\n    \"@types/react-dom\": \"18.2.24\"\n  },\n  \"overrides\": {\n    \"react-stickup\": {\n      \"react\": \"^18.2.0\"\n    }\n  }\n}\n"
  },
  {
    "path": "publiccode.yml",
    "content": "publiccodeYmlVersion: 0.5.0\nname: Design React Kit\napplicationSuite: Design system Italia\nurl: https://github.com/italia/design-react-kit\nsoftwareVersion: v5.10.0\nreleaseDate: '2026-03-17'\nplatforms:\n  - web\ncategories:\n  - website-builder\n  - integrated-library-system\n  - it-development\n  - design\norganisation:\n  uri: urn:x-italian-pa:pcm\n  name: Dipartimento per la trasformazione digitale\nroadmap: https://github.com/orgs/italia/projects/17/views/5?filterQuery=repo%3Aitalia%2Fdesign-react-kit\ndevelopmentStatus: stable\nsoftwareType: library\nintendedAudience:\n  countries:\n    - IT\ndescription:\n  it-IT:\n    shortDescription: Libreria di componenti React per sviluppare interfacce web\n      accessibili e coerenti per i siti e i servizi digitali della PA.\n    longDescription: Il Design React Kit, risorsa ufficiale del Design system\n      Italia, è una libreria di componenti sviluppati con React, pensata per\n      supportare la realizzazione di interfacce web per siti e servizi digitali\n      della Pubblica Amministrazione. Costruito sulle fondamenta di Bootstrap\n      Italia, ne eredita funzionalità, componenti, griglia e classi di utilità,\n      rendendoli disponibili in forma riutilizzabile all'interno di applicazioni\n      React. Il kit consente di sviluppare interfacce accessibili, inclusive e\n      semplici da mantenere, supportando la creazione di applicazioni web\n      dinamiche.\n    documentation: https://italia.github.io/design-react-kit/\n    features:\n      - Componenti React pronti all'uso\n      - Basato su Bootstrap Italia\n      - Implementa lo UI Kit Italia\n      - Realizzazione di interfacce responsive e accessibili\n      - Integrazione in applicazioni React\n      - Riutilizzo dei componenti\n      - Conformità alle Linee guida di design per i siti internet e servizi\n        digitali della PA\nlegal:\n  license: BSD-3-Clause-Clear\nmaintenance:\n  type: community\n  contacts:\n    - name: Designers Italia\n      email: contatti@designers.italia.it\nlocalisation:\n  localisationReady: false\n  availableLanguages:\n    - it\n"
  },
  {
    "path": "scripts/import_svgs.sh",
    "content": "#!/bin/sh\n\n# Import icons from BI and make them TS React components\necho 'Importing SVGs...'\n\nnpx svgr node_modules/bootstrap-italia/src/svg | tee src/Icon/assets/index.ts\n\necho 'Linting new components...'\n\nnpx eslint src/Icon/assets/*.ts* --fix\n\necho 'Reconfigure tests for new icons...'\n# Find out what SVGs have no title tag and print them into a txt file used for testing\nfind node_modules/bootstrap-italia/src/svg -iname \"*.svg\" -exec grep -Li \"title\" {} + | xargs -L 1 basename > ./test/icons-with-no-title.txt\n"
  },
  {
    "path": "scripts/svgIndexTemplate.js",
    "content": "const path = require('path');\n\nconst kebabCase = (string) =>\n  string\n    .replace(/([a-z])([A-Z])/g, '$1-$2')\n    .replace(/\\s+/g, '-')\n    .toLowerCase();\n\nfunction defaultIndexTemplate(filePaths) {\n  const iconsMap = [];\n  const switchCases = [];\n  for (const filePath of filePaths) {\n    const basename = path.basename(filePath, path.extname(filePath));\n    const exportName = /^\\d/.test(basename) ? `Svg${basename}` : basename;\n\n    const kebabName = kebabCase(exportName);\n    iconsMap.push(kebabName);\n    switchCases.push(`case '${kebabName}': {\n      return import('./${exportName}');\n    }`);\n  }\n  const file = `\nconst iconList: Record = {\n  ${iconsMap.map((name) => `  \"${name}\": true,`).join('\\n')}\n};\nexport type IconName = keyof typeof iconList;\n\nexport const loadIcon = (\n  name: IconName\n) => {\n  switch (name) {\n${switchCases.join('\\n')}\n    default:\n      throw Error(\\`It should not land here. Requested icon: \"\\${name}\"\\`);\n  }\n};\n\nexport function isBundledIcon(name: string): name is IconName {\n  return name in iconList;\n}\n\nexport const allIcons = Object.keys(iconList)\n  `;\n  return file;\n}\nmodule.exports = defaultIndexTemplate;\n"
  },
  {
    "path": "scripts/svgTemplate.js",
    "content": "function defaultTemplate({ imports, componentName, props, jsx, interfaces }, { tpl }) {\n  return tpl`${imports}\n    ${interfaces}\n  export const component = (${props}) => {\n    return ${jsx};\n  };\n    `;\n}\nmodule.exports = defaultTemplate;\n"
  },
  {
    "path": "scripts/wait-confirm.js",
    "content": "var stdin = process.stdin;\n\nconsole.log('⌨️ Press any key to continue or ctrl+c to abort...');\n\nstdin.resume();\nstdin.setEncoding('utf8');\n\nstdin.on('data', function (key) {\n  if (key === '\\u0003') {\n    process.exit(1);\n  } else {\n    process.exit(0);\n  }\n});\n"
  },
  {
    "path": "src/Accordion/Accordion.tsx",
    "content": "import React, { ElementType, FC, HTMLAttributes } from 'react';\nimport classNames from 'classnames';\n\nexport interface AccordionProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente Badge */\n  className?: string;\n  /** Utilizzare questo attributo per ottenere header con sfondo di colore primario quando questi è attivo o all’hover. */\n  background?: 'active' | 'hover';\n  /** Utilizzare questo attributo per mostrare, mediante un'icona a sinistra, lo stato di apertura */\n  iconLeft?: boolean;\n  testId?: string;\n}\n\nexport const Accordion: FC = ({\n  tag = 'div',\n  className,\n  background,\n  iconLeft = false,\n  testId,\n  ...attributes\n}) => {\n  const Tag = tag;\n  const classes = classNames('accordion', className, {\n    'accordion-background-active': background === 'active',\n    'accordion-background-hover': background === 'hover',\n    'accordion-left-icon': iconLeft\n  });\n\n  return ;\n};\n"
  },
  {
    "path": "src/Accordion/AccordionBody.tsx",
    "content": "import classNames from 'classnames';\nimport React, { ElementType, PropsWithChildren, useCallback, useRef, useState } from 'react';\nimport { Transition } from 'react-transition-group';\nimport type { TransitionProps } from 'react-transition-group/Transition';\nimport { TransitionTimeouts, TransitionsKeys } from '../transitions';\nimport { omit, pick } from '../utils';\n\nexport type AccordionBodyProps = Partial & {\n  tag?: ElementType;\n  className?: string;\n  listClassName?: string;\n  active?: boolean;\n  onToggle?: () => void;\n};\n\n// hardcode these entries to avoid leaks\nconst transitionStatusToClassHash: Record = {\n  entering: 'collapsing',\n  entered: 'collapse show',\n  exiting: 'collapsing',\n  exited: 'collapse'\n};\n\nfunction getTransitionClass(status: string) {\n  return transitionStatusToClassHash[status] || 'collapse';\n}\n\nfunction getHeight(node: HTMLElement) {\n  return node.scrollHeight;\n}\n\nexport const AccordionBody = ({\n  className,\n  listClassName,\n  tag = 'div',\n  active = false,\n  children,\n  timeout = TransitionTimeouts.Collapse,\n  ...attributes\n}: PropsWithChildren) => {\n  const [height, setHeight] = useState(null);\n  const nodeRef = useRef(null);\n  const onEntering = useCallback(\n    (isAppearing: boolean) => {\n      if (nodeRef.current) {\n        setHeight(getHeight(nodeRef.current));\n        attributes.onEntering?.(nodeRef.current, isAppearing);\n      }\n    },\n    [attributes.onEntering]\n  );\n  const onEntered = useCallback(\n    (isAppearing: boolean) => {\n      setHeight(null);\n      if (nodeRef.current) {\n        attributes.onEntered?.(nodeRef.current, isAppearing);\n      }\n    },\n    [attributes.onEntered]\n  );\n  const onExit = useCallback(\n    () => {\n      if (nodeRef.current) {\n        setHeight(getHeight(nodeRef.current));\n        attributes.onExit?.(nodeRef.current);\n      }\n    },\n    [attributes.onExit]\n  );\n  const onExiting = useCallback(\n    () => {\n      if (nodeRef.current) {\n        // getting this variable triggers a reflow\n        // @ts-expect-error variabile non usata\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        const _unused = nodeRef.current.offsetHeight;\n        setHeight(0);\n        attributes.onExiting?.(nodeRef.current);\n      }\n    },\n    [attributes.onExiting]\n  );\n  const onExited = useCallback(\n    () => {\n      setHeight(null);\n      if (nodeRef.current) {\n        attributes.onExited?.(nodeRef.current);\n      }\n    },\n    [attributes.onExited]\n  );\n  const Tag = tag;\n\n  const transitionProps = pick(attributes, TransitionsKeys);\n  const childProps = omit(attributes, TransitionsKeys);\n\n  return (\n    \n      {(status) => {\n        const transitionClass = getTransitionClass(status);\n        const classes = classNames(className, transitionClass);\n        const listClasses = classNames(listClassName, 'accordion-body');\n        const style = height == null ? null : { height };\n\n        return (\n          \n            
{children}
\n          \n        );\n      }}\n    \n  );\n};\n"
  },
  {
    "path": "src/Accordion/AccordionHeader.tsx",
    "content": "import classNames from 'classnames';\nimport React, { ElementType, FC, HTMLAttributes, ReactNode } from 'react';\n\nexport interface AccordionHeaderProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente AccordionHeader */\n  className?: string;\n  /** Utilizzare questo attributo per indicare se l'elemento è attivo o no */\n  active?: boolean;\n  /** Questa funzione verrà chiamata quando avviene un click sul componente AccordionHeader */\n  onToggle?: () => void;\n  /** Contenuto aggiuntivo all'interno del bottone dell'AccordionHeader */\n  append?: ReactNode;\n  testId?: string;\n}\n\nexport const AccordionHeader: FC = ({\n  className,\n  tag = 'button',\n  active = false,\n  append,\n  onToggle,\n  testId,\n  ...attributes\n}) => {\n  const Tag = tag;\n  const toggleClasses = classNames(className, 'accordion-button', {\n    collapsed: !active\n  });\n  return (\n    
\n      \n      {append}\n    
\n  );\n};\n"
  },
  {
    "path": "src/Accordion/AccordionItem.tsx",
    "content": "import classNames from 'classnames';\nimport React, { ElementType, FC, HTMLAttributes } from 'react';\n\nexport interface AccordionItemProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente */\n  className?: string;\n}\n\nexport const AccordionItem: FC = ({ tag = 'div', className, ...attributes }) => {\n  const Tag = tag;\n  const classes = classNames('accordion-item', className);\n\n  return ;\n};\n"
  },
  {
    "path": "src/Alert/Alert.tsx",
    "content": "import React, { ElementType, FC, HTMLAttributes, MouseEventHandler, Ref } from 'react';\nimport { FadeProps, Alert as InnerAlert } from 'reactstrap';\nimport { CSSModule } from 'reactstrap/types/lib/utils';\n\n// Copy over from reactstrap and add new ones\nexport interface AlertProps extends HTMLAttributes {\n  closeClassName?: string;\n  closeAriaLabel?: string;\n  /** Oggetto contenente la nuova mappatura per le classi CSS. */\n  cssModule?: CSSModule;\n  /** Le varianti di colore definite in Bootstrap Italia\n   * @default primary\n   */\n  color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | string;\n  /** Quando abilitato mostra un'animazione di entrata ed uscita del componente Alert.\n   * @default true */\n  fade?: boolean;\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  transition?: FadeProps;\n  /** Da utilizzare per impostare un riferimento all'elemento DOM */\n  innerRef?: Ref;\n  /** Quando abilitato mostra l'alert\n   * @default true\n   */\n  isOpen?: boolean;\n  toggle?: MouseEventHandler;\n  testId?: string;\n}\n\nexport const Alert: FC = ({ color = 'success', isOpen = true, fade = true, testId, ...props }) => {\n  const baseProps = {\n    color,\n    isOpen,\n    fade\n  };\n  return ;\n};\n"
  },
  {
    "path": "src/Autocomplete/Autocomplete.tsx",
    "content": "import React, { FC, useEffect } from 'react';\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore non ci sono i types\nimport BaseAutocomplete from 'accessible-autocomplete/react';\n// Reference to https://www.npmjs.com/package/accessible-autocomplete\n// Implementation example: https://github.com/alphagov/accessible-autocomplete/blob/main/examples/react/index.html\n\nexport interface AutocompleteAttributes {\n  /** Identificativo */\n  id: string;\n  /** Label */\n  label: string;\n  /** Valori all'interno della select */\n  source: (query: string, syncResults: () => void) => void;\n  /** Valori chiave - valore all'interno della select */\n  onConfirm?: (value: string) => void;\n  /** Placeholder (default: ``) */\n  placeholder?: string;\n  /** Valore di default (default: ``) */\n  defaultValue?: string;\n  /** Modalità display menu (default: `inline`) */\n  displayMenu?: string;\n  /** Utilizzare per mostrare il successo nella validazione del valore nel campo Input */\n  valid?: boolean;\n  /** Testo di validazione per l'elemento del moduleo form. */\n  validationText?: string;\n  /** Funzione ritornante stringa in caso di nessun risultato */\n  tNoResults?: () => string;\n  /** Funzione ritornante stringa di suggerimento */\n  tAssistiveHint?: () => string;\n  /** Funzione ritornante stringa se la query è troppo corta */\n  tStatusQueryTooShort?: () => string;\n  /** Funzione ritornante stringa se non ci sono risultati di ricerca */\n  tStatusNoResults?: () => string;\n  /** Funzione ritornante stringa che identifica l'opzione selezionata */\n  tStatusSelectedOption?: () => string;\n  /** Funzione ritornante stringa che identifica i risultati */\n  tStatusResults?: () => string;\n  /** Classi aggiuntive da usare per il componente Button */\n  className?: string;\n  testId?: string;\n}\n\nconst tAssistiveHintDefault = () =>\n  'Quando i risultati del completamento automatico sono disponibili, usa le frecce su e giù per rivedere e Invio per selezionare. Utenti di dispositivi touch, esplora tramite tocco o con gesti di scorrimento';\nconst tNoResultsDefault = () => 'Nessun risultato trovato';\nconst tStatusQueryTooShortDefault = (minQueryLength: number) =>\n  `Digita ${minQueryLength} o più caratteri per mostrare le opzioni di ricerca`;\nconst tStatusNoResultsDefault = () => 'Nessun risultato di ricerca';\nconst tStatusSelectedOptionDefault = (selectedOption: number, length: number, index: number) =>\n  `${selectedOption} ${index + 1} di ${length} è sottolineato`;\nconst tStatusResultsDefault = (length: number, contentSelectedOption: number) => {\n  const words = {\n    result: length === 1 ? 'risultato' : 'risultati',\n    is: length === 1 ? 'è' : 'sono',\n    available: length === 1 ? 'disponibile' : 'disponibili'\n  };\n\n  return `${length} ${words.result} ${words.is} ${words.available}. ${contentSelectedOption}`;\n};\n\nexport const Autocomplete: FC = ({\n  tAssistiveHint = tAssistiveHintDefault,\n  tNoResults = tNoResultsDefault,\n  tStatusQueryTooShort = tStatusQueryTooShortDefault,\n  tStatusNoResults = tStatusNoResultsDefault,\n  tStatusSelectedOption = tStatusSelectedOptionDefault,\n  tStatusResults = tStatusResultsDefault,\n  placeholder = '',\n  defaultValue = '',\n  displayMenu = 'inline',\n  source,\n  validationText,\n  onConfirm,\n  ...attributes\n}) => {\n  const { id, valid } = attributes;\n  const validityCheck = valid === true || valid === false;\n\n  useEffect(() => {\n    const inputElement: HTMLInputElement = document.getElementById(id) as HTMLInputElement;\n    const labelElement = inputElement?.parentElement?.parentElement?.getElementsByTagName('label')[0];\n\n    if (inputElement.value !== '') {\n      labelElement?.classList.add('active');\n    }\n\n    inputElement?.addEventListener('focus', () => {\n      labelElement?.classList.add('active');\n    });\n    inputElement?.addEventListener('blur', () => {\n      if (inputElement.value === '') {\n        labelElement?.classList.remove('active');\n      }\n      if (onConfirm) {\n        onConfirm(inputElement.value);\n      }\n    });\n  }, [id]);\n\n  return (\n    <>\n      \n      \n      
\n        {!valid && validationText}\n      
\n    \n  );\n};\n"
  },
  {
    "path": "src/Avatar/AvatarContainer.tsx",
    "content": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport classNames from 'classnames';\n\nexport interface AvatarContainerProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente AvatarContainer */\n  className?: string;\n  testId?: string;\n}\n\nexport const AvatarContainer: FC = ({ className, tag = 'div', testId, ...attributes }) => {\n  const Tag = tag;\n  const wrapperClasses = classNames(\n    'd-flex align-items-center justify-content-around flex-wrap flex-sm-nowrap',\n    className\n  );\n  return ;\n};\n"
  },
  {
    "path": "src/Avatar/AvatarExtraText.tsx",
    "content": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport classNames from 'classnames';\n\nexport interface AvatarExtraTextProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente AvatarExtraText */\n  className?: string;\n  testId?: string;\n}\n\nexport const AvatarExtraText: FC = ({ className, tag = 'div', testId, ...attributes }) => {\n  const Tag = tag;\n  const wrapperClass = classNames('extra-text', className);\n  return ;\n};\n"
  },
  {
    "path": "src/Avatar/AvatarGroupContainer.tsx",
    "content": "import classNames from 'classnames';\nimport React, { ElementType, FC, HTMLAttributes } from 'react';\n\nexport interface AvatarGroupContainerProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente più esterno di AvatarGroupContainer */\n  wrapperClassName?: string;\n  testId?: string;\n}\n\nexport const AvatarGroupContainer: FC = ({\n  tag = 'ul',\n  wrapperClassName,\n  testId,\n  ...attributes\n}) => {\n  const Tag = tag;\n  const wrapperClasses = classNames('avatar-group-stacked', wrapperClassName);\n  return ;\n};\n"
  },
  {
    "path": "src/Avatar/AvatarIcon.tsx",
    "content": "import classNames from 'classnames';\nimport React, { ElementType, FC, HTMLAttributes, Ref } from 'react';\n\nexport interface AvatarIconProps extends HTMLAttributes {\n  /**\n   * Utilizzarlo in caso di utilizzo di componenti personalizzati, come ad esempio\n   * un link gestito da handler onClick.\n   * */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente AvatarIcon */\n  className?: string;\n  /** Le varianti di colore definite in Bootstrap Italia */\n  color?: 'primary' | 'secondary' | 'green' | 'orange' | 'red' | string;\n  /** Le dimensioni dell'icona definite in Bootstrap Italia */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';\n  /**\n   * Quando definito rende l'icona un link cliccabile. Nota: se definito ignora la prop Tag.\n   * */\n  href?: string;\n  /** Da utilizzare per impostare un riferimento all'elemento DOM */\n  innerRef?: Ref;\n  testId?: string;\n}\n\nexport const AvatarIcon: FC = ({\n  className,\n  tag = 'div',\n  size = 'md',\n  href,\n  color,\n  innerRef,\n  testId,\n  children,\n  ...attributes\n}) => {\n  const Tag = tag;\n  const typeClass = classNames('avatar', {\n    [`size-${size}`]: size,\n    [`avatar-${color}`]: color,\n    className\n  });\n  if (href) {\n    return (\n      }\n        data-testid={testId}\n      >\n        {children}\n      \n    );\n  }\n\n  return (\n    \n      {children}\n    \n  );\n};\n"
  },
  {
    "path": "src/Avatar/AvatarPresence.tsx",
    "content": "import classNames from 'classnames';\nimport React, { ElementType, FC, HTMLAttributes } from 'react';\n\nexport interface AvatarPresenceProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente AvatarPresence */\n  className?: string;\n  /** Utilizzare questo attributo per indicare il tipo di presenza dell'utente. */\n  presence: 'active' | 'busy' | 'hidden' | string;\n  testId?: string;\n}\n\nexport const AvatarPresence: FC = ({\n  className,\n  tag = 'div',\n  presence,\n  testId,\n  ...attributes\n}) => {\n  const Tag = tag;\n  const typeClass = classNames(\n    'avatar-presence',\n    {\n      presence\n    },\n    className\n  );\n  return ;\n};\n"
  },
  {
    "path": "src/Avatar/AvatarStatus.tsx",
    "content": "import classNames from 'classnames';\nimport React, { ElementType, FC, HTMLAttributes } from 'react';\n\nexport interface AvatarStatusProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente AvatarStatus */\n  className?: string;\n  /** Utilizzare questo attributo per indicare il tipo di stato dell'utente. */\n  status: 'approved' | 'declined' | 'notify' | string;\n  testId?: string;\n}\n\nexport const AvatarStatus: FC = ({ className, tag = 'div', status, testId, ...attributes }) => {\n  const Tag = tag;\n  const typeClass = classNames(\n    'avatar-status',\n    {\n      status\n    },\n    className\n  );\n  return ;\n};\n"
  },
  {
    "path": "src/Avatar/AvatarWrapper.tsx",
    "content": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport classNames from 'classnames';\n\nexport interface AvatarWrapperProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente AvatarStatus */\n  className?: string;\n  /** Utilizzare questo attributo qualora si volesse utilizzare un componente AvatarExtraText all'interno dell'Avatar. */\n  extra?: 'text' | string;\n  testId?: string;\n}\n\nexport const AvatarWrapper: FC = ({ className, tag = 'div', extra, testId, ...attributes }) => {\n  const Tag = tag;\n  const wrapperClass = classNames('avatar-wrapper', className, {\n    [`avatar-extra-${extra}`]: extra\n  });\n  return ;\n};\n"
  },
  {
    "path": "src/BackToTop/BackToTop.tsx",
    "content": "import React, { useLayoutEffect, useState } from 'react';\nimport { Icon } from '../Icon/Icon';\nimport classNames from 'classnames';\n\nexport interface BackToTopProps {\n  /**\n   * Aria label che definisce lo scopo del componente (default: `Torna su`)\n   */\n  ariaLabel?: string;\n  /**\n   * Classi aggiuntive da usare per il componente\n   */\n  className?: string;\n  /**\n   * Renderizza la variante `dark` del componente\n   */\n  dark?: boolean;\n  /**\n   * Renderizza la variante `small` del componente\n   */\n  small?: boolean;\n  /**\n   * Aggiunge l'ombra al componente\n   */\n  shadow?: boolean;\n  /**\n   * Configurazione riguardante dopo quanti pixel di scroll il bottone viene mostrato\n   */\n  showOffset?: number;\n}\n\nconst backToTop = () => {\n  window.scrollTo({ top: 0, behavior: 'smooth' });\n};\n\nexport const BackToTop = ({\n  ariaLabel = 'Torna su',\n  className,\n  dark = false,\n  small = false,\n  shadow = false,\n  showOffset = 200\n}: BackToTopProps) => {\n  const [showBtn, setShowBtn] = useState(false);\n\n  useLayoutEffect(() => {\n    window.addEventListener('scroll', () => {\n      if (window.scrollY > showOffset) {\n        setShowBtn(true);\n      } else {\n        setShowBtn(false);\n      }\n    });\n  }, [showOffset]);\n\n  return (\n    \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Badge/Badge.tsx",
    "content": "import React, { FC, HTMLAttributes, ElementType, Ref, ReactNode, AnchorHTMLAttributes } from 'react';\nimport { Badge as BadgeReact } from 'reactstrap';\nimport { CSSModule } from 'reactstrap/types/lib/utils';\n\nexport type BadgeProps = {\n  /** Le varianti di colore definite in Bootstrap Italia */\n  color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | string;\n  /** Quando attivo rende i Badge arrotondati */\n  pill?: boolean;\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente Badge */\n  className?: string;\n  /** Oggetto contenente la nuova mappatura per le classi CSS. */\n  cssModule?: CSSModule;\n  /** Da utilizzare per impostare un riferimento all'elemento DOM */\n  innerRef?: Ref;\n  /** Il contenuto del badge */\n  children: ReactNode;\n  testId?: string;\n} & (HTMLAttributes | AnchorHTMLAttributes);\n\nexport const Badge: FC = ({\n  color = 'secondary',\n  pill = false,\n  tag = 'span',\n  children,\n  testId,\n  ...attributes\n}) => {\n  return (\n    \n      {children}\n    \n  );\n};\n"
  },
  {
    "path": "src/BottomNav/BottomNav.tsx",
    "content": "import React, { ElementType, FC, HTMLAttributes } from 'react';\n\nexport interface BottomNavProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente BottomNav */\n  className?: string;\n  testId?: string;\n}\n\nexport const BottomNav: FC = ({ tag = 'nav', testId, ...attributes }) => {\n  const Tag = tag;\n  return (\n    \n      
    \n    \n  );\n};\n"
  },
  {
    "path": "src/BottomNav/BottomNavItem.tsx",
    "content": "import React, { ElementType, FC, HTMLAttributes, MouseEvent } from 'react';\nimport classNames from 'classnames';\nimport { Icon } from '../Icon/Icon';\n\nexport interface BottomNavItemProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente BottomNavItem */\n  className?: string;\n  /** Quando abilitato mostra l'elemento come attivo */\n  active?: boolean;\n  /** Indica l'URL a cui puntare (utilizzare o questo o onClick) */\n  url?: string;\n  /** Indica il link route a cui l'elemento deve puntare. */\n  to?: string;\n  /** Etichetta da associare all'elemento */\n  label?: string;\n  /** Testo esplicativo per dispositivi screen reader. */\n  srText?: string;\n  /** Icona da utilizzare per l'elemento */\n  iconName?: string;\n  /** Quando abilitato indica una sezione che richiede attenzione o presenta nuovi contenuti */\n  alert?: boolean;\n  /** Visualizza dei badge con indicazioni numeriche in alto a destra dell'icona */\n  badge?: number;\n  /** Da utilizzare al posto di url quando la gestione del click è in JS */\n  onLinkClick?: (event: MouseEvent) => void;\n  /**\n   * Indica l'URL a cui far puntare il componente BottomNavItem.\n   * @deprecated. Usare `url` o `onLinkClick`\n   * */\n  link?: string;\n  testId?: string;\n}\n\nexport const BottomNavItem: FC = ({\n  active = false,\n  badge,\n  alert = false,\n  url,\n  to,\n  srText,\n  iconName = 'it-comment',\n  label,\n  tag = 'a',\n  onLinkClick,\n  link,\n  testId,\n  ...attributes\n}) => {\n  const Tag = tag;\n  const activeClass = classNames({ active });\n  const badgeWrapper = Boolean(badge) && (\n    
    \n      {badge}\n    
    \n  );\n  const alertWrapper = Boolean(alert) && (\n    
    \n      \n    
    \n  );\n  return (\n    
  • \n      \n        {badgeWrapper}\n        {alertWrapper}\n        \n        \n          {label}\n          {srText ? {srText} : null}\n        \n      \n    
    • \n  );\n};\n"
  },
  {
    "path": "src/Breadcrumb/Breadcrumb.tsx",
    "content": "import React, { ElementType, FC, HTMLAttributes } from 'react';\nimport { Breadcrumb as BreadcrumbBase } from 'reactstrap';\nimport classNames from 'classnames';\nimport { CSSModule } from 'reactstrap/types/lib/utils';\n\nexport interface BreadcrumbProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati per la l'elemento lista interno */\n  listTag?: ElementType;\n  /** Classi aggiuntive da usare per il componente Nav */\n  className?: string;\n  /** Classi aggiuntive da usare per il componente di lista interno */\n  listClassName?: string;\n  /** Oggetto contenente la nuova mappatura per le classi CSS. */\n  cssModule?: CSSModule;\n  /** Indica se si vuole la versione con fondo scuro */\n  dark?: boolean;\n  /** Etichetta significativa per descrivere il tipo di navigazione */\n  'aria-label'?: string;\n  testId?: string;\n}\n\nexport const Breadcrumb: FC = ({\n  className,\n  listClassName,\n  dark,\n  'aria-label': label,\n  testId,\n  ...attributes\n}) => {\n  const classes = classNames(className, 'breadcrumb-container');\n  const listClasses = classNames(listClassName, { dark }, dark && 'px-3');\n  const ariaLabel = label ?? 'Percorso di navigazione';\n  return (\n    \n  );\n};\n"
  },
  {
    "path": "src/Button/Button.tsx",
    "content": "import React, { FC, ButtonHTMLAttributes, ElementType, Ref } from 'react';\nimport classNames from 'classnames';\n\nimport { Button as ButtonBase } from 'reactstrap';\nimport { CSSModule } from 'reactstrap/types/lib/utils';\n\n// reactstrap wrapper\nexport interface ButtonProps extends ButtonHTMLAttributes {\n  /** Quando abilitato, estende il componente Button fino a prendere tutta la larghezza disponibile */\n  block?: boolean;\n  /** Utilizzarlo disabilitare il colore di sfondo, ed applicarlo invece al bordo.  */\n  outline?: boolean;\n  /** Utilizzarlo in caso di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente Button */\n  className?: string;\n  /** Oggetto contenente la nuova mappatura per le classi CSS. */\n  cssModule?: CSSModule;\n  innerRef?: Ref;\n  /** Da utilizzare si usa una icona nel contenuto del Button */\n  icon?: boolean;\n  /** Da utilizzare per le varianti di dimensione del componente Button */\n  size?: 'lg' | 'sm' | 'xs';\n  /** Da utilizzare per i bottoni di chiusura all'interno di altri componenti (i.e. Chips, Modali, etc...) */\n  close?: boolean;\n  active?: boolean;\n  href?: string;\n  testId?: string;\n}\n\nexport const Button: FC = ({\n  tag = 'button',\n  icon = false,\n  color = '',\n  className,\n  testId,\n  ...attributes\n}) => {\n  const classes = classNames(className, {\n    'btn-icon': icon\n  });\n\n  const ariaAttributes = {\n    ...(attributes.disabled && { 'aria-disabled': true })\n  };\n\n  const baseProps = { color, tag };\n\n  return ;\n};\n"
  },
  {
    "path": "src/Callout/Callout.tsx",
    "content": "import React, { FC, ElementType, HTMLAttributes } from 'react';\nimport classNames from 'classnames';\n\nexport interface CalloutProps extends HTMLAttributes {\n  /** Classi aggiuntive per il componente */\n  className?: string;\n  /** Permette di dichiarare il colore del bordo e del titolo */\n  color?: 'success' | 'warning' | 'danger' | 'note' | 'important' | string;\n  /** Permette personalizzare il tag utilizzato per il Callout (diverso da \"div\"). Accetta sia tag HTML che componenti React. */\n  tag?: ElementType;\n  /** Abilita il Callout di tipo Highlight */\n  highlight?: boolean;\n  /** Abilita il Callout di tipo Approfondimento */\n  detailed?: boolean;\n  testId?: string;\n}\n\nexport const Callout: FC = ({\n  children,\n  color = '',\n  highlight = false,\n  className,\n  detailed,\n  tag = 'div',\n  testId,\n  ...attributes\n}) => {\n  const Tag = tag;\n  const classes = classNames(className, color, 'callout', {\n    'callout-highlight': highlight,\n    'callout-more': detailed\n  });\n  return (\n    \n      {!highlight && !detailed ? 
    {children}
     : children}\n        \n  );\n};\n"
  },
  {
    "path": "src/Callout/CalloutMoreFooter.tsx",
    "content": "import classNames from 'classnames';\nimport React, { ElementType, FC, PropsWithChildren, useState } from 'react';\nimport { Button } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\n\nexport interface CalloutMoreFooterProps {\n  id?: string;\n  /** Utilizzarlo in caso si utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente */\n  className?: string;\n  fileUrl?: string;\n}\n\nexport const CalloutMoreFooter: FC> = ({\n  id = 'cm-footer',\n  tag = 'div',\n  className,\n  fileUrl,\n  children,\n  ...attributes\n}) => {\n  const Tag = tag;\n  const classes = classNames('collapse-div', className);\n\n  const [isOpen, setOpen] = useState(false);\n\n  return (\n    \n      
    \n         setOpen(!isOpen)}\n          aria-controls={`${id}-collapse`}\n          aria-expanded={isOpen}\n          style={{ fontFamily: 'var(--bs-font-sans-serif)', fontSize: '1rem' }}\n        >\n          Leggi tutto \n        \n        {fileUrl && (\n          \n            \n            PDFDownload\n          \n        )}\n      
    \n      \n        
    {children}
    \n      \n        \n  );\n};\n"
  },
  {
    "path": "src/Callout/CalloutText.tsx",
    "content": "import React, { FC, ElementType, HTMLAttributes } from 'react';\nimport classNames from 'classnames';\n\nexport interface CalloutTextProps extends HTMLAttributes {\n  /** Aumenta la dimensione del testo nel paragrafo contenuto  */\n  bigText?: boolean;\n  /** Classi aggiuntive per il componente */\n  className?: string;\n  /** Permette personalizzare il tag utilizzato per il contenitore del titolo (diverso da \"div\"). Accetta sia tag HTML che componenti React. */\n  tag?: ElementType;\n  testId?: string;\n}\n\nexport const CalloutText: FC = ({\n  bigText = false,\n  children,\n  className,\n  tag = 'p',\n  testId,\n  ...attributes\n}) => {\n  const Tag = tag;\n  const classes = classNames(className, {\n    'callout-big-text': bigText\n  });\n  return (\n    \n      {children}\n    \n  );\n};\n"
  },
  {
    "path": "src/Callout/CalloutTitle.tsx",
    "content": "import React, { FC, ElementType, HTMLAttributes } from 'react';\nimport classNames from 'classnames';\n\nexport interface CalloutTitleProps extends HTMLAttributes {\n  /** Classi aggiuntive per il componente */\n  className?: string;\n  /** Permette personalizzare il tag utilizzato per il contenitore del titolo (diverso da \"div\"). Accetta sia tag HTML che componenti React. */\n  tag?: ElementType;\n  testId?: string;\n}\n\nexport const CalloutTitle: FC = ({ children, className, tag = 'div', testId, ...attributes }) => {\n  const Tag = tag;\n  const classes = classNames(className, 'callout-title');\n  return (\n    \n      {children}\n    \n  );\n};\n"
  },
  {
    "path": "src/Card/Card.tsx",
    "content": "import React, { FC, HTMLAttributes, ElementType, Ref } from 'react';\nimport classNames from 'classnames';\nimport { CSSModule } from 'reactstrap/types/lib/utils';\n\nexport interface CardProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente Card */\n  className?: string;\n  /** Da utilizzare per impostare un riferimento all'elemento DOM */\n  innerRef?: Ref;\n  /** Oggetto contenente la nuova mappatura per le classi CSS. */\n  cssModule?: CSSModule;\n  /** Abilita la versione teaser della Card */\n  teaser?: boolean;\n  /** La card contiene un'immagine */\n  image?: boolean;\n  /** La card è di tipo banner */\n  banner?: boolean;\n  /** La card è di tipo profile */\n  profile?: boolean;\n  /** La card è inline */\n  inline?: boolean;\n  /** La card è inline-reverse */\n  inlineReverse?: boolean;\n  /** La card è inline-mini */\n  inlineMini?: boolean;\n  /** La card è arrotondata */\n  rounded?: boolean;\n  /** La card è full height */\n  fullHeight?: boolean;\n  /** La card ha un bordo */\n  border?: boolean;\n  /** La card ha un bordo di estremità */\n  borderTop?: boolean;\n  /** La card ha un bordo */\n  shadow?: 'sm' | 'lg' | 'normal' | null;\n  testId?: string;\n}\n\nexport const Card: FC = ({\n  tag = 'article',\n  teaser,\n  image,\n  border=true,\n  borderTop,\n  inline,\n  inlineReverse,\n  inlineMini,\n  rounded,\n  fullHeight,\n  banner,\n  profile,\n  shadow=null,\n  testId,\n  ...attributes\n}) => {\n  const cardClasses = classNames('it-card', attributes.className, {\n    'card-teaser': teaser,\n    'it-card-image': image,\n    'border': border,\n    'it-card-inline': inline,\n    'it-card-inline-reverse': inlineReverse,\n    'it-card-inline-mini': inlineMini,\n    'it-card-height-full': fullHeight,\n    'rounded': rounded,\n    'card-teaser-wrapper': teaser,\n    'shadow': shadow === 'normal',\n    'shadow-lg': shadow === 'lg',\n    'shadow-sm': shadow === 'sm',\n    'it-card-banner': banner,\n    'it-card-profile': profile,\n    'it-border-top': borderTop,\n    'it-border-top-secondary': borderTop,\n\n  });\n\n  const T = tag;\n\n  return (\n    \n  );\n\n};\n"
  },
  {
    "path": "src/Card/CardBody.tsx",
    "content": "import React, { FC, HTMLAttributes, ElementType, Ref } from 'react';\nimport { CardBody as InnerCardBody } from 'reactstrap';\nimport { CSSModule } from 'reactstrap/types/lib/utils';\n// Note: this is a wrapper class around a reactstrap component.\n// TODO: remove this class and restore the direct import when\n// https://github.com/storybookjs/storybook/issues/10536 gets resolved\n\nexport interface CardBodyProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente Card */\n  className?: string;\n  /** Da utilizzare per impostare un riferimento all'elemento DOM */\n  innerRef?: Ref;\n  /** Oggetto contenente la nuova mappatura per le classi CSS. */\n  cssModule?: CSSModule;\n  testId?: string;\n}\n\nexport const CardBody: FC = ({ tag = 'div', testId, ...props }) => (\n  \n);\n"
  },
  {
    "path": "src/Card/CardCategory.tsx",
    "content": "import React, { FC, HTMLAttributes, MouseEvent } from 'react';\nimport classNames from 'classnames';\n\nimport { Icon } from '../Icon/Icon';\n\nexport interface CardCategoryProps extends HTMLAttributes {\n  /** Mostra un'icona nella Card. Passare il nome dell'icona per utilizzarlo. */\n  iconName?: string;\n  /** Mostra la data nella Card. Passare una data già formattata come stringa. */\n  date?: string;\n  /** Se usato come link, passare l'URL target. */\n  href?: string;\n  /** Descrizione della data (es. 'Data evento') */\n  dateDescription?: string;\n  /** Descrizione del testo (es. 'Titolo evento') */\n  textDescription?: string;\n  /** Titolo dell' icona */\n  iconTitle?: string;\n  /** Da utilizzare al posto di url quando la gestione del click è in JS */\n  onClick?: (event: MouseEvent) => void;\n  testId?: string;\n}\n\nexport const CardCategory: FC = ({\n  iconName,\n  iconTitle,\n  date,\n  href,\n  onClick,\n  testId,\n  children,\n  textDescription,\n  dateDescription,\n  ...rest\n}) => {\n  const classes = classNames({\n    'category-top': date || ' ',\n    'categoryicon-top': iconName\n  });\n  // Simple category link\n  const categoryLink = !iconName && (\n    <>\n      {textDescription && {textDescription}}\n      \n        {children}\n      \n    \n  );\n  const categoryDate = date && {date};\n  // Category with icon\n  const categoryText = iconName && {children};\n  const categoryIcon = iconName && ;\n\n  return (\n    
    \n      {categoryLink}\n      {categoryIcon}\n      {categoryText && textDescription && {textDescription}}\n      {categoryText}\n      {dateDescription && {dateDescription}}\n      {categoryDate}\n    
    \n  );\n};\n"
  },
  {
    "path": "src/Card/CardFooterCTA.tsx",
    "content": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport classNames from 'classnames';\n\nexport interface CardFooterCTAProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente CardFooterCTA*/\n  className?: string;\n  testId?: string;\n}\n\nexport const CardFooterCTA: FC = ({ className, tag = 'div', testId, ...attributes }) => {\n  const Tag = tag;\n  const classes = classNames(className, 'it-card-footer');\n  return ;\n};\n"
  },
  {
    "path": "src/Card/CardReadMore.tsx",
    "content": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport classNames from 'classnames';\n\nimport { Icon } from '../Icon/Icon';\n\nexport interface CardReadMoreProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente CardReadMore*/\n  className?: string;\n  /** Il contenuto in testo da mostrare */\n  text: string;\n  /** Passare l'URL target. */\n  href?: string;\n  /** Mostra un'icona nella Card per l'azione \"Leggi di più\". Passare il nome dell'icona per utilizzarlo. */\n  iconName?: string;\n  testId?: string;\n}\n\nexport const CardReadMore: FC = ({\n  className,\n  text,\n  iconName = 'it-arrow-right',\n  tag = 'a',\n  href,\n  testId,\n  ...attributes\n}) => {\n  const Tag = tag;\n  const classes = classNames(className, 'read-more');\n  return (\n    \n      {text}\n      {iconName && }\n    \n  );\n};\n"
  },
  {
    "path": "src/Card/CardSignature.tsx",
    "content": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport classNames from 'classnames';\n\nexport interface CardSignatureProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente CardSignature*/\n  className?: string;\n  testId?: string;\n}\n\nexport const CardSignature: FC = ({ className, tag = 'span', testId, ...attributes }) => {\n  const Tag = tag;\n  const classes = classNames(className, 'card-signature');\n  return ;\n};\n"
  },
  {
    "path": "src/Card/CardTag.tsx",
    "content": "import React, { AnchorHTMLAttributes, FC, ElementType } from 'react';\nimport classNames from 'classnames';\n\nexport interface CardTagProps extends AnchorHTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente CardTag*/\n  className?: string;\n  testId?: string;\n}\n\nexport const CardTag: FC = ({ className, tag = 'a', testId, ...attributes }) => {\n  const Tag = tag;\n  const classes = classNames(className, 'card-tag');\n  return ;\n};\n"
  },
  {
    "path": "src/Card/CardTagsHeader.tsx",
    "content": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport classNames from 'classnames';\n\nexport interface CardTagsHeaderProps extends HTMLAttributes {\n  /** Mostra la data nella Card. Passare una data già formattata come stringa. */\n  date?: string;\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente CardTagsHeader */\n  className?: string;\n  testId?: string;\n}\n\nexport const CardTagsHeader: FC = ({\n  date,\n  children,\n  className,\n  tag = 'div',\n  testId,\n  ...attributes\n}) => {\n  const Tag = tag;\n  const classes = classNames('head-tags', className);\n  return (\n    \n      {children}\n      {date && {date}}\n    \n  );\n};\n"
  },
  {
    "path": "src/Card/CardText.tsx",
    "content": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport { CardText as InnerCardText } from 'reactstrap';\nimport { CSSModule } from 'reactstrap/types/lib/utils';\n// Note: this is a wrapper class around a reactstrap component.\n// TODO: remove this class and restore the direct import when\n// https://github.com/storybookjs/storybook/issues/10536 gets resolved\n\nexport interface CardTextProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente CardText */\n  className?: string;\n  /** Oggetto contenente la nuova mappatura per le classi CSS. */\n  cssModule?: CSSModule;\n  testId?: string;\n}\n\nexport const CardText: FC = (props) => {\n  return ;\n};\n"
  },
  {
    "path": "src/Card/CardTitle.tsx",
    "content": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport { CardTitle as InnerCardTitle } from 'reactstrap';\n\n// Note: this is a wrapper class around a reactstrap component.\n// TODO: remove this class and restore the direct import when\n// https://github.com/storybookjs/storybook/issues/10536 gets resolved\n\nexport interface CardTitleProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente CardTitle */\n  className?: string;\n  testId?: string;\n}\n\nexport const CardTitle: FC = (props) => {\n  return ;\n};\n"
  },
  {
    "path": "src/Carousel/Carousel.tsx",
    "content": "import React, { FC } from 'react';\nimport classNames from 'classnames';\n\nimport {Splide, SplideProps} from '@splidejs/react-splide'\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst CONFIG_DEFAULT: any = {\n  slideFocus: false,\n  rewind: true,\n  perMove: 1,\n  i18n: {\n    prev: 'Slide precedente',\n    next: 'Slide successiva',\n    first: 'Vai alla prima slide',\n    last: 'Vai all’ultima slide',\n    slideX: 'Vai alla slide %s',\n    pageX: 'Vai a pagina %s',\n    play: 'Attiva autoplay',\n    pause: 'Pausa autoplay',\n    carousel: 'Carosello',\n    select: 'Seleziona una slide da mostrare',\n    slide: 'slide',\n    slideLabel: '%s di %s',\n  },\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst CONFIGS: any= {\n  'landscape-three-cols': {\n    type: 'slide',\n    perPage: 3,\n    gap: 24,\n    padding: { left: 0, right: 0 },\n    arrows: false,\n    breakpoints: {\n      768: {\n        perPage: 1,\n        gap: 24,\n        padding: { left: 0, right: 0 },\n        arrows: false,\n      },\n      992: {\n        perPage: 2,\n        gap: 24,\n        padding: { left: 40, right: 40 },\n        arrows: false,\n      },\n    },\n  },\n  'landscape-three-cols-arrows': {\n    type: 'slide',\n    perPage: 3,\n    gap: 24,\n    padding: { left: 0, right: 0 },\n    arrows: true,\n    breakpoints: {\n      768: {\n        perPage: 1,\n        gap: 24,\n        padding: { left: 40, right: 40 },\n        arrows: true,\n      },\n      992: {\n        perPage: 2,\n        gap: 24,\n        padding: { left: 40, right: 40 },\n        arrows: true,\n      },\n    },\n  },\n  'big-image': {\n    type: 'loop',\n    perPage: 1,\n    gap: 48,\n    padding: { left: 320, right: 320 },\n    arrows: false,\n    breakpoints: {\n      768: {\n        perPage: 1,\n        gap: 0,\n        padding: { left: 0, right: 0 },\n        arrows: false,\n      },\n      992: {\n        perPage: 1,\n        gap: 24,\n        padding: { left: 160, right: 160 },\n        arrows: false,\n      },\n    },\n  },\n  'standard-image': {\n    type: 'loop',\n    perPage: 3,\n    gap: 24,\n    padding: { left: 48, right: 48 },\n    arrows: false,\n    breakpoints: {\n      768: {\n        perPage: 1,\n        gap: 24,\n        padding: { left: 40, right: 40 },\n        arrows: false,\n      },\n      992: {\n        perPage: 2,\n        gap: 24,\n        padding: { left: 48, right: 48 },\n        arrows: false,\n      },\n    },\n  },\n  'landscape': {\n    type: 'slide',\n    perPage: 1,\n    gap: 24,\n    padding: { left: 0, right: 0 },\n    arrows: false,\n    breakpoints: {\n      768: {\n        perPage: 1,\n        gap: 24,\n        padding: { left: 0, right: 0 },\n        arrows: false,\n      },\n      992: {\n        perPage: 1,\n        gap: 24,\n        padding: { left: 24, right: 24 },\n        arrows: false,\n      },\n    },\n  },\n  'calendar-wrapper': {\n    type: 'slide',\n    perPage: 4,\n    gap: 0,\n    padding: { left: 0, right: 0 },\n    arrows: false,\n    breakpoints: {\n      560: {\n        perPage: 1,\n        gap: 0,\n        padding: { left: 24, right: 24 },\n        arrows: false,\n      },\n      768: {\n        perPage: 2,\n        gap: 0,\n        padding: { left: 0, right: 0 },\n        arrows: false,\n      },\n      992: {\n        perPage: 3,\n        gap: 0,\n        padding: { left: 0, right: 0 },\n        arrows: false,\n      },\n    },\n  },\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst EXTRA_CLASSES: any= {\n  'landscape-three-cols': [\n    'it-carousel-landscape-abstract-three-cols'\n  ],\n  'landscape-three-cols-arrows': [\n    'it-carousel-landscape-abstract-three-cols-arrow-visible'\n  ],\n  'big-image': [\n    'it-carousel-landscape-abstract-three-cols',\n    'it-full-carousel',\n    'it-big-img'\n  ],\n  'standard-image': [\n    'it-carousel-landscape-abstract-three-cols',\n    'it-full-carousel',\n    'it-standard-image'\n  ],\n  'landscape': [\n    'it-carousel-landscape-abstract'\n  ],\n  'calendar-wrapper': [\n    'it-calendar-wrapper'\n  ]\n}\n\nexport interface CarouselProps extends SplideProps {\n  type: string;\n  children?: React.ReactNode;\n}\n\n// Splide wrapper\nexport const Carousel: FC = ({\n  className = '',\n  type,\n  children,\n  ...attributes\n}) => {\n  let conf = Object.assign({}, CONFIG_DEFAULT)\n  if (['big-image', 'standard-image'].includes(type)){\n    conf = Object.assign({}, conf, CONFIGS['landscape-three-cols'])\n  }\n  conf = Object.assign({}, conf, CONFIGS[type])\n  return {children};\n};\n"
  },
  {
    "path": "src/Carousel/CarouselSlide.tsx",
    "content": "import React from 'react';\nimport {SplideSlide} from '@splidejs/react-splide'\n\n// Splide wrapper\nexport const CarouselSlide: React.FC = ({\n  children,\n}) => {\n\n  return \n    
    \n      {children}\n    
    \n      ;\n};\n"
  },
  {
    "path": "src/Chips/Chip.tsx",
    "content": "import React, { HTMLAttributes, FC, ElementType } from 'react';\nimport classNames from 'classnames';\n\nexport interface ChipProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente Chip */\n  className?: string;\n  /** Impostarlo su `true` per centrare la label all'interno */\n  simple?: boolean;\n  /** Impostarlo su `true` per una versione più grande del componente Chip. */\n  large?: boolean;\n  /** Impostarlo su `true` per renderizzare il componente Chip come disabilitato */\n  disabled?: boolean;\n  /** Le varianti di colore definite in Bootstrap Italia */\n  color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | string;\n  testId?: string;\n}\n\nexport const Chip: FC = ({\n  className,\n  color = '',\n  tag = 'div',\n  simple = false,\n  large = false,\n  disabled = false,\n  testId,\n  ...attributes\n}) => {\n  const Tag = tag;\n  const classes = classNames('chip', className, {\n    'chip-simple': simple,\n    'chip-lg': large,\n    'chip-disabled': disabled,\n    [`chip-${color}`]: color\n  });\n\n  return ;\n};\n"
  },
  {
    "path": "src/Chips/ChipLabel.tsx",
    "content": "import React, { ElementType, FC, HTMLAttributes } from 'react';\nimport classNames from 'classnames';\n\nexport interface ChipLabelProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente ChipLabel */\n  className?: string;\n  testId?: string;\n}\n\nexport const ChipLabel: FC = ({ className, tag = 'span', testId, ...attributes }) => {\n  const Tag = tag;\n  const classes = classNames(className, 'chip-label');\n  return ;\n};\n"
  },
  {
    "path": "src/Collapse/Collapse.tsx",
    "content": "import classNames from 'classnames';\nimport React, { ElementType, FC, HTMLAttributes, Ref, useEffect, useRef, useState } from 'react';\n\nimport { Collapse as CollapseBase } from 'reactstrap';\nimport { CSSModule } from 'reactstrap/types/lib/utils';\n\nimport { Icon } from '../Icon/Icon';\n\n// Copy over from reactstrap and add new ones\nexport interface CollapseProps extends HTMLAttributes {\n  /** Indica se il menu HeaderNav sia aperto o meno. Usato unicamente nel caso della HeaderNav, ovvero con navbar e header entrambi true */\n  isOpen?: boolean;\n  /** Oggetto contenente la nuova mappatura per le classi CSS. */\n  cssModule?: CSSModule;\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Indica se il componente Collapse è usato all'interno di un componente navbar */\n  navbar?: boolean;\n  /** Indica se il componente Collapse ha al suo interno un Megamenu */\n  megamenu?: boolean;\n  /** Indica se il componente Collapse è usato all'interno di un componente Header */\n  header?: boolean;\n  delay?: {\n    show: number;\n    hide: number;\n  };\n  /** Funzione chiamata all'apertura del componente Collapse */\n  onOpened?: () => void;\n  /** Funzione chiamata alla chiusura del componente Collapse */\n  onClosed?: () => void;\n  /** Funzione chiamata durante la trasizione di apertura del componente Collapse */\n  onEntering?: () => void;\n  /** Funzione chiamata al termine della trasizione di apertura del componente Collapse */\n  onEntered?: () => void;\n  onExit?: () => void;\n  /** Funzione chiamata durante la trasizione di chiusura del componente Collapse */\n  onExiting?: () => void;\n  /** Funzione chiamata al termine della trasizione di chiusura del componente Collapse */\n  onExited?: () => void;\n  /** Funzione chiamata su click di overlay dell'HeaderNav aperto. Usato unicamente nel caso della HeaderNav, ovvero con navbar e header entrambi true */\n  onOverlayClick?: () => void;\n  /** Da utilizzare per impostare un riferimento all'elemento DOM */\n  innerRef?: Ref;\n  /** Testo pulsante di chiusura per screen reader */\n  closeSrText?: string;\n  testId?: string;\n}\n\nexport const Collapse: FC = ({\n  header = false,\n  className,\n  navbar,\n  megamenu,\n  children,\n  isOpen = false,\n  onOverlayClick,\n  cssModule,\n  testId,\n  closeSrText = 'Nascondi la navigazione',\n  ...attributes\n}) => {\n  const newCssModule = {\n    'navbar-collapse': 'navbar-collapsable',\n    ...cssModule\n  };\n\n  // Two-phase state to allow CSS transitions to play.\n  // isVisible controls display:block/none; isExpanded controls the animation class.\n  const [isVisible, setIsVisible] = useState(isOpen);\n  const [isExpanded, setIsExpanded] = useState(isOpen);\n  const panelRef = useRef(null);\n  const triggerRef = useRef(null);\n\n  useEffect(() => {\n    if (!(megamenu || navbar)) return;\n    if (isOpen) {\n      triggerRef.current = document.activeElement;\n      setIsVisible(true);\n      // Double rAF ensures the browser has painted display:block before adding\n      // the expanded class, so the CSS transform transition can fire.\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          setIsExpanded(true);\n          panelRef.current?.focus();\n        });\n      });\n      return;\n    }\n    setIsExpanded(false);\n    // Wait for the CSS transition to complete before hiding.\n    const timer = setTimeout(() => {\n      setIsVisible(false);\n      (triggerRef.current as HTMLElement | null)?.focus();\n    }, PANEL_TRANSITION_MS);\n    return () => clearTimeout(timer);\n  }, [isOpen, megamenu, navbar]);\n\n  useEffect(() => {\n    if (!(megamenu || navbar)) return;\n    if (isOpen) {\n      document.body.style.overflow = 'hidden';\n    } else {\n      document.body.style.overflow = '';\n    }\n    return () => { document.body.style.overflow = ''; };\n  }, [isOpen, megamenu, navbar]);\n\n  useEffect(() => {\n    if (!(megamenu || navbar)) return;\n    const main = document.querySelector('main');\n    if (!main) return;\n    if (isOpen) {\n      main.setAttribute('inert', '');\n    } else {\n      main.removeAttribute('inert');\n    }\n    return () => main.removeAttribute('inert');\n  }, [isOpen, megamenu, navbar]);\n\n  useEffect(() => {\n    if (!(megamenu || navbar)) return;\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && isOpen) {\n        onOverlayClick?.();\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [isOpen, megamenu, navbar, onOverlayClick]);\n\n  // Must match the longest CSS transition on .navbar-collapsable (currently 0.3s + buffer).\n  const PANEL_TRANSITION_MS = 350;\n\n  if (megamenu || navbar) {\n    const classes = classNames(className, 'navbar-collapse', {\n      expanded: isExpanded\n    });\n    const overlayClasses = classNames('overlay', {\n      fade: isVisible,\n      show: isExpanded\n    });\n    const displayStyle = { display: isVisible ? 'block' : 'none' };\n    return (\n      \n        
    \n        
    \n          \n        
    \n        {megamenu ? 
    {children}
     : <>{children}}\n      \n    );\n  }\n  const classes = classNames(className, {\n    'link-list-wrapper': header\n  });\n\n  return (\n    \n      {children}\n    \n  );\n};\n"
  },
  {
    "path": "src/Dimmer/Dimmer.tsx",
    "content": "import classNames from 'classnames';\nimport React, { FC, HTMLAttributes } from 'react';\n\nimport { Icon } from '../Icon/Icon';\n\nexport interface DimmerProps extends HTMLAttributes {\n  /** Il nome dell'icona da mostrare */\n  icon?: string;\n  /** Le varianti di colore definite in Bootstrap Italia */\n  color?: 'primary' | 'secondary';\n  /** Classi aggiuntive da usare per il componente Dimmer */\n  className?: string;\n  /** Mostra il wrapper */\n  show?: boolean;\n  /**\n   * Classi aggiuntive da usare per il componente contenitore del Dimmer\n   * Per replicare il comportamento precedente, in cui `className` veniva applicato anche al wrapper,\n   * passare `true`.\n   * */\n  wrapperClassName?: string | true;\n  testId?: string;\n}\n\nexport const Dimmer: FC = ({\n  icon,\n  color,\n  className,\n  show = true,\n  wrapperClassName,\n  testId,\n  ...attributes\n}) => {\n  const { children, ...rest } = attributes,\n    classes = classNames('dimmer fade', { show: show }, wrapperClassName === true ? className : wrapperClassName, {\n      [`dimmer-${color}`]: color\n    }),\n    innerClasses = classNames('dimmer-inner', className),\n    dimmerIcon = icon && (\n      
    \n        \n      
    \n    );\n\n  return (\n    
    \n      
    \n        {dimmerIcon}\n        {children}\n      
    \n    
    \n  );\n};\n"
  },
  {
    "path": "src/Dimmer/DimmerButtons.tsx",
    "content": "import classNames from 'classnames';\nimport React, { FC, HTMLAttributes } from 'react';\n\nexport interface DimmerButtonsProps extends HTMLAttributes {\n  /** Classi aggiuntive da usare per il componente Dimmer */\n  className?: string;\n  /** Da utilizzare in presenza di un singolo bottone: quando abilitato ne centra il contenuto. */\n  single?: boolean;\n  /** Da utilizzare con `false` per abilitare il precedente comportamento senza sfondo scuro.\n   * @deprecated\n   */\n  dark?: boolean;\n  testId?: string;\n}\n\nexport const DimmerButtons: FC = ({\n  className,\n  single = false,\n  dark = true,\n  testId,\n  ...attributes\n}) => {\n  const { children, ...rest } = attributes;\n  const classes = classNames('dimmer-buttons', className, {\n    'bg-dark': dark,\n    'single-button': single\n  });\n\n  return (\n    
    \n      {children}\n    
    \n  );\n};\n"
  },
  {
    "path": "src/Dropdown/Dropdown.tsx",
    "content": "import classNames from 'classnames';\nimport React, { ElementType, FC } from 'react';\nimport { Dropdown as BSDRopdown, DropdownProps as BSDRopdownProps } from 'reactstrap';\nexport interface DropdownProps extends BSDRopdownProps {\n  tag?: ElementType;\n  inNavbar?: boolean;\n  textCenter?: boolean;\n  theme?: string;\n  /** Classi aggiuntive da usare per il componente Button */\n  className?: string;\n  testId?: string;\n}\n\nexport const Dropdown: FC = ({\n  className,\n  testId,\n  children,\n  inNavbar,\n  textCenter,\n  theme,\n  ...attributes\n}) => {\n  const classes = classNames(className, {\n    'text-center': textCenter\n  });\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const toggle = () => setIsOpen(!isOpen);\n\n  return (\n    \n      {\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        React.Children.map(children, (child: any) => React.cloneElement(child, { inNavbar: inNavbar }))\n      }\n    \n  );\n};\n"
  },
  {
    "path": "src/Dropdown/DropdownMenu.tsx",
    "content": "import React, { FC, HTMLAttributes } from 'react';\nimport { DropdownMenu as BSDRopdownMenu } from 'reactstrap';\nimport { SLIM, useHeaderContext } from '../Header/HeaderContext';\n\nexport interface DropdownMenuProps extends HTMLAttributes {\n  /** Classi aggiuntive da usare per il componente Button */\n  inNavbar?: boolean;\n  className?: string;\n  testId?: string;\n}\n\nexport const DropdownMenu: FC = ({ className, inNavbar, testId, children, ...attributes }) => {\n  const type = useHeaderContext();\n  const style = inNavbar && type === SLIM ? { top: 'unset !important' } : {};\n\n  return (\n    \n      {children}\n    \n  );\n};\n"
  },
  {
    "path": "src/Dropdown/DropdownToggle.tsx",
    "content": "import React, { ElementType, FC, HTMLAttributes } from 'react';\nimport { DropdownToggle as BSDropdownToggle } from 'reactstrap';\nimport classNames from 'classnames';\nimport { Icon } from '../Icon/Icon';\n\nexport interface DropdownToggleProps extends HTMLAttributes {\n  caret?: boolean;\n  tag?: ElementType;\n  inNavbar?: boolean;\n  testId?: string;\n  /** Classi aggiuntive da usare per il componente Button */\n  color?: string;\n  className?: string;\n  outline?: boolean;\n}\n\nexport const DropdownToggle: FC = ({\n  className,\n  testId,\n  children,\n  caret,\n  inNavbar,\n  color = '',\n  tag = 'button'\n}) => {\n  const Tag = tag === 'a' || inNavbar ? 'a' : 'button';\n\n  const classes = classNames(className, {\n    'btn-dropdown': Tag === 'a' && !inNavbar,\n    'dropdown-toggle': true,\n    btn: tag === 'button' && !inNavbar\n  });\n\n  let colorClass = '';\n  if (tag === 'button' && color) {\n    colorClass = `btn-${color}`;\n  }\n\n  const iconClasses = classNames({\n    'icon-expand': true,\n    'icon-sm': !inNavbar,\n    'icon-xs': inNavbar,\n    'ms-1': inNavbar,\n    'icon-light': Tag.valueOf() !== 'a' ? true : false,\n    color: color ? 'white' : 'primary'\n  });\n  return (\n    \n      {children as React.ReactNode}\n      {caret === true ?  : null}\n    \n  );\n};\n"
  },
  {
    "path": "src/FontLoader/FontLoader.tsx",
    "content": "import { useEffect } from 'react';\n\nexport interface FontLoaderProps {\n  /**\n   * Una lista di font aggiuntivi da caricare.\n   * I font di default Titillium Web, Lora and Roboto Mono vengono aggiunti a questa lista e caricati sempre.\n   * */\n  fonts?: string[];\n}\n\nconst defaultFonts = [\n  'Titillium Web:300,400,600,700:latin-ext',\n  'Lora:400,700:latin-ext',\n  'Roboto Mono:400,700:latin-ext'\n];\n\nexport function useFontLoader({ fonts }: FontLoaderProps) {\n  useEffect(() => {\n    if (typeof window !== 'undefined') {\n      // eslint-disable-next-line @typescript-eslint/no-require-imports\n      const WebFont = require('webfontloader');\n      WebFont.load({\n        custom: {\n          families: [...defaultFonts, ...(fonts || [])]\n        }\n      });\n    }\n  }, [fonts]);\n}\n\nexport const FontLoader = (props: FontLoaderProps) => {\n  useFontLoader(props);\n\n  return null;\n};\n"
  },
  {
    "path": "src/Forward/Forward.tsx",
    "content": "import React, { FC, AnchorHTMLAttributes } from 'react';\nimport classNames from 'classnames';\n\nexport interface ForwardProps extends AnchorHTMLAttributes {\n  /** Classi aggiuntive da usare per il componente Forward */\n  className?: string;\n  /** Riferimento al nodo a cui scorrere quando premuto */\n  // scrollToRef: MutableRefObject;\n  testId?: string;\n}\n\nexport const Forward: FC = ({ className, children, testId, ...attributes }) => {\n  const classes = classNames(className, 'forward');\n  return (\n     {\n        e.preventDefault();\n        if (attributes.href) {\n          const scrollToRef = document.querySelector(attributes.href);\n          if (scrollToRef) {\n            scrollToRef.scrollIntoView({\n              behavior: 'smooth',\n              block: 'start'\n            });\n          }\n        }\n      }}\n      data-testid={testId}\n      {...attributes}\n    >\n      {children}\n    \n  );\n};\n"
  },
  {
    "path": "src/GoBack/GoBack.tsx",
    "content": "import classNames from 'classnames';\nimport React, { ReactNode } from 'react';\nimport { Button } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\n\nexport interface GoBackProps {\n  /**\n   * Optional classnames to pass to the element\n   */\n  className?: string;\n  /**\n   * Render the link variant of the go back button\n   */\n  link?: boolean;\n  /**\n   * Render the up variant of the go back button\n   */\n  up?: boolean;\n  children?: ReactNode;\n}\n\nconst goBack = () => {\n  window.history.back();\n};\n\nexport const GoBack = ({ className, link = false, up = false, children }: GoBackProps) => {\n  const Tag = link ? 'a' : Button;\n\n  return (\n    \n      \n      {children}\n    \n  );\n};\n"
  },
  {
    "path": "src/Grid/GridItem.tsx",
    "content": "import React, { ElementType, FC, HTMLAttributes } from 'react';\nimport classname from 'classnames';\n\nexport interface GridItemProps extends HTMLAttributes {\n  /** Classi aggiuntive da usare per il componente LinkListItem */\n  className?: string;\n  /** Indica il tag da utilizzare per il titolo */\n  tag?: ElementType;\n  testId?: string;\n}\n\nexport const GridItem: FC = ({ tag: Tag = 'div', className, children, testId, ...attributes }) => {\n  const classes = classname('it-grid-item-wrapper', className);\n  return (\n    \n      {children}\n    \n  );\n};\n"
  },
  {
    "path": "src/Grid/GridItemText.tsx",
    "content": "import React, { FC, HTMLAttributes } from 'react';\nimport classname from 'classnames';\n\nexport interface GridItemTextProps extends HTMLAttributes {\n  /** Classi aggiuntive da usare per l'elemento */\n  className?: string;\n  testId?: string;\n}\n\nexport const GridItemText: FC = ({ className, children, testId, ...attributes }) => {\n  const classes = classname('it-griditem-text', className);\n  return (\n    \n      {children}\n    \n  );\n};\n"
  },
  {
    "path": "src/Grid/GridItemTextWrapper.tsx",
    "content": "import React, { ElementType, FC, HTMLAttributes } from 'react';\nimport classname from 'classnames';\n\nexport interface GridItemTextWrapperProps extends HTMLAttributes {\n  /** Classi aggiuntive da usare per l'elemento */\n  className?: string;\n  testId?: string;\n  /** Tag dell'elemento (può essere ad esempio trasformato in figcaption) */\n  tag?: ElementType;\n}\n\nexport const GridItemTextWrapper: FC = ({\n  className,\n  children,\n  testId,\n  tag = 'span',\n  ...attributes\n}) => {\n  const classes = classname('it-griditem-text-wrapper', className);\n  const Tag = tag;\n  return (\n    \n      {children}\n    \n  );\n};\n"
  },
  {
    "path": "src/Grid/GridList.tsx",
    "content": "import React, { FC, HTMLAttributes } from 'react';\nimport classname from 'classnames';\n\nexport interface GridListProps extends HTMLAttributes {\n  /** Classi aggiuntive da usare per il componente LinkListItem */\n  className?: string;\n  testId?: string;\n}\n\nexport const GridList: FC = ({ className, children, testId, ...attributes }) => {\n  const classes = classname('it-grid-list-wrapper', className);\n  return (\n    
    \n      {children}\n    
    \n  );\n};\n"
  },
  {
    "path": "src/Grid/GridRow.tsx",
    "content": "import React, { FC, HTMLAttributes } from 'react';\nimport classname from 'classnames';\n\nexport interface GridRowProps extends HTMLAttributes {\n  /** Classi aggiuntive da usare per il componente LinkListItem */\n  className?: string;\n  testId?: string;\n}\n\nexport const GridRow: FC = ({ className, children, testId, ...attributes }) => {\n  const classes = classname('grid-row', className);\n  return (\n    
    \n      {children}\n    
    \n  );\n};\n"
  },
  {
    "path": "src/Grid/index.ts",
    "content": "export { GridItem } from './GridItem';\nexport { GridItemText } from './GridItemText';\nexport { GridItemTextWrapper } from './GridItemTextWrapper';\nexport { GridList } from './GridList';\nexport { GridRow } from './GridRow';\n\nexport type { GridItemProps } from './GridItem';\nexport type { GridItemTextProps } from './GridItemText';\nexport type { GridItemTextWrapperProps } from './GridItemTextWrapper';\nexport type { GridListProps } from './GridList';\nexport type { GridRowProps } from './GridRow';\n"
  },
  {
    "path": "src/Header/Header.tsx",
    "content": "import React, { FC, HTMLAttributes } from 'react';\nimport classNames from 'classnames';\n\nimport { HeaderContext, CENTER, NAVBAR } from './HeaderContext';\n\nexport interface HeaderProps extends HTMLAttributes {\n  /** Classi aggiuntive da usare per il componente Header */\n  className?: string;\n  /** Tipo di componente Header: può essere solamente uno di questi tre tipi */\n  type: 'slim' | 'center' | 'navbar';\n  /** Riduce la grandezza del componente Header. Funziona solamente con Header \"center\". */\n  small?: boolean;\n  /** Imposta il tema per il componente Header. Per gli Header di tipo \"slim\" o \"center\"\n   *  il valore di default è \"dark\". Per l'Header di tipo \"nav\" il tema di default è \"light\"\n   *  in mobile, mentre \"dark\" in versione desktop.\n   */\n  theme?: 'light' | 'dark' | '';\n  testId?: string;\n}\n\nexport const Header: FC = ({ className, small = false, theme = '', type, testId, ...attributes }) => {\n  // use context here as theme\n  const classes = classNames(className, {\n    [`it-header-${type}-wrapper`]: type,\n    'it-small-header': type === CENTER && small,\n    [`theme-${theme}`]: type !== NAVBAR && theme,\n    'theme-dark-mobile': type === NAVBAR && theme === 'dark',\n    'theme-light-desk': type === NAVBAR && theme === 'light'\n  });\n  return (\n    \n      
    \n    \n  );\n};\n"
  },
  {
    "path": "src/Header/HeaderBrand.tsx",
    "content": "import React, { AnchorHTMLAttributes, ElementType, ReactNode } from 'react';\nimport classNames from 'classnames';\nimport { NavbarBrand } from 'reactstrap';\nimport { CSSModule } from 'reactstrap/types/lib/utils';\nimport { CENTER, useHeaderContext } from './HeaderContext';\nimport { Icon } from '../Icon/Icon';\n\nexport interface HeaderBrandProps extends AnchorHTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente HeaderBrand */\n  className?: string;\n  /** Oggetto contenente la nuova mappatura per le classi CSS. */\n  cssModule?: CSSModule;\n  /** Da usare con il componente Header Nav in versione \"responsive\" */\n  responsive?: boolean;\n  /** Da utilizzare per specificare URL risorsa esterna. */\n  href?: string;\n  /** Icona da utilizzare nel componente. Utilizzata unicamente quando l'Header è di tipo Center.  */\n  iconName?: string;\n  /** Alt text da utilizzare nell'icona. Utilizzata unicamente quando l'Header è di tipo Center.  */\n  iconAlt?: string;\n  /** Elementi React da renderizzare al proprio interno. */\n  children: ReactNode | ReactNode[];\n  testId?: string;\n}\n\nexport const HeaderBrand = ({\n  className,\n  href,\n  iconName,\n  iconAlt,\n  children,\n  tag = 'a',\n  responsive = false,\n  testId,\n  ...attributes\n}: HeaderBrandProps) => {\n  const type = useHeaderContext();\n  const defaultAttributes = { tag };\n  if (type !== CENTER) {\n    const classes = classNames('d-lg-block', className, {\n      'd-none': !responsive\n    });\n    return (\n      \n        {children}\n      \n    );\n  }\n  return (\n    \n  );\n};\n"
  },
  {
    "path": "src/Header/HeaderContent.tsx",
    "content": "import React, { HTMLAttributes } from 'react';\nimport classNames from 'classnames';\nimport { Col, Container, Navbar, Row } from 'reactstrap';\n\nimport { SLIM, CENTER, NAVBAR, useHeaderContext } from './HeaderContext';\n\nexport interface HeaderContentProps extends HTMLAttributes {\n  /** Classi aggiuntive da usare per il componente HeaderContent */\n  className?: string;\n  /** Da utilizzare per indicare che all'interno dell'Header verrà utilizzato un Megamenu */\n  megamenu?: boolean;\n  /** Parametro per il controllo responsive del componente secondo Bootstrap Italia. */\n  expand?: boolean | 'sm' | 'md' | 'lg' | 'xl';\n  testId?: string;\n}\n\nexport const HeaderContent = ({ className, megamenu, testId, ...attributes }: HeaderContentProps) => {\n  const type = useHeaderContext();\n  const classes = classNames(className, {\n    'it-header-slim-wrapper-content': type === SLIM,\n    'it-header-center-content-wrapper': type === CENTER,\n    navbar: type === NAVBAR,\n    'has-megamenu': megamenu\n  });\n\n  const Content =\n    type === NAVBAR ? (\n      \n    ) : (\n      
    \n    );\n  return (\n    \n      \n        {Content}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Header/HeaderContext.tsx",
    "content": "import { createContext, useContext } from 'react';\n\nexport const SLIM = 'slim';\nexport const CENTER = 'center';\nexport const NAVBAR = 'navbar';\n\nexport const HeaderContext = /* @__PURE__ */ createContext<{\n  type?: typeof SLIM | typeof CENTER | typeof NAVBAR;\n}>({});\n\nexport const useHeaderContext = () => {\n  const { type } = useContext(HeaderContext);\n  return type;\n};\n"
  },
  {
    "path": "src/Header/HeaderLinkZone.tsx",
    "content": "import React, { FC, HTMLAttributes } from 'react';\nimport classNames from 'classnames';\n\nexport interface HeaderLinkZoneProps extends HTMLAttributes {\n  /** Classi addizionali per il componente HeaderLinkZone, applicata all'element \"nav\" annidato */\n  className?: string;\n  testId?: string;\n}\n\nexport const HeaderLinkZone: FC = ({ className, testId, ...attributes }) => {\n  const classes = classNames(className);\n  return (\n    
    \n      
    \n  );\n};\n"
  },
  {
    "path": "src/Header/HeaderRightZone.tsx",
    "content": "import React, { HTMLAttributes } from 'react';\nimport classNames from 'classnames';\n\nimport { SLIM, useHeaderContext } from './HeaderContext';\n\nexport interface HeaderRightZoneProps extends HTMLAttributes {\n  /** Classi addizionali per il componente HeaderLinkZone, applicata all'element \"nav\" annidato */\n  className?: string;\n  testId?: string;\n}\n\nexport const HeaderRightZone = ({ className, testId, ...attributes }: HeaderRightZoneProps) => {\n  const type = useHeaderContext();\n  const classes = classNames(className, {\n    // BI >= 1.3.6\n    'it-header-slim-right-zone': type === SLIM,\n    // BI < 1.3.6\n    'header-slim-right-zone': type === SLIM,\n    'it-right-zone': type !== SLIM\n  });\n  return 
    ;\n};\n"
  },
  {
    "path": "src/Header/HeaderSearch.tsx",
    "content": "import React, { FC, HTMLAttributes } from 'react';\nimport classNames from 'classnames';\n\nimport { Icon } from '../Icon/Icon';\n\nexport interface HeaderSearchProps extends HTMLAttributes {\n  /** Classi aggiuntive da usare per il componente HeaderSearch */\n  className?: string;\n  /** Etichetta di testo da applicare all'elemento. In caso di stringa vuota non verrà mostrato alcun testo */\n  label: string;\n  /** Nome dell'icona da utilizzare */\n  iconName: string;\n  /** Indirizzo di indirizzamento al click dell'icona */\n  href?: string;\n  testId?: string;\n}\n\nexport const HeaderSearch: FC = ({\n  className,\n  label,\n  href,\n  iconName = 'it-search',\n  testId,\n  ...attributes\n}) => {\n  const classes = classNames('it-search-wrapper', className);\n  return (\n    
    \n      {label && {label}}\n      \n        \n      \n    
    \n  );\n};\n"
  },
  {
    "path": "src/Header/HeaderSocialsZone.tsx",
    "content": "import React, { FC, HTMLAttributes, ReactNode } from 'react';\nimport classNames from 'classnames';\n\nexport interface HeaderSocialsZoneProps extends HTMLAttributes {\n  /** Classi addizionali per il componente HeaderSocialsZone, verrà applicato all'elemento wrapper più esterno. */\n  className?: string;\n  /** Etichetta utilizzata per presentare i social presenti. In caso di stringa vuota non verrà mostrata alcuna etichetta */\n  label?: string;\n  /** Utilizzato per elencare i social da mostrare */\n  children?: ReactNode;\n  testId?: string;\n}\n\nexport const HeaderSocialsZone: FC = ({\n  className,\n  children,\n  label,\n  testId,\n  ...attributes\n}) => {\n  const classes = classNames('it-socials d-none d-md-flex', className);\n  return (\n    
    \n      {label && {label}}\n      {children}\n    
    \n  );\n};\n"
  },
  {
    "path": "src/Header/HeaderToggler.tsx",
    "content": "import React, { ElementType, ButtonHTMLAttributes, useEffect } from 'react';\nimport classNames from 'classnames';\nimport { NavbarToggler } from 'reactstrap';\n\nimport { SLIM, NAVBAR, useHeaderContext } from './HeaderContext';\n\nexport interface HeaderTogglerProps extends ButtonHTMLAttributes {\n  /** Tipo di elemento DOM da utilizzare: di default \"a\" per Header Slim, \"button\" per altri tipi di Header.\n   * Se fornito questo sovrascriverà il valore di default.\n   */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente HeaderToggler */\n  className?: string;\n  /** Indica l'attributo \"type\" sull'elemento DOM. Di default '' per Header Slim, \"button\" per altri tipi di Header.\n   * Se fornito questo sovrascriverà il valore di default.\n   */\n  type?: 'button' | 'submit' | 'reset';\n  isOpen?: boolean;\n  testId?: string;\n}\n\nconst BUTTON = 'button';\n\nexport const HeaderToggler = ({ className, tag, type, isOpen = false, testId, ...attributes }: HeaderTogglerProps) => {\n  const HeaderType = useHeaderContext();\n  const defaultTag = HeaderType === SLIM ? 'a' : BUTTON;\n  const defaultType = HeaderType === SLIM ? undefined : BUTTON;\n  const classes = classNames(\n    {\n      'it-opener d-lg-none': HeaderType === SLIM,\n      'custom-navbar-toggler': HeaderType === NAVBAR\n    },\n    className\n  );\n  const expanded = isOpen ? 'true' : 'false';\n  useEffect(() => {\n    document.querySelectorAll('.container-fluid').forEach((element) => {\n      element.classList.remove('container-fluid');\n    });\n  });\n  return (\n    \n  );\n};\n"
  },
  {
    "path": "src/Header/Headers.tsx",
    "content": "import React, { FC, HTMLAttributes } from 'react';\nimport classNames from 'classnames';\nexport interface HeadersProps extends HTMLAttributes {\n  /** Aggiunge un ombra per enfatizzare il componente rispetto alla pagina in cui è contenuto */\n  shadow?: boolean;\n  /** Aggiunge il comportamento \"sticky\" ai componenti Header contenuti */\n  sticky?: boolean;\n  /** Classi addizionali per il componente Headers */\n  className?: string;\n  testId?: string;\n}\n\nexport const Headers: FC = ({ className, shadow = false, sticky = false, testId, ...attributes }) => {\n  const classes = classNames(\n    'it-header-wrapper',\n    {\n      'it-shadow': shadow,\n      'it-header-sticky': sticky,\n      'sticky-top': sticky\n\n    },\n    className\n  );\n  return 
    ;\n};\n"
  },
  {
    "path": "src/Hero/Hero.tsx",
    "content": "import classname from 'classnames';\nimport React, { ElementType, FC, HTMLAttributes } from 'react';\n\nexport interface HeroProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Indica se il componente Hero deve ridurre l'altezza */\n  small?: boolean;\n  /** Indica al componente Hero di centrare i contenuti testuali orizzontalmente */\n  centered?: boolean;\n  /** Da utilizzare per creare un testi in overlay su immagini, al fine di migliorare la leggibilità di testo */\n  overlay?: 'dark' | 'primary' | 'filter';\n  /** Aggiunge margine negativo in fondo al componente Hero per creare una sovrapposizione con il contenuto seguente. */\n  overlap?: boolean;\n  testId?: string;\n}\n\nexport const Hero: FC = ({\n  tag: Tag = 'section',\n  small,\n  centered,\n  overlay,\n  overlap,\n  className,\n  testId,\n  ...attributes\n}) => {\n  const classes = classname('it-hero-wrapper', className, {\n    'it-overlay': overlay,\n    ['it-' + overlay]: overlay,\n    'it-hero-small-size': small,\n    'it-text-centered': centered,\n    'it-bottom-overlapping-content': overlap\n  });\n  return ;\n};\n"
  },
  {
    "path": "src/Hero/HeroBackground.tsx",
    "content": "import React, { FC, HTMLAttributes } from 'react';\n\nexport interface HeroBackgroundProps extends HTMLAttributes {\n  /** Un testo alternativo per descrivere l'immagine mostrata */\n  alt: string;\n  /** L'URI dell'immagine da mostrare */\n  src: string;\n  /** Il titolo dell'immagine */\n  title?: string;\n  testId?: string;\n}\n\nexport const HeroBackground: FC = ({ alt, testId, ...attributes }) => {\n  return (\n    
    \n      
    \n        
    \n          {alt}\n        
    \n      
    \n    
    \n  );\n};\n"
  },
  {
    "path": "src/Hero/HeroBody.tsx",
    "content": "import React, { FC, HTMLAttributes } from 'react';\nimport classname from 'classnames';\nimport { Col, Container, Row } from 'reactstrap';\n\nexport interface HeroBodyProps extends HTMLAttributes {\n  /** Eventuali classi aggiuntive */\n  className?: string;\n  testId?: string;\n}\n\nexport const HeroBody: FC = ({ children, className, testId }) => {\n  const classes = classname('it-hero-text-wrapper', 'bg-dark', className);\n  return (\n    \n      \n        \n          
    \n            {children}\n          
    \n        \n          \n        \n  );\n};\n"
  },
  {
    "path": "src/Hero/HeroButton.tsx",
    "content": "import React, { FC } from 'react';\nimport classname from 'classnames';\nimport { Button, ButtonProps } from '../Button/Button';\n\nexport interface HeroButtonProps extends ButtonProps {\n  wrapperClassName?: string;\n  testId?: string;\n}\n\nexport const HeroButton: FC = ({ wrapperClassName, testId, ...attributes }) => {\n  const classes = classname('it-btn-container', wrapperClassName);\n  return (\n    
    \n      
    \n  );\n};\n"
  },
  {
    "path": "src/Hero/HeroCategory.tsx",
    "content": "import React, { FC, HTMLAttributes } from 'react';\nimport classname from 'classnames';\n\nexport interface HeroCategoryProps extends HTMLAttributes {\n  /** Eventuali classi aggiuntive per la categoria */\n  className?: string;\n  testId?: string;\n}\n\nexport const HeroCategory: FC = ({ className, testId, ...attributes }) => {\n  const classes = classname('it-category', className);\n  return ;\n};\n"
  },
  {
    "path": "src/Hero/HeroTitle.tsx",
    "content": "import React, { ElementType, FC, HTMLAttributes } from 'react';\nimport classname from 'classnames';\n\nexport interface HeroTitleProps extends HTMLAttributes {\n  /** Indica il tag da utilizzare per il titolo */\n  tag?: ElementType;\n  testId?: string;\n}\n\nexport const HeroTitle: FC = ({ tag: Tag = 'h1', className, testId, ...attributes }) => {\n  const classes = classname(className);\n  return ;\n};\n"
  },
  {
    "path": "src/Hero/index.ts",
    "content": "export { Hero } from './Hero';\nexport { HeroBackground } from './HeroBackground';\nexport { HeroBody } from './HeroBody';\nexport { HeroButton } from './HeroButton';\nexport { HeroCategory } from './HeroCategory';\nexport { HeroTitle } from './HeroTitle';\n\nexport type { HeroProps } from './Hero';\nexport type { HeroBackgroundProps } from './HeroBackground';\nexport type { HeroBodyProps } from './HeroBody';\nexport type { HeroButtonProps } from './HeroButton';\nexport type { HeroCategoryProps } from './HeroCategory';\nexport type { HeroTitleProps } from './HeroTitle';\n"
  },
  {
    "path": "src/Icon/EmptyIcon.tsx",
    "content": "import React, { FC, SVGProps } from 'react';\ninterface SVGRProps {\n  title?: string;\n  titleId?: string;\n}\nexport const EmptyIcon: FC & SVGRProps> = ({ title, titleId, ...props }) => (\n  \n    {title ? {title} : null}\n    \n  \n);\n"
  },
  {
    "path": "src/Icon/Icon.tsx",
    "content": "import classNames from 'classnames';\nimport React, { FC, ImgHTMLAttributes, SVGProps, useEffect, useState } from 'react';\nimport { EmptyIcon } from './EmptyIcon';\nimport { IconName, SVGRProps, allIcons, isBundledIcon, loadIcon } from './assets/index';\nexport type { IconName } from './assets';\n\nexport const iconsList = allIcons;\n\nlet iconsCache: Record>> = {};\n\n/**\n * Preload a list of icons in cache\n * @param icons - the list of icons to preload\n * @returns true if the icons have been preloaded\n */\nexport async function preloadIcons(icons: IconName[]) {\n  const preloadedIcons = await Promise.all(icons.map((icon) => loadIcon(icon)));\n  preloadedIcons.forEach(({ component }, i) => {\n    iconsCache[icons[i]] = (() => component) as unknown as FC>;\n  });\n  return true;\n}\n\n/**\n * Removes icons from cache\n * @param icon? - the icon to remove, or nothing to clear the whole cache\n * @returns an object containing the removed icons\n */\nexport const clearIconCache = (iconName?: IconName) => {\n  let deletedItems;\n  if (iconName) {\n    deletedItems = { [iconName]: iconsCache[iconName] };\n    delete iconsCache[iconName];\n  } else {\n    deletedItems = { ...iconsCache };\n    iconsCache = {};\n  }\n  return deletedItems;\n};\n\nexport interface IconProps extends SVGProps {\n  /** Classi aggiuntive da usare per il componente Badge */\n  className?: string;\n  /** Le varianti di colore definite in Bootstrap Italia */\n  color?: 'success' | 'warning' | 'danger' | 'note' | 'important' | string;\n  /** Le dimensioni dell'icona. In ordine dalla più grande alla più piccola: \"xl\", \"lg\", '' (stringa vuota), \"sm\", \"xs\". */\n  size?: 'xl' | 'lg' | '' | 'sm' | 'xs';\n  /**\n   * Il nome dell'icona da mostrare. Per una lista completa vedi:\n   * Lista icone.\n   * In caso di un'immagine esterna l'URL da utilizzare.\n   **/\n  icon: string;\n  /** Il titolo da dare all'icona. Quando si utilizza un'immagine esterna viene utilizzato come attributo \"alt\". */\n  title?: string;\n  /** Quando abilitato riduce la dimensione dell'icona all'interno del contenitore.  */\n  padding?: boolean;\n  /** Funzione chiamata al caricamento dell'icona */\n  onIconLoad?: () => void;\n  /** Id da utilizzare in caso di testing */\n  testId?: string;\n}\n\nexport const Icon: FC = ({\n  color = '',\n  size = '',\n  icon = '',\n  title = '',\n  className,\n  padding = false,\n  onIconLoad,\n  testId,\n  ...attributes\n}) => {\n  const [IconComponent, setCurrentIcon] = useState & SVGRProps>>(iconsCache[icon]);\n  const classes = classNames('icon', className, {\n    [`icon-${color}`]: color,\n    [`icon-${size}`]: size,\n    'icon-padded': padding\n  });\n\n  useEffect(() => {\n    if (isBundledIcon(icon) && !iconsCache[icon]) {\n      loadIcon(icon).then(({ component }) => {\n        iconsCache[icon] = (() => component) as unknown as FC & SVGRProps>;\n        setCurrentIcon(iconsCache[icon]);\n        onIconLoad?.();\n      });\n    } else {\n      if (IconComponent !== iconsCache[icon]) {\n        setCurrentIcon(iconsCache[icon]);\n      }\n      onIconLoad?.();\n    }\n  }, [IconComponent, icon, onIconLoad]);\n\n  if (!isBundledIcon(icon)) {\n    // assume it's an image and let the browser do its job\n    return (\n      )}\n      />\n    );\n  }\n\n  if (!IconComponent) {\n    return (\n      \n    );\n  }\n\n  return (\n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItAndroid.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItAndroidSquare.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItApple.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItAppleSquare.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItArrowDown.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItArrowDownCircle.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItArrowDownTriangle.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItArrowLeft.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItArrowLeftCircle.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItArrowLeftTriangle.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItArrowRight.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItArrowRightCircle.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItArrowRightTriangle.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItArrowUp.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItArrowUpCircle.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItArrowUpTriangle.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItBan.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItBehance.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItBluesky.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItBookmark.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItBox.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItBurger.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItCalendar.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItCamera.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItCar.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItCard.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItCart.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItChartLine.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItCheck.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItCheckCircle.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItChevronLeft.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItChevronRight.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItClip.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItClock.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItClose.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItCloseBig.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItCloseCircle.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItCodeCircle.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItCollapse.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItComment.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItCopy.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItDelete.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItDesignersItalia.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItDownload.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItError.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItExchangeCircle.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItExpand.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItExternalLink.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFacebook.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFacebookSquare.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFigma.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n      \n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFigmaSquare.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFile.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFileAudio.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n        \n      \n      \n        \n          \n        \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFileCompressed.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n        \n      \n      \n        \n          \n        \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFileCsv.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n        \n      \n      \n        \n          \n        \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFileDocx.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n      \n      \n      \n\n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFileImage.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFileJson.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFileOdp.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFileOds.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFileOdt.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFilePdf.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n        \n      \n      \n        \n          \n        \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFilePdfExt.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFilePpt.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFileSheet.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n        \n      \n      \n        \n          \n        \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFileSigned.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n\n      \n      \n      \n      \n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFileSlides.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFileTxt.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFileVideo.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n        \n      \n      \n        \n          \n        \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFileXlsx.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n      \n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFileXml.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFiles.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFlag.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFlickr.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFlickrSquare.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFolder.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFullscreen.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItFunnel.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItGithub.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItGoogle.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItHearing.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItHelp.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItHelpCircle.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItHorn.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItInbox.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItInfoCircle.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItInstagram.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItKey.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItLessCircle.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItLink.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItLinkedin.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItLinkedinSquare.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItList.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItLock.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItLocked.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItLogout.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n        \n      \n      \n        \n          \n        \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItMail.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItMailOpen.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItMapMarker.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItMapMarkerCircle.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItMapMarkerMinus.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItMapMarkerPlus.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItMastodon.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItMastodonSquare.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItMaximize.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItMaximizeAlt.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItMedium.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItMediumSquare.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItMinimize.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItMinus.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItMinusCircle.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItMoodle.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItMoodleSquare.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItMoreActions.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItMoreItems.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItNote.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItOpenSource.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItPa.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItPasswordInvisible.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItPasswordVisible.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItPencil.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItPiattaforme.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItPin.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItPinterest.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItPinterestSquare.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItPlug.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItPlus.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItPlusCircle.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItPresentation.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItPrint.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItQuora.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItQuoraSquare.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItReddit.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItRedditSquare.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItRefresh.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItRestore.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItRss.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItRssSquare.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItSearch.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItSettings.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItShare.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItSign.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItSlack.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItSlackSquare.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItSnapchat.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItSnapchatSquare.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItSoftware.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItSpotify.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItStackexchange.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItStackexchangeSquare.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItStackoverflow.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItStackoverflowSquare.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItStarFull.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItStarOutline.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItTeamDigitale.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItTelegram.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItTelephone.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItThreads.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItThreadsSquare.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItTiktok.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItTiktokSquare.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItTool.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItTwitter.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItTwitterSquare.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItUnlocked.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItUpload.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItUser.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItVideo.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItVimeo.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItVimeoSquare.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItWarning.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItWarningCircle.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItWhatsapp.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItWhatsappSquare.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItWifi.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItYoutube.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItZoomIn.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/ItZoomOut.tsx",
    "content": "import * as React from 'react';\nimport { SVGProps } from 'react';\nimport { SVGRProps } from '.';\n\nexport const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {\n  return (\n    \n      {title ? {title} : null}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Icon/assets/index.ts",
    "content": "const iconList: Record = {\n  'it-android-square': true,\n  'it-android': true,\n  'it-apple-square': true,\n  'it-apple': true,\n  'it-arrow-down-circle': true,\n  'it-arrow-down-triangle': true,\n  'it-arrow-down': true,\n  'it-arrow-left-circle': true,\n  'it-arrow-left-triangle': true,\n  'it-arrow-left': true,\n  'it-arrow-right-circle': true,\n  'it-arrow-right-triangle': true,\n  'it-arrow-right': true,\n  'it-arrow-up-circle': true,\n  'it-arrow-up-triangle': true,\n  'it-arrow-up': true,\n  'it-ban': true,\n  'it-behance': true,\n  'it-bluesky': true,\n  'it-bookmark': true,\n  'it-box': true,\n  'it-burger': true,\n  'it-calendar': true,\n  'it-camera': true,\n  'it-car': true,\n  'it-card': true,\n  'it-cart': true,\n  'it-chart-line': true,\n  'it-check-circle': true,\n  'it-check': true,\n  'it-chevron-left': true,\n  'it-chevron-right': true,\n  'it-clip': true,\n  'it-clock': true,\n  'it-close-big': true,\n  'it-close-circle': true,\n  'it-close': true,\n  'it-code-circle': true,\n  'it-collapse': true,\n  'it-comment': true,\n  'it-copy': true,\n  'it-delete': true,\n  'it-designers-italia': true,\n  'it-download': true,\n  'it-error': true,\n  'it-exchange-circle': true,\n  'it-expand': true,\n  'it-external-link': true,\n  'it-facebook-square': true,\n  'it-facebook': true,\n  'it-figma-square': true,\n  'it-figma': true,\n  'it-file-audio': true,\n  'it-file-docx': true,\n  'it-file-compressed': true,\n  'it-file-csv': true,\n  'it-file-json': true,\n  'it-file-image': true,\n  'it-file-odp': true,\n  'it-file-ods': true,\n  'it-file-odt': true,\n  'it-file-pdf-ext': true,\n  'it-file-pdf': true,\n  'it-file-ppt': true,\n  'it-file-sheet': true,\n  'it-file-signed': true,\n  'it-file-slides': true,\n  'it-file-txt': true,\n  'it-file-video': true,\n  'it-file-xlsx': true,\n  'it-file-xml': true,\n  'it-file': true,\n  'it-files': true,\n  'it-flag': true,\n  'it-flickr-square': true,\n  'it-flickr': true,\n  'it-folder': true,\n  'it-fullscreen': true,\n  'it-funnel': true,\n  'it-github': true,\n  'it-google': true,\n  'it-hearing': true,\n  'it-help-circle': true,\n  'it-help': true,\n  'it-horn': true,\n  'it-inbox': true,\n  'it-info-circle': true,\n  'it-instagram': true,\n  'it-key': true,\n  'it-less-circle': true,\n  'it-link': true,\n  'it-linkedin-square': true,\n  'it-linkedin': true,\n  'it-list': true,\n  'it-lock': true,\n  'it-locked': true,\n  'it-logout': true,\n  'it-mail-open': true,\n  'it-mail': true,\n  'it-map-marker-circle': true,\n  'it-map-marker-minus': true,\n  'it-map-marker-plus': true,\n  'it-map-marker': true,\n  'it-mastodon-square': true,\n  'it-mastodon': true,\n  'it-maximize-alt': true,\n  'it-maximize': true,\n  'it-medium-square': true,\n  'it-medium': true,\n  'it-minimize': true,\n  'it-minus-circle': true,\n  'it-minus': true,\n  'it-moodle-square': true,\n  'it-moodle': true,\n  'it-more-actions': true,\n  'it-more-items': true,\n  'it-note': true,\n  'it-open-source': true,\n  'it-pa': true,\n  'it-password-invisible': true,\n  'it-password-visible': true,\n  'it-pencil': true,\n  'it-piattaforme': true,\n  'it-pin': true,\n  'it-pinterest-square': true,\n  'it-pinterest': true,\n  'it-plug': true,\n  'it-plus-circle': true,\n  'it-plus': true,\n  'it-presentation': true,\n  'it-print': true,\n  'it-quora-square': true,\n  'it-quora': true,\n  'it-reddit-square': true,\n  'it-reddit': true,\n  'it-refresh': true,\n  'it-restore': true,\n  'it-rss-square': true,\n  'it-rss': true,\n  'it-search': true,\n  'it-settings': true,\n  'it-share': true,\n  'it-sign': true,\n  'it-slack-square': true,\n  'it-slack': true,\n  'it-snapchat-square': true,\n  'it-snapchat': true,\n  'it-software': true,\n  'it-spotify': true,\n  'it-stackexchange-square': true,\n  'it-stackexchange': true,\n  'it-stackoverflow-square': true,\n  'it-stackoverflow': true,\n  'it-star-full': true,\n  'it-star-outline': true,\n  'it-team-digitale': true,\n  'it-telegram': true,\n  'it-telephone': true,\n  'it-tiktok-square': true,\n  'it-tiktok': true,\n  'it-tool': true,\n  'it-threads-square': true,\n  'it-threads': true,\n  'it-twitter-square': true,\n  'it-twitter': true,\n  'it-unlocked': true,\n  'it-upload': true,\n  'it-user': true,\n  'it-video': true,\n  'it-vimeo-square': true,\n  'it-vimeo': true,\n  'it-warning-circle': true,\n  'it-warning': true,\n  'it-whatsapp-square': true,\n  'it-whatsapp': true,\n  'it-wifi': true,\n  'it-youtube': true,\n  'it-zoom-in': true,\n  'it-zoom-out': true\n};\nexport type IconName = keyof typeof iconList;\n\nexport const loadIcon = (name: IconName) => {\n  switch (name) {\n    case 'it-android-square': {\n      return import('./ItAndroidSquare');\n    }\n    case 'it-android': {\n      return import('./ItAndroid');\n    }\n    case 'it-apple-square': {\n      return import('./ItAppleSquare');\n    }\n    case 'it-apple': {\n      return import('./ItApple');\n    }\n    case 'it-arrow-down-circle': {\n      return import('./ItArrowDownCircle');\n    }\n    case 'it-arrow-down-triangle': {\n      return import('./ItArrowDownTriangle');\n    }\n    case 'it-arrow-down': {\n      return import('./ItArrowDown');\n    }\n    case 'it-arrow-left-circle': {\n      return import('./ItArrowLeftCircle');\n    }\n    case 'it-arrow-left-triangle': {\n      return import('./ItArrowLeftTriangle');\n    }\n    case 'it-arrow-left': {\n      return import('./ItArrowLeft');\n    }\n    case 'it-arrow-right-circle': {\n      return import('./ItArrowRightCircle');\n    }\n    case 'it-arrow-right-triangle': {\n      return import('./ItArrowRightTriangle');\n    }\n    case 'it-arrow-right': {\n      return import('./ItArrowRight');\n    }\n    case 'it-arrow-up-circle': {\n      return import('./ItArrowUpCircle');\n    }\n    case 'it-arrow-up-triangle': {\n      return import('./ItArrowUpTriangle');\n    }\n    case 'it-arrow-up': {\n      return import('./ItArrowUp');\n    }\n    case 'it-ban': {\n      return import('./ItBan');\n    }\n    case 'it-behance': {\n      return import('./ItBehance');\n    }\n    case 'it-bluesky': {\n      return import('./ItBluesky');\n    }\n    case 'it-bookmark': {\n      return import('./ItBookmark');\n    }\n    case 'it-box': {\n      return import('./ItBox');\n    }\n    case 'it-burger': {\n      return import('./ItBurger');\n    }\n    case 'it-calendar': {\n      return import('./ItCalendar');\n    }\n    case 'it-camera': {\n      return import('./ItCamera');\n    }\n    case 'it-car': {\n      return import('./ItCar');\n    }\n    case 'it-cart': {\n      return import('./ItCart');\n    }\n    case 'it-card': {\n      return import('./ItCard');\n    }\n    case 'it-chart-line': {\n      return import('./ItChartLine');\n    }\n    case 'it-check-circle': {\n      return import('./ItCheckCircle');\n    }\n    case 'it-check': {\n      return import('./ItCheck');\n    }\n    case 'it-chevron-left': {\n      return import('./ItChevronLeft');\n    }\n    case 'it-chevron-right': {\n      return import('./ItChevronRight');\n    }\n    case 'it-clip': {\n      return import('./ItClip');\n    }\n    case 'it-clock': {\n      return import('./ItClock');\n    }\n    case 'it-close-big': {\n      return import('./ItCloseBig');\n    }\n    case 'it-close-circle': {\n      return import('./ItCloseCircle');\n    }\n    case 'it-close': {\n      return import('./ItClose');\n    }\n    case 'it-code-circle': {\n      return import('./ItCodeCircle');\n    }\n    case 'it-collapse': {\n      return import('./ItCollapse');\n    }\n    case 'it-comment': {\n      return import('./ItComment');\n    }\n    case 'it-copy': {\n      return import('./ItCopy');\n    }\n    case 'it-delete': {\n      return import('./ItDelete');\n    }\n    case 'it-designers-italia': {\n      return import('./ItDesignersItalia');\n    }\n    case 'it-download': {\n      return import('./ItDownload');\n    }\n    case 'it-error': {\n      return import('./ItError');\n    }\n    case 'it-exchange-circle': {\n      return import('./ItExchangeCircle');\n    }\n    case 'it-expand': {\n      return import('./ItExpand');\n    }\n    case 'it-external-link': {\n      return import('./ItExternalLink');\n    }\n    case 'it-facebook-square': {\n      return import('./ItFacebookSquare');\n    }\n    case 'it-facebook': {\n      return import('./ItFacebook');\n    }\n    case 'it-figma-square': {\n      return import('./ItFigmaSquare');\n    }\n    case 'it-figma': {\n      return import('./ItFigma');\n    }\n    case 'it-file-audio': {\n      return import('./ItFileAudio');\n    }\n    case 'it-file-compressed': {\n      return import('./ItFileCompressed');\n    }\n    case 'it-file-csv': {\n      return import('./ItFileCsv');\n    }\n    case 'it-file-json': {\n      return import('./ItFileJson');\n    }\n    case 'it-file-odp': {\n      return import('./ItFileOdp');\n    }\n    case 'it-file-ods': {\n      return import('./ItFileOds');\n    }\n    case 'it-file-odt': {\n      return import('./ItFileOdt');\n    }\n    case 'it-file-pdf-ext': {\n      return import('./ItFilePdfExt');\n    }\n    case 'it-file-pdf': {\n      return import('./ItFilePdf');\n    }\n    case 'it-file-ppt': {\n      return import('./ItFilePpt');\n    }\n    case 'it-file-sheet': {\n      return import('./ItFileSheet');\n    }\n    case 'it-file-slides': {\n      return import('./ItFileSlides');\n    }\n    case 'it-file-txt': {\n      return import('./ItFileTxt');\n    }\n    case 'it-file-video': {\n      return import('./ItFileVideo');\n    }\n    case 'it-file-xml': {\n      return import('./ItFileXml');\n    }\n    case 'it-file-docx': {\n      return import('./ItFileDocx');\n    }\n    case 'it-file-image': {\n      return import('./ItFileImage');\n    }\n    case 'it-file-signed': {\n      return import('./ItFileSigned');\n    }\n    case 'it-file-xlsx': {\n      return import('./ItFileXlsx');\n    }\n    case 'it-file': {\n      return import('./ItFile');\n    }\n    case 'it-files': {\n      return import('./ItFiles');\n    }\n    case 'it-flag': {\n      return import('./ItFlag');\n    }\n    case 'it-flickr-square': {\n      return import('./ItFlickrSquare');\n    }\n    case 'it-flickr': {\n      return import('./ItFlickr');\n    }\n    case 'it-folder': {\n      return import('./ItFolder');\n    }\n    case 'it-fullscreen': {\n      return import('./ItFullscreen');\n    }\n    case 'it-funnel': {\n      return import('./ItFunnel');\n    }\n    case 'it-github': {\n      return import('./ItGithub');\n    }\n    case 'it-google': {\n      return import('./ItGoogle');\n    }\n    case 'it-hearing': {\n      return import('./ItHearing');\n    }\n    case 'it-help-circle': {\n      return import('./ItHelpCircle');\n    }\n    case 'it-help': {\n      return import('./ItHelp');\n    }\n    case 'it-horn': {\n      return import('./ItHorn');\n    }\n    case 'it-inbox': {\n      return import('./ItInbox');\n    }\n    case 'it-info-circle': {\n      return import('./ItInfoCircle');\n    }\n    case 'it-instagram': {\n      return import('./ItInstagram');\n    }\n    case 'it-key': {\n      return import('./ItKey');\n    }\n    case 'it-less-circle': {\n      return import('./ItLessCircle');\n    }\n    case 'it-link': {\n      return import('./ItLink');\n    }\n    case 'it-linkedin-square': {\n      return import('./ItLinkedinSquare');\n    }\n    case 'it-linkedin': {\n      return import('./ItLinkedin');\n    }\n    case 'it-list': {\n      return import('./ItList');\n    }\n    case 'it-lock': {\n      return import('./ItLock');\n    }\n    case 'it-locked': {\n      return import('./ItLocked');\n    }\n    case 'it-logout': {\n      return import('./ItLogout');\n    }\n    case 'it-mail-open': {\n      return import('./ItMailOpen');\n    }\n    case 'it-mail': {\n      return import('./ItMail');\n    }\n    case 'it-map-marker-circle': {\n      return import('./ItMapMarkerCircle');\n    }\n    case 'it-map-marker-minus': {\n      return import('./ItMapMarkerMinus');\n    }\n    case 'it-map-marker-plus': {\n      return import('./ItMapMarkerPlus');\n    }\n    case 'it-map-marker': {\n      return import('./ItMapMarker');\n    }\n    case 'it-mastodon-square': {\n      return import('./ItMastodonSquare');\n    }\n    case 'it-mastodon': {\n      return import('./ItMastodon');\n    }\n    case 'it-maximize-alt': {\n      return import('./ItMaximizeAlt');\n    }\n    case 'it-maximize': {\n      return import('./ItMaximize');\n    }\n    case 'it-medium-square': {\n      return import('./ItMediumSquare');\n    }\n    case 'it-medium': {\n      return import('./ItMedium');\n    }\n    case 'it-minimize': {\n      return import('./ItMinimize');\n    }\n    case 'it-minus-circle': {\n      return import('./ItMinusCircle');\n    }\n    case 'it-minus': {\n      return import('./ItMinus');\n    }\n    case 'it-moodle-square': {\n      return import('./ItMoodleSquare');\n    }\n    case 'it-moodle': {\n      return import('./ItMoodle');\n    }\n    case 'it-more-actions': {\n      return import('./ItMoreActions');\n    }\n    case 'it-more-items': {\n      return import('./ItMoreItems');\n    }\n    case 'it-note': {\n      return import('./ItNote');\n    }\n    case 'it-open-source': {\n      return import('./ItOpenSource');\n    }\n    case 'it-pa': {\n      return import('./ItPa');\n    }\n    case 'it-password-invisible': {\n      return import('./ItPasswordInvisible');\n    }\n    case 'it-password-visible': {\n      return import('./ItPasswordVisible');\n    }\n    case 'it-pencil': {\n      return import('./ItPencil');\n    }\n    case 'it-piattaforme': {\n      return import('./ItPiattaforme');\n    }\n    case 'it-pin': {\n      return import('./ItPin');\n    }\n    case 'it-pinterest-square': {\n      return import('./ItPinterestSquare');\n    }\n    case 'it-pinterest': {\n      return import('./ItPinterest');\n    }\n    case 'it-plug': {\n      return import('./ItPlug');\n    }\n    case 'it-plus-circle': {\n      return import('./ItPlusCircle');\n    }\n    case 'it-plus': {\n      return import('./ItPlus');\n    }\n    case 'it-presentation': {\n      return import('./ItPresentation');\n    }\n    case 'it-print': {\n      return import('./ItPrint');\n    }\n    case 'it-quora-square': {\n      return import('./ItQuoraSquare');\n    }\n    case 'it-quora': {\n      return import('./ItQuora');\n    }\n    case 'it-reddit-square': {\n      return import('./ItRedditSquare');\n    }\n    case 'it-reddit': {\n      return import('./ItReddit');\n    }\n    case 'it-refresh': {\n      return import('./ItRefresh');\n    }\n    case 'it-restore': {\n      return import('./ItRestore');\n    }\n    case 'it-rss-square': {\n      return import('./ItRssSquare');\n    }\n    case 'it-rss': {\n      return import('./ItRss');\n    }\n    case 'it-search': {\n      return import('./ItSearch');\n    }\n    case 'it-settings': {\n      return import('./ItSettings');\n    }\n    case 'it-share': {\n      return import('./ItShare');\n    }\n    case 'it-sign': {\n      return import('./ItSign');\n    }\n    case 'it-slack-square': {\n      return import('./ItSlackSquare');\n    }\n    case 'it-slack': {\n      return import('./ItSlack');\n    }\n    case 'it-snapchat-square': {\n      return import('./ItSnapchatSquare');\n    }\n    case 'it-snapchat': {\n      return import('./ItSnapchat');\n    }\n    case 'it-software': {\n      return import('./ItSoftware');\n    }\n    case 'it-spotify': {\n      return import('./ItSpotify');\n    }\n    case 'it-stackexchange-square': {\n      return import('./ItStackexchangeSquare');\n    }\n    case 'it-stackexchange': {\n      return import('./ItStackexchange');\n    }\n    case 'it-stackoverflow-square': {\n      return import('./ItStackoverflowSquare');\n    }\n    case 'it-stackoverflow': {\n      return import('./ItStackoverflow');\n    }\n    case 'it-star-full': {\n      return import('./ItStarFull');\n    }\n    case 'it-star-outline': {\n      return import('./ItStarOutline');\n    }\n    case 'it-team-digitale': {\n      return import('./ItTeamDigitale');\n    }\n    case 'it-telegram': {\n      return import('./ItTelegram');\n    }\n    case 'it-telephone': {\n      return import('./ItTelephone');\n    }\n    case 'it-tiktok-square': {\n      return import('./ItTiktokSquare');\n    }\n    case 'it-tiktok': {\n      return import('./ItTiktok');\n    }\n    case 'it-tool': {\n      return import('./ItTool');\n    }\n    case 'it-threads-square': {\n      return import('./ItThreadsSquare');\n    }\n    case 'it-threads': {\n      return import('./ItThreads');\n    }\n    case 'it-twitter-square': {\n      return import('./ItTwitterSquare');\n    }\n    case 'it-twitter': {\n      return import('./ItTwitter');\n    }\n    case 'it-unlocked': {\n      return import('./ItUnlocked');\n    }\n    case 'it-upload': {\n      return import('./ItUpload');\n    }\n    case 'it-user': {\n      return import('./ItUser');\n    }\n    case 'it-video': {\n      return import('./ItVideo');\n    }\n    case 'it-vimeo-square': {\n      return import('./ItVimeoSquare');\n    }\n    case 'it-vimeo': {\n      return import('./ItVimeo');\n    }\n    case 'it-warning-circle': {\n      return import('./ItWarningCircle');\n    }\n    case 'it-warning': {\n      return import('./ItWarning');\n    }\n    case 'it-whatsapp-square': {\n      return import('./ItWhatsappSquare');\n    }\n    case 'it-whatsapp': {\n      return import('./ItWhatsapp');\n    }\n    case 'it-wifi': {\n      return import('./ItWifi');\n    }\n    case 'it-youtube': {\n      return import('./ItYoutube');\n    }\n    case 'it-zoom-in': {\n      return import('./ItZoomIn');\n    }\n    case 'it-zoom-out': {\n      return import('./ItZoomOut');\n    }\n    default:\n      throw Error(`It should not land here. Requested icon: \"${name}\"`);\n  }\n};\n\nexport function isBundledIcon(name: string): name is IconName {\n  return name in iconList;\n}\n\nexport const allIcons = Object.keys(iconList);\n\nexport interface SVGRProps {\n  title?: string;\n  titleId?: string;\n}\n"
  },
  {
    "path": "src/Input/Input.tsx",
    "content": "import isNumber from 'is-number';\nimport React, {\n  ElementType,\n  InputHTMLAttributes,\n  ReactNode,\n  Ref,\n  useCallback,\n  useRef,\n  useState\n} from 'react';\n\nimport classNames from 'classnames';\nimport type { CSSModule } from 'reactstrap/types/lib/utils';\nimport { Icon } from '../Icon/Icon';\nimport { notifyDeprecation } from '../utils';\nimport { InputContainer } from './InputContainer';\nimport { getClasses, getFormControlClass, getTag, getValidationTextControlClass, useFocus } from './utils';\n\n// taken from reactstrap types\ntype InputType =\n  | 'text'\n  | 'email'\n  | 'select'\n  | 'file'\n  | 'radio'\n  | 'checkbox'\n  | 'textarea'\n  | 'button'\n  | 'reset'\n  | 'submit'\n  | 'date'\n  | 'datetime-local'\n  | 'hidden'\n  | 'image'\n  | 'month'\n  | 'number'\n  | 'range'\n  | 'search'\n  | 'tel'\n  | 'url'\n  | 'week'\n  | 'password'\n  | 'datetime'\n  | 'time'\n  | 'color'\n  | 'adaptive'\n  | 'currency'\n  | 'percentage';\n\nexport interface InputProps extends InputHTMLAttributes {\n  /** Il tipo specifico di input da utilizzare. Il valore di default è `text`. */\n  type?: InputType;\n  /** Dimensione personalizzate del campo di Input secondo le classi Bootstrap/Bootstrap Italia. */\n  bsSize?: 'lg' | 'sm';\n  size?: number;\n  /** Etichetta del campo Input. */\n  label?: string | ReactNode;\n  /** Etichetta del pulsante incremento. */\n  incrementLabel?: string | ReactNode;\n  /** Etichetta del pulsante decremento. */\n  decrementLabel?: string | ReactNode;\n  /** Testo di esempio da utilizzare per il campo. */\n  placeholder?: string;\n  /** Testo di validazione per l'elemento del modulo form. */\n  validationText?: string;\n  /** Testo di aiuto per l'elemento del moduleo form. Richiede che il componente `Input` abbia la prop `id` impostata. */\n  infoText?: string;\n  /** Il valore nel campo Input. */\n  value?: string | number;\n  /** Da utilizzare per impedire la modifica del valore contenuto. */\n  readOnly?: boolean;\n  /** Associato all'attributo readOnly mostra il campo con lo stile classico, mantenendo lo stato di sola lettura. */\n  normalized?: boolean;\n  /** Utilizzare per mostrare il successo nella validazione del valore nel campo Input */\n  valid?: boolean;\n  innerRef?: Ref;\n  /** Utilizzare per mostrare testo statico non modificabile. */\n  plaintext?: boolean;\n  /** Utilizzare per mostrare un elemento un simbolo attivando la proprietà addon nel campo input all'interno del componente */\n  addonText?: string;\n  /** Oggetto contenente la nuova mappatura per le classi CSS. */\n  cssModule?: CSSModule;\n  /** Classi aggiuntive da usare per il wrapper del componente Input */\n  wrapperClassName?: string;\n  /**\n   * Classi aggiuntive da usare per il wrapper del componente Input.\n   * @deprecated. Usare `wrapperClassName`.\n   * */\n  wrapperClass?: string;\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente Input */\n  className?: string;\n  /**\n   * Usare \"plaintext\".\n   * @deprecated\n   */\n  static?: boolean;\n  /** Quando attivo rimuove il componente contenitore dell'Input. Utile per un controllo maggiore dello styling */\n  noWrapper?: boolean;\n  /** Indica che il componente ha un bottone a destra rispetto all'input */\n  hasButtonRight?: boolean;\n  /** Componente per il bottone */\n  buttonRight?: ReactNode;\n  /** Indica che il componente ha una icona a sinistra rispetto all'input */\n  hasIconLeft?: boolean;\n  /** Componente per l'icona */\n  iconLeft?: ReactNode;\n  testId?: string;\n}\n\nexport const Input = ({\n  id,\n  className,\n  cssModule,\n  type = 'text',\n  tag,\n  addonText,\n  static: staticInput,\n  plaintext,\n  innerRef,\n  label,\n  incrementLabel,\n  decrementLabel,\n  validationText,\n  infoText,\n  placeholder,\n  normalized,\n  value,\n  wrapperClass: originalWrapperClassOld,\n  wrapperClassName: originalWrapperClass,\n  size,\n  testId,\n  noWrapper = false,\n  hasButtonRight,\n  buttonRight,\n  hasIconLeft,\n  iconLeft,\n  ...attributes\n}: InputProps) => {\n  const [isHidden, setHidden] = useState(true);\n  const [hasIcon, toggleIcon] = useState(true);\n\n  const { toggleFocusLabel, toggleBlurLabel, isFocused } = useFocus({\n    onFocus: attributes.onFocus,\n    onBlur: attributes.onBlur\n  });\n\n  const toggleShow = useCallback(() => {\n    setHidden(!isHidden);\n    toggleIcon(!hasIcon);\n  }, [hasIcon, isHidden]);\n\n  const inputRef = useRef(null);\n\n  // eslint-disable-next-line prefer-const\n  let { bsSize, valid, ...rest } = attributes;\n\n  const Tag = getTag({ tag, plaintext, staticInput, type });\n  const formControlClass = getFormControlClass(\n    {\n      plaintext,\n      staticInput,\n      type,\n      normalized\n    },\n    cssModule\n  );\n  const validationTextControlClass = getValidationTextControlClass({ valid }, cssModule);\n\n  const extraAttributes: {\n    type?: InputType;\n    size?: number;\n    ['aria-describedby']?: string;\n  } = {};\n  if (size && !isNumber(size)) {\n    notifyDeprecation('Please use the prop \"bsSize\" instead of the \"size\" to bootstrap\\'s input sizing.');\n    bsSize = size as unknown as InputProps['bsSize'];\n  } else {\n    extraAttributes.size = size;\n  }\n\n  if (Tag === 'input' || typeof tag !== 'string') {\n    extraAttributes.type = type;\n  }\n\n  // associate the input field with the help text\n  const infoId = id && infoText ? `${id}Description` : undefined;\n  if (infoId) {\n    extraAttributes['aria-describedby'] = infoId;\n  }\n\n  if (\n    attributes.children &&\n    !(plaintext || staticInput || type === 'select' || typeof Tag !== 'string' || Tag === 'select')\n  ) {\n    notifyDeprecation(\n      `Input with a type of \"${type}\" cannot have children. Please use \"value\"/\"defaultValue\" instead.`\n    );\n    delete attributes.children;\n  }\n\n  const inputPassword = extraAttributes.type === 'password';\n\n  const indeterminateCheckboxInput = type === 'checkbox' && className?.includes('semi-checked');\n\n  // Styling\n  const { activeClass, extraLabelClass, validationTextClass, inputClasses, wrapperClass } = getClasses(\n    className,\n    type,\n    {\n      valid,\n      bsSize,\n      placeholder,\n      value,\n      label,\n      validationText,\n      normalized: Boolean(normalized),\n      inputPassword,\n      formControlClass,\n      validationTextControlClass,\n      isFocused: isFocused,\n      originalWrapperClass: originalWrapperClass || originalWrapperClassOld\n    },\n    cssModule\n  );\n\n  // set of attributes always shared by the Input components\n  const sharedAttributes = {\n    id,\n    onFocus: toggleFocusLabel,\n    onBlur: toggleBlurLabel,\n    value: value,\n    ref: innerRef\n  };\n\n  // set of attributes always shared by the wrapper component\n  const containerProps = {\n    id,\n    infoId,\n    infoText,\n    activeClass,\n    extraLabelClass,\n    label,\n    validationTextClass,\n    validationText,\n    wrapperClass,\n    hasButtonRight,\n    buttonRight,\n    hasIconLeft,\n    iconLeft\n  };\n\n  if (noWrapper) {\n    return (\n      \n    );\n  }\n\n  const clickIncrDecr = (mode: number) => {\n    let step = parseFloat(inputRef.current?.step ? inputRef.current.step : '1');\n    const min = parseFloat(inputRef.current?.min ? inputRef.current.min : 'Nan');\n    const max = parseFloat(inputRef.current?.max ? inputRef.current.max : 'Nan');\n    step = isNaN(step) ? 1 : step;\n    const newValue = parseFloat(inputRef.current?.value ? inputRef.current.value : '0') + mode * step;\n    if (!isNaN(max) && newValue > max) {\n      return;\n    }\n    if (!isNaN(min) && newValue < min) {\n      return;\n    }\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;\n    nativeInputValueSetter?.call(inputRef.current, `${newValue}`);\n    const ev1 = new Event('change', { bubbles: true });\n    const ev2 = new Event('input', { bubbles: true });\n    inputRef.current?.dispatchEvent(ev1);\n    inputRef.current?.dispatchEvent(ev2);\n    inputRef.current?.focus();\n  };\n\n  if (['currency', 'percentage', 'adaptive', 'number'].includes(type)) {\n    if (containerProps.extraLabelClass && ['currency', 'percentage'].includes(type)) {\n      containerProps.extraLabelClass = containerProps.extraLabelClass + ' input-symbol-label';\n    }\n    return (\n      \n        \n          {['currency', 'percentage'].includes(type) && (\n            {addonText}\n          )}\n          \n          \n            \n            \n          \n        
    \n      \n    );\n  }\n\n  if (placeholder) {\n    return (\n      \n        \n      \n    );\n  }\n\n  if (indeterminateCheckboxInput) {\n    return (\n      \n    );\n  }\n\n  if (inputPassword) {\n    return (\n      \n        \n        \n      \n    );\n  }\n  if (normalized) {\n    return (\n      \n        \n      \n    );\n  }\n  if (label || validationText) {\n    return (\n      \n        \n      \n    );\n  }\n\n  return ;\n};\n"
  },
  {
    "path": "src/Input/InputContainer.tsx",
    "content": "import React, { FC, HTMLAttributes, ReactNode } from 'react';\n\nexport interface InputContainerProps extends HTMLAttributes {\n  wrapperClass: string;\n  activeClass: string;\n  extraLabelClass: string;\n  validationTextClass: string;\n  label: string | ReactNode | undefined;\n  validationText: string | undefined;\n  id: string | undefined;\n  infoId: string | undefined;\n  infoText: string | undefined;\n  /** Indica che il componente ha un bottone a destra rispetto all'input */\n  hasButtonRight?: boolean;\n  /** Componente per il bottone */\n  buttonRight?: ReactNode;\n  /** Indica che il componente ha una icona a sinistra rispetto all'input */\n  hasIconLeft?: boolean;\n  /** Componente per l'icona */\n  iconLeft?: ReactNode;\n  testId?: string;\n}\n\nexport const InputContainer: FC = ({\n  id,\n  infoId,\n  infoText,\n  testId,\n  activeClass,\n  extraLabelClass,\n  label,\n  validationTextClass,\n  validationText,\n  wrapperClass,\n  hasButtonRight,\n  buttonRight,\n  hasIconLeft,\n  iconLeft,\n  children\n}) => {\n  if (hasButtonRight || hasIconLeft) {\n    return (\n      
    \n        
    \n          {hasIconLeft && {iconLeft}}\n          \n          {children}\n          {infoText && (\n            \n              {infoText}\n            \n          )}\n          
    {validationText}
    \n          {hasButtonRight && 
    {buttonRight}
    }\n        
    \n      
    \n    );\n  }\n  return (\n    
    \n      \n      {children}\n      {infoText && (\n        \n          {infoText}\n        \n      )}\n      
    {validationText}
    \n    
    \n  );\n};\n"
  },
  {
    "path": "src/Input/TextArea.tsx",
    "content": "import React, { ReactNode, Ref, TextareaHTMLAttributes } from 'react';\n\nimport type { CSSModule } from 'reactstrap/types/lib/utils';\nimport { InputContainer } from './InputContainer';\nimport { getClasses, getFormControlClass, getValidationTextControlClass, useFocus } from './utils';\n\nexport interface TextAreaProps extends TextareaHTMLAttributes {\n  /** Etichetta del campo TextArea. */\n  label?: string | ReactNode;\n  /** Testo di esempio da utilizzare per il campo. */\n  placeholder?: string;\n  /** Testo di validazione per l'elemento del moduleo */\n  validationText?: string;\n  /** Testo di aiuto per l'elemento del moduleo form. Richiede che il componente `TextArea` abbia la prop `id` impostata. */\n  infoText?: string;\n  /** Il valore nel campo TextArea. */\n  value?: string | number;\n  /** Da utilizzare per impedire la modifica del valore contenuto. */\n  readOnly?: boolean;\n  /** Associato all'attributo readOnly mostra il campo con lo stile classico, mantenento lo stato di sola lettura. */\n  normalized?: boolean;\n  /** Utilizzare per mostrare il successo nella validazione del valore nel campo TextArea */\n  valid?: boolean;\n  innerRef?: Ref;\n  /** Oggetto contenente la nuova mappatura per le classi CSS. */\n  cssModule?: CSSModule;\n  /** Classi aggiuntive da usare per il wrapper del componente TextArea */\n  wrapperClassName?: string;\n  /** Classi aggiuntive da usare per il componente TextArea */\n  className?: string;\n  testId?: string;\n}\n\nexport const TextArea = ({\n  id,\n  className,\n  cssModule,\n  innerRef,\n  label,\n  validationText,\n  infoText,\n  placeholder,\n  normalized,\n  value,\n  wrapperClassName: originalWrapperClass,\n  valid,\n  testId,\n  ...attributes\n}: TextAreaProps) => {\n  const { toggleFocusLabel, toggleBlurLabel, isFocused } = useFocus({\n    onFocus: attributes.onFocus,\n    onBlur: attributes.onBlur\n  });\n\n  const validationTextControlClass = getValidationTextControlClass({ valid }, cssModule);\n\n  const extraAttributes: { ['aria-describedby']?: string } = {};\n\n  //Chiamo questa funzione per impostare classNames a 'form-control'\n  const formControlClass = getFormControlClass({}, cssModule);\n  // associate the input field with the help text\n  const infoId = id ? `${id}Description` : undefined;\n  if (id) {\n    extraAttributes['aria-describedby'] = infoId;\n  }\n\n  // Styling\n  const { activeClass, extraLabelClass, validationTextClass, inputClasses, wrapperClass } = getClasses(\n    className,\n    'textarea',\n    {\n      valid,\n      placeholder,\n      value,\n      label,\n      validationText,\n      normalized: Boolean(normalized),\n      formControlClass,\n      validationTextControlClass,\n      isFocused,\n      originalWrapperClass\n    },\n    cssModule\n  );\n\n  // set of attributes always shared by the Input components\n  const sharedAttributes = {\n    id,\n    onFocus: toggleFocusLabel,\n    onBlur: toggleBlurLabel,\n    value,\n    ref: innerRef\n  };\n\n  // set of attributes always shared by the wrapper component\n  const containerProps = {\n    id,\n    infoId,\n    infoText,\n    activeClass,\n    extraLabelClass,\n    label,\n    validationTextClass,\n    validationText,\n    wrapperClass\n  };\n\n  if (placeholder) {\n    return (\n      \n        \n      \n    );\n  }\n\n  if (normalized) {\n    return (\n      \n        \n      \n    );\n  }\n  if (label || validationText) {\n    return (\n      \n        \n      \n    );\n  }\n\n  return (\n    \n  );\n};\n"
  },
  {
    "path": "src/Input/utils.tsx",
    "content": "import classNames from 'classnames';\nimport { useCallback, useState } from 'react';\nimport type { CSSModule } from 'reactstrap/types/lib/utils';\nimport { mapToCssModules } from '../utils';\nimport type { InputProps } from './Input';\n\ntype ValidationProps = Pick;\ntype TypeProps = Pick & {\n  staticInput?: boolean;\n};\ntype FormControlProps = Pick & TypeProps;\n\nfunction getFormControlClassInternal({ plaintext, staticInput, type = 'text', normalized }: FormControlProps) {\n  const formControlClass = 'form-control';\n  if (plaintext || staticInput || normalized) {\n    return `${formControlClass}-plaintext`;\n  }\n  if (type === 'file') {\n    return `${formControlClass}-file`;\n  }\n  if (['radio', 'checkbox'].indexOf(type) > -1) {\n    return null;\n  }\n  return formControlClass;\n}\n\nexport function getFormControlClass(props: FormControlProps, cssModule?: CSSModule) {\n  return mapToCssModules(getFormControlClassInternal(props), cssModule);\n}\n\nexport function getValidationTextControlClass({ valid }: ValidationProps, cssModule?: CSSModule) {\n  return mapToCssModules(\n    classNames({\n      'form-text': true,\n      'form-feedback just-validate-error-label': valid == false\n    }),\n    cssModule\n  );\n}\n\nexport function getTag({ tag, plaintext, staticInput, type = 'text' }: Pick & TypeProps) {\n  if (tag) {\n    return tag;\n  }\n  if (['radio', 'checkbox'].indexOf(type) > -1) {\n    return 'input';\n  }\n  if (plaintext || staticInput) {\n    return 'p';\n  }\n  return 'input';\n}\n\ntype InputClassesParams = ValidationProps &\n  Pick & {\n    isFocused: boolean;\n    inputPassword?: boolean;\n    formControlClass?: string;\n    validationTextControlClass?: string;\n    originalWrapperClass: InputProps['wrapperClassName'];\n  };\n\nexport function getClasses(\n  className: string | undefined,\n  type: string,\n  {\n    isFocused,\n    valid,\n    bsSize,\n    placeholder,\n    value,\n    label,\n    validationText,\n    normalized,\n    inputPassword,\n    formControlClass,\n    validationTextControlClass,\n    originalWrapperClass\n  }: InputClassesParams,\n  cssModule?: CSSModule\n) {\n  const hasPlainCondition = placeholder || label || validationText;\n  const baseCondition = hasPlainCondition && !normalized && !inputPassword;\n  const passwordOnlyCondition = inputPassword && !hasPlainCondition && !normalized;\n  const normalizedOnlyCondition = normalized && !hasPlainCondition && !inputPassword;\n\n  const classes = mapToCssModules(\n    classNames(\n      className,\n      {\n        'is-invalid': valid == false,\n        'just-validate-success-field': valid,\n        [`form-control-${bsSize}`]: bsSize\n      },\n      formControlClass\n    ),\n    cssModule\n  );\n  const wrapperClass = mapToCssModules(classNames(originalWrapperClass, 'form-group'), cssModule);\n  const validationTextClass = mapToCssModules(\n    classNames(\n      {\n        'valid-feedback': valid,\n        'invalid-feedback form-feedback just-validate-error-label': valid == false\n      },\n      validationTextControlClass\n    ),\n    cssModule\n  );\n\n  const inputClasses = mapToCssModules(\n    classNames(\n      classes,\n      !baseCondition && {\n        // we can model here only if stylings\n        'form-control-plaintext': normalizedOnlyCondition,\n        'form-control': passwordOnlyCondition,\n        'input-password': passwordOnlyCondition\n      }\n    ),\n    cssModule\n  );\n\n  const activeClass = mapToCssModules(\n    classNames({\n      active: isFocused || placeholder || value || ['date', 'time'].includes(type)\n    }),\n    cssModule\n  );\n\n  const extraLabelClass = mapToCssModules(\n    classNames({\n      'input-number-label': ['number', 'currency', 'adaptive', 'percentage'].includes(type)\n    })\n  );\n\n  return {\n    wrapperClass,\n    inputClasses,\n    activeClass,\n    extraLabelClass,\n    validationTextClass\n  };\n}\n\nexport function useFocus({\n  onFocus,\n  onBlur\n}: {\n  onFocus: React.FocusEventHandler | undefined;\n  onBlur: React.FocusEventHandler | undefined;\n}) {\n  const [isFocused, setFocus] = useState(false);\n\n  const toggleFocusLabel = useCallback(\n    (e: React.FocusEvent) => {\n      setFocus(true);\n      onFocus?.(e);\n    },\n    [onFocus]\n  );\n\n  const toggleBlurLabel = useCallback(\n    (e: React.FocusEvent) => {\n      if (e.target.value === '') {\n        setFocus(!isFocused);\n      }\n      onBlur?.(e);\n    },\n    [isFocused, onBlur]\n  );\n\n  return { toggleFocusLabel, toggleBlurLabel, isFocused };\n}\n"
  },
  {
    "path": "src/LinkList/LinkList.tsx",
    "content": "import React, { FC, HTMLAttributes, ElementType, ReactNode } from 'react';\nimport classNames from 'classnames';\n\nexport interface LinkListProps extends HTMLAttributes {\n  /** Da utilizzare in caso di titolo principale della lista. Passare una componente React da mostrare come titolo */\n  header?: ReactNode;\n  /** Classi aggiuntive da usare per il componente lista del LinkList */\n  className?: string;\n  /** Classi aggiuntive da usare per il componente wrapper del LinkList */\n  wrapperClassName?: string;\n  /**\n   * Utilizzarlo in caso di utilizzo di componenti personalizzati per il wrapper della lista.\n   * Nota: viene ignorato quando usato in lista annidate.\n   * */\n  tag?: ElementType;\n  /** Quando abilitato gestisce una lista in cui ciascun elemento è composto da più componenti/elementi. */\n  multiline?: boolean;\n  /** Da utilizzare per una lista annidata */\n  sublist?: boolean;\n  /** Da utilizzare per una lista di avatar */\n  avatar?: boolean;\n  /** Quando attivo rimuove il componente contenitore della ListList. Utile per alcuni tipi di liste annidate. */\n  noWrapper?: boolean;\n  testId?: string;\n}\n\nexport const LinkList: FC = ({\n  className,\n  wrapperClassName,\n  tag = 'div',\n  multiline,\n  header,\n  sublist,\n  avatar,\n  noWrapper,\n  testId,\n  ...attributes\n}) => {\n  const Tag = tag;\n  const wrapperClasses = classNames('link-list-wrapper', wrapperClassName, {\n    multiline: multiline\n  });\n  const classes = classNames(className, {\n    'link-list': !sublist,\n    'link-sublist': sublist,\n    'avatar-group': avatar\n  });\n\n  if (noWrapper) {\n    return 
      ;\n  }\n\n  if (sublist) {\n    return (\n      <>\n        {header}\n        
        \n      \n    );\n  }\n  return (\n    \n      {header}\n      
          \n    \n  );\n};\n"
  },
  {
    "path": "src/LinkList/LinkListItem.tsx",
    "content": "import React, { FC, AnchorHTMLAttributes, ElementType, MouseEvent, MouseEventHandler } from 'react';\nimport classNames from 'classnames';\n\nexport interface LinkListItemProps extends AnchorHTMLAttributes {\n  /** Indica se l'elemento è attivo o no */\n  active?: boolean;\n  /** Indica se l'elemento è disabilitato o no */\n  disabled?: boolean;\n  /** Indica se l'elemento ha dimensioni larghe o no */\n  large?: boolean;\n  /** Indica se l'elemento è bold o no */\n  bold?: boolean;\n  /** Indica se l'elemento è un titolo. */\n  header?: boolean;\n  /** Indica se l'elemento è un divisore */\n  divider?: boolean;\n  /** Indica se l'elemento è in un dropdown */\n  inDropdown?: boolean;\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente LinkListItem */\n  className?: string;\n  /** Classi aggiuntive da usare per l'elemento contenitore dell'item */\n  wrapperClassName?: string;\n  /** Indica il link a cui l'elemento deve puntare. */\n  href?: string;\n  /** Indica il link route a cui l'elemento deve puntare. */\n  to?: string;\n  testId?: string;\n}\n\nconst handleDisabledOnClick = (e: MouseEvent) => {\n  e.preventDefault();\n};\n\nexport const LinkListItem: FC & {\n  TitleIconWrapper: typeof LinkListTitleIconWrapper;\n} = ({\n  className,\n  active,\n  disabled,\n  header,\n  divider,\n  bold,\n  large,\n  href,\n  tag = 'a',\n  wrapperClassName,\n  testId,\n  children,\n  inDropdown,\n  ...attributes\n}) => {\n  let Tag = tag;\n  const classes = classNames(\n    className,\n    {\n      active,\n      disabled,\n      header,\n      divider,\n      large: large,\n      medium: bold,\n      'dropdown-item': inDropdown\n    },\n    'list-item'\n  );\n\n  // Prevent click event when disabled.\n  const handlers: { onClick?: MouseEventHandler } = {};\n  if (disabled) {\n    handlers.onClick = handleDisabledOnClick;\n  }\n\n  if (header) {\n    Tag = 'h3';\n  } else if (divider) {\n    Tag = 'span';\n  }\n\n  if (inDropdown) {\n    attributes['role'] = 'menuitem';\n    attributes['tabIndex'] = 0;\n  }\n\n  if (header && href) {\n    return (\n      
        • \n        \n          \n            {children}\n          \n        \n      
          • \n    );\n  }\n\n  return (\n    
        • \n      \n        {children}\n      \n    
          • \n  );\n};\n\nconst LinkListTitleIconWrapper: FC = ({ children }) => {\n  return {children};\n};\n\nLinkListItem.TitleIconWrapper = LinkListTitleIconWrapper;\n"
  },
  {
    "path": "src/List/List.tsx",
    "content": "import classNames from 'classnames';\nimport React, { ElementType, FC, HTMLAttributes } from 'react';\n\nexport interface ListProps extends HTMLAttributes {\n  /** Classi aggiuntive da usare per il componente lista del List */\n  className?: string;\n  /** Classi aggiuntive da usare per il componente wrapper del List */\n  wrapperClassName?: string;\n  /**\n   * Utilizzarlo in caso di utilizzo di componenti personalizzati per il wrapper della lista.\n   * Nota: viene ignorato quando usato in lista annidate.\n   * */\n  tag?: ElementType;\n  /** Quando attivo rimuove il componente contenitore della ListList. Utile per alcuni tipi di liste annidate. */\n  noWrapper?: boolean;\n  testId?: string;\n}\n\nexport const List: FC = ({ className, wrapperClassName, tag = 'div', noWrapper, testId, ...attributes }) => {\n  const Tag = tag;\n  const wrapperClasses = classNames('it-list-wrapper', wrapperClassName);\n  const classes = classNames(className, 'it-list');\n\n  if (noWrapper) {\n    return 
            ;\n  }\n\n  return (\n    \n      
              \n    \n  );\n};\n"
  },
  {
    "path": "src/List/ListItem.tsx",
    "content": "import classNames from 'classnames';\nimport React, { AnchorHTMLAttributes, ElementType, FC, ReactNode } from 'react';\n\nexport interface ListItemProps extends AnchorHTMLAttributes {\n  /** Indica se l'elemento è attivo o no */\n  active?: boolean;\n  /** Indica se l'elemento ha un avatar */\n  avatar?: ReactNode;\n  /** Indica se l'elemento ha una icona */\n  icon?: ReactNode;\n  /** Indica se l'elemento ha una immagine */\n  img?: ReactNode;\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente ListItem */\n  className?: string;\n  /** Classi aggiuntive da usare per l'elemento contenitore dell'item */\n  wrapperClassName?: string;\n  /** Indica il link a cui l'elemento deve puntare. */\n  href?: string;\n  /** Indica il link route a cui l'elemento deve puntare. */\n  to?: string;\n  testId?: string;\n}\n\nexport const ListItem: FC & {\n  MultipleAction: typeof MultipleAction;\n} = ({\n  className,\n  active,\n  avatar,\n  icon,\n  img,\n  href,\n  tag = 'div',\n  to,\n  wrapperClassName,\n  testId,\n  children,\n  ...attributes\n}) => {\n  const Tag = tag;\n  const classes = classNames(className, { active }, 'list-item'),\n    classesItem = classNames(className, {\n      'it-rounded-icon': icon,\n      'avatar size-lg': avatar,\n      'it-thumb': img\n    }),\n    leftItem = icon || avatar || img;\n\n  if (href) {\n    return (\n      
            • \n        \n          
              {children}
              \n                      \n      
              • \n    );\n  }\n\n  return (\n    
            • \n      \n        {leftItem && 
              {leftItem}
              }\n        
              {children}
              \n                    \n    
              • \n  );\n};\n\nconst MultipleAction: FC = ({ children }) => {\n  return {children};\n};\n\nListItem.MultipleAction = MultipleAction;\n"
  },
  {
    "path": "src/Megamenu/MegamenuFooter.tsx",
    "content": "import React, { FC, HTMLAttributes, PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nexport interface MegamenuFooterProps extends HTMLAttributes {\n  /** Classi aggiuntive da usare per il componente Megamenu Footer */\n  className?: string;\n  vertical?: boolean;\n}\n\nexport const MegamenuFooter: FC & {\n  Item: typeof Item;\n} = ({ className, children, vertical, ...attributes }) => {\n  const classes = classNames(className, `it-footer-link-wrapper${vertical ? '-vertical' : ''}`);\n  return (\n    
              \n      {children}\n    
              \n  );\n};\n\nconst Item: FC> = ({ href, children }) => {\n  return (\n    \n      {children}\n    \n  );\n};\n\nMegamenuFooter.Item = Item;\n"
  },
  {
    "path": "src/Megamenu/MegamenuHighlightColumn.tsx",
    "content": "import React, { FC } from 'react';\nimport { Col, ColProps, Row } from 'reactstrap';\nimport classNames from 'classnames';\n\nexport interface MegamenuHCProps extends ColProps {\n  /** Quanto abilitato gestisce il contenuto della colonna come una sezione che può contentere immagini, testo, ect. */\n  description?: boolean;\n  /** Classi aggiuntive da usare per il componente Megamenu Highlight Column */\n  className?: string;\n}\nexport const MegamenuHighlightColumn: FC = ({ description, className, children, ...attributes }) => {\n  const classes = classNames(className, 'it-vertical', {\n    'it-description': description\n  });\n  return (\n    \n      \n        \n          {description ? 
              {children}
               : <>{children}}\n        \n                    \n    \n  );\n};\n"
  },
  {
    "path": "src/Megamenu/MegamenuItem.tsx",
    "content": "import React, { FC, HTMLAttributes } from 'react';\nimport { Dropdown } from '../Dropdown/Dropdown';\nimport { DropdownMenu } from '../Dropdown/DropdownMenu';\nimport { DropdownToggle } from '../Dropdown/DropdownToggle';\nimport classNames from 'classnames';\n\nexport interface MegamenuItemProps extends HTMLAttributes {\n  /** Etichetta del megamenu visibile all'interno della barra di navigazione */\n  itemName: string;\n  /** Classi aggiuntive da usare per il componente Dropdown */\n  className?: string;\n}\n\nexport const MegamenuItem: FC = ({ itemName, className, children, ...attributes }) => {\n  const classes = classNames(className, 'megamenu');\n  const [dropdownOpen, setDropdownOpen] = React.useState(false);\n  const toggle = () => setDropdownOpen((prevState) => !prevState);\n  const toggleClasses = classNames('px-lg-2', 'px-xl-3', dropdownOpen ? 'show' : '');\n\n  return (\n    \n      \n        {itemName}\n      \n      \n        
              {children}
              \n                    \n                  \n  );\n};\n"
  },
  {
    "path": "src/Modal/Modal.tsx",
    "content": "import classnames from 'classnames';\nimport React, { FC, HTMLAttributes } from 'react';\nimport { FadeProps, Modal as InnerModal } from 'reactstrap';\nimport { CSSModule } from 'reactstrap/types/lib/utils';\n\nexport interface ModalProps extends HTMLAttributes {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  [key: string]: any;\n  /** Indica lo stato del modale. Valore di default: undefined. */\n  isOpen?: boolean;\n  autoFocus?: boolean;\n  size?: string;\n  /** Funzione da chiamare quando l'utente clicca sul backdrop. Valore di default: undefined. */\n  toggle?: React.KeyboardEventHandler | React.MouseEventHandler;\n  keyboard?: boolean;\n  backdrop?: boolean | 'static';\n  /**\n   * Abilitare quando si vuole che solo il contenuto della modale sia scrollabile.\n   * Valore di default: undefined.\n   * */\n  scrollable?: boolean;\n  onEnter?: () => void;\n  onExit?: () => void;\n  onOpened?: () => void;\n  onClosed?: () => void;\n  cssModule?: CSSModule;\n  wrapClassName?: string;\n  modalClassName?: string;\n  backdropClassName?: string;\n  contentClassName?: string;\n  zIndex?: number | string;\n  fade?: boolean;\n  backdropTransition?: FadeProps;\n  modalTransition?: FadeProps;\n  centered?: boolean;\n  external?: React.ReactNode;\n  labelledBy?: string;\n  unmountOnClose?: boolean;\n  returnFocusAfterClose?: boolean;\n  container?: string | HTMLElement | React.RefObject;\n  innerRef?: React.Ref;\n  /** Abilitare quando si utilizza una icona nell'intestazione, al fine di formattare correttamente il modale. Valore di default: undefined. */\n  withIcon?: boolean;\n  /** Abilitare quando si utilizza una LinkList nell'intestazione, al fine di formattare correttamente il modale. Valore di default: undefined. */\n  withLinkList?: boolean;\n  /** Abilitare quando si vuole mostrare un breve messaggio di conferma. Valore di default: undefined. */\n  popConfirm?: boolean;\n  /** Abilitare quando si vuole mostrare un modale allineato a sinistra. Valore di default: undefined. */\n  align?: 'left' | 'right';\n}\n\nexport const Modal: FC = ({\n  withIcon,\n  withLinkList,\n  popConfirm,\n  modalClassName,\n  align,\n  scrollable,\n  className,\n  ...props\n}) => {\n  const isAligned = align != null && ['left', 'right'].includes(align);\n  const modalDialogClassnames = classnames(modalClassName, {\n    'alert-modal': withIcon,\n    'it-dialog-link-list': withLinkList,\n    'popconfirm-modal': popConfirm,\n    'it-dialog-scrollable': scrollable && isAligned\n  });\n  const modalClassnames = classnames(className, {\n    'modal-dialog-left': align === 'left',\n    'modal-dialog-right': align === 'right'\n  });\n  return (\n    \n  );\n};\n"
  },
  {
    "path": "src/Modal/ModalBody.tsx",
    "content": "import React, { FC, HTMLAttributes } from 'react';\nimport { ModalBody as InnerModalBody } from 'reactstrap';\nimport { CSSModule } from 'reactstrap/types/lib/utils';\n\nexport interface ModalBodyProps extends HTMLAttributes {\n  tag?: React.ElementType;\n  cssModule?: CSSModule;\n}\n\nexport const ModalBody: FC = (props) => ;\n"
  },
  {
    "path": "src/Modal/ModalFooter.tsx",
    "content": "import React, { FC, HTMLAttributes } from 'react';\nimport { ModalFooter as InnerModalFooter } from 'reactstrap';\nimport { CSSModule } from 'reactstrap/types/lib/utils';\n\nexport interface ModalFooterProps extends HTMLAttributes {\n  tag?: React.ElementType;\n  cssModule?: CSSModule;\n}\n\nexport const ModalFooter: FC = (props) => ;\n"
  },
  {
    "path": "src/Modal/ModalHeader.tsx",
    "content": "import classNames from 'classnames';\nimport React, { FC, HTMLAttributes } from 'react';\nimport { CSSModule } from 'reactstrap/types/lib/utils';\nimport { Icon } from '../Icon/Icon';\nimport { mapToCssModules } from '../utils';\n\nexport interface ModalHeaderProps extends HTMLAttributes {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  [key: string]: any;\n  cssModule?: CSSModule;\n  /** Componente che conterrà il nodo titolo. Valore di default: h5 */\n  tag?: React.ElementType;\n  /** Componente che contenitore per l'header. Valore di default: div. */\n  wrapTag?: React.ElementType;\n  /** Funzione da passare al tasto di chiusura nell'intestazione. Quando questa funzione non è presente il tasto di chiusura non viene mostrato. Valore di default: undefined */\n  toggle?: React.MouseEventHandler;\n  /** Indica il nome dell'icona da utilizzare nel titolo. */\n  icon?: string;\n  /** Classi da aggiungere al nodo contenitore. */\n  className?: string;\n  /** Utilizzato per personalizzare il messaggio peer screen reader per il bottone di chiusura del modale. Valore di default: 'Close' */\n  closeAriaLabel?: string;\n}\n\nexport const ModalHeader: FC = ({\n  icon,\n  className,\n  children,\n  toggle,\n  tag: Tag = 'h2',\n  wrapTag: WrapTag = 'div',\n  closeAriaLabel = 'Close',\n  close,\n  cssModule,\n  ...props\n}) => {\n  const classes = mapToCssModules(classNames(className, 'modal-header'), cssModule);\n\n  let CloseButton;\n\n  if (!close && toggle) {\n    CloseButton = (\n      \n    );\n  }\n\n  return (\n    \n      {icon != null ?  : null}\n      {children}\n      {close || CloseButton}\n    \n  );\n};\n"
  },
  {
    "path": "src/Nav/Nav.tsx",
    "content": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport { Nav as NavBase } from 'reactstrap';\nimport classNames from 'classnames';\n\nexport interface NavProps extends HTMLAttributes {\n  /**\n   * Renderizza i componenti NavItem al suo interno come tab.\n   */\n  tabs?: boolean;\n  /**\n   * Renderizza i componenti NavItem al suo interno come pills.\n   */\n  pills?: boolean;\n  /**\n   * Renderizza i componenti NavItem al suo interno come card.\n   */\n  card?: boolean;\n  /**\n   * Se utilizzata all'interno di una navbar, impostarlo su `true`. In caso di Header Nav, impostarlo a `true`.\n   */\n  navbar?: boolean;\n  /** Se abilitato tutti i NavItem all'interno avranno la stessa larghezza */\n  justified?: boolean;\n  /** Se abilitato i NavItem all'intero occuperanno tutto lo spazio disponibile  */\n  fill?: boolean;\n  /** Da utilizzare per rendere il componente Nav verticale. Viene abilitato automaticamente in versione mobile. Valori possibili sono `true`, `false` o `\"xs\"` */\n  vertical?: boolean | 'xs';\n  /** Da utilizzare per cambiare l'allineamento all'interno della Nav. Valori possibili sono `\"center\"` o `\"end\"` per posizionare il contenuto a centro o sulla destra. */\n  horizontal?: 'center' | 'end';\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente Nav */\n  className?: string;\n  /** Adds ability to incorporate secondary nav items */\n  secondary?: boolean;\n}\n\nexport const Nav: FC = ({ className, tag = 'ul', vertical = false, secondary, ...attributes }) => {\n  const classes = classNames(className, {\n    'navbar-secondary': secondary\n  });\n  return ;\n};\n"
  },
  {
    "path": "src/NavScroll/debounce.ts",
    "content": "/*\n * This work derives from the React Use Navscroll library\n * Released under the MIT license by Marco Liberati\n * Code: https://github.com/dej611/react-use-navscroll\n */\n\nexport const debounce = (callback: CallableFunction, wait: number) => {\n  let timeoutId: NodeJS.Timeout;\n  return (...args: unknown[]) => {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(() => {\n      callback(...args);\n    }, wait);\n  };\n};\n"
  },
  {
    "path": "src/NavScroll/index.ts",
    "content": "/*\n * This work derives from the React Use Navscroll library\n * Released under the MIT license by Marco Liberati\n * Code: https://github.com/dej611/react-use-navscroll\n */\n/* @internal */\nexport type { ChangesType, RegisterOptions, useNavScrollArgs, useNavScrollResult } from './types';\n\nexport { useNavScroll } from './useNavScroll';\n"
  },
  {
    "path": "src/NavScroll/types.ts",
    "content": "/*\n * This work derives from the React Use Navscroll library\n * Released under the MIT license by Marco Liberati\n * Code: https://github.com/dej611/react-use-navscroll\n */\n\nimport { HTMLAttributes, RefObject } from 'react';\n\n/**\n * The returned object from the `onChange` passed function, with the current state of\n * `added` and `removed` element ids.\n */\nexport type ChangesType = {\n  added: string | null;\n  removed: string | null;\n};\n\n/**\n * The react-use-navscroll configuration object\n */\nexport type useNavScrollArgs = {\n  /**\n   * Function called every time an element becomes active.\n   * The changes object returned contains the \"added\" and \"removed\" id.\n   * */\n  onChange?: (changes: ChangesType) => void;\n  /**\n   * Pass an element as root to track a specific container, smaller than a viewport. Default is window (the whole viewport).\n   * */\n  root?: Element;\n  /**\n   * Moves the detection line by the amount of this offset, expressed in percentage. By default the value is 50 (center).\n   * */\n  offset?: number;\n  /**\n   * Declare if the detection should work vertically or horizontally. By default false (vertical)\n   */\n  isHorizontal?: boolean;\n};\n\n/**\n * The options object passed to the `register` function.\n */\nexport type RegisterOptions = {\n  /**\n   * Pass the string id of the parent element\n   */\n  parent?: string;\n  /**\n   * If the tracked element has already a reference, you can pass it and will be reused\n   */\n  ref?: RefObject;\n};\n\n/**\n * The attributes object to assign to the element to assign\n */\nexport type RegisteredAttributes = {\n  id: HTMLAttributes['id'];\n  ref: RefObject | null;\n};\n\n/**\n * The object returned by the hook.\n */\nexport type useNavScrollResult = {\n  /**\n   * The function used to register the component into the tracking system.\n   * It returns the id already passed and the reference object.\n   * Note that only the reference value will be `null` in a SSR context.\n   */\n  register: (id: string, options?: RegisterOptions) => RegisteredAttributes;\n  /**\n   * Removes the given id from the tracking system.\n   */\n  unregister: (idToUnregister: string) => void;\n  /**\n   * A list of active ids (the full hierarchy).\n   */\n  activeIds: string[];\n  /**\n   * A convenience function to quickly check the active state for the given id\n   */\n  isActive: (id: string) => boolean;\n  /**\n   * A function to retrieve the reference of the current active element (only the last element, not the elements hierarchy).\n   */\n  getActiveRef: () => RefObject | null;\n  /**\n   * A list of active ids (the full hierarchy).\n   */\n  percentage: number;\n};\n\n// @private\nexport type TrackedElement = {\n  id: string;\n} & Required> &\n  Pick;\n"
  },
  {
    "path": "src/NavScroll/useNavScroll.ts",
    "content": "/* eslint-disable @typescript-eslint/no-explicit-any */\n/*--------------------------------------------------------------------------\n * This work derives from the React Use Navscroll library\n * Released under the MIT license by Marco Liberati (@dej611)\n * Code: https://github.com/dej611/react-use-navscroll\n * --------------------------------------------------------------------------\n * Parts of this code has been modified using Bootstrap Italia source code\n * --------------------------------------------------------------------------\n * Bootstrap Italia (https://italia.github.io/bootstrap-italia/)\n * Authors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS\n * License: BSD-3-Clause (https://github.com/italia/bootstrap-italia/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nimport { createRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { debounce } from './debounce';\nimport type { useNavScrollArgs, useNavScrollResult, TrackedElement } from './types';\nimport { useSizeDetector } from './useSizeDetector';\n\nimport { v4 as uuidv4 } from 'uuid';\n\nlet ticking: boolean = false;\nlet callbacks: any[] = [];\n\nclass ScrollCallback {\n  private _callback: any;\n  id: string;\n  constructor(id: string, callback: any) {\n    this.id = id;\n    this._callback = callback;\n  }\n\n  //Public\n  dispose() {\n    removeCallBack(this.id);\n  }\n\n  //Private\n  _execute(data: any) {\n    this._callback(data);\n  }\n}\n\nconst removeCallBack = (id: string) => {\n  callbacks = callbacks.filter((cb) => cb.id !== id);\n};\n\nconst onDocumentScroll = (callback: any) => {\n  if (typeof document === 'undefined') {\n    return;\n  }\n  if (!callbacks.length) {\n    if (typeof window !== 'undefined' && typeof document !== 'undefined') {\n      document.addEventListener('scroll', (evt) => {\n        if (!ticking) {\n          window.requestAnimationFrame(() => {\n            callbacks.forEach((cbObj) => cbObj.cb._execute(evt));\n            ticking = false;\n          });\n          ticking = true;\n        }\n      });\n    }\n  }\n\n  if (typeof callback === 'function') {\n    const newCb = new ScrollCallback(uuidv4(), callback);\n    callbacks.push({\n      id: newCb.id,\n      cb: newCb\n    });\n    return newCb;\n  }\n\n  console.error('[onDocumentScroll] the provided data has to be of type function');\n  return null;\n};\n\nconst hasWindow = typeof window !== 'undefined';\nconst REGISTER_DELAY = 50;\n\nfunction resolveHierarchyIds(id: string, lookup: Record) {\n  const newActiveIds = [id];\n  let lastId: string | undefined = newActiveIds[0];\n  while (lastId != null && lookup[lastId] != null) {\n    newActiveIds.push(lookup[lastId] as string);\n    lastId = lookup[lastId];\n  }\n  // return a list from parent to current child\n  return newActiveIds.reverse();\n}\n/**\n * This is the main hook: use it in a react function component to track\n * the state of the passed ids. The function accepts an initial configuration\n * of type `useNavScrollArgs` to customize the behaviour.\n */\nexport function useNavScroll(args: useNavScrollArgs = {}): useNavScrollResult {\n  const { onChange, root, offset = 50, isHorizontal = false } = args;\n  const els = useRef([]);\n  const [counter, setCounter] = useState(0);\n  const [forceRecompute, setForceRecompute] = useState(false);\n  const [activeId, updateActiveId] = useState(null);\n  const [percentageValue, setPercentageValue] = useState(0);\n\n  const { targetSize, useViewport } = useSizeDetector({\n    root,\n    isHorizontal,\n    onChange,\n    activeId,\n    setForceRecompute,\n    updateActiveId,\n    hasWindow\n  });\n\n  const observerMargin = Math.floor((targetSize * offset) / 100) || 1;\n  const observerOptions = useMemo(() => {\n    const topMargin = observerMargin % 2 === 1 ? observerMargin - 1 : observerMargin;\n    const bottomMargin = targetSize - observerMargin;\n    return {\n      root: useViewport ? null : root,\n      rootMargin: isHorizontal\n        ? `0px ${-topMargin}px 0px ${-bottomMargin}px`\n        : `${-topMargin}px 0px ${-bottomMargin}px 0px`\n    };\n  }, [root, targetSize, observerMargin, isHorizontal, useViewport]);\n\n  const elsLookup = useMemo(() => {\n    const lookup: Record = {};\n    for (const { id, parent } of els.current) {\n      lookup[id] = parent;\n    }\n    return lookup;\n  }, [counter]);\n  const activeIds = useMemo(() => (activeId ? resolveHierarchyIds(activeId, elsLookup) : []), [activeId, elsLookup]);\n\n  const activeLookups = useMemo(() => new Set(activeIds), [activeIds]);\n  useEffect(() => {\n    if (!hasWindow) {\n      return;\n    }\n    const _onScroll = () => {\n      let intersectionId = null;\n      for (let k = 0; k < els.current.length; k++) {\n        const entry = els.current[k].ref.current;\n        const min = entry?.getBoundingClientRect().top ? entry?.getBoundingClientRect().top : 0;\n        if (!min) {\n          break;\n        }\n        if (min > 0 && k > 0) {\n          const totEls =\n            root?.previousSibling?.firstChild?.parentNode?.querySelectorAll('.it-navscroll-wrapper .nav-link').length ||\n            1;\n          setPercentageValue((k / (totEls / 2)) * 100);\n          intersectionId = els.current[k - 1].ref.current?.id;\n          break;\n        }\n      }\n      if (intersectionId != null) {\n        updateActiveId(intersectionId);\n        if (onChange) {\n          const diffIds = {\n            added: intersectionId,\n            removed: activeId\n          };\n          onChange(diffIds);\n        }\n      }\n    };\n\n    onDocumentScroll(_onScroll);\n\n    setTimeout(() => {\n      _onScroll();\n    }, 300);\n  }, [\n    activeIds,\n    updateActiveId,\n    els,\n    elsLookup,\n    onChange,\n    activeLookups,\n    activeId,\n    observerOptions,\n    isHorizontal,\n    root,\n    forceRecompute\n  ]);\n\n  const refresh = useCallback(\n    debounce(() => {\n      setCounter(counter + 1);\n    }, REGISTER_DELAY),\n    [counter]\n  );\n\n  const register = useCallback(\n    (id: string, options: any = {}) => {\n      if (!hasWindow) {\n        return { id, ref: null };\n      }\n      const alreadyRegistered = id in elsLookup;\n      const entry = alreadyRegistered ? els.current.find(({ id: existingId }) => existingId === id) : options;\n      const ref = (entry && entry.ref) || createRef();\n\n      if (!alreadyRegistered) {\n        els.current = [...els.current, { id, ref, parent: options.parent }];\n        refresh();\n      }\n      return { id, ref };\n    },\n    [counter]\n  );\n\n  const unregister = useCallback(\n    (idToUnregister: string) => {\n      els.current = els.current.filter(({ id }) => id !== idToUnregister);\n    },\n    [counter]\n  );\n\n  const isActive = useCallback((id: string) => activeLookups.has(id), [activeLookups]);\n  const percentage = useMemo(() => percentageValue, [percentageValue]);\n\n  const getActiveRef = useCallback(() => {\n    const entry = els.current.find(({ id }) => id === activeId);\n    return entry ? entry.ref : null;\n  }, [activeId]);\n\n  return {\n    percentage,\n    register,\n    unregister,\n    activeIds,\n    isActive,\n    getActiveRef\n  };\n}\n"
  },
  {
    "path": "src/NavScroll/useSizeDetector.ts",
    "content": "/*\n * This work derives from the React Use Navscroll library\n * Released under the MIT license by Marco Liberati\n * Code: https://github.com/dej611/react-use-navscroll\n */\n\nimport { useCallback, useEffect, useState } from 'react';\nimport { debounce } from './debounce';\nimport { useNavScrollArgs } from './types';\n\nconst DEFAULT_DELAY = 150;\n\nexport type useSizeDetectorArgs = Omit & {\n  activeId: string | null;\n  hasWindow: boolean;\n  setForceRecompute: (force: boolean) => void;\n  updateActiveId: (id: string | null) => void;\n};\n\nexport const useSizeDetector = ({\n  root,\n  isHorizontal,\n  activeId,\n  onChange,\n  setForceRecompute,\n  updateActiveId,\n  hasWindow\n}: useSizeDetectorArgs) => {\n  const [targetSize, setTargetSize] = useState(1);\n\n  const useViewport =\n    root == null ||\n    (hasWindow && (isHorizontal ? window.innerWidth < root.clientWidth : window.innerHeight < root.clientHeight));\n\n  const scrollEnd = useCallback(\n    debounce(() => {\n      setForceRecompute(true);\n    }, DEFAULT_DELAY),\n    [setForceRecompute]\n  );\n\n  useEffect(() => {\n    if (!hasWindow) {\n      return;\n    }\n    let observer: IntersectionObserver | null = null;\n\n    const resizeWindowHandler = () => {\n      setTimeout(() => {\n        setTargetSize(isHorizontal ? window.innerWidth : window.innerHeight);\n      }, DEFAULT_DELAY);\n    };\n\n    const resizeElementHandler: IntersectionObserverCallback = (entries) => {\n      const [entry] = entries;\n      if (!useViewport) {\n        setTargetSize(isHorizontal ? entry.boundingClientRect.width : entry.boundingClientRect.height);\n      }\n\n      if (entry.intersectionRatio === 0) {\n        if (activeId != null) {\n          updateActiveId(null);\n          if (onChange) {\n            onChange({\n              added: null,\n              removed: activeId\n            });\n          }\n        }\n      }\n    };\n\n    addEventListener('scroll', scrollEnd);\n    if (useViewport) {\n      setTargetSize(isHorizontal ? window.innerWidth : window.innerHeight);\n      addEventListener('resize', resizeWindowHandler);\n    }\n    if (root) {\n      observer = new IntersectionObserver(resizeElementHandler);\n      observer.observe(root);\n    }\n    return () => {\n      if (observer) {\n        observer.disconnect();\n      }\n      removeEventListener('resize', resizeWindowHandler);\n      removeEventListener('scroll', scrollEnd);\n    };\n  }, [root, isHorizontal, activeId, onChange, useViewport, scrollEnd, hasWindow, updateActiveId]);\n  return { targetSize, useViewport };\n};\n"
  },
  {
    "path": "src/Notification/Notification.tsx",
    "content": "import React, { CSSProperties, FC, PropsWithChildren, useEffect } from 'react';\nimport { cssTransition, ToastProps, useToast } from 'react-toastify';\nimport { NotificationToastProps } from './NotificationContent';\nimport { NotificationCommonProps } from './types';\n\nexport type NotificationProps = Omit & NotificationCommonProps & NotificationToastProps;\n\nconst dummyTransition = /* @__PURE__ */ cssTransition({ enter: '', exit: '' });\n\nexport const Notification: FC> = (props) => {\n  const { toastRef, eventHandlers } = useToast({\n    ...props,\n    transition: dummyTransition\n  });\n  const { children, autoClose, onClick, role, toastId, deleteToast, closeToast, isIn } = props;\n\n  const customStyle: CSSProperties = {\n    display: isIn ? 'block' : 'none'\n  };\n\n  useEffect(() => {\n    if (!isIn) deleteToast();\n  }, [isIn]);\n\n  useEffect(() => {\n    let timer: NodeJS.Timeout | number;\n    if (autoClose) {\n      timer = setTimeout(() => closeToast(), autoClose);\n    }\n    return () => {\n      if (timer != null) {\n        clearTimeout(Number(timer));\n      }\n    };\n  }, [autoClose, closeToast]);\n  return (\n    \n      {children}\n    
    \n  );\n};\n"
  },
  {
    "path": "src/Notification/NotificationContent.tsx",
    "content": "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport classNames from 'classnames';\nimport React, { CSSProperties, ReactNode } from 'react';\nimport { Button } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\nimport { NotificationCommonProps } from './types';\nimport { usePosition } from './usePosition';\n\nexport interface NotificationToastProps {\n  /** Indica quale icona affiancare al titolo. */\n  icon?: string;\n  /** Lo stato corrente della notifica (modifica il colore delle icone e bordo) */\n  state?: 'success' | 'error' | 'info' | 'warning';\n  /** Il titolo della notifica */\n  title?: string;\n}\n\ntype NotificationElementProps = {\n  closeToast?: () => void;\n  toastProps?: any;\n  title: string;\n  body?: ReactNode;\n  options: NotificationOptions;\n};\n\nexport const getBorderStyleFix = (fix: NotificationCommonProps['fix']) => {\n  const borderReset = ['top', 'bottom', 'right', 'left']\n    .filter((curPosition) => (fix === 'left' ? curPosition !== 'right' : curPosition !== 'left'))\n    .map(\n      (borderPosition) =>\n        `border${borderPosition[0].toUpperCase() + borderPosition.substring(1)}` as\n          | 'borderTop'\n          | 'borderBottom'\n          | 'borderLeft'\n          | 'borderRight'\n    );\n\n  const customStyle: CSSProperties = {};\n  for (const borderPos of borderReset) {\n    customStyle[borderPos] = 'none';\n  }\n  return customStyle;\n};\n\nexport type NotificationOptions = NotificationCommonProps &\n  Pick & {\n    /* Quando abilitato mostra un pulsante per la chiusura del toast prima della chiusura naturale. Default: `false`. */\n    dismissable?: boolean;\n    /* Una funzione invocata all'apertura della notifica */\n    onOpen?: (props: T) => void;\n    /* Una funziona invocata alla chiusura nella notifica */\n    onClose?: (props: T) => void;\n  };\n\nfunction pickIcon(state: NotificationToastProps['state']) {\n  switch (state) {\n    case 'error':\n      return 'it-close-circle';\n    case 'info':\n      return 'it-info-circle';\n    case 'warning':\n      return 'it-error';\n    case 'success':\n      return 'it-check-circle';\n    default:\n      return undefined;\n  }\n}\n\nfunction NotificationElement({ closeToast, toastProps, title, body, options }: NotificationElementProps) {\n  const globalFix = usePosition();\n  const { icon: userIcon, state, fix: localFix, dismissable } = options;\n  const fixPosition = localFix == null && globalFix ? globalFix : localFix || globalFix;\n  const { autoClose, style } = toastProps;\n  const content = typeof body === 'string' ? 
    {body}
     : body;\n  const icon = userIcon || pickIcon(state);\n\n  const borderFixes = getBorderStyleFix(fixPosition);\n\n  const wrapperClass = classNames('notification', state, {\n    [`${fixPosition}-fix`]: fixPosition,\n    'with-icon': icon,\n    dismissable: dismissable || !autoClose\n  });\n\n  // Need to override some toast styling here\n  const customStyle: CSSProperties = {\n    ...style,\n    ...borderFixes,\n    // force a display as the notification class has a \"display: none\" set\n    display: 'block'\n  };\n\n  return (\n    
    \n      
    \n        {title}\n        {icon ?  : null}\n      
    \n      {content}\n      {(!autoClose || dismissable) && (\n        \n      )}\n    
    \n  );\n}\n\n/**\n * Internal use only. Exported for documentation purposes.\n * @internal\n */\nexport const createNotification = (\n  title: string,\n  body: ReactNode | undefined,\n  options: NotificationOptions,\n  closeToast?: () => void,\n  toastProps?: any\n) => (\n  \n);\n"
  },
  {
    "path": "src/Notification/NotificationManager.tsx",
    "content": "import React, { CSSProperties, ReactNode } from 'react';\nimport { cssTransition, useToastContainer } from 'react-toastify';\nimport { Notification } from './Notification';\nimport { getBorderStyleFix } from './NotificationContent';\nimport { NotificationCommonProps } from './types';\nimport { PositionContext } from './usePosition';\n\nconst KitTransition = /* @__PURE__ */ cssTransition({\n  enter: `d-block`,\n  exit: `d-none`,\n  appendPosition: false\n});\n\nexport interface NotificationManagerProps extends NotificationCommonProps {\n  /* Stili inline da applicare al container */\n  style?: CSSProperties;\n}\n\nexport const NotificationManager = (props: NotificationManagerProps) => {\n  const customStyle: CSSProperties = {\n    ...props.style,\n    ...getBorderStyleFix(props.fix)\n  };\n\n  const hookProps = {\n    autoClose: props.duration ?? 6000,\n    closeOnClick: props.closeOnClick ?? true,\n    hideProgressBar: true,\n    transition: KitTransition,\n    rtl: false,\n    pauseOnHover: true,\n    pauseOnFocusLoss: true,\n    newestOnTop: false, // TODO: sort this out\n    draggable: false,\n    role: 'alert',\n    style: customStyle,\n    enableMultiContainer: props.containerId != null // enable multi container when an explicit id is passed\n  };\n\n  const { getToastToRender, containerRef, isToastActive } = useToastContainer(hookProps);\n\n  const { containerId, style, fix } = props;\n\n  return (\n    \n      
    \n        {getToastToRender((_, toastList) => {\n          return toastList.map(({ content, props: toastProps }) => {\n            return (\n              \n                {content as ReactNode}\n              \n            );\n          });\n        })}\n      
    \n        \n  );\n};\n"
  },
  {
    "path": "src/Notification/core.tsx",
    "content": "import { ReactNode, isValidElement } from 'react';\nimport { toast } from 'react-toastify';\nimport type { NotificationOptions } from './NotificationContent';\nimport { createNotification } from './NotificationContent';\nimport { NotificationId } from './types';\n\nexport function notify(title: string, options?: NotificationOptions): NotificationId;\n\nexport function notify(title: string, body: ReactNode, options?: NotificationOptions): NotificationId;\n\nexport function notify(\n  title: string,\n  bodyOrOptions?: ReactNode | NotificationOptions,\n  options?: NotificationOptions\n): NotificationId {\n  const body: ReactNode | undefined = isReactNode(bodyOrOptions) ? bodyOrOptions : undefined;\n  const safeOptions = isReactNode(bodyOrOptions) ? { ...options } : bodyOrOptions || {};\n  const NotificationContent = createNotification(title, body, safeOptions);\n  const internalOptions = {\n    ...safeOptions,\n    autoClose: safeOptions.duration\n  };\n  return toast(NotificationContent, internalOptions) as NotificationId;\n}\n\nfunction isReactNode(el: ReactNode | NotificationOptions | undefined): el is ReactNode {\n  return el != null && (typeof el === 'string' || typeof el === 'number' || isValidElement(el));\n}\n\nnotify.dismiss = (id?: NotificationId) => toast.dismiss(id);\n"
  },
  {
    "path": "src/Notification/index.ts",
    "content": "/* @internal */\nexport { createNotification } from './NotificationContent';\nexport { NotificationManager } from './NotificationManager';\nexport { notify } from './core';\n\nexport type { NotificationProps } from './Notification';\nexport type { NotificationManagerProps } from './NotificationManager';\nexport type { NotificationOptions } from './NotificationContent';\nexport type { NotificationId } from './types';\n"
  },
  {
    "path": "src/Notification/types.ts",
    "content": "export interface NotificationCommonProps {\n  /* Utilizzare questo attributo per gestire più container */\n  containerId?: string | number;\n  /* Indica per quanto tempo la notifica rimarrà visibile prima di sparire. Quanto impostato a 0ms la notifica rimarrà aperta a tempo indefinito e verrà mostrato anche il tasto di chiusura. Il valore di default è 6000 ms. */\n  duration?: number;\n  /* Indica il posizionamento fisso della notifica. Non è abilitato di default. */\n  fix?: 'top' | 'bottom' | 'right' | 'left';\n  /* Quando abilitato permette di chiudere la notifica con un click. Default: `true`. */\n  closeOnClick?: boolean;\n}\n\nexport type NotificationId = string;\n"
  },
  {
    "path": "src/Notification/usePosition.tsx",
    "content": "import { createContext, useContext } from 'react';\nimport { NotificationCommonProps } from './types';\n\nexport const PositionContext = /* @__PURE__ */ createContext(undefined);\n\nexport function usePosition() {\n  const context = useContext(PositionContext);\n  return context;\n}\n"
  },
  {
    "path": "src/Pager/Pager.tsx",
    "content": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport classNames from 'classnames';\nimport { PagerItem } from '..';\n\nexport interface PagerProps extends HTMLAttributes {\n  /** Etichetta di descrizione del contenuto del componente Pager */\n  'aria-label': string;\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati per la l'elemento lista interno */\n  listTag?: ElementType;\n  /** Classi aggiuntive da usare per il componente Pager */\n  className?: string;\n  /** Classi aggiuntive da usare per il componente di lista interno Pager */\n  listClassName?: string;\n  /** Utilizzare questo attributo per indicare il numero totale di pagine */\n  total?: { ariaLabel: string; label: string };\n  testId?: string;\n}\n\nexport const Pager: FC = ({\n  className,\n  tag = 'nav',\n  listTag: ListTag = 'ul',\n  listClassName,\n  children,\n  total,\n  testId,\n  ...attributes\n}) => {\n  const Tag = tag;\n  const classes = classNames(className, 'pagination-wrapper', {\n    'pagination-total': total\n  });\n  const listClasses = classNames(listClassName, 'pagination');\n  const { ariaLabel, label } = total || {};\n  const totalAriaLabel = ariaLabel ? {ariaLabel} : null;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const listChildren = React.Children.toArray(children).filter((child: any) => child.type === PagerItem);\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const extraChildren = React.Children.toArray(children).filter((child: any)=> child.type !== PagerItem);\n\n  // listChildren?.forEach(child => {\n  //   console.log(child)\n  // })\n\n  return (\n    \n      {listChildren}\n      {extraChildren}\n      {total ? (\n        
    \n          {totalAriaLabel}\n          {label}\n        
    \n      ) : null}\n        \n  );\n};\n"
  },
  {
    "path": "src/Progress/Progress.tsx",
    "content": "import classNames from 'classnames';\nimport isNumber from 'is-number';\nimport React, { ElementType, FC, HTMLAttributes } from 'react';\nimport { logError } from '../utils';\n\nexport interface ProgressProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /**\n   * Classi aggiuntive da usare per il componente contenitore del Progress\n   * Per replicare il comportamento precedente, in cui `className` veniva applicato anche al wrapper,\n   * passare `true`.\n   * */\n  wrapperClassName?: string | true;\n  /** Classi aggiuntive da usare per il componente interno del Progress */\n  className?: string;\n  /** Valore corrente (numerico) */\n  value?: number | string;\n  /** Etichetta con testo per indicare il progresso corrente da mostrare ai dispositivi screen reader */\n  label?: string;\n  /** Quando non è possibile stabilire una percentuale di progressione utilizzare una Progress Bar di tipo indeterminato */\n  indeterminate?: boolean;\n  /** Le varianti di colore definite in Bootstrap Italia */\n  color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | string;\n  testId?: string;\n}\n\nexport const Progress: FC = ({\n  wrapperClassName,\n  className,\n  tag = 'div',\n  value,\n  label,\n  indeterminate = false,\n  color,\n  testId,\n  ...attributes\n}) => {\n  const Tag = tag;\n  if (!isNumber(value) && !indeterminate) {\n    logError(`The passed \"value\" is not a valid number. You passed \"${value}\"`);\n  }\n  const numericValue = Number(value);\n  const wrapperClasses = classNames('progress-bar-wrapper');\n  const secondaryWrapperClasses = classNames(wrapperClassName === true ? className : wrapperClassName, 'progress', {\n    'progress-indeterminate': indeterminate,\n    'progress-color': color\n  });\n  const classes = classNames(className, 'progress-bar', {\n    [`bg-${color}`]: color\n  });\n\n  if (label && numericValue) {\n    return (\n      \n        
    \n          {label}\n          {numericValue + '%'}\n        
    \n        \n          \n        \n          \n    );\n  }\n\n  return (\n    \n      
    \n        {label}\n      
    \n      \n        \n  );\n};\n"
  },
  {
    "path": "src/Rating/Rating.tsx",
    "content": "import React, { Fragment, FC, ReactNode } from 'react';\nimport classNames from 'classnames';\n\nimport { FormGroup, Label } from 'reactstrap';\nimport { Input } from '../Input/Input';\nimport type { InputProps } from '../Input/Input';\nimport { Icon } from '../Icon/Icon';\nimport { noop } from '../utils';\n\ntype UnusedProps =\n  | 'bsSize'\n  | 'size'\n  | 'static'\n  | 'plaintext'\n  | 'normalized'\n  | 'addon'\n  | 'placeholder'\n  | 'label'\n  | 'value'\n  | 'type';\nexport interface RatingProps extends Omit {\n  /** La lista di 5 id, per ciascun elemento intero del Rating. La lista deve essere ordinata dal rating 1 al rating 5.  */\n  inputs: string[];\n  /** Il campo \"label\" è impostato di default su \"Valuta ${n} stelle su 5\", ma può essere personalizzato con questa funzione che riceve il numero input come argomento `function (n: number) => string`. */\n  labelTemplate?: (value: 1 | 2 | 3 | 4 | 5) => string;\n  /** Da utilizzare in caso legenda principale del Rating. Passare una componente React da mostrare come legenda (all'interno del tag ``). È possibile mostrare la leggenda solo ai dispositivi screen reader */\n  legend?: ReactNode | { content: ReactNode; srOnly: boolean };\n  /** Parametro name da dare all'input */\n  name: string;\n  /** Classi aggiuntive da usare per il componente wrapper del Rating */\n  wrapperClassName?: string;\n  /** Classi aggiuntive da usare per ciascun elemento all'interno del componente Rating */\n  className?: string;\n  /** Callback chiamata ad ogni cambio di valore di rating. Il nuovo valore ed il name verranno passati: `function (n, name) => void` */\n  onChangeRating?: (value: 1 | 2 | 3 | 4 | 5 | number, name: string) => void;\n  /** Rende il componente read-only */\n  readOnly?: boolean;\n  /** Il valore corrente del componente: deve essere compreso tra 1 e 5 */\n  value?: 1 | 2 | 3 | 4 | 5 | number;\n  testId?: string;\n}\n\nexport const isCustomLegendObject = (\n  legend: ReactNode | { content: ReactNode; srOnly: boolean }\n): legend is { content: ReactNode; srOnly: boolean } => {\n  return legend != null && typeof legend === 'object' && 'content' in legend;\n};\n\nexport const Rating: FC = ({\n  className,\n  inputs,\n  legend,\n  name,\n  readOnly,\n  value,\n  wrapperClassName,\n  testId,\n  labelTemplate = (value: 1 | 2 | 3 | 4 | 5) => `Valuta ${value} stelle su 5`,\n  onChangeRating = noop,\n  ...attributes\n}) => {\n  // Input data\n  // On the DOM we have to go from 5 to 1\n  const safeInputs = (inputs || []).reverse();\n\n  // Fields\n  const labelFn = labelTemplate;\n\n  const onChange = readOnly ? noop : onChangeRating;\n\n  const wrapperClasses = classNames(wrapperClassName, {\n    'rating rating-read-only': readOnly,\n    'rating rating-label': legend\n  });\n\n  const fieldClasses = classNames(className);\n  const extraFieldAttrs = readOnly ? { 'aria-hidden': true } : {};\n\n  // Legend\n  const isLegendString = typeof legend === 'string';\n\n  let legendClass: string = '';\n  let legendText: ReactNode = legend as string;\n\n  if (isCustomLegendObject(legend)) {\n    legendClass = classNames({\n      'visually-hidden': legend.srOnly\n    });\n    legendText = legend.content;\n  }\n\n  const legendContent =\n    isCustomLegendObject(legend) || isLegendString ? {legendText} : legend;\n\n  return (\n    \n      {legend && legendContent}\n      {safeInputs.map((id, i) => {\n        const currentValue = (5 - i) as 1 | 2 | 3 | 4 | 5;\n\n        return (\n          \n             onChange(currentValue, name)}\n              checked={value === currentValue}\n              disabled={readOnly}\n              {...extraFieldAttrs}\n            />\n            \n          \n        );\n      })}\n    \n  );\n};\n"
  },
  {
    "path": "src/ResponsiveImage/ResponsiveImage.tsx",
    "content": "import React, { FC, HTMLAttributes } from 'react';\n\nexport interface ResponsiveImageProps extends HTMLAttributes {\n  /** Un testo alternativo per descrivere l'immagine mostrata */\n  alt: string;\n  /** L'URI dell'immagine da mostrare */\n  src: string;\n  /** Il titolo dell'immagine */\n  title?: string;\n  testId?: string;\n  /** Indica se l'immagine deve essere considerata proporzionata */\n  proportioned?: boolean;\n}\n\nexport const ResponsiveImage: FC = ({\n  alt,\n  testId,\n  proportioned = false,\n  children,\n  ...attributes\n}) => {\n  if (children) {\n    if (proportioned) {\n      return (\n        
    \n          
    \n            
    \n              {alt}\n              {children}\n            
    \n          
    \n        
    \n      );\n    } else {\n      return (\n        
    \n          {alt}\n          {children}\n        
    \n      );\n    }\n  } else {\n    return (\n      
    \n        
    \n          
    \n            {alt}\n          
    \n        
    \n      
    \n    );\n  }\n};\n"
  },
  {
    "path": "src/Section/Section.tsx",
    "content": "import React, { FC, HTMLAttributes, ReactNode } from 'react';\nimport classNames from 'classnames';\nimport { notifyDeprecation } from '../utils';\n\nexport interface SectionProps extends HTMLAttributes {\n  /**\n   * Classi aggiuntive da usare per il contenitore più esterno\n   * Per replicare il comportamento precedente, in cui `className` veniva applicato anche al wrapper,\n   * passare `true`.\n   * */\n  wrapperClassName?: string | true;\n  /** Classi aggiuntive da usare per il contenitore più interno */\n  className?: string;\n  /**\n   * Colore utilizzato per lo sfondo del componente Section.\n   * In caso di `primary` o `neutral` si consiglia di applicare la classe `.white-color` al contenuto per garantire la leggibilità dei testi.\n   * */\n  color?: 'primary' | 'neutral' | 'muted' | string;\n  /**\n   * Indicare l'URL dell'immagine da utilizzare come sfondo della sezione.\n   */\n  image?: string;\n  /** Il contenuto della sezione */\n  children?: ReactNode | ReactNode[];\n  /** Quando abilitato applica lo sfondo di tipo \"neutral\" al componente.\n   * @deprecated. Utilizzare `color=\"neutral\"`\n   */\n  neutral?: boolean;\n  /** Quando abilitato applica lo sfondo di tipo \"muted\" al componente.\n   * @deprecated. Utilizzare `color=\"muted\"`\n   */\n  muted?: boolean;\n  testId?: string;\n}\n\nexport const Section: FC = ({\n  color,\n  image,\n  testId,\n  wrapperClassName,\n  className,\n  children,\n  neutral,\n  muted,\n  ...rest\n}) => {\n  const classes = classNames('section', wrapperClassName === true ? className : wrapperClassName, {\n    [`section-${color}`]: color,\n    'section-image': image\n  });\n\n  if (neutral || muted) {\n    notifyDeprecation(\n      `Please use the prop \"color\" instead of the \"${neutral ? 'neutral' : 'muted'}\" for the Section component.`\n    );\n  }\n\n  // have them separated from the classes above or these will conflict with the color prop\n  // concatenate them at the end. Worst case a duplicate class will appear\n  const deprecatedClasses = classNames({\n    'section-neutral': neutral,\n    'section-muted': muted\n  });\n\n  const innerClasses = classNames('section-content', className);\n\n  const styleClass = {\n    backgroundImageClass: image ? { backgroundImage: `url(${image})` } : {}\n  };\n\n  const finalWrapperClassName = classNames(classes, deprecatedClasses);\n\n  return (\n    
    \n      
    {children}
    \n    
    \n  );\n};\n"
  },
  {
    "path": "src/Select/Select.tsx",
    "content": "import React, { ChangeEvent, ReactElement, SelectHTMLAttributes } from 'react';\n\nexport interface SelectProps extends Omit, 'onChange'> {\n  /**\n   * Se `true` determina la disabilitazione del campo\n   */\n  disabled?: boolean;\n  /**\n   * L'etichetta del campo\n   */\n  label: string;\n  /**\n   * La lista di opzioni da visualizzare nella tendina del Select\n   */\n  children: ReactElement<'option'> | ReactElement<'option'>[];\n  /**\n   * Gestisce il cambio del valore selezionato\n   * @param selectedValue\n   * @returns\n   */\n  onChange: (selectedValue: string) => void;\n}\n\nexport const Select = ({ id, disabled = false, label, children, onChange, ...rest }: SelectProps) => {\n  const handleChange = (e: ChangeEvent) => {\n    onChange(e.target.value);\n  };\n\n  const inputProps = {\n    ...rest,\n    disabled: disabled,\n    onChange: handleChange\n  };\n\n  return (\n    
    \n      {id ? (\n        <>\n          \n          \n        \n      ) : (\n        \n      )}\n    
    \n  );\n};\n"
  },
  {
    "path": "src/Sidebar/Sidebar.tsx",
    "content": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport classNames from 'classnames';\n\nexport interface SidebarProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente Sidebar */\n  className?: string;\n  /** Indica se il componente Sideebar corrente è di tipo annidato o no */\n  secondary?: boolean;\n  /** Quando attivo aggiunge una linea separatrice a sinistra */\n  left?: boolean;\n  /** Quando attivo aggiunge una linea separatrice a destra */\n  right?: boolean;\n  /** Quando attivo cambia il tema del componente Sidebar rendendola scura */\n  dark?: boolean;\n  testId?: string;\n}\n\nexport const Sidebar: FC = ({\n  className,\n  testId,\n  tag = 'div',\n  secondary = false,\n  left = false,\n  right = false,\n  dark = false,\n  ...attributes\n}) => {\n  const Tag = tag;\n  const wrapperClasses = classNames('sidebar-wrapper', className, {\n    'it-line-left-side': left,\n    'it-line-right-side': right,\n    'theme-dark': dark\n  });\n\n  const wrapperClassesLinkList = classNames('sidebar-linklist-wrapper', {\n    'linklist-secondary': secondary\n  });\n  if (secondary) {\n    return ;\n  }\n  return (\n    \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Skiplink/Skiplink.tsx",
    "content": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport classNames from 'classnames';\n\nexport interface SkiplinkProps extends HTMLAttributes {\n  ariaLabel?: string;\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Utilizzare il componente in modalità `nav` */\n  nav?: boolean;\n  /** Classi aggiuntive da usare per il componente Skiplink */\n  className?: string;\n  testId?: string;\n}\n\nexport const Skiplink: FC = ({\n  ariaLabel = null,\n  className,\n  tag = 'div',\n  nav = false,\n  testId,\n  children,\n  ...attributes\n}) => {\n  const Tag = nav ? 'nav' : tag;\n  const classes = classNames(className, 'skiplinks');\n  if (nav) {\n    return (\n      \n        
      {children}
    \n          \n    );\n  } else {\n    return ;\n  }\n};\n"
  },
  {
    "path": "src/Skiplink/SkiplinkItem.tsx",
    "content": "import React, { FC, ElementType, AnchorHTMLAttributes } from 'react';\nimport classNames from 'classnames';\n\nexport interface SkiplinkItemProps extends AnchorHTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Utilizzare il componente come elemento di uno Skiplink in modalità `nav` */\n  navItem?: boolean;\n  /** Classi aggiuntive da usare per il componente Skiplink */\n  className?: string;\n  /** Abilitare questo attributo per renderizzare lo SkipLinkItem al focus */\n  focusable?: boolean;\n  testId?: string;\n}\n\nexport const SkiplinkItem: FC = ({\n  className,\n  tag = 'a',\n  focusable = true,\n  navItem = false,\n  testId,\n  ...attributes\n}) => {\n  const Tag = tag;\n  const classes = classNames(className, {\n    'visually-hidden-focusable': focusable\n  });\n\n  // Add an extra href for focusable if the user passes an onClick rather than href prop\n  const extraHref = attributes.onClick ? { href: '#' } : {};\n\n  if (navItem) {\n    return (\n      
  • \n        \n      
    • \n    );\n  } else {\n    return ;\n  }\n};\n"
  },
  {
    "path": "src/Spinner/Spinner.tsx",
    "content": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport classNames from 'classnames';\n\nexport interface SpinnerProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente Spinner */\n  className?: string;\n  /** Utilizzato per indicare lo stato attivo di caricamento (animato) */\n  active?: boolean;\n  /** Utilizzato per ottenere la versione ridotta del componente Spinner */\n  small?: boolean;\n  /** Utilizzato per ottenere una animazione alternativa in fase di caricamento */\n  double?: boolean;\n  /** Etichetta con testo da mostrare ai dispositivi screen reader */\n  label?: string;\n  testId?: string;\n}\n\nexport const Spinner: FC = ({\n  className,\n  tag = 'span',\n  active = false,\n  small = false,\n  double = false,\n  label = 'Caricamento',\n  testId,\n  ...attributes\n}) => {\n  const Tag = tag;\n  const wrapperClasses = classNames('progress-spinner', {\n    'progress-spinner-active': active,\n    'size-sm': small,\n    'progress-spinner-double': double\n  });\n\n  const classes = classNames(className, 'visually-hidden');\n  if (double) {\n    return (\n      \n        
    \n        
    \n        \n          {label}\n        \n      \n    );\n  }\n\n  return (\n    \n      \n        {label}\n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Stepper/StepperContainer.tsx",
    "content": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport classNames from 'classnames';\n\nexport interface StepperContainerProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente Badge */\n  className?: string;\n  /** Abilita il tema scuro per il componente Stepper */\n  dark?: boolean;\n  /** Abilita la navigazione per mobile */\n  mobile?: boolean;\n  testId?: string;\n}\n\nexport const StepperContainer: FC = ({\n  tag = 'div',\n  mobile,\n  dark,\n  testId,\n  className,\n  ...attributes\n}) => {\n  const Tag = tag;\n  const wrapperClass = classNames('steppers', className, { 'bg-dark': dark }, { 'mobile-examples': mobile });\n  return ;\n};\n"
  },
  {
    "path": "src/Stepper/StepperContent.tsx",
    "content": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport classNames from 'classnames';\n\nexport interface StepperContentProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente Badge */\n  className?: string;\n  /** Abilita il tema scuro per il componente StepperContent */\n  dark?: boolean;\n  testId?: string;\n}\n\nconst contentStyleLight = {\n  height: '400px',\n  border: '2px dashed #eee',\n  background: '#fafafa',\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  color: '#333'\n};\n\nconst contentStyleDark = {\n  height: '400px',\n  border: '2px dashed #eee',\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  color: '#EEE',\n  borderColor: '#aaa',\n  background: '#17324d',\n  opacity: 0.5\n};\n\nexport const StepperContent: FC = ({ tag = 'div', className, dark, ...attributes }) => {\n  const Tag = tag;\n  const classes = classNames('steppers-content', className);\n  return (\n    \n  );\n};\n"
  },
  {
    "path": "src/Stepper/StepperDots.tsx",
    "content": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport classNames from 'classnames';\n\nexport interface StepperDotsProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente Badge */\n  className?: string;\n  /** Abilita il tema scuro per il componente StepperDots */\n  dark?: boolean;\n  testId?: string;\n}\n\nexport const StepperDots: FC = ({ tag = 'ul', className, testId, ...attributes }) => {\n  const Tag = tag;\n  const wrapperClass = classNames('steppers-dots', className);\n  return ;\n};\n"
  },
  {
    "path": "src/Stepper/StepperHeader.tsx",
    "content": "import classNames from 'classnames';\nimport React, { ElementType, FC, HTMLAttributes } from 'react';\n\nexport interface StepperHeaderProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente StepperHeader */\n  className?: string;\n  testId?: string;\n}\n\nexport const StepperHeader: FC = ({ tag = 'div', testId, className, children, ...attributes }) => {\n  const Tag = tag;\n  const wrapperClass = classNames('steppers-header', className);\n  // @ts-expect-error not recognize children's props\n  const isMobile = children?.props?.variant === 'mobile';\n\n  return (\n    \n      {isMobile ? {children} : 
      {children}
    }\n        \n  );\n};\n"
  },
  {
    "path": "src/Stepper/StepperHeaderElement.tsx",
    "content": "import React, { FC, HTMLAttributes, ElementType, ReactNode } from 'react';\nimport classNames from 'classnames';\nimport { Icon } from '../Icon/Icon';\n\nconst variants = {\n  confirmed: 'confirmed',\n  active: 'active',\n  done: 'done',\n  mobile: 'steppers-index',\n  // @deprecated\n  'steppers-index': 'steppers-index'\n} as const;\n\nexport interface StepperHeaderElementProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente StepperHeader */\n  className?: string;\n  /**\n   * Il tipo di step:\n   * * confirmed (confermato),\n   * * active (attivo - su mobile viene mostrato solo questo)\n   * * done (completato)\n   * * mobile (visibile solo su mobile, usato per mostrare lo stato attuale di progresso)\n   * * steppers-index (deprecato) usare mobile\n   * */\n  variant?: keyof typeof variants;\n  /** Icona da mostrare alla destra dell'etichetta dello step */\n  appendIcon?: string;\n  /** Icona da mostrare alla sinistra dell'etichetta dello step */\n  prependIcon?: string;\n  /** Titolo dell'icona da mostrare alla destra dell'etichetta dello step */\n  appendIconTitle?: string;\n  /** Titolo dell'icona da mostrare alla sinistra dell'etichetta dello step */\n  prependIconTitle?: string;\n  /** Utilizzare questo attributo per elementi aggiuntivi da mostrare su dispositivi mobile per lo step attivo */\n  stepperNumber?: ReactNode;\n  /** Nasconde il bordo inferiore azzurro per lo step */\n  noLine?: boolean;\n  testId?: string;\n}\n\nexport const StepperHeaderElement: FC = ({\n  tag = 'li',\n  variant,\n  appendIcon,\n  prependIcon,\n  appendIconTitle,\n  prependIconTitle,\n  noLine,\n  stepperNumber,\n  testId,\n  children,\n  className,\n  ...attributes\n}) => {\n  const Tag = tag;\n  const wrapperClasses = classNames(variant ? variants[variant] : '', className, {\n    'no-line': noLine\n  });\n  const iconClass = classNames('icon', 'steppers-success');\n  const spanClass = classNames('steppers-number');\n\n  return (\n    \n      {prependIcon && }\n      {stepperNumber && {stepperNumber}}\n      {children}\n      {appendIcon && }\n    \n  );\n};\n"
  },
  {
    "path": "src/Stepper/StepperNav.tsx",
    "content": "import React, { FC, HTMLAttributes, ElementType } from 'react';\nimport classNames from 'classnames';\n\nexport interface StepperNavProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente Badge */\n  className?: string;\n  testId?: string;\n}\n\nexport const StepperNav: FC = ({ tag = 'nav', testId, className, ...attributes }) => {\n  const Tag = tag;\n  const wrapperClass = classNames('steppers-nav', className);\n  return ;\n};\n"
  },
  {
    "path": "src/Tab/TabNav.tsx",
    "content": "import classNames from 'classnames';\nimport React, { ElementType, FC, useRef } from 'react';\nimport { Nav, NavProps } from 'react-bootstrap';\n\nexport interface TabNavProps extends NavProps {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati\n   * @default ul\n   */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente Tab */\n  className?: string;\n  /** Imposta l'orientameno delle tab in verticale\n   * @default false\n   */\n  vertical?: boolean;\n  /** Imposta la tab con sfondo scuro\n   * @default false\n   */\n  dark?: boolean;\n  /** Imposta la tab con design tipo card\n   * @default false\n   */\n  card?: boolean;\n  testId?: string;\n}\n\nexport const TabNav: FC = ({\n  className,\n  vertical = false,\n  dark = false,\n  card = false,\n  tag = 'ul',\n  testId,\n  ...attributes\n}) => {\n  const Tag = tag;\n  const rootRef = useRef();\n\n  const classes = classNames(\n    className,\n    'nav-tabs',\n    { 'nav-tabs-vertical': vertical },\n    { 'nav-dark': dark },\n    { 'nav-tabs-cards': card }\n  );\n  let currentTabIndex = 0;\n  let activeTabIndex = -1;\n\n  // Ugly workaround to keep Bootstrap Italia behaviour\n\n  const handleKeyDown = (event: React.KeyboardEvent, disabled: boolean = false) => {\n    const queriedElements = rootRef.current?.querySelectorAll('.nav-link');\n    if (queriedElements) {\n      for (let i = 0; i < queriedElements.length; i++) {\n        if (queriedElements[i].ariaSelected === 'true') {\n          activeTabIndex = i;\n        }\n        // Disabled elements ignore current focused tab\n        if (!disabled && document.activeElement === queriedElements[i]) {\n          currentTabIndex = i;\n        }\n        queriedElements[i].ariaSelected = 'false';\n      }\n      switch (event.key) {\n        case 'ArrowLeft':\n        case 'ArrowUp':\n          event.stopPropagation();\n          event.preventDefault();\n          if (currentTabIndex - 1 < 0) {\n            currentTabIndex = queriedElements.length;\n          }\n          currentTabIndex = (currentTabIndex - 1) % queriedElements.length;\n          break;\n        case 'ArrowRight':\n        case 'ArrowDown':\n          event.stopPropagation();\n          event.preventDefault();\n          currentTabIndex = (currentTabIndex + 1) % queriedElements.length;\n          break;\n        case 'Enter':\n          event.stopPropagation();\n          event.preventDefault();\n          (queriedElements[currentTabIndex] as HTMLElement).click();\n          break;\n        case 'Tab':\n          break;\n        default:\n          return;\n      }\n      if (queriedElements[currentTabIndex].ariaDisabled === 'true') {\n        handleKeyDown(event, true);\n      } else {\n        (queriedElements[currentTabIndex] as HTMLElement).focus({ preventScroll: true });\n        setTimeout(() => {\n          queriedElements[activeTabIndex].ariaSelected = 'true';\n        }, 300);\n      }\n    }\n  };\n\n  return (\n    \n  );\n};\n"
  },
  {
    "path": "src/Tab/TabNavItem.tsx",
    "content": "import React, { ElementType, FC } from 'react';\nimport { Nav, NavItemProps } from 'react-bootstrap';\n\nexport interface TabNavItemProps extends NavItemProps {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  testId?: string;\n}\n\nexport const TabNavItem: FC = ({ tag = 'li', testId, ...attributes }) => {\n  const Tag = tag;\n\n  return ;\n};\n"
  },
  {
    "path": "src/Tab/TabNavLink.tsx",
    "content": "import React, { ElementType, FC } from 'react';\nimport { Nav, NavLinkProps } from 'react-bootstrap';\n\nexport interface TabNavLinkProps extends NavLinkProps {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  testId?: string;\n}\n\nexport const TabNavLink: FC = ({ tag, testId, ...attributes }) => {\n  const Tag = tag;\n\n  return ;\n};\n"
  },
  {
    "path": "src/Tab/TabPanel.tsx",
    "content": "import React, { ElementType, FC } from 'react';\nimport { NavProps, Tab } from 'react-bootstrap';\n\nexport interface TabsProps extends NavProps {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  testId?: string;\n}\n\nexport const TabContainer: FC = ({ tag, testId, ...attributes }) => {\n  const Tag = tag;\n\n  return ;\n};\n"
  },
  {
    "path": "src/ThumbNav/ThumbNav.tsx",
    "content": "import React, { FC, HTMLAttributes } from 'react';\nimport classNames from 'classnames';\n\nexport interface ThumbNavProps extends HTMLAttributes {\n  fixedWidth?: boolean;\n  isSmall?: boolean;\n  isVertical?: boolean;\n  noZoomOnHover?: boolean;\n  overlayOnHover?: 'black' | 'primary';\n  position?: 'top' | 'right' | 'bottom' | 'left';\n  rowItems?: 2 | 3 | 4 | 5;\n  testId?: string;\n}\n\nexport const ThumbNav: FC = ({\n  isSmall = false,\n  fixedWidth = false,\n  isVertical = false,\n  noZoomOnHover = false,\n  rowItems,\n  overlayOnHover,\n  position,\n  testId,\n  ...attributes\n}) => {\n  const classes = classNames('thumb-nav', {\n    'thumb-nav-fixed': fixedWidth,\n    'thumb-nav-small': isSmall,\n    'thumb-nav-vertical': isVertical || position === 'left' || position === 'right',\n    'thumb-nav-nozoom': noZoomOnHover,\n    [`thumb-nav-${overlayOnHover}`]: overlayOnHover,\n    [`thumb-nav-${position}`]: position,\n    'thumb-nav-auto': rowItems != null,\n    [`thumb-nav-auto-${rowItems}`]: rowItems != null\n  });\n\n  return 
      ;\n};\n"
  },
  {
    "path": "src/ThumbNav/ThumbNavItem.tsx",
    "content": "import React, { FC, HTMLAttributes } from 'react';\nimport classNames from 'classnames';\n\nexport interface ThumbNavItemProps extends HTMLAttributes {\n  active?: boolean;\n  targetUrl?: string;\n  imageUrl: string;\n  actionDescription?: string;\n  testId?: string;\n}\n\nexport const ThumbNavItem: FC = ({\n  active = false,\n  targetUrl,\n  imageUrl,\n  actionDescription,\n  testId,\n  ...attributes\n}) => {\n  const classes = classNames({ active: active }, 'ratio', 'ratio-3x2');\n\n  return (\n    
    • \n      \n        {actionDescription}\n      \n    
      • \n  );\n};\n"
  },
  {
    "path": "src/Timeline/TimelinePin.tsx",
    "content": "import React, { ElementType, FC, HTMLAttributes } from 'react';\nimport classNames from 'classnames';\n\nimport { Icon } from '../Icon/Icon';\n\nexport interface TimelinePinProps extends HTMLAttributes {\n  /** Classi aggiuntive da usare per il componente TimelinePin */\n  className?: string;\n  /** Mostra un'icona all'interno del TimelinePin. Passare il nome dell'icona per utilizzarlo. */\n  iconName?: string;\n  /**\n   * Mostra un'icona all'interno del TimelinePin. Passare il nome dell'icona per utilizzarlo.\n   * @deprecated. Utilizzare `iconName`.\n   * */\n  icon?: string;\n  /**\n   * Titolo dell'icona all'interno del TimelinePin.\n   * */\n  iconTitle?: string;\n  /** Etichetta da associare all'elemento */\n  label: string;\n  /** Quando abilitato indica che l'evento TimelinePin è collocato nel presente (azzurro) */\n  now?: boolean;\n  /** Da utilizzare per mostrare un'etichetta per l'evento nel presente */\n  nowText?: string;\n  /** Quando abilitato indica che l'evento TimelinePin è collocato nel passato (blu scuro) */\n  past?: boolean;\n  /** Tag del pin da utilizzare a seconda della struttura */\n  tag?: ElementType;\n  testId?: string;\n}\n\nexport const TimelinePin: FC = ({\n  iconName = 'it-code-circle',\n  icon = 'it-code-circle',\n  iconTitle = '',\n  label = ' ',\n  past,\n  now,\n  nowText,\n  testId,\n  className,\n  tag = 'h3',\n  ...attributes\n}) => {\n  const { children, ...rest } = attributes;\n  const classes = classNames('timeline-element', className);\n  const innerClasses = classNames('it-pin-wrapper', className, {\n    'it-evidence': past,\n    'it-now': now\n  });\n  const pinIcon = (\n    
      \n      \n    
      \n  );\n  const pinLabel = (\n    
      \n      {label}\n    
      \n  );\n\n  const pinTextNow = now && {nowText};\n  const Tag = tag;\n\n  return (\n    
      \n      {pinTextNow}\n      \n        {pinIcon}\n        {pinLabel}\n      \n      {children}\n    
      \n  );\n};\n"
  },
  {
    "path": "src/Timeline/TimelineWrapper.tsx",
    "content": "import React, { FC, HTMLAttributes } from 'react';\nimport classnames from 'classnames';\n\nexport interface TimelineProps extends HTMLAttributes {\n  /** Classi aggiuntive da usare per il componente TimelineProps */\n  className?: string;\n  testId?: string;\n}\n\nexport const Timeline: FC = (props) => {\n  const { className, testId, ...attributes } = props;\n  const { children, ...rest } = attributes;\n  const timelineWrapper = classnames(className, 'it-timeline-wrapper');\n\n  return (\n    
      \n      {children}\n    
      \n  );\n};\n"
  },
  {
    "path": "src/Toggle/Toggle.tsx",
    "content": "import React, { ElementType, FC, ReactNode } from 'react';\n\nimport { Label, Input } from 'reactstrap';\nimport { CSSModule } from 'reactstrap/types/lib/utils';\nimport { InputProps } from '../Input/Input';\n\nexport interface ToggleProps extends InputProps {\n  /** Label da mostrare per il componente */\n  label: string | ReactNode;\n  /** Dimensioni ammissibili per il componente */\n  bsSize?: 'lg' | 'sm';\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  tag?: ElementType;\n  /** Da utilizzare per impostare un riferimento all'elemento DOM */\n  innerRef?: React.Ref;\n  /** Oggetto contenente la nuova mappatura per le classi CSS. */\n  cssModule?: CSSModule;\n  testId?: string;\n}\n\nexport const Toggle: FC = ({ label, testId, ...rest }) => {\n  return (\n    
      \n      \n    
      \n  );\n};\n"
  },
  {
    "path": "src/Toolbar/Toolbar.tsx",
    "content": "import classnames from 'classnames';\nimport React, { ElementType, FC, HTMLAttributes, createContext } from 'react';\n\nexport const SizeContext = /* @__PURE__ */ createContext(undefined);\n\nexport interface ToolbarProps extends HTMLAttributes {\n  tag?: ElementType;\n  size?: 'large' | 'medium' | 'small';\n  testId?: string;\n  vertical?: boolean;\n}\n\nexport const Toolbar: FC = ({ tag = 'nav', size, testId, children, vertical, ...attributes }) => {\n  const Tag = tag;\n  const classes = classnames('toolbar', {\n    [`toolbar-${size}`]: size && size !== 'large',\n    'toolbar-vertical': vertical\n  });\n  return (\n    \n      \n        
        {children}
      \n            \n          \n  );\n};\n"
  },
  {
    "path": "src/Toolbar/ToolbarDividerItem.tsx",
    "content": "import React from 'react';\n\nexport const ToolbarDividerItem = () => 
    • ;\n"
  },
  {
    "path": "src/Toolbar/ToolbarItem.tsx",
    "content": "import React, { ElementType, FC, HTMLAttributes, MouseEvent, useContext } from 'react';\nimport classNames from 'classnames';\nimport { Icon } from '../Icon/Icon';\nimport { SizeContext, ToolbarProps } from './Toolbar';\nimport { Dropdown, DropdownProps, DropdownToggle } from 'reactstrap';\n\nexport interface ToolbarItemBadge {\n  value?: number;\n  label: string;\n  srText: string;\n}\n\nexport interface ToolbarItemProps extends HTMLAttributes {\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati. Il valore di default è il tag anchor. */\n  tag?: ElementType;\n  /** Indica l'elemento attivo nella Toolbar */\n  active?: boolean;\n  /** Mostra l'elemento come disabilitato nella Toolbar */\n  disabled?: boolean;\n  /** L'URL a cui far puntare il tag anchor. */\n  url?: string;\n  /**\n   * L'etichetta da mostrare sotto l'icona. In caso di dimensioni più piccole verrà\n   * automaticamente sintegrata in uno span per gli screen reader.\n   */\n  label?: string;\n  /** Il nome dell'icona da utilizzare */\n  iconName: string;\n  testId?: string;\n  /**\n   * Un testo completo da mostrare per Toolbar di grandezza media e piccola con badge (ad esempio: \"ci sono 42 nuovi documenti da esaminare\")\n   * @deprecated\n   */\n  srText?: string;\n  /**\n   * Il badge da mostrare sull'icona del ToolbarItem.\n   * Un badge è composto da:\n   *\n   *   * una label per screen reader da affiancare alla label corrente (ad esempio: \"da leggere\")\n   *   * un testo completo da mostrare per Toolbar di grandezza media e piccola (ad esempio: \"ci sono 42 nuovi documenti da esaminare\")\n   *   * un eventuale valore numerico (omesso in caso di un badge di alert)\n   **/\n  badge?: number | ToolbarItemBadge;\n  /**\n   * Indica che il ToolbarItem contiene un menu dropdown.\n   * Quando questo attributo è attivo il contenuto del componente ToolbarItem verrà mostrato all'interno del dropdown.\n   */\n  dropdown?: boolean;\n  /**\n   * Quando l'opzione dropdown è attiva questo attributo controlla se\n   * l'elemento è di tipo \"altro\" contenente altre icone/opzioni o no.\n   */\n  showMore?: boolean;\n  /**\n   * Quando il componente è in modalità dropdown permette di controllarne\n   * lo stato di visibilità. Il valore di default è false.\n   */\n  isDropdownOpen?: boolean;\n  /**\n   * Da utilizzare quando l'attributo \"dropdown\" è attivo.\n   * Gli attributi qui passati verranno inoltrati al componente Dropdown interno.\n   */\n  dropdownProps?: Omit;\n  /**\n   * Funzione chiamata al click dell'element ToolbarItem\n   */\n  onClick?: (event: MouseEvent) => void;\n}\n\nfunction ToolbarItemLabel({\n  label,\n  size,\n  disabled,\n  badge\n}: {\n  label: ToolbarItemProps['label'];\n  size: ToolbarProps['size'];\n  disabled: ToolbarItemProps['disabled'];\n  badge?: ToolbarItemBadge;\n}) {\n  const showSrText = size && size !== 'large';\n  if (disabled) {\n    if (!label || showSrText) {\n      return ;\n    }\n    return (\n      <>\n        {label}\n      \n    );\n  }\n  if (!label) {\n    return null;\n  }\n\n  return showSrText ? (\n    {label}\n  ) : (\n    \n      {label}\n      {badge?.label ? {badge.label} : null}\n    \n  );\n}\n\nexport const ToolbarItem: FC = ({\n  active = false,\n  badge,\n  url,\n  iconName,\n  label,\n  tag = 'a',\n  disabled,\n  testId,\n  srText,\n  dropdown,\n  dropdownProps,\n  children,\n  showMore,\n  onClick,\n  isDropdownOpen,\n  ...attributes\n}) => {\n  const Tag = tag;\n  const size = useContext(SizeContext);\n  const activeClass = classNames({ active, disabled });\n\n  const ariaAttributes = {\n    ...(disabled && { 'aria-disabled': true })\n  };\n  const badgeObject = typeof badge === 'number' ? { value: badge, label: srText || '', srText: srText || '' } : badge;\n\n  const toolbarItemContent = (\n    <>\n      {badgeObject ? (\n        
      \n          {size !== 'large' ? null : badgeObject.value}\n          {size !== 'large' && {badgeObject.srText}}\n        
      \n      ) : null}\n      \n      \n    \n  );\n\n  if (dropdown) {\n    return (\n      
    • \n        \n          \n            {toolbarItemContent}\n          \n          {children}\n        \n      
      • \n    );\n  }\n\n  return (\n    
    • \n      \n        {toolbarItemContent}\n      \n    
      • \n  );\n};\n"
  },
  {
    "path": "src/Transfer/BacktransferButton.tsx",
    "content": "import React from 'react';\nimport { Icon } from '../Icon/Icon';\nimport { useTransferContext } from './useTransferContext';\n\nconst BacktransferButton = () => {\n  const { targetCandidates, sourceItems, targetItems, setSourceItems, setTargetItems, setTargetCandidates } =\n    useTransferContext();\n  const handleTransfer: React.MouseEventHandler = (e) => {\n    e.preventDefault();\n    const newTargetItems = targetItems.filter((item) => !targetCandidates.includes(item.id));\n    const newSourceItems = sourceItems.concat(targetItems.filter((item) => targetCandidates.includes(item.id)));\n    setSourceItems({ items: newSourceItems });\n    setTargetItems({ items: newTargetItems });\n    setTargetCandidates([]);\n  };\n  return (\n    <>\n       0 ? 'active' : ''}`}\n        href='#'\n        role='button'\n        aria-label='Sposta indietro'\n        onClick={handleTransfer}\n        data-testid='backtransfer-button'\n      >\n        \n      \n      Etichetta per freccia sinistra\n    \n  );\n};\n\nexport { BacktransferButton };\n"
  },
  {
    "path": "src/Transfer/Item.tsx",
    "content": "import React from 'react';\nimport { FormGroup, Input, Label } from '..';\n\nconst Item = ({ id, children }: { id: string; children: React.ReactNode }) => {\n  return (\n    <>\n      {id} - {children}\n    \n  );\n};\n\nconst InternalItem = ({\n  id,\n  checked,\n  children,\n  onChange\n}: {\n  id: string;\n  checked?: boolean;\n  children: React.ReactNode;\n  onChange?: React.ChangeEventHandler;\n}) => {\n  return (\n    \n      \n      \n    \n  );\n};\n\nexport { InternalItem, Item };\n"
  },
  {
    "path": "src/Transfer/ResetButton.tsx",
    "content": "import React from 'react';\nimport { Icon } from '../Icon/Icon';\nimport { useTransferContext } from './useTransferContext';\n\nconst ResetButton = () => {\n  const { reset, isChanged } = useTransferContext();\n  const handleReset: React.MouseEventHandler = (e) => {\n    e.preventDefault();\n    reset();\n  };\n  return (\n    <>\n      \n        \n      \n      Etichetta per icona di reset\n    \n  );\n};\n\nexport { ResetButton };\n"
  },
  {
    "path": "src/Transfer/SelectAllCheckbox.tsx",
    "content": "import React from 'react';\nimport { FormGroup, Input, Label } from '..';\n\nconst SelectAllCheckbox = ({\n  className,\n  description,\n  checked,\n  id,\n  onChange,\n  children\n}: {\n  className?: string;\n  id: string;\n  checked?: boolean;\n  onChange: React.ChangeEventHandler;\n  children: React.ReactNode;\n  description?: string;\n}) => {\n  return (\n    \n      \n      \n    \n  );\n};\n\nexport { SelectAllCheckbox };\n"
  },
  {
    "path": "src/Transfer/Source.tsx",
    "content": "import React, { useEffect } from 'react';\nimport { InternalItem, Item } from './Item';\nimport { SelectAllCheckbox } from './SelectAllCheckbox';\nimport { useTransferContext } from './useTransferContext';\n\nconst SourceItem = ({ id, children }: { id: string; children: React.ReactNode }) => {\n  const { sourceCandidates, setSourceCandidates } = useTransferContext();\n  const handleChange = (e: React.ChangeEvent) => {\n    if (e.target.checked) {\n      setSourceCandidates([...new Set([...sourceCandidates, e.target.id])]);\n    } else {\n      setSourceCandidates(sourceCandidates.filter((item) => item !== e.target.id));\n    }\n  };\n  const isChecked = sourceCandidates.includes(id);\n  return (\n    \n      {children}\n    \n  );\n};\n\nconst Source: React.FC<{ children?: React.ReactNode }> & {\n  Header: React.FC<{ children?: React.ReactNode }>;\n} = ({ children }) => {\n  const { sourceItems, setSourceItems } = useTransferContext();\n  const otherComponents: React.ReactNode[] = [];\n  const childrenSource = React.Children.map(children, (child) => {\n    if (React.isValidElement(child) && child.type === Item) {\n      const { id, children } = child.props;\n      return { id, content: children };\n    }\n    otherComponents.push(child);\n    return null;\n  })?.filter((item) => item !== null);\n\n  useEffect(() => {\n    if (!childrenSource) return;\n    setSourceItems({ items: childrenSource, setOriginals: true });\n  }, []);\n\n  return (\n    
      \n      {otherComponents}\n      {sourceItems.map(({ id, content }) => (\n        \n          {content}\n        \n      ))}\n\n      
      \n    
      \n  );\n};\n\nSource.Header = ({ children }: { children?: React.ReactNode }) => {\n  const { sourceItems, sourceCandidates, setSourceCandidates } = useTransferContext();\n\n  const getStatus = () => {\n    if (sourceCandidates.length === 0) {\n      return { checked: false };\n    }\n    if (sourceItems.every((item) => sourceCandidates.includes(item.id))) {\n      return { checked: true };\n    }\n    return { checked: false, className: 'semi-checked' };\n  };\n\n  return (\n    
      \n       {\n          if (e.target.checked) {\n            setSourceCandidates([...new Set(sourceItems.map((item) => item.id))]);\n          } else {\n            setSourceCandidates([]);\n          }\n        }}\n        id='transfer-source-header'\n        description={children ? 'Source' : undefined}\n      >\n        {children ? children : 'Source'}\n      \n    
      \n  );\n};\n\nexport { Source };\n"
  },
  {
    "path": "src/Transfer/Target.tsx",
    "content": "import React, { useEffect } from 'react';\nimport { InternalItem, Item } from './Item';\nimport { SelectAllCheckbox } from './SelectAllCheckbox';\nimport { useTransferContext } from './useTransferContext';\n\nconst TargetItem = ({ id, children }: { id: string; children: React.ReactNode }) => {\n  const { targetCandidates, setTargetCandidates } = useTransferContext();\n  const handleChange = (e: React.ChangeEvent) => {\n    if (e.target.checked) {\n      setTargetCandidates([...new Set([...targetCandidates, e.target.id])]);\n    } else {\n      setTargetCandidates(targetCandidates.filter((item) => item !== e.target.id));\n    }\n  };\n  const isChecked = targetCandidates.includes(id);\n  return (\n    \n      {children}\n    \n  );\n};\n\nconst Target: React.FC<{ children?: React.ReactNode }> & {\n  Header: React.FC<{ children?: React.ReactNode }>;\n} = ({ children }) => {\n  const { targetItems, setTargetItems } = useTransferContext();\n  const otherComponents: React.ReactNode[] = [];\n  const childrenTarget = React.Children.map(children, (child) => {\n    if (React.isValidElement(child) && child.type === Item) {\n      const { id, children } = child.props;\n      return { id, content: children };\n    }\n    otherComponents.push(child);\n    return null;\n  })?.filter((item) => item !== null);\n\n  useEffect(() => {\n    if (!childrenTarget) return;\n    setTargetItems({ items: childrenTarget, setOriginals: true });\n  }, []);\n\n  return (\n    
      \n      {otherComponents}\n      {targetItems.map(({ id, content }) => (\n        \n          {content}\n        \n      ))}\n    
      \n  );\n};\n\nTarget.Header = ({ children }: { children?: React.ReactNode }) => {\n  const { targetItems, targetCandidates, setTargetCandidates } = useTransferContext();\n\n  const getStatus = () => {\n    if (targetCandidates.length === 0) {\n      return { checked: false };\n    }\n    if (targetItems.every((item) => targetCandidates.includes(item.id))) {\n      return { checked: true };\n    }\n    return { checked: false, className: 'semi-checked' };\n  };\n\n  return (\n    
      \n       {\n          if (e.target.checked) {\n            setTargetCandidates([...new Set(targetItems.map((item) => item.id))]);\n          } else {\n            setTargetCandidates([]);\n          }\n        }}\n        id='transfer-target-header'\n        description={children ? 'Target' : undefined}\n      >\n        {children ? children : 'Target'}\n      \n    
      \n  );\n};\n\nexport { Target };\n"
  },
  {
    "path": "src/Transfer/Transfer.tsx",
    "content": "import React from 'react';\nimport { BacktransferButton } from './BacktransferButton';\nimport { Item } from './Item';\nimport { ResetButton } from './ResetButton';\nimport { Source } from './Source';\nimport { Target } from './Target';\nimport { TransferButton } from './TransferButton';\nimport { TransferContextProvider, useTransfer } from './useTransferContext';\n\nconst Transfer = ({ children }: { children: React.ReactNode }) => {\n  return (\n    \n      
      {children}
      \n          \n  );\n};\n\nTransfer.Source = Source;\nTransfer.Target = Target;\n\nTransfer.Item = Item;\n\nTransfer.TransferButton = TransferButton;\n\nTransfer.BacktransferButton = BacktransferButton;\n\nTransfer.ResetButton = ResetButton;\n\nTransfer.useTransfer = useTransfer;\n\nexport { Transfer };\n"
  },
  {
    "path": "src/Transfer/TransferButton.tsx",
    "content": "import React from 'react';\nimport { Icon } from '../Icon/Icon';\nimport { useTransferContext } from './useTransferContext';\n\nconst TransferButton = () => {\n  const { sourceCandidates, sourceItems, targetItems, setSourceItems, setTargetItems, setSourceCandidates } =\n    useTransferContext();\n  const handleTransfer: React.MouseEventHandler = (e) => {\n    e.preventDefault();\n    const newSourceItems = sourceItems.filter((item) => !sourceCandidates.includes(item.id));\n    const newTargetItems = targetItems.concat(sourceItems.filter((item) => sourceCandidates.includes(item.id)));\n    setSourceItems({ items: newSourceItems });\n    setTargetItems({ items: newTargetItems });\n    setSourceCandidates([]);\n  };\n  return (\n    <>\n       0 ? 'active' : ''}`}\n        href='#'\n        role='button'\n        aria-label='Sposta avanti'\n        onClick={handleTransfer}\n      >\n        \n      \n      Etichetta per freccia destra\n    \n  );\n};\n\nexport { TransferButton };\n"
  },
  {
    "path": "src/Transfer/useTransferContext.tsx",
    "content": "import React, { createContext, useContext, useMemo, useState } from 'react';\n\ninterface TransferContextType {\n  sourceItems: { id: string; content: React.ReactNode }[];\n  targetItems: { id: string; content: React.ReactNode }[];\n  sourceCandidates: string[];\n  targetCandidates: string[];\n  setSourceItems: ({\n    items,\n    setOriginals\n  }: {\n    items: { id: string; content: React.ReactNode }[];\n    setOriginals?: boolean;\n  }) => void;\n  setTargetItems: ({\n    items,\n    setOriginals\n  }: {\n    items: { id: string; content: React.ReactNode }[];\n    setOriginals?: boolean;\n  }) => void;\n  setSourceCandidates: (items: string[]) => void;\n  setTargetCandidates: (items: string[]) => void;\n  isChanged: boolean;\n  reset: () => void;\n}\n\nexport const TransferContext = createContext({\n  sourceItems: [],\n  targetItems: [],\n  sourceCandidates: [],\n  targetCandidates: [],\n  setSourceItems: () => {},\n  setTargetItems: () => {},\n  setSourceCandidates: () => {},\n  setTargetCandidates: () => {},\n  isChanged: false,\n  reset: () => {}\n});\n\nexport const useTransferContext = () => useContext(TransferContext);\n\nexport const TransferContextProvider = ({ children }: { children: React.ReactNode }) => {\n  const [sourceItems, setSourceItems] = useState<{ id: string; content: React.ReactNode }[]>([]);\n  const [targetItems, setTargetItems] = useState<{ id: string; content: React.ReactNode }[]>([]);\n  const [sourceCandidates, setSourceCandidates] = useState([]);\n  const [targetCandidates, setTargetCandidates] = useState([]);\n  const [originalSourceItems, setOriginalSourceItems] = useState<{ id: string; content: React.ReactNode }[]>([]);\n  const [originalTargetItems, setOriginalTargetItems] = useState<{ id: string; content: React.ReactNode }[]>([]);\n\n  const value = useMemo(\n    () => ({\n      sourceCandidates,\n      targetCandidates,\n      sourceItems,\n      targetItems,\n      setSourceItems: ({\n        items,\n        setOriginals\n      }: {\n        items: { id: string; content: React.ReactNode }[];\n        setOriginals?: boolean;\n      }) => {\n        setSourceItems(items);\n        if (setOriginals) {\n          setOriginalSourceItems(items);\n        }\n      },\n      setTargetItems: ({\n        items,\n        setOriginals\n      }: {\n        items: { id: string; content: React.ReactNode }[];\n        setOriginals?: boolean;\n      }) => {\n        setTargetItems(items);\n        if (setOriginals) {\n          setOriginalTargetItems(items);\n        }\n      },\n      setSourceCandidates,\n      setTargetCandidates,\n      reset: () => {\n        setSourceItems(originalSourceItems);\n        setTargetItems(originalTargetItems);\n        setSourceCandidates([]);\n        setTargetCandidates([]);\n      },\n      isChanged:\n        JSON.stringify(sourceItems) !== JSON.stringify(originalSourceItems) ||\n        JSON.stringify(targetItems) !== JSON.stringify(originalTargetItems)\n    }),\n    [sourceItems, targetItems, sourceCandidates, targetCandidates, originalSourceItems, originalTargetItems]\n  );\n\n  return {children};\n};\n\nexport const useTransfer = () => {\n  const { sourceItems, targetItems, sourceCandidates, targetCandidates } = useTransferContext();\n\n  return {\n    source: sourceItems.map((item) => {\n      return { ...item, checked: sourceCandidates.includes(item.id) };\n    }),\n    target: targetItems.map((item) => {\n      return { ...item, checked: targetCandidates.includes(item.id) };\n    })\n  };\n};\n"
  },
  {
    "path": "src/Upload/Upload.tsx",
    "content": "import classNames from 'classnames';\nimport React, { ElementType, InputHTMLAttributes, ReactNode } from 'react';\nimport { Icon, IconProps } from '../Icon/Icon';\n\nexport interface UploadProps extends InputHTMLAttributes {\n  /** L'id che lega il componente con la label */\n  id: string;\n  /** Etichetta del per il componente Upload, default 'Upload' */\n  label?: string | ReactNode;\n  /**\n   * Il nome dell'icona da mostrare, default è 'it-upload'. Per una lista completa vedi:\n   * Lista icone\n   * In caso di un'immagine esterna l'URL da utilizzare.\n   **/\n  icon?: string;\n  iconSize?: IconProps['size'];\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati. Il valore di default è 'input' */\n  tag?: ElementType;\n  /** Classi aggiuntive da usare per il componente Upload */\n  className?: string;\n  /** Indica che l'input è con un avatar */\n  isAvatar?: boolean;\n  avatarImg?: ReactNode;\n  /** Indica che l'avatar è piccolo */\n  avatarSmall?: boolean;\n  testId?: string;\n}\n\nexport const Upload = ({\n  id,\n  className,\n  icon = 'it-upload',\n  iconSize,\n  label = 'Upload',\n  tag = 'input',\n  isAvatar,\n  avatarImg,\n  avatarSmall,\n  testId,\n  ...attributes\n}: UploadProps) => {\n  const Tag = tag,\n    classes = classNames(\n      className,\n      {\n        upload: isAvatar ? false : true\n      },\n      { 'upload-avatar': isAvatar }\n    ),\n    classesAvatarWrapper = classNames({\n      'avatar-upload-wrapper': true,\n      'size-sm': avatarSmall\n    }),\n    extraAttributes: {\n      id?: string;\n      type: 'file';\n      ['aria-describedby']?: string;\n    } = {\n      id,\n      type: 'file'\n    };\n\n  // associate the input field with the help text\n  const infoId = id ? `${id}Description` : undefined;\n  if (id) {\n    extraAttributes['aria-describedby'] = infoId;\n  }\n\n  if (isAvatar) {\n    return (\n      
      \n        
      \n          {avatarImg}\n          
      \n            \n            \n          
      \n        
      \n        
      \n          \n        
      \n      
      \n    );\n  }\n\n  return (\n    <>\n      \n      \n    \n  );\n};\n"
  },
  {
    "path": "src/Upload/UploadDragNdrop.tsx",
    "content": "import classNames from 'classnames';\nimport React, { DragEventHandler, FC, useState } from 'react';\nimport DragandDropIcon from '../assets/upload-drag-drop-icon.svg';\nimport { Icon } from '../Icon/Icon';\n\ninterface UploadDragNdropProps {\n  /**\n   * Array di file per il caricamento del file\n   */\n  files: File[];\n  /**\n   * Funzione per impostare lo stato dei files\n   */\n  setFiles: React.Dispatch>;\n}\n\nexport const UploadDragNdrop: FC = ({ files, setFiles }) => {\n  const [dragOverClass, setDragOverClass] = useState(false),\n    dragOverClasses = classNames('upload-dragdrop', {\n      dragover: dragOverClass,\n      success: files.length > 0\n    });\n\n  const handleDrop: DragEventHandler = (event) => {\n      handleDrag(event);\n      const droppedFiles = event.dataTransfer.files;\n      if (droppedFiles.length > 0) {\n        setFiles(Array.from(droppedFiles));\n      }\n      setDragOverClass(false);\n    },\n    handleDrag: DragEventHandler = (event) => {\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    handleDragOver: DragEventHandler = (event) => {\n      handleDrag(event);\n      setDragOverClass(true);\n    },\n    handleDragLeave: DragEventHandler = (event) => {\n      handleDrag(event);\n      setDragOverClass(false);\n    };\n\n  const byteConverter = (bytes: number) => {\n    const K_UNIT = 1024;\n    const SIZES = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];\n\n    if (bytes == 0) return '0 Byte';\n\n    const i = Math.floor(Math.log(bytes) / Math.log(K_UNIT)),\n      resp = parseFloat((bytes / Math.pow(K_UNIT, i)).toFixed(2)) + ' ' + SIZES[i];\n\n    return resp;\n  };\n\n  return (\n    
      \n      \n        \n        {files.length > 0 && (\n          
      \n            \n          
      \n        )}\n      
      \n      
      \n        {files.length > 0 && (\n          
      \n            \n            {files.map((file) => file.type + ' ' + byteConverter(file.size))}\n          
      \n        )}\n        {files.length > 0 ? (\n          <>\n            
      {files.map((file) => file.name)}
      \n            
      Caricamento completato
      \n          \n        ) : (\n          <>\n            
      Trascina il file per caricarlo
      \n            
      \n              oppure \n              \n            
      \n          \n        )}\n      
      \n    
    \n  );\n};\n"
  },
  {
    "path": "src/Upload/UploadList.tsx",
    "content": "import classNames from 'classnames';\nimport React, { FC, HTMLAttributes } from 'react';\nimport { UploadContext } from './useUploadContext';\n\nexport interface UploadListProps extends HTMLAttributes {\n  /** Classi aggiuntive da usare per il componente lista del UploadList */\n  className?: string;\n  /** Indica che gli item list hanno l'immagine come anteprima */\n  previewImage?: boolean;\n  /** Indica la tipologia di lista\n   * @default file\n   */\n  tipologia: 'file' | 'gallery';\n  testId?: string;\n}\n\nexport const UploadList: FC = ({ className, previewImage, tipologia = 'file', ...attributes }) => {\n  const classes = classNames(\n    { 'upload-file-list': tipologia == 'file' },\n    { 'upload-pictures-wall': tipologia == 'gallery' },\n    { 'upload-file-list-image': previewImage },\n    className\n  );\n\n  return (\n    \n      
      \n    \n  );\n};\n"
  },
  {
    "path": "src/Upload/UploadListItem.tsx",
    "content": "import classNames from 'classnames';\nimport React, { ElementType, FC, HTMLAttributes, InputHTMLAttributes } from 'react';\nimport { Icon } from '../Icon/Icon';\nimport { Progress } from '../Progress/Progress';\nimport { useUploadContext } from './useUploadContext';\n\nexport interface UploadListItemProps extends HTMLAttributes {\n  /** Classi aggiuntive da usare per il componente lista del UploadList */\n  className?: string;\n  /**\n   * Indica l'icona del file\n   * @default it-file\n   */\n  icon?: string;\n  /**\n   * Indica lo stato dell'upload\n   * @default success\n   */\n  uploadStatus?: 'success' | 'uploading' | 'error';\n  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */\n  buttonTag?: ElementType;\n  /** Nome del file */\n  fileName?: string;\n  /** Peso del file */\n  fileWeight?: string;\n  /** Valore della barra progress in caso uploadStatus sia uploading */\n  progressValue?: number;\n  /** Indica che gli item list hanno l'immagine come anteprima */\n  previewImage?: boolean;\n  previewImageSrc?: string;\n  previewImageAlt?: string;\n  testId?: string;\n}\n\nexport const UploadListItem: FC & {\n  UploadButton: typeof UploadButton;\n} = ({\n  className,\n  icon = 'it-file',\n  uploadStatus = 'success',\n  buttonTag = 'button',\n  progressValue,\n  previewImage,\n  previewImageSrc,\n  previewImageAlt,\n  fileName,\n  fileWeight,\n  children\n}) => {\n  const tipologia = useUploadContext(),\n    classes = classNames(\n      {\n        'upload-file': tipologia === 'file',\n        success: uploadStatus === 'success' && tipologia === 'file',\n        uploading: uploadStatus === 'uploading' && tipologia === 'file',\n        error: uploadStatus === 'error' && tipologia === 'file'\n      },\n      className\n    ),\n    classesProgress = classNames({ 'progress-image': previewImage }),\n    ButtonTag = buttonTag;\n\n  const elementiListItem = {\n    success: {\n      testoVHFile: 'File caricato:',\n      testoVHRightIcon: 'Caricamento ultimato',\n      rightIcon: 'it-check'\n    },\n    uploading: {\n      testoVHFile: 'File caricato:',\n      testoVHRightIcon: 'Annulla caricamento',\n      rightIcon: 'it-close'\n    },\n    error: {\n      testoVHFile: 'Errore caricamento file:',\n      testoVHRightIcon: 'Elimina file caricato',\n      rightIcon: 'it-close'\n    }\n  };\n\n  return (\n    
    • \n      {children}\n      {previewImage ? (\n        
      \n          {previewImageAlt}\n        
      \n      ) : (\n        tipologia === 'file' && \n      )}\n      {tipologia === 'file' && (\n        <>\n          
      \n            {elementiListItem[uploadStatus].testoVHFile}\n            {fileName} {uploadStatus === 'success' && {fileWeight}}\n          
      \n          \n            {elementiListItem[uploadStatus].testoVHRightIcon}\n            \n          \n          {uploadStatus === 'uploading' && }\n        \n      )}\n    
      • \n  );\n};\n\nconst UploadButton: FC> = ({ id, children, ...props }) => {\n  return (\n    <>\n      \n      \n    \n  );\n};\n\nUploadListItem.UploadButton = UploadButton;\n"
  },
  {
    "path": "src/Upload/useUploadContext.ts",
    "content": "import { createContext, useContext } from 'react';\n\ninterface UploadContextType {\n  tipologia: 'file' | 'gallery';\n}\n\nexport const UploadContext = createContext({\n  tipologia: 'file'\n});\n\nexport const useUploadContext = () => {\n  const { tipologia } = useContext(UploadContext);\n  return tipologia;\n};\n"
  },
  {
    "path": "src/Video/Video.tsx",
    "content": "import React, { FC, useEffect, useRef } from 'react';\n\nimport { VideoPlayer } from 'bootstrap-italia';\nimport { Input } from '../Input/Input';\nimport { Accordion } from '../Accordion/Accordion';\nimport { AccordionItem } from '../Accordion/AccordionItem';\nimport { AccordionHeader } from '../Accordion/AccordionHeader';\nimport { AccordionBody } from '../Accordion/AccordionBody';\nimport { Dimmer } from '../Dimmer/Dimmer';\nimport { DimmerButtons } from '../Dimmer/DimmerButtons';\nimport { Button } from '../Button/Button';\nimport { FormGroup, Label } from 'reactstrap';\nimport { Icon } from '../Icon/Icon';\n\nexport interface VideoSource {\n  /** Sorgente del video */\n  src: string;\n  /** Tipo della sorgente video */\n  type: string;\n}\nexport interface VideoTrackSource {\n  /** Tipologia di traccia audio */\n  kind: string;\n  /** Sorgente della traccia audio */\n  src: string;\n  /** Lingua della traccia audio */\n  srcLang: string;\n  /** Label della traccia audio */\n  label: string;\n  /** Setta la traccia audio come default */\n  isDefault?: boolean;\n}\n\nexport interface VideoYouTube {\n  /** Url del video YouTube */\n  url: string;\n  /** Attiva o meno il disclaimer */\n  hasDisclaimer?: boolean;\n  /** Testo del disclaimer */\n  disclaimerText?: string;\n  /** Chiave del disclaimer come preferenza */\n  disclaimerKey?: string;\n}\nexport interface VideoProps {\n  /** Id del componente Video */\n  id: string;\n  /** Sorgenti del video */\n  sources?: Array;\n  /** Testo della trascrizione */\n  transcription?: string;\n  /** Label dell'accordion della trascrizione */\n  transcriptionLabel?: string;\n  /** Array delle tracce */\n  tracks?: Array;\n  /** Url del poster */\n  poster?: string;\n  /** Attiva o meno i controlli */\n  controls?: boolean;\n  /** Attiva o meno l'autoplay */\n  autoPlay?: boolean;\n  /** Attiva o meno il loop del video */\n  loop?: boolean;\n  /** Modalità visualizzazione fluida */\n  fluid?: boolean;\n  /** Video YouTube */\n  youtube?: VideoYouTube;\n  /** Label del pulsante di accettazione */\n  acceptLabel?: string;\n  /** Label della checkbox per ricordare la scelta di accettazione */\n  rememberLabel?: string;\n}\n\nexport const Video: FC = (props) => {\n  const [showTranscript, setShowTranscript] = React.useState(false);\n  const [showDisclaimer, setShowDisclaimer] = React.useState(false);\n  const [instance, setInstance] = React.useState();\n  const [rememberFlag, setRememberFlag] = React.useState(false);\n  const [disclaimerText, setDisclaimerText] = React.useState(\n    `Accetta i cookie di YouTube per vedere il video. Puoi gestire le preferenze nella cookie policy.`\n  );\n  const ref = useRef(null);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (el && VideoPlayer && !instance) {\n      setInstance(new VideoPlayer(el))\n    }\n    if (props.youtube?.url) {\n      if (props.youtube.hasDisclaimer) {\n        const serviceName = props.youtube.disclaimerKey || 'youtube';\n        const rememberFlag = localStorage.getItem(serviceName);\n        if (props.youtube.disclaimerText) {\n          setDisclaimerText(props.youtube.disclaimerText);\n        }\n        setRememberFlag(rememberFlag == 'true');\n        if (rememberFlag == 'true') {\n          setShowDisclaimer(false);\n          loadYouTubeVideo(props.youtube.url);\n        } else {\n          setShowDisclaimer(true);\n        }\n      }\n    }\n\n    if (props.autoPlay) {\n      setTimeout(() => {\n        instance?.player?.play();\n      }, 1000);\n    }\n\n    return () => {\n      if (instance) {\n        instance.dispose();\n      }\n    };\n  }, []);\n\n  const loadYouTubeVideo = (url: string) => {\n    if (instance) {\n      instance.setYouTubeVideo(url);\n    }\n  }\n\n  const { controls = true, autoPlay = false, loop = false, fluid = true, poster = undefined } = props;\n  const videoProps = { controls, autoPlay, loop, fluid, poster };\n\n  return (\n    <>\n      
      \n        \n        {props.transcription && (\n          \n            \n               setShowTranscript((p) => !p)}>\n                {props.transcriptionLabel || 'Trascrizione'}\n              \n              {props.transcription}\n            \n          \n        )}\n        \n          
      \n            \n          
      \n          
      \n          \n             {\n                if (props.youtube?.url) {\n                  if (props.youtube.hasDisclaimer) {\n                    const serviceName = props.youtube.disclaimerKey || 'youtube';\n                    if (rememberFlag) {\n                      // set cookie\n                      localStorage.setItem(serviceName, 'true');\n                    } else {\n                      // reset cookie\n                      localStorage.removeItem(serviceName);\n                    }\n                    loadYouTubeVideo(props.youtube.url);\n                  }\n                  setShowDisclaimer(false);\n                }\n              }}\n              color='primary'\n            >\n              {props.acceptLabel || 'Accetta'}\n            \n            
      \n              \n                 setRememberFlag((p) => !p)}\n                />\n                \n              \n            
      \n                \n        \n      
      \n    \n  );\n};\n"
  },
  {
    "path": "src/index.ts",
    "content": "export {\n  BreadcrumbItem,\n  ButtonGroup,\n  ButtonToolbar,\n  CardColumns,\n  CardDeck,\n  CardFooter,\n  CardGroup,\n  CardHeader,\n  CardImg,\n  CardImgOverlay,\n  CardLink,\n  CardSubtitle,\n  Col,\n  Container,\n  Fade,\n  Form,\n  FormFeedback,\n  FormGroup,\n  FormText,\n  InputGroup,\n  InputGroupText,\n  Label,\n  ListGroup,\n  ListGroupItem,\n  ListGroupItemHeading,\n  ListGroupItemText,\n  Media,\n  Navbar,\n  NavbarBrand,\n  NavbarToggler,\n  NavItem,\n  NavLink,\n  PaginationItem as PagerItem,\n  PaginationLink as PagerLink,\n  Popover,\n  PopoverBody,\n  PopoverHeader,\n  Row,\n  Table,\n  Tooltip,\n  UncontrolledAlert,\n  UncontrolledCollapse,\n  UncontrolledTooltip,\n  Util\n} from 'reactstrap';\n\nexport { TabContainer, TabContent, TabPane } from 'react-bootstrap';\nexport { Accordion } from './Accordion/Accordion';\nexport { AccordionBody } from './Accordion/AccordionBody';\nexport { AccordionHeader } from './Accordion/AccordionHeader';\nexport { AccordionItem } from './Accordion/AccordionItem';\nexport { Alert } from './Alert/Alert';\nexport { Autocomplete } from './Autocomplete/Autocomplete';\nexport { AvatarContainer } from './Avatar/AvatarContainer';\nexport { AvatarExtraText } from './Avatar/AvatarExtraText';\nexport { AvatarGroupContainer } from './Avatar/AvatarGroupContainer';\nexport { AvatarIcon } from './Avatar/AvatarIcon';\nexport { AvatarPresence } from './Avatar/AvatarPresence';\nexport { AvatarStatus } from './Avatar/AvatarStatus';\nexport { AvatarWrapper } from './Avatar/AvatarWrapper';\nexport { BackToTop } from './BackToTop/BackToTop';\nexport { Badge } from './Badge/Badge';\nexport { BottomNav } from './BottomNav/BottomNav';\nexport { BottomNavItem } from './BottomNav/BottomNavItem';\nexport { Breadcrumb } from './Breadcrumb/Breadcrumb';\nexport { Button } from './Button/Button';\nexport { Callout } from './Callout/Callout';\nexport { CalloutMoreFooter } from './Callout/CalloutMoreFooter';\nexport { CalloutText } from './Callout/CalloutText';\nexport { CalloutTitle } from './Callout/CalloutTitle';\nexport { Card } from './Card/Card';\nexport { CardBody } from './Card/CardBody';\nexport { CardCategory } from './Card/CardCategory';\nexport { CardFooterCTA } from './Card/CardFooterCTA';\nexport { CardReadMore } from './Card/CardReadMore';\nexport { CardSignature } from './Card/CardSignature';\nexport { CardTag } from './Card/CardTag';\nexport { CardTagsHeader } from './Card/CardTagsHeader';\nexport { CardText } from './Card/CardText';\nexport { CardTitle } from './Card/CardTitle';\nexport { Carousel } from './Carousel/Carousel';\nexport { CarouselSlide } from './Carousel/CarouselSlide';\nexport { Chip } from './Chips/Chip';\nexport { ChipLabel } from './Chips/ChipLabel';\nexport { Collapse } from './Collapse/Collapse';\nexport { Dimmer } from './Dimmer/Dimmer';\nexport { DimmerButtons } from './Dimmer/DimmerButtons';\nexport { Dropdown } from './Dropdown/Dropdown';\nexport { DropdownMenu } from './Dropdown/DropdownMenu';\nexport { DropdownToggle } from './Dropdown/DropdownToggle';\nexport { FontLoader, useFontLoader } from './FontLoader/FontLoader';\nexport { Forward } from './Forward/Forward';\nexport { GoBack } from './GoBack/GoBack';\nexport { GridItem, GridItemText, GridItemTextWrapper, GridList, GridRow } from './Grid/index';\nexport { Header } from './Header/Header';\nexport { HeaderBrand } from './Header/HeaderBrand';\nexport { HeaderContent } from './Header/HeaderContent';\nexport { HeaderLinkZone } from './Header/HeaderLinkZone';\nexport { HeaderRightZone } from './Header/HeaderRightZone';\nexport { Headers } from './Header/Headers';\nexport { HeaderSearch } from './Header/HeaderSearch';\nexport { HeaderSocialsZone } from './Header/HeaderSocialsZone';\nexport { HeaderToggler } from './Header/HeaderToggler';\nexport { Hero, HeroBackground, HeroBody, HeroButton, HeroCategory, HeroTitle } from './Hero/index';\nexport { clearIconCache, Icon, iconsList as icons, preloadIcons } from './Icon/Icon';\nexport { Input } from './Input/Input';\nexport { InputContainer } from './Input/InputContainer';\nexport { TextArea } from './Input/TextArea';\nexport { LinkList } from './LinkList/LinkList';\nexport { LinkListItem } from './LinkList/LinkListItem';\nexport { List } from './List/List';\nexport { ListItem } from './List/ListItem';\nexport { MegamenuFooter } from './Megamenu/MegamenuFooter';\nexport { MegamenuHighlightColumn } from './Megamenu/MegamenuHighlightColumn';\nexport { MegamenuItem } from './Megamenu/MegamenuItem';\nexport { Modal } from './Modal/Modal';\nexport { ModalBody } from './Modal/ModalBody';\nexport { ModalFooter } from './Modal/ModalFooter';\nexport { ModalHeader } from './Modal/ModalHeader';\nexport { Nav } from './Nav/Nav';\nexport { useNavScroll } from './NavScroll/index';\nexport { createNotification, NotificationManager, notify } from './Notification/index';\nexport { Pager } from './Pager/Pager';\nexport { Progress } from './Progress/Progress';\nexport { Rating } from './Rating/Rating';\nexport { ResponsiveImage } from './ResponsiveImage/ResponsiveImage';\nexport { Section } from './Section/Section';\nexport { Select } from './Select/Select';\nexport { Sidebar } from './Sidebar/Sidebar';\nexport { Skiplink } from './Skiplink/Skiplink';\nexport { SkiplinkItem } from './Skiplink/SkiplinkItem';\nexport { Spinner } from './Spinner/Spinner';\nexport { StepperContainer } from './Stepper/StepperContainer';\nexport { StepperContent } from './Stepper/StepperContent';\nexport { StepperDots } from './Stepper/StepperDots';\nexport { StepperHeader } from './Stepper/StepperHeader';\nexport { StepperHeaderElement } from './Stepper/StepperHeaderElement';\nexport { StepperNav } from './Stepper/StepperNav';\nexport { TabNav } from './Tab/TabNav';\nexport { TabNavItem } from './Tab/TabNavItem';\nexport { TabNavLink } from './Tab/TabNavLink';\nexport { ThumbNav } from './ThumbNav/ThumbNav';\nexport { ThumbNavItem } from './ThumbNav/ThumbNavItem';\nexport { TimelinePin } from './Timeline/TimelinePin';\nexport { Timeline } from './Timeline/TimelineWrapper';\nexport { Toggle } from './Toggle/Toggle';\nexport { Toolbar } from './Toolbar/Toolbar';\nexport { ToolbarDividerItem } from './Toolbar/ToolbarDividerItem';\nexport { ToolbarItem } from './Toolbar/ToolbarItem';\nexport { Transfer } from './Transfer/Transfer';\nexport { Upload } from './Upload/Upload';\nexport { UploadDragNdrop } from './Upload/UploadDragNdrop';\nexport { UploadList } from './Upload/UploadList';\nexport { UploadListItem } from './Upload/UploadListItem';\nexport { Video } from './Video/Video';\n\n// Types\nexport type { AccordionProps } from './Accordion/Accordion';\nexport type { AccordionBodyProps } from './Accordion/AccordionBody';\nexport type { AccordionHeaderProps } from './Accordion/AccordionHeader';\nexport type { AlertProps } from './Alert/Alert';\nexport type { AvatarContainerProps } from './Avatar/AvatarContainer';\nexport type { AvatarExtraTextProps } from './Avatar/AvatarExtraText';\nexport type { AvatarGroupContainerProps } from './Avatar/AvatarGroupContainer';\nexport type { AvatarIconProps } from './Avatar/AvatarIcon';\nexport type { AvatarPresenceProps } from './Avatar/AvatarPresence';\nexport type { AvatarStatusProps } from './Avatar/AvatarStatus';\nexport type { AvatarWrapperProps } from './Avatar/AvatarWrapper';\nexport type { BadgeProps } from './Badge/Badge';\nexport type { BottomNavProps } from './BottomNav/BottomNav';\nexport type { BottomNavItemProps } from './BottomNav/BottomNavItem';\nexport type { BreadcrumbProps } from './Breadcrumb/Breadcrumb';\nexport type { ButtonProps } from './Button/Button';\nexport type { CalloutProps } from './Callout/Callout';\nexport type { CalloutTextProps } from './Callout/CalloutText';\nexport type { CalloutTitleProps } from './Callout/CalloutTitle';\nexport type { CardProps } from './Card/Card';\nexport type { CardBodyProps } from './Card/CardBody';\nexport type { CardCategoryProps } from './Card/CardCategory';\nexport type { CardFooterCTAProps } from './Card/CardFooterCTA';\nexport type { CardReadMoreProps } from './Card/CardReadMore';\nexport type { CardSignatureProps } from './Card/CardSignature';\nexport type { CardTagProps } from './Card/CardTag';\nexport type { CardTagsHeaderProps } from './Card/CardTagsHeader';\nexport type { CardTextProps } from './Card/CardText';\nexport type { CardTitleProps } from './Card/CardTitle';\nexport type { CarouselProps } from './Carousel/Carousel';\nexport type { ChipProps } from './Chips/Chip';\nexport type { ChipLabelProps } from './Chips/ChipLabel';\nexport type { DimmerProps } from './Dimmer/Dimmer';\nexport type { DimmerButtonsProps } from './Dimmer/DimmerButtons';\nexport type { DropdownProps } from './Dropdown/Dropdown';\nexport type { DropdownMenuProps } from './Dropdown/DropdownMenu';\nexport type { DropdownToggleProps } from './Dropdown/DropdownToggle';\nexport type { FontLoaderProps } from './FontLoader/FontLoader';\nexport type { ForwardProps } from './Forward/Forward';\nexport type {\n  GridItemProps,\n  GridItemTextProps,\n  GridItemTextWrapperProps,\n  GridListProps,\n  GridRowProps\n} from './Grid/index';\nexport type { HeaderProps } from './Header/Header';\nexport type { HeaderBrandProps } from './Header/HeaderBrand';\nexport type { HeaderContentProps } from './Header/HeaderContent';\nexport type { HeaderLinkZoneProps } from './Header/HeaderLinkZone';\nexport type { HeaderRightZoneProps } from './Header/HeaderRightZone';\nexport type { HeadersProps } from './Header/Headers';\nexport type { HeaderSearchProps } from './Header/HeaderSearch';\nexport type { HeaderSocialsZoneProps } from './Header/HeaderSocialsZone';\nexport type { HeaderTogglerProps } from './Header/HeaderToggler';\nexport type {\n  HeroBackgroundProps,\n  HeroBodyProps,\n  HeroButtonProps,\n  HeroCategoryProps,\n  HeroProps,\n  HeroTitleProps\n} from './Hero/index';\nexport type { IconName, IconProps } from './Icon/Icon';\nexport type { InputProps } from './Input/Input';\nexport type { InputContainerProps } from './Input/InputContainer';\nexport type { TextAreaProps } from './Input/TextArea';\nexport type { LinkListProps } from './LinkList/LinkList';\nexport type { LinkListItemProps } from './LinkList/LinkListItem';\nexport type { ListProps } from './List/List';\nexport type { ListItemProps } from './List/ListItem';\nexport type { MegamenuFooterProps } from './Megamenu/MegamenuFooter';\nexport type { MegamenuHCProps } from './Megamenu/MegamenuHighlightColumn';\nexport type { MegamenuItemProps } from './Megamenu/MegamenuItem';\nexport type { ModalProps } from './Modal/Modal';\nexport type { ModalBodyProps } from './Modal/ModalBody';\nexport type { ModalFooterProps } from './Modal/ModalFooter';\nexport type { ModalHeaderProps } from './Modal/ModalHeader';\nexport type { NavProps } from './Nav/Nav';\nexport type { ChangesType, RegisterOptions, useNavScrollArgs, useNavScrollResult } from './NavScroll';\nexport type { NotificationId, NotificationManagerProps, NotificationOptions, NotificationProps } from './Notification';\nexport type { PagerProps } from './Pager/Pager';\nexport type { ProgressProps } from './Progress/Progress';\nexport type { RatingProps } from './Rating/Rating';\nexport type { ResponsiveImageProps } from './ResponsiveImage/ResponsiveImage';\nexport type { SectionProps } from './Section/Section';\nexport type { SelectProps } from './Select/Select';\nexport type { SidebarProps } from './Sidebar/Sidebar';\nexport type { SkiplinkProps } from './Skiplink/Skiplink';\nexport type { SkiplinkItemProps } from './Skiplink/SkiplinkItem';\nexport type { SpinnerProps } from './Spinner/Spinner';\nexport type { StepperContainerProps } from './Stepper/StepperContainer';\nexport type { StepperContentProps } from './Stepper/StepperContent';\nexport type { StepperDotsProps } from './Stepper/StepperDots';\nexport type { StepperHeaderProps } from './Stepper/StepperHeader';\nexport type { StepperHeaderElementProps } from './Stepper/StepperHeaderElement';\nexport type { StepperNavProps } from './Stepper/StepperNav';\nexport type { TabNavProps } from './Tab/TabNav';\nexport type { TabNavItemProps } from './Tab/TabNavItem';\nexport type { TabNavLinkProps } from './Tab/TabNavLink';\nexport type { ThumbNavProps } from './ThumbNav/ThumbNav';\nexport type { ThumbNavItemProps } from './ThumbNav/ThumbNavItem';\nexport type { TimelinePinProps } from './Timeline/TimelinePin';\nexport type { TimelineProps } from './Timeline/TimelineWrapper';\nexport type { ToggleProps } from './Toggle/Toggle';\nexport type { ToolbarProps } from './Toolbar/Toolbar';\nexport type { ToolbarItemBadge, ToolbarItemProps } from './Toolbar/ToolbarItem';\nexport type { UploadProps } from './Upload/Upload';\nexport type { VideoProps, VideoSource, VideoTrackSource, VideoYouTube } from './Video/Video';\n\nexport type {\n  BreadcrumbItemProps,\n  ButtonDropdownProps,\n  ButtonGroupProps,\n  ButtonToolbarProps,\n  CardColumnsProps,\n  CardDeckProps,\n  CardFooterProps,\n  CardGroupProps,\n  CardHeaderProps,\n  CardImgOverlayProps,\n  CardImgProps,\n  CardLinkProps,\n  CardSubtitleProps,\n  ColProps,\n  ContainerProps,\n  FadeProps,\n  FormFeedbackProps,\n  FormGroupProps,\n  FormProps,\n  FormTextProps,\n  InputGroupProps,\n  InputGroupTextProps,\n  LabelProps,\n  ListGroupItemHeadingProps,\n  ListGroupItemProps,\n  ListGroupItemTextProps,\n  ListGroupProps,\n  MediaProps,\n  NavbarBrandProps,\n  NavbarProps,\n  NavbarTogglerProps,\n  NavItemProps,\n  NavLinkProps,\n  PaginationItem as PagerItemProps,\n  PaginationLink as PagerLinkProps,\n  PopoverBodyProps,\n  PopoverHeaderProps,\n  PopoverProps,\n  RowProps,\n  TableProps,\n  TooltipProps,\n  UncontrolledAlertProps,\n  UncontrolledCollapseProps,\n  UncontrolledTooltipProps\n} from 'reactstrap';\n\nexport type { SplideProps } from '@splidejs/react-splide';\nexport type { TabContainerProps, TabContentProps, TabPaneProps } from 'react-bootstrap';\nimport './track-focus.js';\n"
  },
  {
    "path": "src/track-focus.js",
    "content": "// Focus Management\n\n/**\n * --------------------------------------------------------------------------\n * Bootstrap Italia (https://italia.github.io/bootstrap-italia/)\n * Authors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS\n * Licensed under BSD-3-Clause license (https://github.com/italia/bootstrap-italia/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nconst DATA_MOUSE_FOCUS = 'data-focus-mouse';\nconst CLASS_NAME_MOUSE_FOCUS = 'focus--mouse';\n\nclass TrackFocus {\n  constructor() {\n    this._usingMouse = false;\n\n    this._bindEvents();\n  }\n\n  _bindEvents() {\n    if (typeof document === 'undefined') {\n      return;\n    }\n    const events = ['keydown', 'mousedown'];\n    events.forEach((evtName) => {\n      document.addEventListener(evtName, (evt) => {\n        this._usingMouse = evt.type === 'mousedown';\n      });\n    });\n    document.addEventListener('focusin', (evt) => {\n      if (this._usingMouse) {\n        if (evt.target) {\n          evt.target.classList.add(CLASS_NAME_MOUSE_FOCUS);\n          evt.target.setAttribute(DATA_MOUSE_FOCUS, 'true');\n        }\n      }\n    });\n    document.addEventListener('focusout', (evt) => {\n      if (evt.target) {\n        evt.target.classList.remove(CLASS_NAME_MOUSE_FOCUS);\n        evt.target.setAttribute(DATA_MOUSE_FOCUS, 'false');\n      }\n    });\n  }\n}\n\nnew TrackFocus();\n"
  },
  {
    "path": "src/transitions.ts",
    "content": "// Taken from Reactstrap utils.js which are tken from bootstrap sass\nexport const TransitionTimeouts = {\n  // $transition-fade\n  Fade: 150,\n  // $transition-collapse\n  Collapse: 350,\n  // $modal-transition\n  Modal: 300,\n  // $carousel-transition\n  Carousel: 600\n};\n\n// taken from Reactstrap utils.js\nexport const TransitionsKeys = [\n  'in',\n  'mountOnEnter',\n  'unmountOnExit',\n  'appear',\n  'enter',\n  'exit',\n  'timeout',\n  'onEnter',\n  'onEntering',\n  'onEntered',\n  'onExit',\n  'onExiting',\n  'onExited'\n];\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst transitionStatus = {\n  entering: 1,\n  entered: 1,\n  exiting: 1,\n  exited: 1\n};\n\nexport type TransitionStates = keyof typeof transitionStatus;\n"
  },
  {
    "path": "src/types/svg.d.ts",
    "content": "declare module '*.svg' {\n  const content: string;\n  export default content;\n} "
  },
  {
    "path": "src/utils.tsx",
    "content": "export const noop = () => {};\n\nexport const logError = (message: string) => {\n  if (typeof console !== 'undefined') {\n    if (console.error) {\n      console.error(message);\n    } else {\n      console.log(message);\n    }\n  }\n};\n\n// @internal Used for testing purposes only\nexport const flushMessageCache = () => {\n  for (const key in messages) {\n    delete messages[key];\n  }\n};\n\nconst messages: Record = {};\nexport const notifyDeprecation = (message: string, options: { once: boolean } = { once: true }) => {\n  if (!options.once) {\n    logError(message);\n  } else {\n    if (!messages[message]) {\n      logError(message);\n      messages[message] = 1;\n    }\n  }\n};\n\nexport function mapToCssModules(className: string | null, cssModules?: Record) {\n  const finalClassNames = className == null ? '' : className;\n  if (!cssModules) {\n    return finalClassNames;\n  }\n  return finalClassNames\n    .split(' ')\n    .map((klass) => cssModules[klass] ?? klass)\n    .join(' ');\n}\n\ntype UnknownObject = Record;\n\nexport function pick(obj: T, keys: keyof T | Array): Partial {\n  const keysArray = Array.isArray(keys) ? keys : [keys];\n  const newObj: Partial = {};\n  for (const key of keysArray) {\n    if (key in obj) {\n      newObj[key] = obj[key];\n    }\n  }\n  return newObj;\n}\n\nexport function omit(obj: T, keys: keyof T | Array): Partial {\n  const keysLookup = new Set(Array.isArray(keys) ? keys : [keys]);\n\n  const newObj: Partial = {};\n  for (const key in obj) {\n    if (!keysLookup.has(key)) {\n      newObj[key] = obj[key];\n    }\n  }\n  return newObj;\n}\n"
  },
  {
    "path": "static/favicons/browserconfig.xml",
    "content": "\n\n    \n        \n            \n            #0066CC\n        \n    \n"
  },
  {
    "path": "static/favicons/manifest.webmanifest",
    "content": "{\n  \"name\": \"Design React Kit\",\n  \"short_name\": \"DRK\",\n  \"start_url\": \"/design-react-kit\",\n  \"theme_color\": \"#06C\",\n  \"background_color\": \"#06C\",\n  \"display\": \"standalone\",\n  \"description\": \"esign React Kit è un toolkit basato su Bootstrap Italia per la creazione di applicazioni web sviluppate con React.\",\n  \"icons\": [\n    {\n      \"src\": \"/design-react-kit/favicons/android-chrome-192x192.png\",\n      \"sizes\": \"192x192\",\n      \"type\": \"image/png\"\n    },\n    {\n      \"src\": \"/design-react-kit/favicons/android-chrome-512x512.png\",\n      \"sizes\": \"512x512\",\n      \"type\": \"image/png\"\n    }\n  ]\n}\n"
  },
  {
    "path": "stories/Components/Accordion.stories.tsx",
    "content": "import type { Meta, StoryObj } from \"@storybook/react-vite\";\r\nimport React, { useState } from \"react\";\r\nimport { Accordion, AccordionBody, AccordionHeader, AccordionItem } from \"../../src\";\r\n\r\nconst meta: Meta = {\r\n    title: \"Documentazione/Componenti/Accordion\",\r\n    component: Accordion,\r\n    parameters: {\r\n        docs: {\r\n            canvas: { sourceState: \"none\" },\r\n        },\r\n    },\r\n};\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj;\r\n\r\nconst GruppiDiElementiRichiudibiliWithHooks = () => {\r\n  const [collapseElementOpen, setCollapseElement] = useState(\"\");\r\n  return (\r\n    \r\n      \r\n         setCollapseElement(collapseElementOpen !== \"1\" ? \"1\" : \"\")}>\r\n          Elemento Richiudibile #1\r\n        \r\n        \r\n          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat\r\n          skateboard dolor brunch.\r\n        \r\n      \r\n      \r\n         setCollapseElement(collapseElementOpen !== \"2\" ? \"2\" : \"\")}>\r\n          Elemento Richiudibile #2\r\n        \r\n        \r\n          Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably\r\n          haven't heard of them accusamus labore sustainable VHS.\r\n        \r\n      \r\n      \r\n         setCollapseElement(collapseElementOpen !== \"3\" ? \"3\" : \"\")}>\r\n          Elemento Richiudibile #3\r\n        \r\n        \r\n          Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla\r\n          assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.\r\n        \r\n      \r\n    \r\n  );\r\n}\r\n\r\nexport const GruppiDiElementiRichiudibili: Story = {\r\n    render: () => \r\n};\r\n\r\nconst _AccordionWithHooks = () => {\r\n  const [collapseElementOpen, setCollapseElement] = useState(\"\");\r\n  return (\r\n    \r\n      \r\n         setCollapseElement(collapseElementOpen !== \"1\" ? \"1\" : \"\")}>\r\n          Accordion Group Item #1\r\n        \r\n        \r\n          Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper\r\n          nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.\r\n        \r\n      \r\n      \r\n         setCollapseElement(collapseElementOpen !== \"2\" ? \"2\" : \"\")}>\r\n          Accordion Group Item #2\r\n        \r\n        \r\n          Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably\r\n          haven't heard of them accusamus labore sustainable VHS.\r\n        \r\n      \r\n      \r\n         setCollapseElement(collapseElementOpen !== \"3\" ? \"3\" : \"\")}>\r\n          Accordion Group Item #3\r\n        \r\n        \r\n          Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla\r\n          assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.\r\n        \r\n      \r\n    \r\n  );\r\n}\r\n\r\nexport const _Accordion: Story = {\r\n    render: () => <_AccordionWithHooks/>\r\n};\r\n\r\nconst AccordionAnnidatiWithHooks = () => {\r\n  const [collapseElementOpen, setCollapseElement] = useState(\"\");\r\n  const [nestedCollapseOpen, setNestedCollapseOpen] = useState(\"\");\r\n  return (\r\n    \r\n      \r\n         setCollapseElement(collapseElementOpen !== \"1\" ? \"1\" : \"\")}>\r\n          Elemento Accordion #1\r\n        \r\n        \r\n          \r\n            \r\n               setNestedCollapseOpen(nestedCollapseOpen !== \"1\" ? \"1\" : \"\")}\r\n              >\r\n                Elemento Accordion annidato #1\r\n              \r\n              \r\n                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,\r\n                non cupidatat skateboard dolor brunch.\r\n              \r\n            \r\n            \r\n               setNestedCollapseOpen(nestedCollapseOpen !== \"2\" ? \"2\" : \"\")}\r\n              >\r\n                Elemento Accordion annidato #2\r\n              \r\n              \r\n                Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you\r\n                probably haven't heard of them accusamus labore sustainable VHS.\r\n              \r\n            \r\n            \r\n               setNestedCollapseOpen(nestedCollapseOpen !== \"3\" ? \"3\" : \"\")}\r\n              >\r\n                Elemento Accordion annidato #3\r\n              \r\n              \r\n                Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin\r\n                coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente\r\n                ea proident.\r\n              \r\n            \r\n          \r\n        \r\n      \r\n       setCollapseElement(collapseElementOpen !== \"2\" ? \"2\" : \"\")}>\r\n        Elemento Accordion #2\r\n      \r\n      \r\n        Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably\r\n        haven't heard of them accusamus labore sustainable VHS.\r\n      \r\n\r\n       setCollapseElement(collapseElementOpen !== \"3\" ? \"3\" : \"\")}>\r\n        Elemento Accordion #3\r\n      \r\n      \r\n        Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla\r\n        assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.\r\n      \r\n    \r\n  );\r\n}\r\n\r\nexport const AccordionAnnidati: Story = {\r\n    render: () => \r\n};\r\n\r\nconst HeaderAttiviWithHooks = () => {\r\n  const [collapseElementOpen, setCollapseElement] = useState(\"\");\r\n  return (\r\n    \r\n      \r\n         setCollapseElement(collapseElementOpen !== \"1\" ? \"1\" : \"\")}>\r\n          Elemento Accordion #1\r\n        \r\n        \r\n          Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper\r\n          nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.\r\n        \r\n      \r\n      \r\n         setCollapseElement(collapseElementOpen !== \"2\" ? \"2\" : \"\")}>\r\n          Elemento Accordion #2\r\n        \r\n        \r\n          Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably\r\n          haven't heard of them accusamus labore sustainable VHS.\r\n        \r\n      \r\n      \r\n         setCollapseElement(collapseElementOpen !== \"3\" ? \"3\" : \"\")}>\r\n          Elemento Accordion #3\r\n        \r\n        \r\n          Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla\r\n          assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.\r\n        \r\n      \r\n    \r\n  );\r\n}\r\n\r\nexport const HeaderAttivi: Story = {\r\n    render: () => \r\n};\r\n\r\nconst HeaderHoverWithHooks = () => {\r\n  const [collapseElementOpen, setCollapseElement] = useState(\"\");\r\n  return (\r\n    \r\n      \r\n         setCollapseElement(collapseElementOpen !== \"1\" ? \"1\" : \"\")}>\r\n          Elemento Accordion #1\r\n        \r\n        \r\n          Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper\r\n          nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.\r\n        \r\n      \r\n      \r\n         setCollapseElement(collapseElementOpen !== \"2\" ? \"2\" : \"\")}>\r\n          Elemento Accordion #2\r\n        \r\n        \r\n          Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably\r\n          haven't heard of them accusamus labore sustainable VHS.\r\n        \r\n      \r\n      \r\n         setCollapseElement(collapseElementOpen !== \"3\" ? \"3\" : \"\")}>\r\n          Elemento Accordion #3\r\n        \r\n        \r\n          Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla\r\n          assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.\r\n        \r\n      \r\n    \r\n  );\r\n}\r\n\r\nexport const HeaderHover: Story = {\r\n    render: () => \r\n}\r\n\r\nconst IconaSinistraWithHooks = () => {\r\n  const [collapseElementOpen, setCollapseElement] = useState(\"\");\r\n  return (\r\n    \r\n      \r\n         setCollapseElement(collapseElementOpen !== \"1\" ? \"1\" : \"\")}>\r\n          Elemento Accordion #1\r\n        \r\n        \r\n          Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper\r\n          nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.\r\n        \r\n      \r\n      \r\n         setCollapseElement(collapseElementOpen !== \"2\" ? \"2\" : \"\")}>\r\n          Elemento Accordion #2\r\n        \r\n        \r\n          Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper\r\n          nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.\r\n        \r\n      \r\n      \r\n         setCollapseElement(collapseElementOpen !== \"3\" ? \"3\" : \"\")}>\r\n          Elemento Accordion #3\r\n        \r\n        \r\n          Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper\r\n          nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.\r\n        \r\n      \r\n    \r\n  )\r\n}\r\n\r\nexport const IconaSinistra: Story = {\r\n    render: () => \r\n};\r\n"
  },
  {
    "path": "stories/Components/Alert.stories.tsx",
    "content": "import { Meta, StoryObj } from '@storybook/react-vite';\nimport React, { useState } from 'react';\nimport { componentColor } from '../../.storybook/stories-helper';\nimport { Alert } from '../../src';\n\nconst meta: Meta = {\n  title: 'Documentazione/Componenti/Alert',\n  component: Alert,\n  args: {\n    color: 'success'\n  },\n  argTypes: {\n    color: {\n      control: 'select',\n      options: componentColor\n    }\n  }\n};\n\nexport default meta;\n\ntype Story = StoryObj;\n\nexport const _EsempiInterattivi: Story = {\n  render: ({ ...args }) => (\n    \n      Questo è un alert di {args.color}!\n    \n  )\n};\n\nexport const _LinkEvidenziato: Story = {\n  render: ({ ...args }) => (\n    \n      Questo è un alert con un esempio di{' '}\n      \n        link\n      \n    \n  ),\n  args: {\n    color: 'danger'\n  }\n};\n\nexport const _ContenutoAggiuntivo: Story = {\n  render: ({ ...args }) => (\n    \n      
      Avviso di successo!
      \n      
      \n        Stai leggendo questo importante messaggio di avviso di successo. Questo testo di esempio sarà più a lungo in\n        modo da poter vedere come funzioni la spaziatura all'interno di un avviso con questo tipo di contenuto.\n      
      \n      
      \n      
      \n        Quando necessario, assicurarti di inserire le utilità di margine per mantenere gli spazi equilibrati.\n      
      \n          \n  )\n};\n\nconst ChiusuraControllataWithHooks = ({ ...args }) => {\n  const [open, setOpen] = useState(true);\n\n  const closeAlert = () => setOpen(false);\n\n  return (\n    
      \n      \n        Attenzione: Alcuni campi inseriti sono da controllare.\n      \n    
      \n  );\n};\n\nexport const ChiusuraControllata: Story = {\n  render: (args) => ,\n  parameters: {\n    docs: {\n      canvas: { sourceState: 'none' }\n    }\n  },\n  args: {\n    color: 'warning'\n  }\n};\n"
  },
  {
    "path": "stories/Components/Avatar/Avatar.stories.tsx",
    "content": "import type { Meta, StoryObj } from '@storybook/react-vite';\r\nimport React, { useRef } from 'react';\r\nimport { AvatarContainer, AvatarExtraText, AvatarIcon, AvatarWrapper, Icon, UncontrolledTooltip } from '../../../src';\r\n\r\nconst meta: Meta = {\r\n  title: 'Documentazione/Componenti/Avatar',\r\n  component: AvatarIcon,\r\n  argTypes: {\r\n    color: {\r\n      control: 'select',\r\n      options: ['primary', 'secondary', 'green', 'orange', 'red']\r\n    }\r\n  }\r\n};\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj;\r\n\r\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\r\nconst AvatarWithImageWithHooks = (args: any) => {\r\n  return (\r\n    \r\n      \r\n        {args.results && args.results.length ? (\r\n          \r\n        ) : null}\r\n      \r\n    \r\n  );\r\n};\r\n\r\nexport const AvatarWithImage: Story = {\r\n  loaders: [\r\n    async () => ({\r\n      fakeUser: await (await fetch('https://randomuser.me/api')).json() //https://randomuser.me/documentation#howto\r\n    })\r\n  ],\r\n  render: (args, { loaded: { fakeUser } }) => \r\n};\r\n\r\nexport const AvatarWithText: Story = {\r\n  render: () => (\r\n    \r\n      \r\n        \r\n        Mario Rossi\r\n      \r\n      \r\n        \r\n        Mario Rossi\r\n      \r\n      \r\n        \r\n        Mario Rossi\r\n      \r\n      \r\n        \r\n        Mario Rossi\r\n      \r\n      \r\n        \r\n        Mario Rossi\r\n      \r\n      \r\n        \r\n        Mario Rossi\r\n      \r\n    \r\n  )\r\n};\r\n\r\nexport const AvatarWithIcon: Story = {\r\n  render: () => (\r\n    \r\n      \r\n        \r\n      \r\n      \r\n        \r\n      \r\n      \r\n        \r\n      \r\n      \r\n        \r\n      \r\n      \r\n        \r\n      \r\n      \r\n        \r\n      \r\n    \r\n  )\r\n};\r\n\r\nexport const AvatarLink: Story = {\r\n  render: () => (\r\n    \r\n      \r\n        Anna Barbieri\r\n      \r\n      \r\n        \r\n        Mario Rossi\r\n      \r\n      \r\n         console.log('Click')} />\r\n      \r\n    \r\n  )\r\n};\r\n\r\nconst AvatarLinkWithTooltipWithHooks = () => {\r\n  const withImageRef = useRef(null);\r\n  const withTextRef = useRef(null);\r\n  const withIconRef = useRef(null);\r\n\r\n  return (\r\n    \r\n      \r\n        \r\n          Anna Barbieri\r\n          
      \r\n          Administrator\r\n              \r\n        Anna Barbieri\r\n            \r\n      \r\n        \r\n          Mario Rossi\r\n          
      \r\n          Editor\r\n              \r\n        \r\n        Mario Rossi\r\n            \r\n      \r\n        \r\n        \r\n          Search\r\n          
      \r\n          News Archive\r\n              \r\n            \r\n          \r\n  );\r\n};\r\n\r\nexport const AvatarLinkWithTooltip: Story = {\r\n  render: () => ,\r\n  parameters: {\r\n    docs: {\r\n      canvas: { sourceState: 'none' }\r\n    }\r\n  }\r\n};\r\n\r\nexport const AvatarWithAdditionalText: Story = {\r\n  render: () => (\r\n    \r\n      \r\n        \r\n          Mario Rossi\r\n        \r\n        \r\n          
      \r\n            Mario Rossi\r\n          
      \r\n          \r\n              \r\n            \r\n      \r\n        \r\n          Guilia Neri\r\n        \r\n        \r\n          
      Guilia Neri
      \r\n          
      Lorem ipsum dolor
      \r\n              \r\n            \r\n      \r\n        \r\n          Michele Dotti\r\n        \r\n        \r\n          
      \r\n            Micehele Dotti\r\n          
      \r\n          \r\n              \r\n            \r\n          \r\n  )\r\n};\r\n"
  },
  {
    "path": "stories/Components/Avatar/AvatarBehaviour.stories.tsx",
    "content": "import { Meta, StoryObj } from \"@storybook/react-vite\";\r\nimport React from \"react\";\r\nimport { AvatarContainer, AvatarIcon, AvatarPresence, AvatarStatus, AvatarWrapper, Icon } from \"../../../src\";\r\n\r\nconst meta: Meta = {\r\n    title: \"Documentazione/Componenti/Avatar/Behavior\",\r\n    component: AvatarIcon,\r\n};\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj;\r\n\r\nexport const UserPresence: Story = {\r\n    render: () => (\r\n        
      \r\n            \r\n                \r\n                    \r\n                        \"Mario\r\n                        \r\n                            Presenza:attivo\r\n                        \r\n                    \r\n                \r\n                \r\n                    \r\n                        \"Luisa\r\n                        \r\n                            \r\n                            Presenza: non disponibile\r\n                        \r\n                    \r\n                \r\n                \r\n                    \r\n                        \"Gioacchino\r\n                        \r\n                            Presenza: invisible\r\n                        \r\n                    \r\n                \r\n            \r\n            \r\n                \r\n                    \r\n                        \"Ludovica\r\n                        \r\n                            \r\n                            Presenza: non disponibile\r\n                        \r\n                    \r\n                \r\n                \r\n                    \r\n                        \"Ludovica\r\n                        \r\n                            \r\n                            Presenza: non disponibile\r\n                        \r\n                    \r\n                \r\n                \r\n                    \r\n                        \"Ludovica\r\n                        \r\n                            \r\n                            Presenza: non disponibile\r\n                        \r\n                    \r\n                \r\n                \r\n                    \r\n                        \"Ludovica\r\n                        \r\n                            \r\n                            Presenza: non disponibile\r\n                        \r\n                    \r\n                \r\n            \r\n        
      \r\n    ),\r\n};\r\n\r\nexport const UserStatus: Story = {\r\n    render: () => (\r\n        
      \r\n            \r\n                \r\n                    \r\n                        \"Mario\r\n                        \r\n                            \r\n                            Stato: approvato\r\n                        \r\n                    \r\n                \r\n                \r\n                    \r\n                        \"Luisa\r\n                        \r\n                            \r\n                            Stato: respinto\r\n                        \r\n                    \r\n                \r\n                \r\n                    \r\n                        \"Gioacchino\r\n                        \r\n                            Testa notifica\r\n                        \r\n                    \r\n                \r\n            \r\n            \r\n                \r\n                    \r\n                        \"Ludovica\r\n                        \r\n                            \r\n                            Stato: approvato\r\n                        \r\n                    \r\n                \r\n                \r\n                    \r\n                        \"Ludovica\r\n                        \r\n                            \r\n                            Stato: respinto\r\n                        \r\n                    \r\n                \r\n                \r\n                    \r\n                        \"Ludovica\r\n                        \r\n                            \r\n                            Stato: approvato\r\n                        \r\n                    \r\n                \r\n                \r\n                    \r\n                        \"Ludovica\r\n                        \r\n                            \r\n                            Stato: approvato\r\n                        \r\n                    \r\n                \r\n            \r\n        
      \r\n    ),\r\n};\r\n"
  },
  {
    "path": "stories/Components/Avatar/AvatarGroupsList.stories.tsx",
    "content": "import type { Meta } from '@storybook/react-vite';\r\nimport React from \"react\";\r\nimport { AvatarIcon, Icon, LinkList, LinkListItem } from \"../../../src\";\r\n\r\nconst meta: Meta = {\r\n    title: \"Documentazione/Componenti/Avatar/Groups List\",\r\n    component: AvatarIcon,\r\n};\r\n\r\nexport default meta;\r\n\r\nexport const AvatarSmallList = () => {\r\n    return (\r\n        \r\n            \r\n                \r\n                    \"Mario\r\n                \r\n                Mario Rossi\r\n            \r\n            \r\n                \r\n                    
      A
      \r\n                      \r\n                Arianna Gallo\r\n                  \r\n            \r\n                \r\n                    
      S
      \r\n                      \r\n                Sara Ghione\r\n                  \r\n            \r\n                \r\n                    \r\n                \r\n                Antonio Esposito\r\n            \r\n              \r\n    );\r\n};\r\n\r\nexport const AvatarMediaList = () => {\r\n    return (\r\n        \r\n            \r\n                \r\n                    \"Mario\r\n                \r\n                Mario Rossi\r\n            \r\n            \r\n                \r\n                    
      AG
      \r\n                      \r\n                Arianna Gallo\r\n                  \r\n            \r\n                \r\n                    
      S
      \r\n                      \r\n                Sara Ghione\r\n                  \r\n            \r\n                \r\n                    \r\n                \r\n                Antonio Esposito\r\n            \r\n              \r\n    );\r\n};\r\n"
  },
  {
    "path": "stories/Components/Avatar/AvatarGroupsOverlapping.stories.tsx",
    "content": "import { Meta } from '@storybook/react-vite';\r\nimport React from 'react';\r\nimport {\r\n  AvatarGroupContainer,\r\n  AvatarIcon,\r\n  Dropdown,\r\n  DropdownMenu,\r\n  DropdownToggle,\r\n  Icon,\r\n  LinkList,\r\n  LinkListItem\r\n} from '../../../src';\r\n\r\nconst meta: Meta = {\r\n  title: 'Documentazione/Componenti/Avatar/Groups Overlapping',\r\n  component: AvatarGroupContainer\r\n};\r\n\r\nexport default meta;\r\n\r\nexport const SmallOverlappingAvatars = () => {\r\n  return (\r\n    \r\n      
    • \r\n        \r\n          Arianna Rossi\r\n        \r\n      
      • \r\n      
    • \r\n        \r\n          Giulio Neri\r\n        \r\n      
      • \r\n      
    • \r\n        \r\n          \r\n          Andrea Gallo\r\n        \r\n      
      • \r\n      
    • \r\n        \r\n          \r\n          Sara Ghioni\r\n        \r\n      
      • \r\n      
    • \r\n        \r\n          \r\n          Tomasso Sordi\r\n        \r\n      
      • \r\n      
    • \r\n        \r\n          \r\n          Barbera Tosi\r\n        \r\n      
      • \r\n      
    • \r\n        \r\n          \r\n          Roberto Milano\r\n        \r\n      
      • \r\n      
    • \r\n        \r\n          \r\n        \r\n      
      • \r\n      
    • \r\n        \r\n          \r\n            \r\n              Visualizza altri 4 utenti\r\n              \r\n            \r\n            \r\n              \r\n                \r\n                  \r\n                    Mario Rossi\r\n                  \r\n                  Mario Rossi\r\n                \r\n                \r\n                  \r\n                    \r\n                  \r\n                  Arianna Gello\r\n                \r\n                \r\n                  \r\n                    \r\n                  \r\n                  Sara Ghioni\r\n                \r\n                \r\n                  \r\n                    \r\n                  \r\n                  Antonio Esposito\r\n                \r\n              \r\n            \r\n          \r\n        \r\n      
      • \r\n          \r\n  );\r\n};\r\n\r\nexport const MediumOverlaidAvatars = () => {\r\n  return (\r\n    \r\n      
    • \r\n        \r\n          Arianna Rossi\r\n        \r\n      
      • \r\n      
    • \r\n        \r\n          Giulio Neri\r\n        \r\n      
      • \r\n      
    • \r\n        \r\n          \r\n          Barbera Tosi\r\n        \r\n      
      • \r\n      
    • \r\n        \r\n          \r\n          Roberto Milano\r\n        \r\n      
      • \r\n      
    • \r\n        \r\n          \r\n        \r\n      
      • \r\n      
    • \r\n        \r\n          \r\n            \r\n              Visualizza altri 4 utenti\r\n              \r\n            \r\n            \r\n              \r\n                \r\n                  Mario Rossi\r\n                \r\n                Mario Rossi\r\n              \r\n              \r\n                \r\n                  \r\n                \r\n                Arianna Gello\r\n              \r\n              \r\n                \r\n                  \r\n                \r\n                Sara Ghioni\r\n              \r\n              \r\n                \r\n                  \r\n                \r\n                Antonio Esposito\r\n              \r\n            \r\n          \r\n        \r\n      
      • \r\n          \r\n  );\r\n};\r\n"
  },
  {
    "path": "stories/Components/BackToTop.stories.tsx",
    "content": "import { Meta, StoryObj } from '@storybook/react-vite';\r\nimport React from 'react';\r\nimport { BackToTop } from '../../src';\r\n\r\nconst meta: Meta = {\r\n  title: 'Documentazione/Menu di navigazione/BackToTop',\r\n  component: BackToTop\r\n};\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj;\r\n\r\nexport const Esempio: Story = {\r\n  render: () => \r\n};\r\n\r\nexport const Small: Story = {\r\n  render: (args) => ,\r\n  args: {\r\n    small: true\r\n  }\r\n};\r\n\r\nexport const Shadow: Story = {\r\n  render: () => (\r\n    
      \r\n      \r\n      \r\n    
      \r\n  )\r\n};\r\n\r\nexport const Dark: Story = {\r\n  render: () => (\r\n    
      \r\n      \r\n      \r\n    
      \r\n  )\r\n};\r\n\r\nexport const DarkShadow: Story = {\r\n  render: () => (\r\n    
      \r\n      \r\n      \r\n    
      \r\n  )\r\n};\r\n"
  },
  {
    "path": "stories/Components/Badge.stories.tsx",
    "content": "import { Meta, StoryObj } from \"@storybook/react-vite\";\r\nimport React from \"react\";\r\nimport { componentColor } from \"../../.storybook/stories-helper\";\r\nimport { Badge, Button } from \"../../src\";\r\n\r\nconst meta: Meta = {\r\n    title: \"Documentazione/Componenti/Badge\",\r\n    component: Badge,\r\n    args: {\r\n        color: \"secondary\",\r\n    },\r\n    argTypes: {\r\n        color: {\r\n            control: \"select\",\r\n            options: componentColor,\r\n        },\r\n    },\r\n};\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj;\r\n\r\nexport const EsempioInterattivo: Story = {\r\n    render: ({ ...args }) => Badge,\r\n    parameters: {\r\n        layout: \"centered\",\r\n    },\r\n};\r\n\r\nexport const DiffenteGrandezza: Story = {\r\n    render: () => (\r\n        
      \r\n            
      \r\n                Titolo di esempio New\r\n            
      \r\n            
      \r\n                Titolo di esempio New\r\n            
      \r\n            
      \r\n                Titolo di esempio New\r\n            
      \r\n            
      \r\n                Titolo di esempio New\r\n            
      \r\n            
      \r\n                Titolo di esempio New\r\n            
      \r\n            
      \r\n                Titolo di esempio New\r\n            
      \r\n        
      \r\n    ),\r\n};\r\n\r\nexport const Contatore = {\r\n    render: () => (\r\n        \r\n    ),\r\n};\r\n\r\nexport const ContatoreTestoAggiuntivo = {\r\n    render: () => (\r\n        \r\n    ),\r\n};\r\n\r\nexport const Variazioni = {\r\n    render: () => (\r\n        
      \r\n            Primary\r\n            Secondary\r\n            Success\r\n            Danger\r\n            Warning\r\n        
      \r\n    ),\r\n};\r\n\r\nexport const BordiArrotondati = {\r\n    render: () => (\r\n        
      \r\n            \r\n                Primary\r\n            \r\n            \r\n                Secondary\r\n            \r\n            \r\n                Success\r\n            \r\n            \r\n                Danger\r\n            \r\n            \r\n                Warning\r\n            \r\n        
      \r\n    ),\r\n};\r\n\r\nexport const ConLink = {\r\n    render: () => (\r\n        
      \r\n            \r\n                Primary\r\n            \r\n            \r\n                Secondary\r\n            \r\n            \r\n                Success\r\n            \r\n            \r\n                Danger\r\n            \r\n            \r\n                Warning\r\n            \r\n        
      \r\n    ),\r\n};\r\n"
  },
  {
    "path": "stories/Components/BottomNav.stories.tsx",
    "content": "import { Meta, StoryObj } from \"@storybook/react-vite\";\r\nimport React from \"react\";\r\nimport { BottomNav, BottomNavItem } from \"../../src\";\r\n\r\nconst meta: Meta = {\r\n    title: \"Documentazione/Menu di navigazione/BottomNav\",\r\n    component: BottomNav,\r\n    parameters: {\r\n        docs: {\r\n            story: {\r\n                height: '150px'\r\n            },\r\n        }\r\n    }\r\n};\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj;\r\n\r\nexport const Esempi: Story = {\r\n    render: () => (\r\n        \r\n            \r\n            \r\n            \r\n        \r\n    ),\r\n};\r\n\r\nexport const Esempi4Links: Story = {\r\n    render: () => (\r\n        \r\n            \r\n            \r\n            \r\n            \r\n        \r\n    ),\r\n};\r\n\r\nexport const EsempioBadge: Story = {\r\n    render: () => (\r\n        \r\n            \r\n            \r\n            \r\n            \r\n            \r\n        \r\n    ),\r\n};\r\n\r\nexport const Alert: Story = {\r\n    render: () => (\r\n        \r\n            \r\n            \r\n            \r\n            \r\n            \r\n        \r\n    ),\r\n};\r\n"
  },
  {
    "path": "stories/Components/Breadcrumb.stories.tsx",
    "content": "import { Meta, StoryObj } from \"@storybook/react-vite\";\r\nimport React from \"react\";\r\nimport { Breadcrumb, BreadcrumbItem, Icon } from \"../../src\";\r\n\r\nconst meta: Meta = {\r\n    title: \"Documentazione/Menu di navigazione/Breadcrumbs\",\r\n    component: Breadcrumb,\r\n};\r\n\r\nexport default meta;\r\ntype Story = StoryObj;\r\n\r\nexport const Esempi: Story = {\r\n    render: () => (\r\n        
      \r\n            \r\n                \r\n                    Home\r\n                    /\r\n                \r\n                \r\n                    Subsection\r\n                    /\r\n                \r\n                Current section\r\n            \r\n\r\n            \r\n                \r\n                    Home\r\n                    >\r\n                \r\n                \r\n                    Subsection\r\n                    >\r\n                \r\n                Current section\r\n            \r\n        
      \r\n    ),\r\n};\r\n\r\nexport const ConIcone: Story = {\r\n    render: () => (\r\n        
      \r\n            \r\n                \r\n                    \r\n                    Home\r\n                    /\r\n                \r\n                \r\n                    \r\n                    Subsection\r\n                    /\r\n                \r\n                \r\n                    \r\n                    Current section\r\n                \r\n            \r\n        
      \r\n    ),\r\n};\r\n\r\nexport const SuSfondoScuro: Story = {\r\n    render: () => (\r\n        
      \r\n            \r\n                \r\n                    Home\r\n                    /\r\n                \r\n                \r\n                    Subsection\r\n                    /\r\n                \r\n                Current section\r\n            \r\n\r\n            \r\n                \r\n                    \r\n                    Home\r\n                    /\r\n                \r\n                \r\n                    \r\n                    Subsection\r\n                    /\r\n                \r\n                \r\n                    \r\n                    Current section\r\n                \r\n            \r\n        
      \r\n    ),\r\n};\r\n"
  },
  {
    "path": "stories/Components/Button.stories.tsx",
    "content": "import { Meta, StoryObj } from \"@storybook/react-vite\";\r\nimport React from \"react\";\r\nimport { Button, Icon } from \"../../src\";\r\n\r\nconst colors = [\"primary\", \"secondary\", \"success\", \"info\", \"danger\", \"warning\", \"link\"];\r\n\r\nconst meta: Meta = {\r\n    title: \"Documentazione/Componenti/Button\",\r\n    component: Button,\r\n    parameters: {\r\n        layout: \"centered\",\r\n    },\r\n};\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj;\r\n\r\nexport const EsempioInterattivo: Story = {\r\n    render: ({ ...args }) => {\r\n        return ;\r\n    },\r\n    args: {\r\n        color: \"primary\",\r\n    },\r\n    argTypes: {\r\n        color: {\r\n            control: \"select\",\r\n            options: colors,\r\n        },\r\n    },\r\n};\r\n\r\nexport const Tipologie: Story = {\r\n    render: () => {\r\n        return (\r\n            
      \r\n                \r\n                \r\n                
      \r\n        );\r\n    },\r\n};\r\n\r\nexport const VariantiColore: Story = {\r\n    render: () => {\r\n        return (\r\n            <>\r\n                
      \r\n                    \r\n                    \r\n                    \r\n                    \r\n                
      \r\n                
      \r\n                    \r\n                    \r\n                    \r\n                    \r\n                
      \r\n                
      \r\n                    \r\n                    \r\n                    \r\n                    \r\n                
      \r\n                
      \r\n                    \r\n                    \r\n                    \r\n                    \r\n                
      \r\n                
      \r\n                    \r\n                    \r\n                    \r\n                    \r\n                
      \r\n            \r\n        );\r\n    },\r\n};\r\n\r\nexport const SfondoScuro: Story = {\r\n    render: () => (\r\n        
      \r\n            
      \r\n                \r\n                \r\n                \r\n                \r\n            
      \r\n            
      \r\n                \r\n                \r\n                \r\n                \r\n            
      \r\n        
      \r\n    ),\r\n};\r\n\r\nexport const VariantiDiDimensione: Story = {\r\n    render: () => (\r\n        
      \r\n            
      \r\n                \r\n                \r\n                
      \r\n                \r\n                \r\n                
      \r\n                \r\n                \r\n                
      \r\n                \r\n                \r\n            
      \r\n        
      \r\n    ),\r\n    parameters: {\r\n        layout: \"padded\",\r\n    },\r\n};\r\n\r\nexport const BottoniConIcona: Story = {\r\n    render: () => (\r\n        
      \r\n            \r\n            \r\n            \r\n            \r\n        
      \r\n    ),\r\n};\r\n\r\nexport const BottoniConIconaCerchiata: Story = {\r\n    render: () => (\r\n        
      \r\n            \r\n            \r\n            \r\n            \r\n        
      \r\n    ),\r\n};\r\n"
  },
  {
    "path": "stories/Components/Callout.stories.tsx",
    "content": "import type { Meta, StoryObj } from '@storybook/react-vite';\r\nimport React from 'react';\r\n\r\nimport { Callout, CalloutMoreFooter, CalloutText, CalloutTitle, Icon } from '../../src';\r\n\r\nconst meta: Meta = {\r\n  title: 'Documentazione/Componenti/Callout',\r\n  component: Callout,\r\n  parameters: {\r\n    layout: 'centered'\r\n  }\r\n};\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj;\r\n\r\nexport const EsempioBasico: Story = {\r\n  render: () => (\r\n    \r\n      \r\n        Titolo Callout\r\n      \r\n      \r\n        Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\r\n        Aenean non augue non purus vestibulum varius.\r\n      \r\n    \r\n  )\r\n};\r\n\r\nexport const EsempioConIcona: Story = {\r\n  render: () => (\r\n    \r\n      \r\n        \r\n        Confermato\r\n        Titolo Callout\r\n      \r\n      \r\n        Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\r\n        Aenean non augue non purus vestibulum varius.\r\n      \r\n    \r\n  )\r\n};\r\n\r\nexport const EsempioAccessibilita: Story = {\r\n  render: () => (\r\n    \r\n      \r\n        \r\n        Confermato\r\n        Titolo Callout\r\n      \r\n      \r\n        Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\r\n        Aenean non augue non purus vestibulum varius.\r\n      \r\n    \r\n  )\r\n};\r\n\r\nexport const CalloutVariantiColore = {\r\n  render: ({ ...args }) => (\r\n    \r\n      \r\n        \r\n        {args.title}\r\n      \r\n      \r\n        Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\r\n        Aenean non augue non purus vestibulum varius.\r\n      \r\n    \r\n  ),\r\n  parameters: {\r\n    docs: {\r\n      controls: {\r\n        exclude: ['title', 'className', 'tag', 'title', 'highlight', 'detailed', 'testId']\r\n      }\r\n    }\r\n  },\r\n  /**\r\n   * Da verificare un modo per modificare l'icon al cambio del colore\r\n   */\r\n  args: {\r\n    color: 'success',\r\n    icon: 'check',\r\n    title: 'Usa'\r\n  },\r\n  argTypes: {\r\n    color: {\r\n      control: 'radio',\r\n      options: ['success', 'warning', 'danger', 'note', 'important']\r\n    },\r\n    icon: {\r\n      control: 'radio',\r\n      options: ['check', 'help', 'close', 'info']\r\n    }\r\n  }\r\n};\r\n\r\nexport const CalloutHighlights = {\r\n  render: ({ ...args }) => (\r\n    \r\n      \r\n        \r\n        {args.title}\r\n      \r\n      \r\n        Maecenas at erat id sem interdum efficitur eu sed nunc. Mauris sit amet erat eget augue molestie malesuada ut\r\n        sed ex. In sed dignissim elit.\r\n      \r\n      \r\n        Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\r\n        Aenean non augue non purus vestibulum varius. Maecenas ullamcorper tincidunt nulla quis laoreet.\r\n      \r\n    \r\n  ),\r\n  parameters: {\r\n    docs: {\r\n      controls: {\r\n        exclude: ['title', 'className', 'tag', 'title', 'highlight', 'detailed', 'testId']\r\n      }\r\n    }\r\n  },\r\n  /**\r\n   * Da verificare un modo per modificare l'icon e il titolo al cambio del colore\r\n   */\r\n  args: {\r\n    color: 'success',\r\n    icon: 'check',\r\n    title: 'Titolo'\r\n  },\r\n  argTypes: {\r\n    color: {\r\n      control: 'radio',\r\n      options: ['success', 'warning', 'danger', 'note', 'important']\r\n    },\r\n    icon: {\r\n      control: 'radio',\r\n      options: ['check', 'help', 'close', 'info']\r\n    }\r\n  }\r\n};\r\n\r\nexport const CalloutApprofondimento = {\r\n  render: () => (\r\n    \r\n      \r\n        \r\n        Approfondimento\r\n      \r\n      \r\n        Quisque suscipit interdum augue non volutpat. Cras tristique arcu tortor. Mauris eu magna nibh. Curabitur\r\n        malesuada neque in lectus sagittis accumsan. In vitae justo eros. Maecenas pellentesque lacinia ipsum vitae\r\n        rhoncus. Vestibulum pretium tempor turpis, nec gravida eros viverra in. Proin dictum nibh ut semper tristique.\r\n      \r\n      \r\n        Maecenas at erat id sem interdum efficitur eu sed nunc. Mauris sit amet erat eget augue\r\n        molestie malesuada ut sed ex. In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat\r\n        interdum magna, eu commodo odio mauris semper dolor.\r\n      \r\n      \r\n        Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet,{' '}\r\n        consectetur adipiscing elit. Aenean non augue non purus vestibulum varius. Maecenas ullamcorper\r\n        tincidunt nulla quis laoreet.\r\n      \r\n      \r\n        
      \r\n          Aenean tortor enim, suscipit eget commodo at, imperdiet quis diam. Vestibulum non accumsan felis, at ultrices\r\n          lorem. Pellentesque ac diam a ipsum cursus interdum id nec odio. Vestibulum nec congue mauris. Aliquam et dui\r\n          purus. Mauris in imperdiet risus, sed blandit tellus. Donec posuere accumsan lacinia. Mauris dignissim, sem\r\n          vel volutpat rhoncus, neque mi ullamcorper ante, vitae volutpat ipsum quam id purus. Duis tincidunt sodales\r\n          nisl eget ultricies. Sed condimentum mi eu ex venenatis, quis bibendum dui ultrices. Quisque ex eros,\r\n          pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum\r\n          scelerisque magna nec malesuada.\r\n        
      \r\n        
      \r\n          Maecenas at erat id sem interdum efficitur eu sed nunc. Mauris sit amet erat eget augue\r\n          molestie malesuada ut sed ex. In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat\r\n          interdum magna, eu commodo odio mauris semper dolor.\r\n        
      \r\n        
      \r\n          Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet,{' '}\r\n          consectetur adipiscing elit. Aenean non augue non purus vestibulum varius. Maecenas\r\n          ullamcorper tincidunt nulla quis laoreet.\r\n        
      \r\n            \r\n          \r\n  )\r\n};\r\n"
  },
  {
    "path": "stories/Components/Card.stories.tsx",
    "content": "import { Meta, StoryObj } from '@storybook/react-vite';\nimport React from 'react';\n\nimport {\n  Card,\n  Col,\n  Row\n} from '../../src';\n\nconst meta: Meta = {\n  title: 'Documentazione/Componenti/Cards',\n  component: Card\n};\n\nexport default meta;\n\ntype Story = StoryObj;\n\nexport const SimpleCard: Story = {\n  render: () => (\n    \n      \n        {/* start card */}\n        \n          
      \n            Titolo del contenuto\n          
      \n          
      \n            
      \n              
      \n                \"Breve\n              
      \n            
      \n          
      \n          
      \n            
      Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.
      \n          
      \n          
      \n            \n          
      \n              \n        {/* end card */}\n      \n          \n  )\n};\n\nexport const EditorialStandard: Story = {\n  render: () => (\n    \n      \n        {/* start card */}\n        \n          
      \n            Titolo del contenuto\n          
      \n          
      \n            
      \n              
      \n                \"Breve\n              
      \n            
      \n          
      \n          
      \n            
      Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.
      \n          
      \n          \n              \n        {/* end card */}\n      \n      \n        {/* start card */}\n        \n          
      \n            Titolo del contenuto\n          
      \n          
      \n            
      \n              
      \n                \"Breve\n              
      \n            
      \n          
      \n          
      \n            
      Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.
      \n          
      \n          \n              \n        {/* end card */}\n      \n      \n        {/* start card */}\n        \n          
      \n            Titolo del contenuto\n          
      \n          
      \n            
      Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.
      \n          
      \n          
      \n            \n          
      \n              \n        {/* end card */}\n      \n          \n  )\n};\n"
  },
  {
    "path": "stories/Components/Carousel.stories.tsx",
    "content": "import { Meta, StoryObj } from '@storybook/react-vite';\nimport React from 'react';\nimport {\n  Container, Carousel, CarouselSlide,\n  Card,\n  ResponsiveImage\n} from '../../src';\n\n//Non esiste un componente specifico per cui uso Container come riferimento per la storia\nconst meta: Meta = {\n  title: 'Documentazione/Componenti/Carousel',\n  component: Container,\n};\n\nexport default meta;\n\ntype Story = StoryObj;\n\nconst carouselSlide =\n  \n    \n      
      \n        Titolo del contenuto\n      
      \n      
      \n        
      Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.
      \n      
      \n      
      \n        \n      
      \n          \n        \n\nconst carouselSlides: React.JSX.Element[] = []\n\nfor (let i = 0; i < 10; i++) {\n  carouselSlides.push(carouselSlide);\n}\n\nconst carouselSlideLandscapeImage = \n  
      \n    \n      
      \n        
      \n          Titolo contenuto editoriale\n        
      \n        
      \n          
      di Maria Verde
      \n          
      Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.
      \n        
      \n        \n      
      \n      
      \n        
      \n          
      \n            \"Breve\n          
      \n        
      \n      
      \n          \n  
      \n      \n\nconst carouselSlidesLandascapeImages: React.JSX.Element[] = []\n\nfor (let i = 0; i < 3; i++) {\n  carouselSlidesLandascapeImages.push(carouselSlideLandscapeImage);\n}\n\n\nconst carouselHighImage = \n  \n    
      \n      Titolo del contenuto\n    
      \n    
      \n      
      \n        
      \n          \"Breve\n        
      \n      
      \n    
      \n    
      \n      
      Questo è un testo breve.
      \n    
      \n    \n        \n      \n\n\nconst carouselHighImages: React.JSX.Element[] = []\n\nfor (let i = 0; i < 10; i++) {\n  carouselHighImages.push(carouselHighImage);\n}\n\n\nconst carouselFullscreenImage = \n  \n    \n  \n\n\nconst carouselFullscreenImages: React.JSX.Element[] = []\n\nfor (let i = 0; i < 10; i++) {\n  carouselFullscreenImages.push(carouselFullscreenImage);\n}\n\nexport const Base: Story = {\n  render: () => (\n    \n      {carouselSlides}\n    \n  )\n};\n\nexport const EvidenceImage: Story = {\n  render: () => (\n    \n      {carouselSlidesLandascapeImages}\n    \n  )\n};\n\nexport const HighImage: Story = {\n  render: () => (\n    \n      {carouselHighImages}\n    \n  )\n};\n\n"
  },
  {
    "path": "stories/Components/Chips.stories.tsx",
    "content": "import { Meta, StoryObj } from '@storybook/react-vite';\r\nimport React from 'react';\r\nimport { Button, Chip, ChipLabel, Col, Icon, Row } from '../../src';\r\n\r\nconst meta: Meta = {\r\n  title: \"Documentazione/Componenti/Chips\",\r\n  component: Chip,\r\n};\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj;\r\n\r\nexport const Esempi: Story = {\r\n  render: () => (\r\n    \r\n      \r\n        
      Versione Standard
      \r\n        
      Solo testo
      \r\n        \r\n          Label\r\n        \r\n        
      Testo e chiusura
      \r\n        \r\n          Label\r\n          \r\n        \r\n        
      Icona, testo e chiusura
      \r\n        \r\n          \r\n          Label\r\n          \r\n        \r\n        
      Avatar, testo e chiusura
      \r\n        \r\n          
      \r\n            Mario Rossi\r\n          
      \r\n          Label\r\n          \r\n              \r\n      \r\n      \r\n        
      Versione Grande
      \r\n        
      Solo testo
      \r\n        \r\n          Label\r\n        \r\n        
      Testo e chiusura
      \r\n        \r\n          Label\r\n          \r\n        \r\n        
      Icona, testo e chiusura
      \r\n        \r\n          \r\n          Label\r\n          \r\n        \r\n        
      Avatar, testo e chiusura
      \r\n        \r\n          
      \r\n            Mario Rossi\r\n          
      \r\n          Label\r\n          \r\n              \r\n      \r\n          \r\n  )\r\n};\r\n\r\nexport const ChipDisabilitata: Story = {\r\n  render: () => (\r\n    
      \r\n      \r\n        Label Disabled\r\n      \r\n      \r\n        Label Disabled\r\n        \r\n      \r\n      \r\n        \r\n        Label Disabled\r\n        \r\n      \r\n      \r\n        
      \r\n          Mario Rossi\r\n        
      \r\n        Label\r\n        \r\n            \r\n    
      \r\n  )\r\n};\r\n\r\nexport const GruppiDiChip: Story = {\r\n  render: () => (\r\n    
      \r\n      \r\n        Label\r\n      \r\n      \r\n        Label\r\n        \r\n      \r\n      \r\n        \r\n        Label \r\n        \r\n      \r\n      \r\n        
      \r\n          Mario Rossi\r\n        
      \r\n        Label\r\n        \r\n            \r\n      
      \r\n      \r\n        Label\r\n      \r\n      \r\n        Label\r\n        \r\n      \r\n      \r\n        \r\n        Label \r\n        \r\n      \r\n      \r\n        
      \r\n          Mario Rossi\r\n        
      \r\n        Label\r\n        \r\n            \r\n    
      \r\n  )\r\n};\r\n\r\nexport const VariantiDiColore: Story = {\r\n  render: () => (\r\n    
      \r\n      
      Primary color
      \r\n      \r\n        Primary\r\n      \r\n      
      Warning Color
      \r\n      \r\n        Warning\r\n      \r\n      
      Success Color
      \r\n      \r\n        Success\r\n      \r\n      
      Danger Color
      \r\n      \r\n        Danger\r\n      \r\n      
      Info Color
      \r\n      \r\n        Information\r\n      \r\n    
      \r\n  )\r\n};\r\n"
  },
  {
    "path": "stories/Components/Color.stories.tsx",
    "content": "import { Meta } from '@storybook/react-vite';\r\nimport React from 'react';\r\n\r\nconst meta: Meta = {\r\n  title: \"Documentazione/Utilities/Colori\",\r\n};\r\n\r\nexport default meta;\r\n\r\nexport const ColoriTesto = () => (\r\n  <>\r\n    
      .text-primary
      \r\n    
      .text-secondary
      \r\n    
      .text-success
      \r\n    
      .text-danger
      \r\n    
      .text-warning
      \r\n    
      .text-muted
      \r\n    
      .text-white
      \r\n  \r\n);\r\n\r\nexport const ColoriSfondo = () => (\r\n  <>\r\n    
      .bg-primary
      \r\n    
      .bg-secondary
      \r\n    
      .bg-success
      \r\n    
      .bg-danger
      \r\n    
      .bg-warning
      \r\n    
      .bg-white
      \r\n  \r\n);"
  },
  {
    "path": "stories/Components/ColorCustom.stories.tsx",
    "content": "import { Meta } from '@storybook/react-vite';\r\nimport React from 'react';\r\nimport { Col, Row } from '../../src';\r\n\r\nconst meta: Meta = {\r\n  title: \"Documentazione/Utilities/Colori Custom\",\r\n};\r\n\r\nexport default meta;\r\n\r\nexport const ColoriCustom = () => (\r\n  <>\r\n    
      \r\n      Testo bianco su background colore primario\r\n    
      \r\n    
      \r\n      Testo colore primario su background con bordo primario\r\n    
      \r\n  \r\n);\r\n\r\nexport const VariantiColore = () => (\r\n  
      \r\n    \r\n      \r\n        
      Tinte e ombre
      \r\n        
      a1
      \r\n        
      a2
      \r\n        
      a3
      \r\n        
      a4
      \r\n        
      a5
      \r\n        
      a6
      \r\n        
      a7
      \r\n        
      a8
      \r\n        
      a9
      \r\n        
      a10
      \r\n        
      a11
      \r\n        
      a12
      \r\n      \r\n      \r\n        
      Toni
      \r\n        
      b1
      \r\n        
      b2
      \r\n        
      b3
      \r\n        
      b4
      \r\n        
      b5
      \r\n        
      b6
      \r\n        
      b7
      \r\n      \r\n      \r\n        
      Variazione di saturazione
      \r\n        
      c1
      \r\n        
      c2
      \r\n        
      c3
      \r\n        
      c4
      \r\n        
      c5
      \r\n        
      c6
      \r\n        
      c7
      \r\n        
      c8
      \r\n        
      c9
      \r\n        
      c10
      \r\n        
      c11
      \r\n        
      c12
      \r\n      \r\n          \r\n  
      \r\n);\r\n\r\nexport const ColoriCustomSecondari = () => (\r\n  <>\r\n    
      \r\n      Testo bianco su background colore analogo 1\r\n    
      \r\n    
      \r\n      Testo colore analogo 1 su background colore analogo 2\r\n    
      \r\n  \r\n);\r\n\r\nexport const ColoriCustomComplementariETriadici = () => (\r\n  <>\r\n    
      \r\n      Testo su background colore complementare 1\r\n    
      \r\n    
      \r\n      Testo su background colore complementare 2\r\n    
      \r\n    
      \r\n      Testo su background colore complementare 3\r\n    
      \r\n  \r\n);\r\n\r\nexport const ColoriCustomSecondariAnaloghi = () => (\r\n  <>\r\n    \r\n      \r\n        
      a1 
      \r\n        
      a2 
      \r\n        
      a3 
      \r\n        
      a4 
      \r\n        
      a5 
      \r\n        
      a6 
      \r\n        
      a7 
      \r\n        
      a8 
      \r\n        
      a9 
      \r\n        
      a10 
      \r\n        
      a11 
      \r\n        
      a12 
      \r\n      \r\n      \r\n        
      b1
      \r\n        
      b2
      \r\n        
      b3
      \r\n        
      b4
      \r\n        
      b5
      \r\n        
      b6
      \r\n        
      b7
      \r\n        
      b8
      \r\n      \r\n      \r\n        
      a1
      \r\n        
      a2
      \r\n        
      a3
      \r\n        
      a4
      \r\n        
      a5
      \r\n        
      a6
      \r\n        
      a7
      \r\n        
      a8
      \r\n        
      a9
      \r\n        
      a10
      \r\n        
      a11
      \r\n        
      a12
      \r\n      \r\n      \r\n        
      b1
      \r\n        
      b2
      \r\n        
      b3
      \r\n        
      b4
      \r\n        
      b5
      \r\n        
      b6
      \r\n        
      b7
      \r\n        
      b8
      \r\n      \r\n          \r\n  \r\n);\r\n\r\nexport const ColoriSecondariCustomComplementariETriadici = () => (\r\n  \r\n    \r\n      
      a1
      \r\n      
      a2
      \r\n      
      a3
      \r\n      
      a4
      \r\n      
      a5
      \r\n      
      a6
      \r\n      
      a7
      \r\n      
      a8
      \r\n      
      a9
      \r\n      
      a10
      \r\n      
      a11
      \r\n      
      a12
      \r\n    \r\n    \r\n      
      b1
      \r\n      
      b2
      \r\n      
      b3
      \r\n      
      b4
      \r\n      
      b5
      \r\n      
      b6
      \r\n      
      b7
      \r\n      
      b8
      \r\n    \r\n    \r\n      
      a1
      \r\n      
      a2
      \r\n      
      a3
      \r\n      
      a4
      \r\n      
      a5
      \r\n      
      a6
      \r\n      
      a7
      \r\n      
      a8
      \r\n      
      a9
      \r\n      
      a10
      \r\n      
      a11
      \r\n      
      a12
      \r\n    \r\n    \r\n      
      b1
      \r\n      
      b2
      \r\n      
      b3
      \r\n      
      b4
      \r\n      
      b5
      \r\n      
      b6
      \r\n      
      b7
      \r\n      
      b8
      \r\n    \r\n    \r\n      
      a1
      \r\n      
      a2
      \r\n      
      a3
      \r\n      
      a4
      \r\n      
      a5
      \r\n      
      a6
      \r\n      
      a7
      \r\n      
      a8
      \r\n      
      a9
      \r\n      
      a10
      \r\n      
      a11
      \r\n      
      a12
      \r\n    \r\n    \r\n      
      b1
      \r\n      
      b2
      \r\n      
      b3
      \r\n      
      b4
      \r\n      
      b5
      \r\n      
      b6
      \r\n      
      b7
      \r\n      
      b8
      \r\n    \r\n        \r\n);\r\n\r\nexport const ColoriNeutraliCustom = () => (\r\n  <>\r\n    
      \r\n      Testo bianco su background colore neutrale 1\r\n    
      \r\n    
      \r\n      Testo su background colore neutrale 2\r\n    
      \r\n  \r\n);\r\n\r\nexport const VarianteColoriNeutraliCustom = () => (\r\n  \r\n    \r\n      
      a1
      \r\n      
      a2
      \r\n      
      a3
      \r\n      
      a4
      \r\n      
      a5
      \r\n      
      a6
      \r\n      
      a7
      \r\n      
      a8
      \r\n      
      a9
      \r\n      
      a10
      \r\n    \r\n    \r\n      
      b1
      \r\n      
      b2
      \r\n      
      b3
      \r\n      
      b4
      \r\n      
      b5
      \r\n      
      b6
      \r\n      
      b7
      \r\n    \r\n    \r\n      
      a1
      \r\n      
      a2
      \r\n      
      a3
      \r\n      
      a4
      \r\n      
      a5
      \r\n      
      a6
      \r\n      
      a7
      \r\n    \r\n        \r\n);\r\n\r\nexport const ColoriGrigiChiariCustom = () => (\r\n  \r\n    \r\n      
      a1
      \r\n      
      a2
      \r\n      
      a3
      \r\n      
      a4
      \r\n    \r\n    \r\n      
      b1
      \r\n      
      b2
      \r\n      
      b3
      \r\n      
      b4
      \r\n    \r\n    \r\n      
      c1
      \r\n      
      c2
      \r\n    \r\n        \r\n);\r\n"
  },
  {
    "path": "stories/Components/Dimmer.stories.tsx",
    "content": "import { Meta, StoryObj } from '@storybook/react-vite';\nimport React from 'react';\nimport { Button, Card, Dimmer, DimmerButtons } from '../../src';\n\nconst colors = ['primary', 'secondary'];\n\nconst meta: Meta = {\n  title: 'Documentazione/Componenti/Dimmer',\n  component: Dimmer\n};\n\nexport default meta;\n\ntype Story = StoryObj;\n\nexport const Esempi: Story = {\n  parameters: {\n    docs: {\n      controls: {\n        include: ['color', 'show', 'icon']\n      }\n    }\n  },\n  render: ({ ...args }) => (\n    
      \n      
      \n        
      \n          {/* start card */}\n          \n            
      \n              Titolo del contenuto\n            
      \n            
      \n              
      \n                
      \n                  \"Breve\n                
      \n              
      \n            
      \n            
      \n              
      Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.
      \n            
      \n            
      \n              \n            
      \n                \n          {/* end card */}\n        
      \n\n        
      \n          {/* start card */}\n          \n            
      \n              Titolo del contenuto\n            
      \n            
      \n              
      \n                
      \n                  \"Breve\n                
      \n              
      \n            
      \n            
      \n              
      Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.
      \n            
      \n            
      \n              \n            
      \n                \n          {/* end card */}\n        
      \n        
      \n          {/* start card */}\n          \n            
      \n              Titolo del contenuto\n            
      \n            
      \n              
      \n                
      \n                  \"Breve\n                
      \n              
      \n            
      \n            
      \n              
      Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.
      \n            
      \n            
      \n              \n            
      \n                \n        
      \n      
      \n      \n        
      \n          Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo\n          donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.\n        
      \n            \n    
      \n  ),\n  args: {\n    color: 'primary',\n    show: true,\n    icon: 'it-unlocked'\n  },\n  argTypes: {\n    color: {\n      control: 'radio',\n      options: colors\n    },\n    show: {\n      control: 'boolean'\n    },\n    icon: {\n      control: 'text'\n    }\n  }\n};\n\nexport const DimmerConAzioni: Story = {\n  render: () => (\n    
      \n      
      \n        
      \n          {/* start card */}\n          \n            
      \n              Titolo del contenuto\n            
      \n            
      \n              
      \n                
      \n                  \"Breve\n                
      \n              
      \n            
      \n            
      \n              
      Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.
      \n            
      \n            
      \n              \n            
      \n                \n          {/* end card */}\n        
      \n        
      \n          {/* start card */}\n          \n            
      \n              Titolo del contenuto\n            
      \n            
      \n              
      \n                
      \n                  \"Breve\n                
      \n              
      \n            
      \n            
      \n              
      Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.
      \n            
      \n            
      \n              \n            
      \n                \n          {/* end card */}\n        
      \n      
      \n      \n        
      Titolo Dimmer
      \n        \n          \n          \n        \n            \n    
      \n  )\n};\n\nexport const DimmerConAzioniColorePrimario: Story = {\n  render: () => (\n    
      \n      
      \n        
      \n          {/* start card */}\n          \n            
      \n              Titolo del contenuto\n            
      \n            
      \n              
      \n                
      \n                  \"Breve\n                
      \n              
      \n            
      \n            
      \n              
      Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.
      \n            
      \n            
      \n              \n            
      \n                \n          {/* end card */}\n        
      \n        
      \n          {/* start card */}\n          \n            
      \n              Titolo del contenuto\n            
      \n            
      \n              
      \n                
      \n                  \"Breve\n                
      \n              
      \n            
      \n            
      \n              
      Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.
      \n            
      \n            
      \n              \n            
      \n                \n          {/* end card */}\n        
      \n      
      \n      \n        
      Titolo Dimmer
      \n        \n          \n        \n            \n    
      \n  )\n};\n"
  },
  {
    "path": "stories/Components/Dropdown/Dropdown.stories.tsx",
    "content": "import { Meta, StoryObj } from \"@storybook/react-vite\";\r\nimport React from \"react\";\r\nimport { ButtonGroup, Dropdown, DropdownMenu, DropdownToggle, LinkList, LinkListItem } from \"../../../src\";\r\n\r\nconst meta: Meta = {\r\n    title: \"Documentazione/Componenti/Dropdown\",\r\n    component: Dropdown,\r\n    parameters: {\r\n        docs: {\r\n            story: {\r\n                height: '225px'\r\n            }\r\n        }\r\n    }\r\n};\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj;\r\n\r\nexport const _VarianteBottoni: Story = {\r\n    render: () => {\r\n        return (\r\n            \r\n                \r\n                    \r\n                        Apri dropdown\r\n                    \r\n                    \r\n                        \r\n                            Azione 1\r\n                            Azione 2\r\n                            Azione 3\r\n                        \r\n                    \r\n                \r\n                \r\n                    \r\n                        Apri dropdown\r\n                    \r\n                    \r\n                        \r\n                            Azione 1\r\n                            Azione 2\r\n                            Azione 3\r\n                        \r\n                    \r\n                \r\n                \r\n                    \r\n                        Apri dropdown\r\n                    \r\n                    \r\n                        \r\n                            Azione 1\r\n                            Azione 2\r\n                            Azione 3\r\n                        \r\n                    \r\n                \r\n            \r\n        );\r\n    },\r\n    //Aggiungo del margine alla storia così da visualizzare il bordo onClick correttamente\r\n    decorators: [\r\n        (Story) => (\r\n            
      \r\n                \r\n            
      \r\n        ),\r\n    ],\r\n};\r\n\r\nexport const _Esempi: Story = {\r\n    render: () => {\r\n        return (\r\n            
      \r\n                \r\n                    \r\n                        Apri dropdown\r\n                    \r\n                    \r\n                        \r\n                            Azione 1\r\n                            Azione 2\r\n                            Azione 3\r\n                        \r\n                    \r\n                \r\n            
      \r\n        );\r\n    },\r\n    parameters: {\r\n        layout: 'centered'\r\n    },\r\n    //Aggiungo del margine alla storia così da visualizzare il bordo onClick correttamente\r\n    decorators: [\r\n        (Story) => (\r\n            
      \r\n                \r\n            
      \r\n        ),\r\n    ],\r\n};\r\n\r\nexport const _Link: Story = {\r\n    render: () => {\r\n        return (\r\n            
      \r\n                \r\n                    \r\n                        Apri dropdown\r\n                    \r\n                    \r\n                        \r\n                            Azione 1\r\n                            Azione 2\r\n                            Azione 3\r\n                        \r\n                    \r\n                \r\n            
      \r\n        );\r\n    }\r\n};\r\n"
  },
  {
    "path": "stories/Components/Dropdown/DropdownMenu.stories.tsx",
    "content": "import { Meta, StoryObj } from '@storybook/react-vite';\r\nimport React from 'react';\r\nimport { DropdownMenu, Icon, LinkList, LinkListItem } from '../../../src';\r\n\r\nconst meta: Meta = {\r\n  title: 'Documentazione/Componenti/Dropdown',\r\n  component: DropdownMenu\r\n};\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj;\r\n\r\nexport const _MenuVociAttive: Story = {\r\n  render: () => (\r\n    
      \r\n      \r\n        \r\n          \r\n            \r\n              Azione 1 attivo\r\n            \r\n          \r\n          \r\n            Azione 2\r\n          \r\n          \r\n            Azione 3\r\n          \r\n        \r\n      \r\n    
      \r\n  )\r\n};\r\n\r\nexport const _MenuVociDisabilitate: Story = {\r\n  render: () => (\r\n    
      \r\n      \r\n        \r\n          \r\n            Azione 1\r\n          \r\n          \r\n            Azione 2\r\n          \r\n          \r\n            Azione 3\r\n          \r\n        \r\n      \r\n    
      \r\n  )\r\n};\r\n\r\nexport const MenuHeadersESeparatori: Story = {\r\n  render: () => (\r\n    
      \r\n      \r\n        \r\n          \r\n            Header\r\n          \r\n          \r\n            Azione 1\r\n          \r\n          \r\n            Azione 2\r\n          \r\n          \r\n            Azione 3\r\n          \r\n          \r\n          \r\n            Azione 4\r\n          \r\n        \r\n      \r\n    
      \r\n  )\r\n};\r\n\r\nexport const MenuConVociLarge: Story = {\r\n  render: () => (\r\n    
      \r\n      \r\n        \r\n          \r\n            Azione 1\r\n          \r\n          \r\n            Azione 2\r\n          \r\n          \r\n            Azione 3\r\n          \r\n        \r\n      \r\n    
      \r\n  )\r\n};\r\n\r\nexport const MenuFullWidth: Story = {\r\n  render: () => (\r\n    
      \r\n      \r\n        \r\n          \r\n            Azione 1\r\n          \r\n          \r\n            Azione 2\r\n          \r\n          \r\n            Azione 3\r\n          \r\n          \r\n            Azione 4\r\n          \r\n          \r\n            Azione 5\r\n          \r\n        \r\n      \r\n    
      \r\n  )\r\n};\r\n\r\nexport const MenuIconaADestra: Story = {\r\n  render: () => (\r\n    
      \r\n      \r\n        \r\n          \r\n            Azione 1\r\n            \r\n          \r\n          \r\n            Azione 2\r\n            \r\n          \r\n          \r\n            Azione 3\r\n            \r\n          \r\n        \r\n      \r\n    
      \r\n  )\r\n};\r\n\r\nexport const MenuIconaASinistra: Story = {\r\n  render: () => (\r\n    
      \r\n      \r\n        \r\n          \r\n            \r\n            Azione 1\r\n          \r\n          \r\n            \r\n            Azione 2\r\n          \r\n          \r\n            \r\n            Azione 3\r\n          \r\n        \r\n      \r\n    
      \r\n  )\r\n};\r\n\r\nexport const _MenuDark: Story = {\r\n  render: () => (\r\n    
      \r\n      \r\n        \r\n          Header\r\n          \r\n            Azione 1 (attivo)\r\n            \r\n          \r\n          \r\n            Azione 2\r\n            \r\n          \r\n          \r\n            Azione 3\r\n            \r\n          \r\n          \r\n          \r\n            Azione 4\r\n            \r\n          \r\n          \r\n            Azione 5 (disabilitato)\r\n            \r\n          \r\n        \r\n      \r\n    
      \r\n  )\r\n};\r\n"
  },
  {
    "path": "stories/Components/Footer.stories.tsx",
    "content": "import { Meta, StoryObj } from '@storybook/react-vite';\r\nimport React from 'react';\r\nimport { Button, Col, Container, Form, Icon, Input, Label, LinkList, LinkListItem, Row } from '../../src';\r\n\r\n//Non esiste un componente specifico per cui uso Container come riferimento per la storia\r\nconst meta: Meta = {\r\n  title: 'Documentazione/Menu di navigazione/Footer',\r\n  component: Container,\r\n  args: {\r\n    townName: 'Nome del Comune',\r\n    townTagLine: 'Uno dei tanti Comuni d Italia'\r\n  }\r\n};\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj;\r\n\r\nexport const FooterCompleto: Story = {\r\n  render: ({ townName, townTagLine }) => (\r\n    
      \r\n      
      \r\n        \r\n          
      \r\n            \r\n              \r\n                \r\n              \r\n            \r\n          
      \r\n          
      \r\n            \r\n              \r\n                
      \r\n                  \r\n                    Amministrazione\r\n                  \r\n                
      \r\n                \r\n                  {[\r\n                    'Giunta e consiglio',\r\n                    'Aree di competenza',\r\n                    'Dipendenti',\r\n                    'Luoghi',\r\n                    'Associazioni e società partecipate'\r\n                  ].map((label) => (\r\n                    \r\n                      {label}\r\n                    \r\n                  ))}\r\n                \r\n              \r\n              \r\n                
      \r\n                  \r\n                    Servizi\r\n                  \r\n                
      \r\n                \r\n                  {[\r\n                    'Pagamenti',\r\n                    'Sostegno',\r\n                    'Domande e iscrizioni',\r\n                    'Segnalazioni',\r\n                    'Autorizzazioni e concessioni',\r\n                    'Certificati e dichiarazioni'\r\n                  ].map((label) => (\r\n                    \r\n                      {label}\r\n                    \r\n                  ))}\r\n                \r\n              \r\n              \r\n                
      \r\n                  \r\n                    Novità\r\n                  \r\n                
      \r\n                \r\n                  {['Notizie', 'Eventi', 'Comunicati Stampa'].map((label) => (\r\n                    \r\n                      {label}\r\n                    \r\n                  ))}\r\n                \r\n              \r\n              \r\n                
      \r\n                  \r\n                    Documenti\r\n                  \r\n                
      \r\n                \r\n                  {['Progetti e attività', 'Delibere, determine e ordinanze', 'Bandi', 'Concorsi', 'Albo pretorio'].map(\r\n                    (label) => (\r\n                      \r\n                        {label}\r\n                      \r\n                    )\r\n                  )}\r\n                \r\n              \r\n                  \r\n          
      \r\n          
      \r\n            \r\n              \r\n                
      \r\n                  \r\n                    Amministrazione trasparente\r\n                  \r\n                
      \r\n                
      \r\n                  I dati personali pubblicati sono riutilizzabili solo alle condizioni previste dalla direttiva\r\n                  comunitaria 2003/98/CE e dal d.lgs. 36/2006\r\n                
      \r\n              \r\n              \r\n                
      \r\n                  \r\n                    Contatti\r\n                  \r\n                
      \r\n                
      \r\n                  Nome del Comune\r\n                  
      \r\n                  Via Roma 0 - 00000 Lorem Ipsum Codice fiscale / P. IVA: 000000000\r\n                
      \r\n                \r\n                  {['Posta Elettronica Certificata', 'URP - Ufficio Relazioni con il Pubblico'].map((label) => (\r\n                    \r\n                      {label}\r\n                    \r\n                  ))}\r\n                \r\n              \r\n              \r\n                
      \r\n                  \r\n                    Newsletter\r\n                  \r\n                
      \r\n                
      \r\n                  \r\n                    Iscriviti per riceverla\r\n                  \r\n                  \r\n                  \r\n                \r\n              \r\n              \r\n                
      \r\n                  \r\n                    Seguici su\r\n                  \r\n                
      \r\n                \r\n              \r\n            
      \r\n          
      \r\n              \r\n      
      \r\n      
      \r\n        \r\n          
      Sezione Link Utili
      \r\n          \r\n              \r\n      
      \r\n    
      \r\n  )\r\n};\r\n\r\nexport const FooterCompatto: Story = {\r\n  render: ({ townName, townTagLine }) => (\r\n    \r\n  )\r\n};\r\n"
  },
  {
    "path": "stories/Components/Form/Checkbox.stories.tsx",
    "content": "import { Meta, StoryObj } from \"@storybook/react-vite\";\r\nimport React from \"react\";\r\nimport { Col, Form, FormGroup, FormText, Input, Label, Row } from \"../../../src\";\r\n\r\nconst meta: Meta = {\r\n    title: \"Documentazione/Form/Checkbox\",\r\n    component: Input,\r\n};\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj;\r\n\r\nexport const CheckboxBase: Story = {\r\n    render: () => (\r\n        
      \r\n            
      \r\n                Checkbox\r\n                \r\n                    \r\n                    \r\n                \r\n            
      \r\n        
      \r\n    )\r\n};\r\n\r\nexport const CheckboxInline: Story = {\r\n    render: () => (\r\n        
      \r\n            
      \r\n                Checkbox\r\n                
      \r\n                    \r\n                        \r\n                        \r\n                    \r\n                    \r\n                        \r\n                        \r\n                    \r\n                
      \r\n            
      \r\n        
      \r\n    )\r\n};\r\n\r\nexport const CheckboxDisabilitato: Story = {\r\n    render: () => (\r\n        
      \r\n            
      \r\n                Checkbox\r\n                
      \r\n                    \r\n                        \r\n                        \r\n                    \r\n                    \r\n                        \r\n                        \r\n                    \r\n                
      \r\n            
      \r\n        
      \r\n    )\r\n};\r\n\r\nexport const CheckboxGruppi: Story = {\r\n    render: () => (\r\n        
      \r\n            \r\n                \r\n                    
      \r\n                        Checkbox\r\n                        
      \r\n                            \r\n                                \r\n                                \r\n                            \r\n                            \r\n                                \r\n                                \r\n                            \r\n                            \r\n                                \r\n                                \r\n                            \r\n                        
      \r\n                    
      \r\n                \r\n                \r\n                \r\n                    
      \r\n                        Checkbox\r\n                        
      \r\n                            \r\n                                \r\n                                \r\n                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero\r\n                            \r\n                            \r\n                                \r\n                                \r\n                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero\r\n                            \r\n                            \r\n                                \r\n                                \r\n                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero\r\n                            \r\n                        
      \r\n                    
      \r\n                \r\n                  \r\n        
      \r\n    )\r\n};\r\n\r\n//Da correggere il componente input nel caso in cui venga aggiunta la classe semi-checked perchè il render del componente è sbagliato\r\nexport const CheckboxMixedButton: Story = {\r\n    render: () => (\r\n        
      \r\n            
      \r\n                Checkbox\r\n                \r\n                    \r\n                    \r\n                \r\n            
      \r\n        
      \r\n    )\r\n};"
  },
  {
    "path": "stories/Components/Form/FormValidation.stories.tsx",
    "content": "import { Meta, StoryObj } from '@storybook/react-vite';\nimport React, { useState } from 'react';\nimport { Alert, Autocomplete, Button, Col, Form, FormGroup, FormText, Input, Label, Row } from '../../../src';\n\nconst meta: Meta = {\n  title: 'Documentazione/Form/Validazione'\n};\n\nexport default meta;\n\ntype Story = StoryObj;\n\nexport const ValidazioneBase: Story = {\n  render: () => (\n    
      \n      \n      \n      \n      \n      \n    
      \n  )\n};\n\nconst ValidazioneCompletaHooks = () => {\n  const [name, setName] = useState('Mario');\n  const [surname, setSurname] = useState('Rossi');\n  const [username, setUsername] = useState('');\n  const [region, setRegion] = useState('');\n  const [province, setProvince] = useState('');\n  const [cap, setCap] = useState('');\n  const [age, setAge] = useState(18);\n  const [date, setDate] = useState('');\n  const [time, setTime] = useState('');\n  const [termsAndConditions, setTermsAndConditions] = useState(false);\n\n  const regions = [\n    'Abruzzo',\n    'Basilicata',\n    'Calabria',\n    'Campania',\n    'Emilia Romagna',\n    'Friuli Venezia Giulia',\n    'Lazio',\n    'Liguria',\n    'Lombardia',\n    'Marche',\n    'Molise',\n    'Piemonte',\n    'Puglia',\n    'Sardegna',\n    'Sicilia',\n    'Toscana',\n    'Trentino Alto Adige',\n    'Umbria',\n    \"Valle d'Aosta\",\n    'Veneto'\n  ];\n\n  const suggest = (query: string, syncResults: (p: string[]) => void) => {\n    syncResults(\n      query\n        ? regions.filter(function (result) {\n            return result.toLowerCase().indexOf(query.toLowerCase()) !== -1;\n          })\n        : []\n    );\n  };\n\n  return (\n    <>\n      
      \n        \n          \n             setName(e.target.value)}\n            />\n          \n          \n             setSurname(e.target.value)}\n            />\n          \n          \n             setUsername(e.target.value)}\n            />\n          \n          \n            = 18}\n              onChange={(e) => setAge(parseInt(e.target.value))}\n            />\n          \n        \n        \n          \n             setDate(e.target.value)}\n            />\n          \n          \n             setTime(e.target.value)}\n            />\n          \n        \n        \n          \n             'Nessun risultato'}\n              valid={regions.includes(region)}\n              validationText='Per favore inserisci una regione valida.'\n              onConfirm={(region) => {\n                setRegion(region);\n              }}\n            />\n          \n          \n             setProvince(e.target.value)}\n            />\n          \n          \n             setCap(e.target.value)}\n            />\n          \n        \n        \n          \n            \n               setTermsAndConditions(!termsAndConditions)}\n                valid={termsAndConditions}\n              />\n              \n              Devi accettare i termini e le condizioni prima di inviare il modulo.\n            \n          \n          \n            \n          \n        \n      
      \n      \n        \n          \n            Attenzione Alcuni campi inseriti sono da controllare.\n          \n        \n      \n    \n  );\n};\n\nexport const ValidazioneCompleta: Story = {\n  render: () => {\n    return ;\n  },\n  parameters: {\n    docs: {\n      canvas: { sourceState: 'none' }\n    }\n  }\n};\n"
  },
  {
    "path": "stories/Components/Form/Input.stories.tsx",
    "content": "import { Meta, StoryObj } from '@storybook/react-vite';\nimport React, { useState } from 'react';\nimport { Button, FormGroup, Icon, Input, TextArea, Autocomplete } from '../../../src';\n\nconst meta: Meta = {\n  title: 'Documentazione/Form/Input',\n  component: Input\n};\n\nexport default meta;\n\ntype Story = StoryObj;\n\nexport const EsempiDiCampiDiInput: Story = {\n  render: () => {\n    return (\n      
      \n        \n        \n        \n        \n        \n      
      \n    );\n  }\n};\n\nexport const UtilizzoDiPlaceholderELabel: Story = {\n  render: () => (\n    
      \n      \n      \n      \n      \n    
      \n  )\n};\n\nexport const InputConIconaOBottoni: Story = {\n  render: () => {\n    return (\n      <>\n        }\n        />\n        }\n        />\n        }\n          hasButtonRight\n          buttonRight={}\n        />\n      \n    );\n  }\n};\n\nexport const InputPassword: Story = {\n  args: {\n    type: 'password',\n    id: 'exampleInputPassword',\n    label: 'Password con label, placeholder e testo di aiuto',\n    infoText: 'Inserisci almeno 8 caratteri e una lettera maiuscola'\n  }\n};\n\nexport const Disabilitato: Story = {\n  args: {\n    label: 'Contenuto disabilitato',\n    id: 'exampleDisabled',\n    disabled: true\n  }\n};\n\nexport const Readonly: Story = {\n  args: {\n    label: 'Contenuto in sola lettura',\n    id: 'examplereadOnly',\n    readOnly: true\n  }\n};\n\nexport const ReadonlyNormalizzato: Story = {\n  args: {\n    type: 'text',\n    label: 'Contenuto in sola lettura',\n    id: 'exampleNormalized',\n    normalized: true\n  }\n};\n\nexport const _InputAutocompleteConDatiAccessibile: Story = {\n  render: () => {\n    const suggest = (query: string, syncResults: (p: string[]) => void)  => {\n      const results = [\n        'Abruzzo',\n        'Basilicata',\n        'Calabria',\n        'Campania',\n        'Emilia Romagna',\n        'Friuli Venezia Giulia',\n        'Lazio',\n        'Liguria',\n        'Lombardia',\n        'Marche',\n        'Molise',\n        'Piemonte',\n        'Puglia',\n        'Sardegna',\n        'Sicilia',\n        'Toscana',\n        'Trentino Alto Adige',\n        'Umbria',\n        'Valle d\\'Aosta',\n        'Veneto'\n      ];\n      syncResults(query\n        ? results.filter(function (result) {\n            return result.toLowerCase().indexOf(query.toLowerCase()) !== -1\n          })\n        : []\n      )\n    }\n\n    return (\n      \n         'Nessun risultato'}\n        />\n      \n    );\n  }\n};\n\nexport const AreaDiTesto: Story = { render: () =>