Repository: italia/design-react-kit Branch: main Commit: f2e12ca53641 Files: 535 Total size: 2.9 MB Directory structure: gitextract_9pcbdlnw/ ├── .editorconfig ├── .github/ │ ├── ISSUE_TEMPLATE/ │ │ ├── apri-una-segnalazione.it.yaml │ │ ├── config.yml │ │ └── open-an-issue.en.yaml │ ├── PULL_REQUEST_TEMPLATE.md │ └── workflows/ │ ├── ci.yml │ ├── commit-lint.yml │ ├── pc-check.yml │ ├── pc-update.yml │ ├── publiccode-yml-validation.yml │ ├── publish-release.yml │ └── update-docs.yml ├── .gitignore ├── .husky/ │ └── pre-commit ├── .npmignore ├── .nvmrc ├── .prettierrc ├── .storybook/ │ ├── main.ts │ ├── manager-head.html │ ├── manager.js │ ├── preview.ts │ ├── stories-helper.ts │ └── theme.ts ├── AUTHORS ├── CHANGELOG.md ├── CODE_OF_CONDUCT.EN.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.EN.md ├── README.md ├── assets/ │ ├── css/ │ │ ├── accesibility.css │ │ └── storybook-fixes.css │ └── docs/ │ └── scss/ │ ├── _callouts.scss │ ├── _colors.scss │ ├── bi-fonts.scss │ └── docs.scss ├── babel.config.json ├── codecov.yml ├── commitlint.config.cjs ├── eslint.config.js ├── jest-setup.js ├── jest.config.cjs ├── package.json ├── publiccode.yml ├── scripts/ │ ├── import_svgs.sh │ ├── svgIndexTemplate.js │ ├── svgTemplate.js │ └── wait-confirm.js ├── src/ │ ├── Accordion/ │ │ ├── Accordion.tsx │ │ ├── AccordionBody.tsx │ │ ├── AccordionHeader.tsx │ │ └── AccordionItem.tsx │ ├── Alert/ │ │ └── Alert.tsx │ ├── Autocomplete/ │ │ └── Autocomplete.tsx │ ├── Avatar/ │ │ ├── AvatarContainer.tsx │ │ ├── AvatarExtraText.tsx │ │ ├── AvatarGroupContainer.tsx │ │ ├── AvatarIcon.tsx │ │ ├── AvatarPresence.tsx │ │ ├── AvatarStatus.tsx │ │ └── AvatarWrapper.tsx │ ├── BackToTop/ │ │ └── BackToTop.tsx │ ├── Badge/ │ │ └── Badge.tsx │ ├── BottomNav/ │ │ ├── BottomNav.tsx │ │ └── BottomNavItem.tsx │ ├── Breadcrumb/ │ │ └── Breadcrumb.tsx │ ├── Button/ │ │ └── Button.tsx │ ├── Callout/ │ │ ├── Callout.tsx │ │ ├── CalloutMoreFooter.tsx │ │ ├── CalloutText.tsx │ │ └── CalloutTitle.tsx │ ├── Card/ │ │ ├── Card.tsx │ │ ├── CardBody.tsx │ │ ├── CardCategory.tsx │ │ ├── CardFooterCTA.tsx │ │ ├── CardReadMore.tsx │ │ ├── CardSignature.tsx │ │ ├── CardTag.tsx │ │ ├── CardTagsHeader.tsx │ │ ├── CardText.tsx │ │ └── CardTitle.tsx │ ├── Carousel/ │ │ ├── Carousel.tsx │ │ └── CarouselSlide.tsx │ ├── Chips/ │ │ ├── Chip.tsx │ │ └── ChipLabel.tsx │ ├── Collapse/ │ │ └── Collapse.tsx │ ├── Dimmer/ │ │ ├── Dimmer.tsx │ │ └── DimmerButtons.tsx │ ├── Dropdown/ │ │ ├── Dropdown.tsx │ │ ├── DropdownMenu.tsx │ │ └── DropdownToggle.tsx │ ├── FontLoader/ │ │ └── FontLoader.tsx │ ├── Forward/ │ │ └── Forward.tsx │ ├── GoBack/ │ │ └── GoBack.tsx │ ├── Grid/ │ │ ├── GridItem.tsx │ │ ├── GridItemText.tsx │ │ ├── GridItemTextWrapper.tsx │ │ ├── GridList.tsx │ │ ├── GridRow.tsx │ │ └── index.ts │ ├── Header/ │ │ ├── Header.tsx │ │ ├── HeaderBrand.tsx │ │ ├── HeaderContent.tsx │ │ ├── HeaderContext.tsx │ │ ├── HeaderLinkZone.tsx │ │ ├── HeaderRightZone.tsx │ │ ├── HeaderSearch.tsx │ │ ├── HeaderSocialsZone.tsx │ │ ├── HeaderToggler.tsx │ │ └── Headers.tsx │ ├── Hero/ │ │ ├── Hero.tsx │ │ ├── HeroBackground.tsx │ │ ├── HeroBody.tsx │ │ ├── HeroButton.tsx │ │ ├── HeroCategory.tsx │ │ ├── HeroTitle.tsx │ │ └── index.ts │ ├── Icon/ │ │ ├── EmptyIcon.tsx │ │ ├── Icon.tsx │ │ └── assets/ │ │ ├── ItAndroid.tsx │ │ ├── ItAndroidSquare.tsx │ │ ├── ItApple.tsx │ │ ├── ItAppleSquare.tsx │ │ ├── ItArrowDown.tsx │ │ ├── ItArrowDownCircle.tsx │ │ ├── ItArrowDownTriangle.tsx │ │ ├── ItArrowLeft.tsx │ │ ├── ItArrowLeftCircle.tsx │ │ ├── ItArrowLeftTriangle.tsx │ │ ├── ItArrowRight.tsx │ │ ├── ItArrowRightCircle.tsx │ │ ├── ItArrowRightTriangle.tsx │ │ ├── ItArrowUp.tsx │ │ ├── ItArrowUpCircle.tsx │ │ ├── ItArrowUpTriangle.tsx │ │ ├── ItBan.tsx │ │ ├── ItBehance.tsx │ │ ├── ItBluesky.tsx │ │ ├── ItBookmark.tsx │ │ ├── ItBox.tsx │ │ ├── ItBurger.tsx │ │ ├── ItCalendar.tsx │ │ ├── ItCamera.tsx │ │ ├── ItCar.tsx │ │ ├── ItCard.tsx │ │ ├── ItCart.tsx │ │ ├── ItChartLine.tsx │ │ ├── ItCheck.tsx │ │ ├── ItCheckCircle.tsx │ │ ├── ItChevronLeft.tsx │ │ ├── ItChevronRight.tsx │ │ ├── ItClip.tsx │ │ ├── ItClock.tsx │ │ ├── ItClose.tsx │ │ ├── ItCloseBig.tsx │ │ ├── ItCloseCircle.tsx │ │ ├── ItCodeCircle.tsx │ │ ├── ItCollapse.tsx │ │ ├── ItComment.tsx │ │ ├── ItCopy.tsx │ │ ├── ItDelete.tsx │ │ ├── ItDesignersItalia.tsx │ │ ├── ItDownload.tsx │ │ ├── ItError.tsx │ │ ├── ItExchangeCircle.tsx │ │ ├── ItExpand.tsx │ │ ├── ItExternalLink.tsx │ │ ├── ItFacebook.tsx │ │ ├── ItFacebookSquare.tsx │ │ ├── ItFigma.tsx │ │ ├── ItFigmaSquare.tsx │ │ ├── ItFile.tsx │ │ ├── ItFileAudio.tsx │ │ ├── ItFileCompressed.tsx │ │ ├── ItFileCsv.tsx │ │ ├── ItFileDocx.tsx │ │ ├── ItFileImage.tsx │ │ ├── ItFileJson.tsx │ │ ├── ItFileOdp.tsx │ │ ├── ItFileOds.tsx │ │ ├── ItFileOdt.tsx │ │ ├── ItFilePdf.tsx │ │ ├── ItFilePdfExt.tsx │ │ ├── ItFilePpt.tsx │ │ ├── ItFileSheet.tsx │ │ ├── ItFileSigned.tsx │ │ ├── ItFileSlides.tsx │ │ ├── ItFileTxt.tsx │ │ ├── ItFileVideo.tsx │ │ ├── ItFileXlsx.tsx │ │ ├── ItFileXml.tsx │ │ ├── ItFiles.tsx │ │ ├── ItFlag.tsx │ │ ├── ItFlickr.tsx │ │ ├── ItFlickrSquare.tsx │ │ ├── ItFolder.tsx │ │ ├── ItFullscreen.tsx │ │ ├── ItFunnel.tsx │ │ ├── ItGithub.tsx │ │ ├── ItGoogle.tsx │ │ ├── ItHearing.tsx │ │ ├── ItHelp.tsx │ │ ├── ItHelpCircle.tsx │ │ ├── ItHorn.tsx │ │ ├── ItInbox.tsx │ │ ├── ItInfoCircle.tsx │ │ ├── ItInstagram.tsx │ │ ├── ItKey.tsx │ │ ├── ItLessCircle.tsx │ │ ├── ItLink.tsx │ │ ├── ItLinkedin.tsx │ │ ├── ItLinkedinSquare.tsx │ │ ├── ItList.tsx │ │ ├── ItLock.tsx │ │ ├── ItLocked.tsx │ │ ├── ItLogout.tsx │ │ ├── ItMail.tsx │ │ ├── ItMailOpen.tsx │ │ ├── ItMapMarker.tsx │ │ ├── ItMapMarkerCircle.tsx │ │ ├── ItMapMarkerMinus.tsx │ │ ├── ItMapMarkerPlus.tsx │ │ ├── ItMastodon.tsx │ │ ├── ItMastodonSquare.tsx │ │ ├── ItMaximize.tsx │ │ ├── ItMaximizeAlt.tsx │ │ ├── ItMedium.tsx │ │ ├── ItMediumSquare.tsx │ │ ├── ItMinimize.tsx │ │ ├── ItMinus.tsx │ │ ├── ItMinusCircle.tsx │ │ ├── ItMoodle.tsx │ │ ├── ItMoodleSquare.tsx │ │ ├── ItMoreActions.tsx │ │ ├── ItMoreItems.tsx │ │ ├── ItNote.tsx │ │ ├── ItOpenSource.tsx │ │ ├── ItPa.tsx │ │ ├── ItPasswordInvisible.tsx │ │ ├── ItPasswordVisible.tsx │ │ ├── ItPencil.tsx │ │ ├── ItPiattaforme.tsx │ │ ├── ItPin.tsx │ │ ├── ItPinterest.tsx │ │ ├── ItPinterestSquare.tsx │ │ ├── ItPlug.tsx │ │ ├── ItPlus.tsx │ │ ├── ItPlusCircle.tsx │ │ ├── ItPresentation.tsx │ │ ├── ItPrint.tsx │ │ ├── ItQuora.tsx │ │ ├── ItQuoraSquare.tsx │ │ ├── ItReddit.tsx │ │ ├── ItRedditSquare.tsx │ │ ├── ItRefresh.tsx │ │ ├── ItRestore.tsx │ │ ├── ItRss.tsx │ │ ├── ItRssSquare.tsx │ │ ├── ItSearch.tsx │ │ ├── ItSettings.tsx │ │ ├── ItShare.tsx │ │ ├── ItSign.tsx │ │ ├── ItSlack.tsx │ │ ├── ItSlackSquare.tsx │ │ ├── ItSnapchat.tsx │ │ ├── ItSnapchatSquare.tsx │ │ ├── ItSoftware.tsx │ │ ├── ItSpotify.tsx │ │ ├── ItStackexchange.tsx │ │ ├── ItStackexchangeSquare.tsx │ │ ├── ItStackoverflow.tsx │ │ ├── ItStackoverflowSquare.tsx │ │ ├── ItStarFull.tsx │ │ ├── ItStarOutline.tsx │ │ ├── ItTeamDigitale.tsx │ │ ├── ItTelegram.tsx │ │ ├── ItTelephone.tsx │ │ ├── ItThreads.tsx │ │ ├── ItThreadsSquare.tsx │ │ ├── ItTiktok.tsx │ │ ├── ItTiktokSquare.tsx │ │ ├── ItTool.tsx │ │ ├── ItTwitter.tsx │ │ ├── ItTwitterSquare.tsx │ │ ├── ItUnlocked.tsx │ │ ├── ItUpload.tsx │ │ ├── ItUser.tsx │ │ ├── ItVideo.tsx │ │ ├── ItVimeo.tsx │ │ ├── ItVimeoSquare.tsx │ │ ├── ItWarning.tsx │ │ ├── ItWarningCircle.tsx │ │ ├── ItWhatsapp.tsx │ │ ├── ItWhatsappSquare.tsx │ │ ├── ItWifi.tsx │ │ ├── ItYoutube.tsx │ │ ├── ItZoomIn.tsx │ │ ├── ItZoomOut.tsx │ │ └── index.ts │ ├── Input/ │ │ ├── Input.tsx │ │ ├── InputContainer.tsx │ │ ├── TextArea.tsx │ │ └── utils.tsx │ ├── LinkList/ │ │ ├── LinkList.tsx │ │ └── LinkListItem.tsx │ ├── List/ │ │ ├── List.tsx │ │ └── ListItem.tsx │ ├── Megamenu/ │ │ ├── MegamenuFooter.tsx │ │ ├── MegamenuHighlightColumn.tsx │ │ └── MegamenuItem.tsx │ ├── Modal/ │ │ ├── Modal.tsx │ │ ├── ModalBody.tsx │ │ ├── ModalFooter.tsx │ │ └── ModalHeader.tsx │ ├── Nav/ │ │ └── Nav.tsx │ ├── NavScroll/ │ │ ├── debounce.ts │ │ ├── index.ts │ │ ├── types.ts │ │ ├── useNavScroll.ts │ │ └── useSizeDetector.ts │ ├── Notification/ │ │ ├── Notification.tsx │ │ ├── NotificationContent.tsx │ │ ├── NotificationManager.tsx │ │ ├── core.tsx │ │ ├── index.ts │ │ ├── types.ts │ │ └── usePosition.tsx │ ├── Pager/ │ │ └── Pager.tsx │ ├── Progress/ │ │ └── Progress.tsx │ ├── Rating/ │ │ └── Rating.tsx │ ├── ResponsiveImage/ │ │ └── ResponsiveImage.tsx │ ├── Section/ │ │ └── Section.tsx │ ├── Select/ │ │ └── Select.tsx │ ├── Sidebar/ │ │ └── Sidebar.tsx │ ├── Skiplink/ │ │ ├── Skiplink.tsx │ │ └── SkiplinkItem.tsx │ ├── Spinner/ │ │ └── Spinner.tsx │ ├── Stepper/ │ │ ├── StepperContainer.tsx │ │ ├── StepperContent.tsx │ │ ├── StepperDots.tsx │ │ ├── StepperHeader.tsx │ │ ├── StepperHeaderElement.tsx │ │ └── StepperNav.tsx │ ├── Tab/ │ │ ├── TabNav.tsx │ │ ├── TabNavItem.tsx │ │ ├── TabNavLink.tsx │ │ └── TabPanel.tsx │ ├── ThumbNav/ │ │ ├── ThumbNav.tsx │ │ └── ThumbNavItem.tsx │ ├── Timeline/ │ │ ├── TimelinePin.tsx │ │ └── TimelineWrapper.tsx │ ├── Toggle/ │ │ └── Toggle.tsx │ ├── Toolbar/ │ │ ├── Toolbar.tsx │ │ ├── ToolbarDividerItem.tsx │ │ └── ToolbarItem.tsx │ ├── Transfer/ │ │ ├── BacktransferButton.tsx │ │ ├── Item.tsx │ │ ├── ResetButton.tsx │ │ ├── SelectAllCheckbox.tsx │ │ ├── Source.tsx │ │ ├── Target.tsx │ │ ├── Transfer.tsx │ │ ├── TransferButton.tsx │ │ └── useTransferContext.tsx │ ├── Upload/ │ │ ├── Upload.tsx │ │ ├── UploadDragNdrop.tsx │ │ ├── UploadList.tsx │ │ ├── UploadListItem.tsx │ │ └── useUploadContext.ts │ ├── Video/ │ │ └── Video.tsx │ ├── index.ts │ ├── track-focus.js │ ├── transitions.ts │ ├── types/ │ │ └── svg.d.ts │ └── utils.tsx ├── static/ │ └── favicons/ │ ├── browserconfig.xml │ └── manifest.webmanifest ├── stories/ │ ├── Components/ │ │ ├── Accordion.stories.tsx │ │ ├── Alert.stories.tsx │ │ ├── Avatar/ │ │ │ ├── Avatar.stories.tsx │ │ │ ├── AvatarBehaviour.stories.tsx │ │ │ ├── AvatarGroupsList.stories.tsx │ │ │ └── AvatarGroupsOverlapping.stories.tsx │ │ ├── BackToTop.stories.tsx │ │ ├── Badge.stories.tsx │ │ ├── BottomNav.stories.tsx │ │ ├── Breadcrumb.stories.tsx │ │ ├── Button.stories.tsx │ │ ├── Callout.stories.tsx │ │ ├── Card.stories.tsx │ │ ├── Carousel.stories.tsx │ │ ├── Chips.stories.tsx │ │ ├── Color.stories.tsx │ │ ├── ColorCustom.stories.tsx │ │ ├── Dimmer.stories.tsx │ │ ├── Dropdown/ │ │ │ ├── Dropdown.stories.tsx │ │ │ └── DropdownMenu.stories.tsx │ │ ├── Footer.stories.tsx │ │ ├── Form/ │ │ │ ├── Checkbox.stories.tsx │ │ │ ├── FormValidation.stories.tsx │ │ │ ├── Input.stories.tsx │ │ │ ├── InputNumerico.stories.tsx │ │ │ ├── Introduzione.stories.tsx │ │ │ ├── Radio.stories.tsx │ │ │ ├── Select.stories.tsx │ │ │ └── Toggles.stories.tsx │ │ ├── Forward.stories.tsx │ │ ├── GoBack.stories.tsx │ │ ├── Griglie.stories.tsx │ │ ├── Header/ │ │ │ ├── CenterHeader.stories.tsx │ │ │ ├── CompleteHeader.stories.tsx │ │ │ ├── NavHeader.stories.tsx │ │ │ └── SlimHeader.stories.tsx │ │ ├── Hero.stories.tsx │ │ ├── Icon.stories.tsx │ │ ├── ImagesList.stories.tsx │ │ ├── List/ │ │ │ ├── LinkList.stories.tsx │ │ │ └── List.stories.tsx │ │ ├── Megamenu.stories.tsx │ │ ├── Modal.stories.tsx │ │ ├── NavScroll/ │ │ │ ├── NavScroll.stories.tsx │ │ │ └── utils.ts │ │ ├── Notification.stories.tsx │ │ ├── Pager.stories.tsx │ │ ├── Popover.stories.tsx │ │ ├── Progress.stories.tsx │ │ ├── Rating.stories.tsx │ │ ├── Section.stories.tsx │ │ ├── Sidebar.stories.tsx │ │ ├── Skiplinks.stories.tsx │ │ ├── Spinner.stories.tsx │ │ ├── Stepper/ │ │ │ ├── Stepper.Navigation.stories.tsx │ │ │ ├── Stepper.NavigationDark.stories.tsx │ │ │ └── Stepper.stories.tsx │ │ ├── Tab.stories.tsx │ │ ├── Tables.stories.tsx │ │ ├── ThumbNav.stories.tsx │ │ ├── Timeline.stories.tsx │ │ ├── Toolbar.stories.tsx │ │ ├── Tooltip.stories.tsx │ │ ├── Transfer.stories.tsx │ │ ├── Typography.stories.tsx │ │ ├── Upload.stories.tsx │ │ └── Video.stories.tsx │ ├── Documentation/ │ │ ├── Accordion.mdx │ │ ├── Alert.mdx │ │ ├── Avatar.mdx │ │ ├── BackToTop.mdx │ │ ├── Badge.mdx │ │ ├── BottomNav.mdx │ │ ├── Breadcrumb.mdx │ │ ├── Button.mdx │ │ ├── Callout.mdx │ │ ├── Card.mdx │ │ ├── Carousel.mdx │ │ ├── Chips.mdx │ │ ├── Color.mdx │ │ ├── ColorCustom.mdx │ │ ├── Dimmer.mdx │ │ ├── Dropdown.mdx │ │ ├── Footer.mdx │ │ ├── Form/ │ │ │ ├── Checkbox.mdx │ │ │ ├── Input.mdx │ │ │ ├── InputNumerico.mdx │ │ │ ├── Introduzione.mdx │ │ │ ├── Radio.mdx │ │ │ ├── Select.mdx │ │ │ ├── Toggles.mdx │ │ │ └── Transfer.mdx │ │ ├── Forward.mdx │ │ ├── GoBack.mdx │ │ ├── Griglie.mdx │ │ ├── Headers.mdx │ │ ├── Hero.mdx │ │ ├── Icon.mdx │ │ ├── ImagesList.mdx │ │ ├── List.mdx │ │ ├── Megamenu.mdx │ │ ├── Modal.mdx │ │ ├── NavScroll.mdx │ │ ├── Notification.mdx │ │ ├── Pager.mdx │ │ ├── Popover.mdx │ │ ├── Progress.mdx │ │ ├── Rating.mdx │ │ ├── Section.mdx │ │ ├── Sidebar.mdx │ │ ├── Skiplinks.mdx │ │ ├── Stepper.mdx │ │ ├── Tab.mdx │ │ ├── Tables.mdx │ │ ├── ThumbNav.mdx │ │ ├── Timeline.mdx │ │ ├── Toolbar.mdx │ │ ├── Tooltip.mdx │ │ ├── Typography.mdx │ │ ├── Upload.mdx │ │ └── Video.mdx │ ├── Welcome.mdx │ └── faq.mdx ├── test/ │ ├── Accordion.test.tsx │ ├── BottomNavItem.test.tsx │ ├── Breadcrumb.test.tsx │ ├── Collapse.test.tsx │ ├── Dimmer.test.tsx │ ├── DimmerButtons.test.tsx │ ├── Header.test.tsx │ ├── Hero.test.tsx │ ├── Icon.test.tsx │ ├── Input.test.tsx │ ├── List.test.tsx │ ├── Megamenu.test.tsx │ ├── NavScroll.test.tsx │ ├── Notification.test.tsx │ ├── Progress.test.tsx │ ├── Rating.test.tsx │ ├── Section.test.tsx │ ├── StepperHeaderElement.test.tsx │ ├── Storybook.test.tsx │ ├── TextArea.test.tsx │ ├── TimelinePin.test.tsx │ ├── Toolbar.test.tsx │ ├── ToolbarDividerItem.test.tsx │ ├── ToolbarItem.test.tsx │ ├── Transfer.test.tsx │ ├── __mocks__/ │ │ ├── IntersectionObserverMock.ts │ │ ├── bootstrap-italia.ts │ │ └── matchMedia.ts │ ├── __snapshots__/ │ │ └── Storybook.test.tsx.snap │ ├── helper.tsx │ ├── icons-with-no-title.txt │ └── utils.test.tsx ├── tsconfig.json └── tsup.config.ts ================================================ FILE CONTENTS ================================================ ================================================ FILE: .editorconfig ================================================ # http://editorconfig.org root = true [*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true # The JSON files contain newlines inconsistently [*.json] insert_final_newline = true [*.md] trim_trailing_whitespace = false ================================================ FILE: .github/ISSUE_TEMPLATE/apri-una-segnalazione.it.yaml ================================================ name: Apri una segnalazione - IT description: Per segnalare bug, aprire una discussione o inviare un contributo labels: [] body: - type: checkboxes attributes: label: Esiste già una discussione sul tema che ti interessa, o su un tema simile? description: | Verifica nella [lista delle discussioni](https://github.com/italia/design-react-kit/issues/). Se esiste, vai alla discussione esistente e partecipa lasciando un commento. options: - label: Ho verificato e non esiste required: true - type: markdown attributes: value: "-------" - type: input attributes: label: Versione della libreria description: | Versione utilizzata sulla quale si riscontra un problema o si vuole avviare la discussione. validations: required: true - type: textarea attributes: label: Cosa description: | Descrivi in modo chiaro e conciso il tema della tua segnalazione indicando il link della pagina o delle pagine interessate. Per segnalare un bug indica come riprodurlo per passi: es. (1) Vai a '...'; (2) Fai click su '...'; (3) Ora trovi il bug '...'. Per proporre un contributo descrivi la soluzione che immagini, cosa ti aspetti e le eventuali alternative hai già valutato. Puoi anche aggiungere catture di schermo per arricchire la segnalazione. Assicurati di non condividere informazioni personali. validations: required: true - type: textarea attributes: label: Perché description: | Spiega perché ritieni rilevante la segnalazione. Indica analisi, verifiche e test svolti a supporto (es. dati di analytics, analisi euristiche, test di usabilità, verifiche di accessibilità), se disponibili. validations: required: true - type: textarea attributes: label: Contesto description: | Se significative, inserisci informazioni su tipo di dispositivo, sistema operativo, browser. validations: required: false - type: textarea attributes: label: Altro description: | Inserisci link a esempi, ricerca, design o codice a corredo della segnalazione, se disponibili. validations: required: false - type: markdown attributes: value: | ------- [Conosci il modello di contribuzione del design system del Paese?](https://designers.italia.it/design-system/come-contribuire/modello-di-contribuzione/) ================================================ FILE: .github/ISSUE_TEMPLATE/config.yml ================================================ blank_issues_enabled: false ================================================ FILE: .github/ISSUE_TEMPLATE/open-an-issue.en.yaml ================================================ name: Open an issue - EN description: To report bugs, open a discussion, or submit a contribution labels: [] body: - type: checkboxes attributes: label: Does a discussion already exist on the topic you are interested in, or on a similar topic? description: | 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. options: - label: I verified and it doesn't exist required: true - type: markdown attributes: value: "-------" - type: input attributes: label: Library version description: | Version on which you encounter a problem or want to start a discussion. validations: required: true - type: textarea attributes: label: What description: | 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. To report a bug, specify how to reproduce it step by step. E.g. (1) Go to '...'; (2) Click '...'; (3) Notice the bug '...'. 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. Consider adding screen captures to enhance your report. Make sure you do not share any personal information in the process. validations: required: true - type: textarea attributes: label: Why description: | Explain why you consider this report relevant. 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. validations: required: true - type: textarea attributes: label: Context description: | If relevant, please provide details on the device type, operating system and browser. validations: required: false - type: textarea attributes: label: More description: | If available, provide links to related examples, research, designs or code. validations: required: false - type: markdown attributes: value: | ------- [Do you know Italia's Design System contribution model?](https://designers.italia.it/design-system/come-contribuire/modello-di-contribuzione/) (Italian language) ================================================ FILE: .github/PULL_REQUEST_TEMPLATE.md ================================================ Fixes # #### PR Checklist - [ ] My branch is up-to-date with the Upstream `main` branch. - [ ] The unit tests pass locally with my changes (if applicable). - [ ] I have added tests that prove my fix is effective or that my feature works (if applicable). - [ ] I have added necessary documentation (if appropriate). #### Short description of what this resolves: #### Changes proposed in this Pull Request: ## ================================================ FILE: .github/workflows/ci.yml ================================================ name: Lint, Test & Coverage on: push: branches: [main] pull_request: branches: [main] jobs: coverage: runs-on: ubuntu-latest concurrency: ci-test-${{ github.ref }} steps: - uses: actions/checkout@v4 - name: Setup Node.js with Yarn cache uses: actions/setup-node@v4 with: node-version: '20' cache: 'yarn' - name: Install dependencies run: yarn install --frozen-lockfile - name: Lint run: yarn lint - name: Test run: yarn test:ci - name: Upload coverage uses: codecov/codecov-action@v2 with: token: ${{ secrets.CODECOV_TOKEN }} flags: unittests ================================================ FILE: .github/workflows/commit-lint.yml ================================================ on: push: branches: - main pull_request: branches: - main name: Lint commits jobs: lint-commits: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 with: fetch-depth: 0 - uses: actions/setup-node@v4 with: node-version: 20 - run: yarn add @commitlint/cli - run: npx commitlint --from HEAD~${{ github.event.pull_request.commits }} --to HEAD ================================================ FILE: .github/workflows/pc-check.yml ================================================ on: pull_request: branches: - main workflow_dispatch: name: Lint publiccode jobs: publiccode_yml_validation: runs-on: ubuntu-latest name: publiccode.yml validation steps: - uses: actions/checkout@v5 - uses: italia/publiccode-parser-action@v1 with: publiccode: 'publiccode.yml' ================================================ FILE: .github/workflows/pc-update.yml ================================================ name: Publiccode.yml update on: schedule: - cron: '30 17 * * *' workflow_dispatch: jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 with: fetch-depth: 0 - name: Check publiccode.yml version and date ✅ uses: italia/publiccode-softwareversion-check-action@master id: pva - name: Create Pull Request ⏫ uses: peter-evans/create-pull-request@v3 if: failure() with: title: 'chore: update software version ${{ steps.pva.outputs.version }} and date in publiccode.yml' branch: feature/publiccode-${{ steps.pva.outputs.version }} ================================================ FILE: .github/workflows/publiccode-yml-validation.yml ================================================ name: publiccode.yml validation on: [pull_request, push] jobs: publiccode_yml_validation: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: italia/publiccode-parser-action@v1 with: publiccode: 'publiccode.yml' ================================================ FILE: .github/workflows/publish-release.yml ================================================ name: Generate new release on: push: tags: - "v5*" jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 with: fetch-depth: 0 ref: main - uses: actions/setup-node@v4 with: node-version: 20 registry-url: "https://registry.npmjs.org" - name: git config run: | git config user.name "${GITHUB_ACTOR}" git config user.email "${GITHUB_ACTOR}@users.noreply.github.com" - run: yarn - run: yarn build - name: Publish package to NPM run: yarn publish env: NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} - run: yarn add extract-changelog-release - name: Generate Release Body run: yarn --silent extract-changelog-release > RELEASE_BODY.md - uses: ncipollo/release-action@v1 with: bodyFile: "RELEASE_BODY.md" token: ${{ secrets.GITHUB_TOKEN }} - uses: italia/slack-notify-release-action@v0.4.0 with: slack_token: ${{ secrets.SLACK_TOKEN }} channel_id: ${{ secrets.SLACK_CHANNEL }} project_name: Design React Kit ================================================ FILE: .github/workflows/update-docs.yml ================================================ name: Update documentation on: workflow_dispatch: push: tags: - "v5*" permissions: {} jobs: deploy: runs-on: ubuntu-latest permissions: contents: write steps: - name: Checkout uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2 with: fetch-depth: 0 persist-credentials: false - name: Setup Node.js uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0 with: node-version: 20 package-manager-cache: false - name: Git config run: | git config user.name "${GITHUB_ACTOR}" git config user.email "${GITHUB_ACTOR}@users.noreply.github.com" - name: Install dependencies run: yarn - name: Build docs run: yarn storybook:build - name: Extract destination folder name run: | if [[ "${GITHUB_REF_TYPE}" == "tag" ]]; then if [[ "${GITHUB_REF_NAME}" =~ ^v5\.[0-9]+\.[0-9]+$ ]]; then echo "DEST_FOLDER=${GITHUB_REF_NAME}" >> $GITHUB_ENV else echo "Invalid tag format: ${GITHUB_REF_NAME}. Expected v5.." >&2 exit 1 fi else echo "DEST_FOLDER=latest" >> $GITHUB_ENV fi - name: Deploy docs uses: peaceiris/actions-gh-pages@47f197a2200bb9de68ba5f48fad1c088eb1c4a32 # v4.0.0 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./storybook-static destination_dir: ${{ env.DEST_FOLDER }} # Subfolder name to deploy docs into keep_files: false # Clear previous docs in destination subfolder to avoid orphaned files - name: Create root redirect to latest run: | mkdir -p /tmp/root cat > /tmp/root/index.html << 'REDIRECT'

Redirecting to latest documentation...

REDIRECT - name: Deploy root redirect uses: peaceiris/actions-gh-pages@47f197a2200bb9de68ba5f48fad1c088eb1c4a32 # v4.0.0 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: /tmp/root keep_files: true ================================================ FILE: .gitignore ================================================ # Dependencies node_modules # Outputs storybook-static dist/ .DS_Store .idea .cache coverage # Logs *.log *storybook.log ================================================ FILE: .husky/pre-commit ================================================ #!/bin/sh . "$(dirname "$0")/_/husky.sh" npx lint-staged --verbose ================================================ FILE: .npmignore ================================================ .circleci .storybook assets scripts stories storybook-static dist src/__image_snapshots__/ ================================================ FILE: .nvmrc ================================================ 20 ================================================ FILE: .prettierrc ================================================ { "singleQuote": true, "jsxSingleQuote": true, "semi": true, "tabWidth": 2, "bracketSpacing": true, "jsxBracketSameLine": false, "arrowParens": "always", "trailingComma": "none", "printWidth": 120 } ================================================ FILE: .storybook/main.ts ================================================ import { StorybookConfig } from '@storybook/react-vite'; const config: StorybookConfig = { stories: ['../stories/**/*.@(mdx|stories.@(ts|tsx|js|jsx))'], addons: ['@storybook/addon-links', '@storybook/addon-a11y', '@storybook/addon-docs'], framework: '@storybook/react-vite', core: { builder: '@storybook/builder-vite' // 👈 The builder enabled here. }, staticDirs: ['../static', { from: '../assets', to: '/' }], docs: { defaultName: 'Documentazione', docsMode: false }, async viteFinal(config) { // Merge custom configuration into the default config const { mergeConfig } = await import('vite'); return mergeConfig(config, { // Add dependencies to pre-optimization base: './', build: { chunkSizeWarningLimit: 1000, minify: false } }); } }; export default config; ================================================ FILE: .storybook/manager-head.html ================================================ Design React Kit ================================================ FILE: .storybook/manager.js ================================================ import { addons } from "storybook/manager-api"; import theme from "./theme"; addons.setConfig({ theme: theme, }); ================================================ FILE: .storybook/preview.ts ================================================ import { Preview } from '@storybook/react-vite'; import 'bootstrap-italia/dist/css/bootstrap-italia.min.css'; import '../assets/css/storybook-fixes.css'; import '../assets/docs/scss/bi-fonts.scss'; import '../assets/docs/scss/docs.scss'; import theme from './theme'; const preview: Preview = { parameters: { docs: { theme: theme, toc: { headingSelector: 'h1, h2, h3', title: 'Indice' }, source: { type: 'dynamic' } }, options: { storySort: { order: [ 'Documentazione', [ 'Welcome', 'Organizzare gli spazi', 'Organizzare i contenuti', 'Menu di navigazione', 'Componenti', 'Form', 'Utilities' ], '*' ] } } }, tags: ['autodocs'] }; export default preview; ================================================ FILE: .storybook/stories-helper.ts ================================================ export const componentColor = ["primary", "secondary", "success", "danger", "warning"]; ================================================ FILE: .storybook/theme.ts ================================================ import { create } from 'storybook/theming'; const theme = create({ base: 'light', colorPrimary: '#00C5CA', colorSecondary: '#0066CC', // UI appBg: '#F3F3F5', appContentBg: '#FFF', appBorderColor: 'grey', appBorderRadius: 4, brandTitle: 'Design React Kit', brandUrl: 'https://github.com/italia/design-react-kit' }); export default theme; ================================================ FILE: AUTHORS ================================================ Copyright (c) 2022 - 2024 Presidenza del Consiglio dei Ministri The version control system provides attribution for specific lines of code. ================================================ FILE: CHANGELOG.md ================================================ ## 5.10.0 (2026-03-17) * chore: update publiccode ([dd7364e](https://github.com/italia/design-react-kit/commit/dd7364e)) * chore(deps-dev): bump storybook from 9.1.18 to 9.1.19 ([ae57adf](https://github.com/italia/design-react-kit/commit/ae57adf)) * chore(deps): bump immutable from 5.1.4 to 5.1.5 ([db555e2](https://github.com/italia/design-react-kit/commit/db555e2)) * chore(deps): bump rollup from 4.57.1 to 4.59.0 ([1f80f56](https://github.com/italia/design-react-kit/commit/1f80f56)) * chore(deps): upgrade bootstrap italia ([f8cc596](https://github.com/italia/design-react-kit/commit/f8cc596)) * 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) * fix(collapse): improve navbar collapsable accessibility ([2c78c88](https://github.com/italia/design-react-kit/commit/2c78c88)) * fix(Input): make adaptive type responsive on small screens ([ce854bd](https://github.com/italia/design-react-kit/commit/ce854bd)) ## 5.9.3 (2026-02-17) * chore: update publiccode ([dc904f7](https://github.com/italia/design-react-kit/commit/dc904f7)) * chore(deps-dev): bump storybook from 9.1.2 to 9.1.17 ([ceba080](https://github.com/italia/design-react-kit/commit/ceba080)) * chore(deps): add conventional commits ([4c2eb90](https://github.com/italia/design-react-kit/commit/4c2eb90)) * chore(deps): bump @modelcontextprotocol/sdk from 1.24.0 to 1.26.0 ([4569daa](https://github.com/italia/design-react-kit/commit/4569daa)) * chore(deps): bump lodash ([3561daf](https://github.com/italia/design-react-kit/commit/3561daf)) * chore(deps): bump qs from 6.14.0 to 6.14.1 ([149e22d](https://github.com/italia/design-react-kit/commit/149e22d)) * chore(deps): bump qs from 6.14.1 to 6.14.2 ([3f1a0ae](https://github.com/italia/design-react-kit/commit/3f1a0ae)) * fix(deps): upgrade bootstrap italia ([1035525](https://github.com/italia/design-react-kit/commit/1035525)) ## [5.9.2](https://github.com/italia/design-react-kit/compare/v5.9.1...v5.9.2) (2025-12-10) ### Bug Fixes * **a11y:** better guidelines for accordion component ([e4c9a92](https://github.com/italia/design-react-kit/commit/e4c9a929b5192d4ce88138c978a3e1e8af9fd3b6)) ## [5.9.1](https://github.com/italia/design-react-kit/compare/v5.9.0...v5.9.1) (2025-11-10) ### Bug Fixes * add is-invalid class to input-group based on validation ([762d627](https://github.com/italia/design-react-kit/commit/762d62755ec05c16b57e85bbc961a94af97d9c06)) * prevent numeric input from submitting forms ([c6b3bb8](https://github.com/italia/design-react-kit/commit/c6b3bb8d02e2201dde6839db6f04d427c8bd723d)) * render pager properly after minimization ([a616a48](https://github.com/italia/design-react-kit/commit/a616a480ae8f1490a287c991a2bf5acb4f4085fb)) # [5.9.0](https://github.com/italia/design-react-kit/compare/v5.8.3...v5.9.0) (2025-09-17) ### Features * new cards ([bf62d1b](https://github.com/italia/design-react-kit/commit/bf62d1b5e1a6652b6d7c1dd7c36d294e4cbc6140)) * new storybook ([925fe11](https://github.com/italia/design-react-kit/commit/925fe11a48e2593fb43d5364d5ac733806eb6d61)) ## [5.8.3](https://github.com/italia/design-react-kit/compare/v5.8.2...v5.8.3) (2025-07-15) * fix: initialize video player component only once ([1d95757](https://github.com/italia/design-react-kit/commit/1d95757)) ## [5.8.2](https://github.com/italia/design-react-kit/compare/v5.8.1...v5.8.2) (2025-06-28) * fix: upload image svg not found ([877db17](https://github.com/italia/design-react-kit/commit/877db17)) ## [5.8.1](https://github.com/italia/design-react-kit/compare/v5.8.0...v5.8.1) (2025-06-24) ### Bug Fixes * **build:** asset drag n drop icon ([b5b0fd8](https://github.com/italia/design-react-kit/commit/b5b0fd8a26e8ef7d13bd235c7171e1d649c89bf1)) * dropdown menu in header ([2d6588b](https://github.com/italia/design-react-kit/commit/2d6588b09d4f4c8d45dda2cecc416b00eeee12cf)) # [5.8.0](https://github.com/italia/design-react-kit/compare/v5.7.3...v5.8.0) (2025-06-20) ### Bug Fixes * put pagination form controls outside list ([419cded](https://github.com/italia/design-react-kit/commit/419cded94a8d13d6e7cdc48052c95f58ded98fb8)) * remove useless pagination ul element ([66eeceb](https://github.com/italia/design-react-kit/commit/66eeceb4d2165739d522c7a846c23267af72b063)) ### Features * add upload component ([2798b78](https://github.com/italia/design-react-kit/commit/2798b7834ba44f54e0b82f0500e4a6ef598122b8)) ## [5.7.3](https://github.com/italia/design-react-kit/compare/v5.7.2...v5.7.3) (2025-05-16) ### Bug Fixes * add missing icons ([c62621a](https://github.com/italia/design-react-kit/commit/c62621a01e9e5a0e972c3b0039139a5fd8457501)) ## [5.7.2](https://github.com/italia/design-react-kit/compare/v5.7.1...v5.7.2) (2025-05-13) ### Bug Fixes * splidejs types ([890df5d](https://github.com/italia/design-react-kit/commit/890df5d440fbac7e9a38e1a9656da44510b3cb86)) ## [5.7.1](https://github.com/italia/design-react-kit/compare/v5.7.0...v5.7.1) (2025-04-10) ### Features * use class sticky-top instead of react-stickup ([da3c86d](https://github.com/italia/design-react-kit/commit/da3c86de49deaf10007a36ef53e50ab39f37ac28)) # [5.7.0](https://github.com/italia/design-react-kit/compare/v5.6.1...v5.7.0) (2025-03-27) ### Bug Fixes * find dom node method deprecation ([f738af8](https://github.com/italia/design-react-kit/commit/f738af83535fd84aa6b84f8893c867c7349595e7)) ### Features * new carousel component ([a8405ce](https://github.com/italia/design-react-kit/commit/a8405ce6d9987f203e74858f7155a7070ffb858f)) * new transfer component ([0db606d](https://github.com/italia/design-react-kit/commit/0db606d959a03e15c081c61a3fbf3c5eca62de5e)) * new video component ([f63ad5a](https://github.com/italia/design-react-kit/commit/f63ad5adbac080854b9cba1a9a13912a14344861)) * upgrade bootstrap italia ([c3c0efb](https://github.com/italia/design-react-kit/commit/c3c0efbe8e4efe5ee8aa7cb4137d0c389a956de3)) ## [5.6.1](https://github.com/italia/design-react-kit/compare/v5.6.0...v5.6.1) (2025-02-13) ### Bug Fixes * disabled checkbox and radio ([aae38ea](https://github.com/italia/design-react-kit/commit/aae38eac8c1f2388a7e1dcf6d12920ebc6f71dcb)) * symbol label class ([86d01d8](https://github.com/italia/design-react-kit/commit/86d01d809a8c72b9f7e5eaf7071a9116f9f7eb35)) # [5.6.0](https://github.com/italia/design-react-kit/compare/v5.5.1...v5.6.0) (2025-02-11) ### Bug Fixes * **a11y:** icons ([0408075](https://github.com/italia/design-react-kit/commit/0408075afbdb5a2a93a0e7ca7eae89bd97ac9255)) * **a11y:** input aria describedby ([396c752](https://github.com/italia/design-react-kit/commit/396c7527560cc0a08c3741cdd2b398b2a8ef8293)) * back to top is now focusable ([b87db3f](https://github.com/italia/design-react-kit/commit/b87db3f05b45add57f269f198523efcf13652eb3)) * new label for percentage and currency inputs ([61a8b34](https://github.com/italia/design-react-kit/commit/61a8b340264791575b5683509d62c22ef74a2c32)) ### Features * add icons title for steppers ([fff4263](https://github.com/italia/design-react-kit/commit/fff426363197a52b9eba22141cff05a4e65b5b46)) * new tab component ([b5b9c85](https://github.com/italia/design-react-kit/commit/b5b9c85eda6c3c0ee5ee39a5392dd0f57bca4a6e)) ## [5.5.1](https://github.com/italia/design-react-kit/compare/v5.5.0...v5.5.1) (2025-01-09) ### Bug Fixes * remove dropdown menu offset in slim headers ([52a1149](https://github.com/italia/design-react-kit/commit/52a1149c48303d8e9389000441badf9394c0c674)) # [5.5.0](https://github.com/italia/design-react-kit/compare/v5.4.1...v5.5.0) (2024-12-18) ### Bug Fixes * add aria hidden to rating icons ([7d62963](https://github.com/italia/design-react-kit/commit/7d62963443023350799438a6d3e948d1c7ed0b0d)) * focus tracking ([27d3714](https://github.com/italia/design-react-kit/commit/27d37148f4493e1231a4f671101f118c3b10fdbb)) * improvements on back to top component ([08fb4c7](https://github.com/italia/design-react-kit/commit/08fb4c750f76b5db5ca9a10005a532804d141957)) * keyboard rating ([bd9ddba](https://github.com/italia/design-react-kit/commit/bd9ddbabc1a997ba8fdd08461172cd6a860623b2)) ### Features * header improvements ([f7e2a76](https://github.com/italia/design-react-kit/commit/f7e2a76164e900d7a61dbe0aec7f56eebccf647d)) * nav mode for skiplinks ([2dc384e](https://github.com/italia/design-react-kit/commit/2dc384eea89caaad426ff46613429226b9eba21b)) * navscroll refactoring with progressbar ([d0cfd5b](https://github.com/italia/design-react-kit/commit/d0cfd5bc90daed5616ced16b767a94bb5abeba59)) * new autocomplete component with italian default messages ([b076b91](https://github.com/italia/design-react-kit/commit/b076b912d888682b497f356e69b9a73f6ed98f52)) ## [5.4.1](https://github.com/italia/design-react-kit/compare/v5.4.0...v5.4.1) (2024-11-11) ### Bug Fixes * form control class missing for text area ([be15805](https://github.com/italia/design-react-kit/commit/be15805128978bb02a3ed537f52f5427c9a8e990)) * remove classname from input wrapper ([5fe3186](https://github.com/italia/design-react-kit/commit/5fe3186574a5b33adf5d1085f01320dcc4b8abf5)) # [5.4.0](https://github.com/italia/design-react-kit/compare/v5.3.0...v5.4.0) (2024-11-07) ### Bug Fixes * **a11y:** toolbar divider ([5785c9c](https://github.com/italia/design-react-kit/commit/5785c9c288743186eca4ad36294caba86c044f7f)) * thumbnail extra space ([7c06f04](https://github.com/italia/design-react-kit/commit/7c06f0492b0c78f3c96ed99398748fd20df66995)) * timeline headers ([6e24aae](https://github.com/italia/design-react-kit/commit/6e24aae08d3a8e5df8483f761d77f0a7dac1c83e)) * visually hidden in toolbar ([ad00131](https://github.com/italia/design-react-kit/commit/ad00131ded6a8dfbb291f60f11dc77e28bd841ae)) ### Features * add text and date description to card category component ([39925bd](https://github.com/italia/design-react-kit/commit/39925bdb4b11cd2c7f2e2515ba8d6a57f5de2833)) * new lists ([5021fd1](https://github.com/italia/design-react-kit/commit/5021fd120a629f7fb12e818f4e2dcc53a0fda064)) * new responsive images ([99cf472](https://github.com/italia/design-react-kit/commit/99cf4721822a20f9f69eebfdc84f472fa4131b3b)) * use href in forward component ([9e20c53](https://github.com/italia/design-react-kit/commit/9e20c5359b7aa68af083984fe3c554cd7c0c0241)) # [5.3.0](https://github.com/italia/design-react-kit/compare/v5.2.0...v5.3.0) (2024-10-31) ### Bug Fixes * **a11y:** add aria labelled to sections ([eeca34d](https://github.com/italia/design-react-kit/commit/eeca34d39787fa09bf5a499a1e1ee0be15cf1465)) * **a11y:** hero component ([4d17fe7](https://github.com/italia/design-react-kit/commit/4d17fe71e43cf19d7904cc678439bcffdc76b505)) * **a11y:** title and doc link for modal ([c0a92be](https://github.com/italia/design-react-kit/commit/c0a92be35a076da3cc68b3531f2e7243777c9555)) * group form in examples ([239904d](https://github.com/italia/design-react-kit/commit/239904d11c4d0958d634e670edd68cf45ae7a1aa)) * icons with default title ([14e154b](https://github.com/italia/design-react-kit/commit/14e154b2ad495b18a20cc19774bb2ee3a4fcd722)) ### Features * improve dimmer component ([548608a](https://github.com/italia/design-react-kit/commit/548608a15b4a55061e9f2469ea3a5e79fefc4d3a)) # [5.2.0](https://github.com/italia/design-react-kit/compare/v5.1.0...v5.2.0) (2024-08-05) ### Bug Fixes * thumbnav is a navigation component ([501417e](https://github.com/italia/design-react-kit/commit/501417eda9006de9ea1931d7809aed33125fd90f)) ### Features * add list component ([e4c9e14](https://github.com/italia/design-react-kit/commit/e4c9e14f6295343bce7262665fa54ba4085cad30)) # [5.1.0](https://github.com/italia/design-react-kit/compare/v5.0.4...v5.1.0) (2024-07-02) ### Bug Fixes * alert default props ([39821d9](https://github.com/italia/design-react-kit/commit/39821d93a4b68bf0edd60953e940ebed2c1d5775)) * dimmer ios bug ([315760a](https://github.com/italia/design-react-kit/commit/315760a217541f9a5b73dc9ea92b8c559f4be362)) ### Features * add icon and button to input ([7ad4ca9](https://github.com/italia/design-react-kit/commit/7ad4ca948ee52f35835b6efc19fc424976cd818c)) * **deps:** update to react 18 ([ac0b4d5](https://github.com/italia/design-react-kit/commit/ac0b4d597442e6045d771be55a1437131b90b305)) * new dropdown based on reactstrap ([3e4eda6](https://github.com/italia/design-react-kit/commit/3e4eda671f89436587fc315ade8dff0deb2919f2)) ## [5.0.4](https://github.com/italia/design-react-kit/compare/v5.0.3...v5.0.4) (2024-05-02) ### Bug Fixes * refresh callback declaration fix in useNavScroll ([6a9957e](https://github.com/italia/design-react-kit/commit/6a9957e84964018baf095baeee36558815a92de5)) ## [5.0.3](https://github.com/italia/design-react-kit/compare/v5.0.2...v5.0.3) (2024-04-11) ### Features * add to prop to bottomnavitem ([8126a98](https://github.com/italia/design-react-kit/commit/8126a98bf3758b4500d34499adf8d3784001c8ae)) ## [5.0.2](https://github.com/italia/design-react-kit/compare/v5.0.1...v5.0.2) (2024-04-08) ### Bug Fixes * remove to from link list item ([788cf3f](https://github.com/italia/design-react-kit/commit/788cf3f700ca5a4137e114d1265beda26e8364d5)) * select props on change ([61edd6e](https://github.com/italia/design-react-kit/commit/61edd6eab7922a0a59566ce9d73030d933a1f99f)) * select should not ignore provided props ([571b334](https://github.com/italia/design-react-kit/commit/571b334bff225de4177556d98790fb87c608cfc2)) ## [5.0.1](https://github.com/italia/design-react-kit/compare/v5.0.0...v5.0.1) (2024-03-22) ### Bug Fixes * accordion types error ([4e854e7](https://github.com/italia/design-react-kit/commit/4e854e7c792ad4b11adaf08b403a75b66609d672)) # [5.0.0](https://github.com/italia/design-react-kit/compare/v5.0.0-12...v5.0.0) (2024-03-14) ### Bug Fixes * dropdown import type warning ([9e56cc0](https://github.com/italia/design-react-kit/commit/9e56cc03e10c431f77798a575fde6f374ecac8dc)) ### Features * integrate nav scroll ([5b773be](https://github.com/italia/design-react-kit/commit/5b773be51c5ba056e7912e78bf7288c356fd1e3d)) * stable release ([b365007](https://github.com/italia/design-react-kit/commit/b3650072f964072b4fe9d67ebee9b60d85b6bbde)) # [5.0.0-12](https://github.com/italia/design-react-kit/compare/v5.0.0-11...v5.0.0-12) (2024-03-05) ### Bug Fixes * declaration file ([a93b3fd](https://github.com/italia/design-react-kit/commit/a93b3fd8ac665ff1614e4362f155bf44668adb11)) # [5.0.0-11](https://github.com/italia/design-react-kit/compare/v5.0.0-10...v5.0.0-11) (2024-02-26) ### Features * new dropdown component ([6a02102](https://github.com/italia/design-react-kit/commit/6a021029e587d58ee0c1929f2dc6f06e902b49c2)) # [5.0.0-10](https://github.com/italia/design-react-kit/compare/v5.0.0-9...v5.0.0-10) (2024-02-07) ### Bug Fixes * svg import should be launched manually ([aa61aec](https://github.com/italia/design-react-kit/commit/aa61aecdb8a7ed72feb185c223b841f9512a253c)) # [5.0.0-9](https://github.com/italia/design-react-kit/compare/v5.0.0-8...v5.0.0-9) (2024-02-07) ### Bug Fixes * input validation ([42afc98](https://github.com/italia/design-react-kit/commit/42afc98f53d442f687727deaf8ab87df0c60d270)) ### Features * upgrade bsi to latest version ([27016b7](https://github.com/italia/design-react-kit/commit/27016b794e94baebfc18e217a4efa57a38178c6e)) # [5.0.0-8](https://github.com/italia/design-react-kit/compare/v5.0.0-7...v5.0.0-8) (2024-01-10) ### Features * add datepicker component ([f6d696f](https://github.com/italia/design-react-kit/commit/f6d696f8f537ae6b3affc2a40f6a97db0399b371)) # [5.0.0-7](https://github.com/italia/design-react-kit/compare/v5.0.0-6...v5.0.0-7) (2023-12-12) ### Features * numeric input component ([d4a299c](https://github.com/italia/design-react-kit/commit/d4a299cb43ad138352deab45d552bd33a3be3b19)) ================================================ FILE: CODE_OF_CONDUCT.EN.md ================================================ # Code of Conduct ## 1. Purpose A 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). This code of conduct outlines our expectations for all those who participate in our community, as well as the consequences for unacceptable behavior. We invite all those who participate in Developers Italia to help us create safe and positive experiences for everyone. ## 2. Open Source Citizenship A 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. Communities 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. If 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. ## 3. Expected Behavior The following behaviors are expected and requested of all community members: - Participate in an authentic and active way. In doing so, you contribute to the health and longevity of this community. - Exercise consideration and respect in your speech and actions. - Attempt collaboration before conflict. - Refrain from demeaning, discriminatory, or harassing behavior and speech. - 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. - Remember that community event venues may be shared with members of the public; please be respectful to all patrons of these locations. ## 4. Unacceptable Behavior The following behaviors are considered harassment and are unacceptable within our community: - Violence, threats of violence or violent language directed against another person. - Sexist, racist, homophobic, transphobic, ableist or otherwise discriminatory jokes and language. - Posting or displaying sexually explicit or violent material. - Personal insults, particularly those related to gender, sexual orientation, race, religion, or disability. - Unwelcome sexual attention. This includes, sexualized comments or jokes; inappropriate touching, groping, and unwelcomed sexual advances. - Deliberate intimidation, stalking or following (online or in person). - Advocating for, or encouraging, any of the above behavior. - Sustained disruption of community events, including talks and presentations. ## 5. Consequences of Unacceptable Behavior Unacceptable behavior from any community member, including sponsors and those with decision-making authority, will not be tolerated. Anyone asked to stop unacceptable behavior is expected to comply immediately. If 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. ## 6. Reporting Guidelines If 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. Additionally, 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. ## 7. Addressing Grievances If 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. ## 8. Scope We 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. This 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. ## 9. Contact info You can reach the managers of Developers Italia at coc-report@developers.italia.it ## 10. License and attribution This Code of Conduct is distributed under a [Creative Commons Attribution-ShareAlike license](http://creativecommons.org/licenses/by-sa/3.0/). Portions 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). Retrieved on November 22, 2016 from [http://citizencodeofconduct.org/](http://citizencodeofconduct.org/) ================================================ FILE: CODE_OF_CONDUCT.md ================================================ # Codice di condotta ## 1. Scopo Uno 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). Questo codice di condotta delinea le nostre aspettative per tutti coloro che partecipano alla nostra comunità, nonché le conseguenze per comportamenti inaccettabili. Invitiamo tutti coloro che partecipano a Developers Italia a aiutarci a creare esperienze positive e positive per tutti. ## 2. Cittadinanza open source Un 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à. Le 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à. Se 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. ## 3. Comportamento previsto I seguenti comportamenti sono previsti e richiesti a tutti i membri della comunità: - Partecipare in modo autentico e attivo. In tal modo, contribuisci alla salute e alla longevità di questa comunità. - Esercitare considerazione e rispetto nei propri discorsi e azioni. - Tentativo di collaborazione prima del conflitto. - Astenersi dal comportamento umiliante, discriminatorio o molesto. - 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. - 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. ## 4. Comportamento inaccettabile I seguenti comportamenti sono considerati molestie e inaccettabili all'interno della nostra comunità: - Violenza, minacce di violenza o linguaggio violento diretto contro un'altra persona. - Scherzi e linguaggio sessista, razzista, omofobo, transfobico, o comunque discriminatorio. - Pubblicare o visualizzare materiale sessualmente esplicito o violento. - Insulti personali, in particolare quelli relativi al genere, orientamento sessuale, razza, religione o disabilità. - Attenzione sessuale sgradita. Ciò include commenti o battute sessualizzate; approcci sessuali inappropriati, toccanti e indesiderati. - Intimidazione intenzionale, stalking o seguito (online o di persona). - Sostenendo o incoraggiando uno qualsiasi dei suddetti comportamenti. - Perturbazione continua degli eventi della comunità, inclusi discorsi e presentazioni. ## 5. Conseguenze del comportamento inaccettabile Il comportamento inaccettabile da parte di qualsiasi membro della comunità, inclusi gli sponsor e coloro che hanno l'autorità decisionale, non sarà tollerato. Ci si aspetta che chiunque chieda di smettere di comportarsi in modo inaccettabile si adegui immediatamente. Se 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. ## 6. Linee guida per la segnalazione Se 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`. Inoltre, 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. ## 7. Affrontare i reclami Se 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. ## 8. Ambito di applicazione Ci 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. Questo 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à. ## 9. Informazioni di contatto Puoi raggiungere i gestori di Developers Italia all'indirizzo `coc-report@developers.italia`. ================================================ FILE: CONTRIBUTING.md ================================================ ## Come contribuire 💙 👉🏻 È possibile contribuire alla libreria in vari modi: - 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). - Attraverso la segnalazione di bug o miglioramenti al [repository ufficiale](https://github.com/italia/design-react-kit/) di React Kit. - Scrivendoci sul [canale dedicato](https://developersitalia.slack.com/messages/C04J92F9XM2/) di Slack. - Con il codice seguendo le [istruzioni riportate nel README.md](https://github.com/italia/design-react-kit?tab=readme-ov-file#con-il-codice) ================================================ FILE: LICENSE ================================================ Copyright (c) 2018, the respective contributors, as shown by the AUTHORS file. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 2. 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. 3. 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. THIS 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. ================================================ FILE: README.EN.md ================================================

Design React Kit

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

italia.github.io/design-react-kit

NPM Build codecov License GitHub issues

Join the #design-system-react channel Get invited

_Read this in other languages: [Italiano 🇮🇹](README.md)._ _⚠️ 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)._ ## Intro **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. Components are showcased with [Storybook](https://storybook.js.org/). Public version of Storybook is available [here](https://italia.github.io/design-react-kit) for the latest stable release. To play with the library, the [Playground React Kit](https://github.com/italia/design-react-kit-playground) is available. # Table of contents - [Table of contents](#table-of-contents) - [Usage](#usage) - [Add bootstrap-italia and fonts](#add-bootstrap-italia-and-fonts) - [Example](#example) - [Loading Fonts](#loading-fonts) - [Peer dependencies](#peer-dependencies) - [How to contribute 💙](#how-to-contribute-) - [How to contribute with your own code](#how-to-contribute-with-your-own-code) - [How to create new components](#how-to-create-new-components) - [Snapshot tests](#snapshot-tests) - [Building library](#building-library) - [Useful links](#useful-links) - [Browsers support](#browsers-support) - [TypeScript typing definitions](#typescript-typing-definitions) - [Main contributors](#main-contributors) ## Usage To 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: ```sh yarn create vite my-react-app --template react cd nome-app yarn add design-react-kit --save ``` More information on creating a new app with React: - [Official documentation](https://react.dev/learn/start-a-new-react-project) - [Vitejs](https://vitejs.dev/guide/#getting-started) ### Add bootstrap-italia and fonts The `design-react-kit` module does not include the CSS and font files in the bundle, so this needs to be installed as well: ```sh yarn add bootstrap-italia typeface-lora typeface-roboto-mono typeface-titillium-web --save ``` #### Note for `vite` users If you are using `vite` as a bundler and want to customize the standard appearance of Bootstrap Italia, you need to add an alias in the `vite.config.js` file: ```js import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()], resolve: { alias: { "@splidejs/splide/src/css/core/index": "node_modules/@splidejs/splide/src/css/core/index.scss", } } }); ``` ### Example Then, you just need to import CSS e font editing `./src/App.js` as shown: ```tsx import React from 'react'; import './App.css'; import { Alert } from 'design-react-kit'; import 'bootstrap-italia/dist/css/bootstrap-italia.min.css'; import 'typeface-titillium-web'; import 'typeface-roboto-mono'; import 'typeface-lora'; function App() { return This is an Alert; } export default App; ``` You can consult this web template with StackBlitz: [Web template](https://stackblitz.com/edit/vitejs-vite-yy8bnk?file=src%2FApp.tsx) ### Loading Fonts The 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. Declaring the `FontLoader` on top of the Application tree it is enough to trigger the loading of the fonts. As alternative it is required to manually manage the loading via the `webfontloader` package: ```js const WebFont = require('webfontloader'); WebFont.load({ custom: { families: ['Titillium Web:300,400,600,700:latin-ext', 'Lora:400,700:latin-ext', 'Roboto Mono:400,700:latin-ext'] } }); ``` ### Peer dependencies The library does not include `react` and `react-dom`, avoiding versions clashing and increasing the size of the bundle. For this reason, for local development it will be necessary to manually install dependencies. The command to be executed is ```sh yarn install --peers ``` or alternatively manually ```sh yarn install react react-dom ``` ## How to contribute 💙 👉🏻 You can contribute to the library in various ways: - 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). - By reporting bugs or improvements to the React Kit [official repository](https://github.com/italia/design-react-kit/). - By writing to us on the [dedicated channel](https://developersitalia.slack.com/messages/C04J92F9XM2/) of Slack. ## How to contribute with your own code The minimum requirements of your local environment should be: - NodeJS (>= 18) - Yarn Clone the repo and run `yarn` to install the dependencies. Then run the `yarn storybook:serve` command to start the development server. Storybook will therefore be available at http://localhost:9001/ Public version of the Storybook is available [here](https://italia.github.io/design-react-kit). Storybook has been enriched with some `addons` that make it more talented. Check dependencies on the `package.json` file for details. ## How to create new components This section explains how to create new components in the repository. All components reside in the `src` directory: each component is a folder with all that is needed to make it work. _Storybook_ stories are instead under `stories`. Unit tests are under the `test` folder. i.e. the `Button` component is shown below the `src/Button` path and its structure is as follows: ``` ├── src │ └── Button │ └── Button.tsx ├── stories │ ├── Components │ │ └── Button.stories.tsx │ └── Documentation │ └── Button.mdx └── test └── Button.test.tsx ``` Some basic rules for structuring the components: - TSX file component files use JSX syntax. - The `.stories.tsx` files only contains examples relative to component. - The `.mdx` files only contains documentation relative to component. - The `.test.tsx` files only contains tests relative to component. Once you have created a new component, with its history, starting _Storybook_ will be able to check that everything works as it should. Documentation: - [Storybook](https://storybook.js.org/docs/get-started) - [MDX](https://storybook.js.org/docs/writing-docs/mdx) ### Snapshot tests The 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. In such case it is possible to update the snapshot file with the following command: ```sh yarn test -u ``` At 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. ## Building library To build the library and add files into the `dist` folder: ```sh yarn build ``` ## Useful links - [Playground React Kit](https://github.com/italia/design-react-kit-playground) ## Browsers support The 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`. ## TypeScript typing definitions The library has been rewritten in Typescript and types are exported in the bundle. ## Main contributors A special thank you to those who made the development of this library possible! | [![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) | | -------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | | Sabatino Galasso | Marco Liberati | Matteo Avesani | Federico Turbino | and thanks to [OpenCity Labs](https://opencitylabs.it) team OpenCity Labs --- All contributors (_made with [contributors-img](https://contrib.rocks)_) ================================================ FILE: README.md ================================================

Design React Kit

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

italia.github.io/design-react-kit

NPM Build codecov License GitHub issues

Join the #design-system-react channel Get invited

_Read this in other languages: [English 🇬🇧](README.EN.md)._ _⚠️ 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)._ ## Intro **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). Per navigare la libreria e visualizzare i componenti, è stato utilizzato [Storybook](https://storybook.js.org/). La versione pubblica dello Storybook è disponibile [qui](https://italia.github.io/design-react-kit) per l'ultima release stabile pubblicata. Per giocare con la libreria è disponibile il [Playground React Kit](https://github.com/italia/design-react-kit-playground). # Indice - [Indice](#indice) - [Come usare il kit](#come-usare-il-kit) - [Aggiungere bootstrap-italia ed i font](#aggiungere-bootstrap-italia-ed-i-font) - [Esempio](#esempio) - [Caricamento Font](#caricamento-font) - [Peer dependencies](#peer-dependencies) - [Come contribuire 💙](#come-contribuire-) - [Con il codice](#con-il-codice) - [Impostare l'ambiente locale](#impostare-lambiente-locale) - [Come creare nuovi componenti](#come-creare-nuovi-componenti) - [Snapshot tests](#snapshot-tests) - [Compilazione libreria](#compilazione-libreria) - [Link utili](#link-utili) - [Supporto browsers](#supporto-browsers) - [TypeScript typings](#typescript-typings) - [Contributor della libreria](#contributor-della-libreria) ## Come usare il kit Per 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: ```sh yarn create vite nome-app --template react cd nome-app yarn add design-react-kit --save ``` Maggiori informazioni per crere una nuova app con React: - [Documentazione ufficiale](https://react.dev/learn/start-a-new-react-project) - [Vitejs](https://vitejs.dev/guide/#getting-started) ### Aggiungere bootstrap-italia ed i font Il `design-react-kit` non include il CSS ed i file font, ed è quindi necessario installarli a parte: ```sh yarn add bootstrap-italia typeface-lora typeface-roboto-mono typeface-titillium-web --save ``` ### Esempio A questo punto, è sufficiente importare esplicitamente nella app CSS e font se si è usato `create vite` all'interno del file `./src/App.js`: ```tsx import React from 'react'; import './App.css'; import { Alert } from 'design-react-kit'; import 'bootstrap-italia/dist/css/bootstrap-italia.min.css'; import 'typeface-titillium-web'; import 'typeface-roboto-mono'; import 'typeface-lora'; function App() { return This is an Alert; } export default App; ``` Puoi consultare questo template web con StackBlitz: [Template web](https://stackblitz.com/edit/vitejs-vite-yy8bnk?file=src%2FApp.tsx) #### Nota per chi utilizza `vite` Se si utilizza `vite` come bundler e si vuole personalizzare l'aspetto standard di Bootstrap Italia, è necessario aggiungere un alias nel file `vite.config.js`: ```js import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()], resolve: { alias: { "@splidejs/splide/src/css/core/index": "node_modules/@splidejs/splide/src/css/core/index.scss", } } }); ``` ### Caricamento Font Il 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`. È sufficiente dichiarare il componente `FontLoader` in cima all'app react per permettere il caricamento. In alternativa è necessario gestire il caricamento dei font manualmente mediante il pacchetto `webfontloader`: ```js const WebFont = require('webfontloader'); WebFont.load({ custom: { families: ['Titillium Web:300,400,600,700:latin-ext', 'Lora:400,700:latin-ext', 'Roboto Mono:400,700:latin-ext'] } }); ``` ### Peer dependencies La libreria non include `react` e `react-dom`, evitando clashing di versioni e aumento inutile delle dimensioni del bundle. Per questo motivo per lo sviluppo in locale sarà necessario installare manualmente le dipendenze. Il comando da eseguire è ```sh yarn install --peers ``` oppure in alternativa manualmente ```sh yarn install react react-dom ``` ## Come contribuire 💙 👉🏻 È possibile contribuire alla libreria in vari modi: - 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). - Attraverso la segnalazione di bug o miglioramenti al [repository ufficiale](https://github.com/italia/design-react-kit/) di React Kit. - Scrivendoci sul [canale dedicato](https://developersitalia.slack.com/messages/C04J92F9XM2/) di Slack. ### Con il codice Vorresti dare una mano su Design React Kit? **Sei nel posto giusto!** Se non l'hai già fatto, inizia spendendo qualche minuto per approfondire la tua conoscenza sulle [linee guida di design per i servizi web della PA](https://design-italia.readthedocs.io/it/stable/index.html), e fai riferimento alle [indicazioni su come contribuire a Design React Kit](https://github.com/italia/design-react-kit/blob/main/CONTRIBUTING.md). ### Impostare l'ambiente locale I requisiti minimi del tuo ambiente locale devono essere: - NodeJS (>= 18) - Yarn Clona il repository ed esegui `yarn` per installare le dipendenze. Quindi esegui ```sh yarn storybook:serve ``` per avviare il server di sviluppo. Storybook sarà quindi disponibile all'indirizzo http://localhost:9001/ Storybook è stato arricchito con alcuni `addons` che lo rendono più parlante. ## Come creare nuovi componenti Questa sezione guiderà alla creazione di nuovi componenti nel repository. Tutti i componenti risiedono nella cartella `src`: ogni componente possiede una sua cartella con tutto ciò che è necessario per farlo funzionare. Le storie `Storybook` invece sono sotto `stories`. I test unitari risiedono nella cartella `test`. Il componente `Button` ad esempio è presente sotto il percorso `src/Button` e la sua struttura è la seguente: ``` ├── src │ └── Button │ └── Button.tsx ├── stories │ ├── Components │ │ └── Button.stories.tsx │ └── Documentation │ └── Button.mdx └── test └── Button.test.tsx ``` Alcune regole di base per strutturare i componenti: - I file TSX file del componente utilizza la sintassi JSX. - I file `.stories.tsx` dovrebbero contenere solo quanto relativo al componente stesso. - I file `.mdx` dovrebbero contenere solo documentazione relativa al componente stesso - I file `.test.tsx` dovrebbero contenere solo test relativi al componente stesso. Una volta creato un nuovo componente, con la sua story, avviando Storybook sarà possibile controllare che tutto funzioni come dovrebbe. Documentazione: - [Storybook](https://storybook.js.org/docs/get-started) - [MDX](https://storybook.js.org/docs/writing-docs/mdx) ### Snapshot tests Il 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. Qualora fosse stata aggiunta una nuova storia o modificata una già presente, sarà necessario aggiornare il file di snapshot come segue: ```sh yarn test -u ``` A 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. ## Compilazione libreria Per compilare la libreria e generare i file nella cartella `dist`, è sufficiente lanciare il comando dedicato: ```sh yarn build ``` ## Link utili - [Playground React Kit](https://github.com/italia/design-react-kit-playground) ## Supporto browsers Il 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`. ## TypeScript typings La libreria è stata portata a Typescript ed i tipi sono esportati con essa. ## Contributor della libreria Un grazie speciale a chi ha reso possibile lo sviluppo di questa libreria! | [![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) | | -------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | | Sabatino Galasso | Marco Liberati | Matteo Avesani | Federico Turbino | e al contributo di [OpenCity Labs](https://opencitylabs.it) OpenCity Labs --- Tutti i contributor (_made with [contributors-img](https://contrib.rocks)_) ================================================ FILE: assets/css/accesibility.css ================================================ .bd-callout-accessibility { border-left-color: #10925f !important; } .bd-callout { padding: 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; border: 1px solid #eee; border-left-width: .25rem; border-radius: .25rem; } ================================================ FILE: assets/css/storybook-fixes.css ================================================ /* ========================== // `
` and `` tags.
// ========================== */

pre,
code,
sbdocs-preview > code .token[class],
sbdocs-preview > code .token.comment[class] {
  font-style: normal;
  color: #f8f8f2;
}

pre > code,
pre > code[class] {
  outline: 0;
  display: block;
  font-size: 13px;
  tab-size: 2;
  padding: 1em;
  overflow-x: auto;
}

/* =======================================
// Fix incorrect Storybook implementation.
// ======================================= */

[class] > pre.hljs[class] {
  overflow: hidden;
  padding: 0;
  white-space: pre;
}

[class] > pre.hljs[class] > code {
  background-color: transparent;
  border-radius: 0;
}

/* =======================================
// Specific tweak for the Storybook documentation
// ======================================= */

/* Fix docs wrapper alignment and padding */
.sbdocs.css-qunf3a {
  justify-content: left;
  padding: 3rem;
}

/* Fix TOC size */
.css-zpcrvf {
  width: auto !important;
}

.docs .callout {
  max-width: none;
}

.bg-grey {
  background-color: #e9e6f2 !important;
}

.bg-dark {
  background-color: #17324d !important;
}

.btn-example .btn {
  margin: 4px 8px;
  width: 200px;
}

.square-color {
  width: 150px;
  height: 150px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 15px;
  margin-right: 15px;
  float: left;
}

.c-line {
  height: 60px;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 15px;
  margin-bottom: 8px;
}

.docs-show-dropdown-open div {
  position: relative !important;
  display: block !important;
}

div[id*='story'] .progress + .progress {
  margin-top: 1rem;
}

div[id*='componenti-bottomnav'] > div {
  max-width: 375px;
  height: 240px;
  margin: 0 5px 20px;
  padding: 0;
  border-top-style: dashed;
  position: relative;
  padding: 1rem;
  margin-top: 1rem;
  border: solid #f3f3f5;
  border-width: 4px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom: 0;
  border-width: 0.2rem;
}

div[id*='componenti-bottomnav'] > div::after {
  display: block;
  clear: both;
  content: '';
}

div[id*='componenti-bottomnav'] .bottom-nav {
  position: absolute;
}

.test-docs .notification {
  position: relative;
}

.test-desktop {
  width: 100%;
  height: 500px;
  background: #fafafa;
  border: 1px solid #eee;
  position: relative;
  overflow: hidden;
}

.test-desktop .notification {
  position: absolute;
  display: block;
}

.layout-example.docs .d-flex,
.layout-example.docs .row {
  background-image:
    linear-gradient(45deg, #d9dadb 25%, transparent 25%), linear-gradient(-45deg, #d9dadb 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #d9dadb 75%), linear-gradient(-45deg, transparent 75%, #d9dadb 75%);
  background-size: 20px 20px;
  background-position:
    0 0,
    0 10px,
    10px -10px,
    -10px 0;
}

.layout-example.docs .row > .col,
.layout-example.docs .row > [class^='col-'] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  background-color: rgba(0, 102, 204, 0.75);
  border: 1px solid #06c;
  color: #fff;
}

.toolbar-docs-style {
  max-width: 400px;
  height: 400px;
}

/* =======================================
// Display Back to top button inline in the docs
// ======================================= */

.back-to-top:not(.example) {
  position: relative;
  bottom: unset;
  right: unset;
  visibility: visible;
  margin: 0 auto;
  opacity: 1;
  transform: scale(1);
}

.callout-inner p {
  margin-top: 0;
}


================================================
FILE: assets/docs/scss/_callouts.scss
================================================
.bd-callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #eee;
    border-left-width: 0.25rem;
    border-radius: 0.25rem;
  
    h4 {
      margin-top: 0;
      margin-bottom: 0.25rem;
    }
    h3 {
      margin-top: 0;
      margin-bottom: 0.25rem;
    }
  
    p:last-child {
      margin-bottom: 0;
    }
  
    code {
      border-radius: 0.25rem;
    }
  
    & + .bd-callout {
      margin-top: -0.25rem;
    }
  }
  
  // Variations
  @mixin bs-callout-variant($color) {
    border-left-color: darken($color, 10%);
    h4 {
      color: darken($color, 10%);
    }
    h3 {
      color: darken($color, 10%);
    }
  }
  
  .bd-callout-info {
    @include bs-callout-variant($docs-info);
  }
  
  .bd-callout-warning {
    @include bs-callout-variant($docs-warning);
  }
  
  .bd-callout-danger {
    @include bs-callout-variant($docs-danger);
  }
  
  .bd-callout-accessibility {
    h4 {
      color: $docs-accessibility;
    }
    border-left-color: lighten($docs-accessibility, 10%);
    h3 {
      color: $docs-accessibility;
    }
    border-left-color: lighten($docs-accessibility, 10%);
  }

================================================
FILE: assets/docs/scss/_colors.scss
================================================
//
// Docs color palette classes
//

@each $color, $value in $colors {
    .swatch-#{$color} {
      color: color-contrast($value);
      background-color: #{$value};
    }
  }
  
  @each $color, $value in $theme-colors {
    .swatch-#{$color} {
      color: color-contrast($value);
      background-color: #{$value};
    }
  }
  
  @each $color, $value in $grays {
    .swatch-#{$color} {
      color: color-contrast($value);
      background-color: #{$value};
    }
  }
  
  $primary-bright: lighten(saturate($primary, 5%), 15%) !default;
  $primary-light: lighten(saturate($primary, 5%), 45%) !default;
  $docs-info: rgb(23, 50, 77) !default;
  $docs-warning: rgb(255, 151, 0) !default;
  $docs-danger: rgb(248, 62, 90) !default;
  $docs-accessibility: rgb(11, 100, 65) !default;
  $docs-dark: #3e5266 !default;

================================================
FILE: assets/docs/scss/bi-fonts.scss
================================================
$font-path: '../../../node_modules/bootstrap-italia/dist/fonts';

/* Titillium+Web:300,400,600,700 */

/* titillium-web-300 - latin-ext_latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.eot'); /* IE9 Compat Modes */
  src:
    local(''),
    url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.woff2') format('woff2'),
    /* Super Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.woff')
      format('woff'),
    /* Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.ttf')
      format('truetype'),
    /* Safari, Android, iOS */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300.svg#TitilliumWeb')
      format('svg'); /* Legacy iOS */
}

/* titillium-web-300italic - latin-ext_latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.eot'); /* IE9 Compat Modes */
  src:
    local(''),
    url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.eot?#iefix')
      format('embedded-opentype'),
    /* IE6-IE8 */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.woff2') format('woff2'),
    /* Super Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.woff')
      format('woff'),
    /* Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.ttf')
      format('truetype'),
    /* Safari, Android, iOS */
      url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}

/* titillium-web-regular - latin-ext_latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src:
    local(''),
    url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.woff2') format('woff2'),
    /* Super Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.woff')
      format('woff'),
    /* Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.ttf')
      format('truetype'),
    /* Safari, Android, iOS */
      url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}

/* titillium-web-italic - latin-ext_latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */
  src:
    local(''),
    url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.woff2') format('woff2'),
    /* Super Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.woff')
      format('woff'),
    /* Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.ttf')
      format('truetype'),
    /* Safari, Android, iOS */
      url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}

/* titillium-web-700 - latin-ext_latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
  src:
    local(''),
    url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.woff2') format('woff2'),
    /* Super Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.woff')
      format('woff'),
    /* Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.ttf')
      format('truetype'),
    /* Safari, Android, iOS */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700.svg#TitilliumWeb')
      format('svg'); /* Legacy iOS */
}

/* titillium-web-700italic - latin-ext_latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.eot'); /* IE9 Compat Modes */
  src:
    local(''),
    url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.eot?#iefix')
      format('embedded-opentype'),
    /* IE6-IE8 */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.woff2') format('woff2'),
    /* Super Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.woff')
      format('woff'),
    /* Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.ttf')
      format('truetype'),
    /* Safari, Android, iOS */
      url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}
/* titillium-web-600 - latin-ext_latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.eot'); /* IE9 Compat Modes */
  src:
    local(''),
    url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.woff2') format('woff2'),
    /* Super Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.woff')
      format('woff'),
    /* Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.ttf')
      format('truetype'),
    /* Safari, Android, iOS */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600.svg#TitilliumWeb')
      format('svg'); /* Legacy iOS */
}

/* titillium-web-600italic - latin-ext_latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.eot'); /* IE9 Compat Modes */
  src:
    local(''),
    url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.eot?#iefix')
      format('embedded-opentype'),
    /* IE6-IE8 */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.woff2') format('woff2'),
    /* Super Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.woff')
      format('woff'),
    /* Modern Browsers */ url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.ttf')
      format('truetype'),
    /* Safari, Android, iOS */
      url('#{$font-path}/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}

/* Lora:400,700 */

/* lora-regular - latin-ext_latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('#{$font-path}/Lora/lora-v20-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src:
    local(''),
    url('#{$font-path}/Lora/lora-v20-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-regular.woff2') format('woff2'),
    /* Super Modern Browsers */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-regular.woff') format('woff'),
    /* Modern Browsers */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-regular.ttf') format('truetype'),
    /* Safari, Android, iOS */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-regular.svg#Lora') format('svg'); /* Legacy iOS */
}

/* lora-700 - latin-ext_latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
  src:
    local(''),
    url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700.woff2') format('woff2'),
    /* Super Modern Browsers */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700.woff') format('woff'),
    /* Modern Browsers */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700.ttf') format('truetype'),
    /* Safari, Android, iOS */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700.svg#Lora') format('svg'); /* Legacy iOS */
}

/* lora-italic - latin-ext_latin */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('#{$font-path}/Lora/lora-v20-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */
  src:
    local(''),
    url('#{$font-path}/Lora/lora-v20-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-italic.woff2') format('woff2'),
    /* Super Modern Browsers */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-italic.woff') format('woff'),
    /* Modern Browsers */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-italic.ttf') format('truetype'),
    /* Safari, Android, iOS */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-italic.svg#Lora') format('svg'); /* Legacy iOS */
}

/* lora-700italic - latin-ext_latin */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700italic.eot'); /* IE9 Compat Modes */
  src:
    local(''),
    url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700italic.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700italic.woff2') format('woff2'),
    /* Super Modern Browsers */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700italic.woff') format('woff'),
    /* Modern Browsers */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700italic.ttf') format('truetype'),
    /* Safari, Android, iOS */ url('#{$font-path}/Lora/lora-v20-latin-ext_latin-700italic.svg#Lora') format('svg'); /* Legacy iOS */
}

/* Roboto+Mono:400,700 */

/* roboto-mono-regular - latin-ext_latin */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src:
    local(''),
    url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.woff2') format('woff2'),
    /* Super Modern Browsers */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.woff')
      format('woff'),
    /* Modern Browsers */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.ttf')
      format('truetype'),
    /* Safari, Android, iOS */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.svg#RobotoMono')
      format('svg'); /* Legacy iOS */
}

/* roboto-mono-700 - latin-ext_latin */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
  src:
    local(''),
    url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.woff2') format('woff2'),
    /* Super Modern Browsers */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.woff') format('woff'),
    /* Modern Browsers */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.ttf') format('truetype'),
    /* Safari, Android, iOS */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.svg#RobotoMono')
      format('svg'); /* Legacy iOS */
}

/* roboto-mono-italic - latin-ext_latin */
@font-face {
  font-family: 'Roboto Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */
  src:
    local(''),
    url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.woff2') format('woff2'),
    /* Super Modern Browsers */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.woff')
      format('woff'),
    /* Modern Browsers */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.ttf') format('truetype'),
    /* Safari, Android, iOS */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.svg#RobotoMono')
      format('svg'); /* Legacy iOS */
}

/* roboto-mono-700italic - latin-ext_latin */
@font-face {
  font-family: 'Roboto Mono';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.eot'); /* IE9 Compat Modes */
  src:
    local(''),
    url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.woff2') format('woff2'),
    /* Super Modern Browsers */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.woff')
      format('woff'),
    /* Modern Browsers */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.ttf')
      format('truetype'),
    /* Safari, Android, iOS */ url('#{$font-path}/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.svg#RobotoMono')
      format('svg'); /* Legacy iOS */
}


================================================
FILE: assets/docs/scss/docs.scss
================================================
/*!
 * Bootstrap Docs (https://getbootstrap.com)
 * Copyright 2011-2017 The Bootstrap Authors
 * Copyright 2011-2017 Twitter, Inc.
 * Licensed under the Creative Commons Attribution 3.0 Unported License. For
 * details, see https://creativecommons.org/licenses/by/3.0/.
 */
// Dev notes
//
// Background information on nomenclature and architecture decisions here.
//
// - Bootstrap functions, variables, and mixins are included for easy reuse.
//   Doing so gives us access to the same core utilities provided by Bootstrap.
//   For example, consistent media queries through those mixins.
//
// - Bootstrap's **docs variables** are prefixed with `$docs-`.
//   These custom colors avoid collision with the components Bootstrap provides.
//
// - Classes are prefixed with `.bd-`.
//   These classes indicate custom-built or modified components for the design
//   and layout of the Bootstrap docs. They are not included in our builds.
//
// Happy Bootstrapping!
@import '../../../node_modules/bootstrap-italia/src/scss/base/functions';
@import '../../../node_modules/bootstrap-italia/src/scss/base/mixins';
@import '../../../node_modules/bootstrap-italia/src/scss/base/variables';
// Load docs components
@import 'colors';
@import 'callouts';

================================================
FILE: babel.config.json
================================================
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": 100
        }
      }
    ],
    "@babel/preset-typescript",
    "@babel/preset-react"
  ],
  "plugins": ["@babel/plugin-transform-optional-chaining"]
}


================================================
FILE: codecov.yml
================================================
coverage:
  status:
    project:
      default:
        target: 90%
        threshold: 5%
    patch: false


================================================
FILE: commitlint.config.cjs
================================================
module.exports = {
  parserPreset: 'conventional-changelog-conventionalcommits',
  rules: {
    'body-leading-blank': [1, 'always'],
    'body-max-line-length': [2, 'always', 100],
    'footer-leading-blank': [1, 'always'],
    'footer-max-line-length': [2, 'always', 100],
    'header-max-length': [2, 'always', 100],
    'subject-case': [2, 'never', ['sentence-case', 'start-case', 'pascal-case', 'upper-case']],
    'subject-empty': [2, 'never'],
    'subject-full-stop': [2, 'never', '.'],
    'type-case': [2, 'always', 'lower-case'],
    'type-empty': [2, 'never'],
    'type-enum': [
      2,
      'always',
      ['build', 'chore', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test']
    ]
  },
  prompt: {
    questions: {
      type: {
        description: "Select the type of change that you're committing",
        enum: {
          feat: {
            description: 'A new feature',
            title: 'Features',
            emoji: '✨'
          },
          fix: {
            description: 'A bug fix',
            title: 'Bug Fixes',
            emoji: '🐛'
          },
          docs: {
            description: 'Documentation only changes',
            title: 'Documentation',
            emoji: '📚'
          },
          style: {
            description:
              'Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)',
            title: 'Styles',
            emoji: '💎'
          },
          refactor: {
            description: 'A code change that neither fixes a bug nor adds a feature',
            title: 'Code Refactoring',
            emoji: '📦'
          },
          perf: {
            description: 'A code change that improves performance',
            title: 'Performance Improvements',
            emoji: '🚀'
          },
          test: {
            description: 'Adding missing tests or correcting existing tests',
            title: 'Tests',
            emoji: '🚨'
          },
          build: {
            description:
              'Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)',
            title: 'Builds',
            emoji: '🛠'
          },
          ci: {
            description:
              'Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)',
            title: 'Continuous Integrations',
            emoji: '⚙️'
          },
          chore: {
            description: "Other changes that don't modify src or test files",
            title: 'Chores',
            emoji: '♻️'
          },
          revert: {
            description: 'Reverts a previous commit',
            title: 'Reverts',
            emoji: '🗑'
          }
        }
      },
      scope: {
        description: 'What is the scope of this change (e.g. component or file name)'
      },
      subject: {
        description: 'Write a short, imperative tense description of the change'
      },
      body: {
        description: 'Provide a longer description of the change'
      },
      isBreaking: {
        description: 'Are there any breaking changes?'
      },
      breakingBody: {
        description: 'A BREAKING CHANGE commit requires a body. Please enter a longer description of the commit itself'
      },
      breaking: {
        description: 'Describe the breaking changes'
      },
      isIssueAffected: {
        description: 'Does this change affect any open issues?'
      },
      issuesBody: {
        description:
          'If issues are closed, the commit requires a body. Please enter a longer description of the commit itself'
      },
      issues: {
        description: 'Add issue references (e.g. "fix #123", "re #123".)'
      }
    }
  }
};


================================================
FILE: eslint.config.js
================================================
import js from '@eslint/js';
import reactRefresh from 'eslint-plugin-react-refresh';
import globals from 'globals';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  { ignores: ['node_modules', 'storybook-static', 'dist', 'coverage'] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ['src/**/*.{ts,tsx}', 'stories/**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser
    },
    plugins: {
      'react-refresh': reactRefresh
    },
    rules: {
      'react-refresh/only-export-components': ['off', { allowConstantExport: true }]
    }
  }
);


================================================
FILE: jest-setup.js
================================================
import '@testing-library/jest-dom'


================================================
FILE: jest.config.cjs
================================================
/**
 * For a detailed explanation regarding each configuration property, visit:
 * https://jestjs.io/docs/configuration
 */

/** @type {import('jest').Config} */
const config = {
    // All imported modules in your tests should be mocked automatically
    // automock: false,
  
    // Stop running tests after `n` failures
    // bail: 0,
  
    // The directory where Jest should store its cached dependency information
    // cacheDirectory: "/tmp/jest_rs",
  
    // Automatically clear mock calls, instances, contexts and results before every test
    clearMocks: true,
  
    // Indicates whether the coverage information should be collected while executing the test
    collectCoverage: true,
  
    // An array of glob patterns indicating a set of files for which coverage information should be collected
    // collectCoverageFrom: undefined,
  
    // The directory where Jest should output its coverage files
    coverageDirectory: 'coverage',
  
    // An array of regexp pattern strings used to skip coverage collection
    // coveragePathIgnorePatterns: [
    //   "/node_modules/"
    // ],
  
    // Indicates which provider should be used to instrument code for coverage
    coverageProvider: 'v8',
  
    // A list of reporter names that Jest uses when writing coverage reports
    // coverageReporters: [
    //   "json",
    //   "text",
    //   "lcov",
    //   "clover"
    // ],
  
    // An object that configures minimum threshold enforcement for coverage results
    // coverageThreshold: undefined,
  
    // A path to a custom dependency extractor
    // dependencyExtractor: undefined,
  
    // Make calling deprecated APIs throw helpful error messages
    // errorOnDeprecated: false,
  
    // The default configuration for fake timers
    // fakeTimers: {
    //   "enableGlobally": false
    // },
  
    // Force coverage collection from ignored files using an array of glob patterns
    // forceCoverageMatch: [],
  
    // A path to a module which exports an async function that is triggered once before all test suites
    // globalSetup: undefined,
  
    // A path to a module which exports an async function that is triggered once after all test suites
    // globalTeardown: undefined,
  
    // A set of global variables that need to be available in all test environments
    // globals: {},
  
    // 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.
    // maxWorkers: "50%",
  
    // An array of directory names to be searched recursively up from the requiring module's location
    // moduleDirectories: [
    //   "node_modules"
    // ],
  
    // An array of file extensions your modules use
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node', 'mdx'],
  
    // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
    moduleNameMapper: {
      '^.+.(svg|png|jpg)$': 'jest-transform-stub',
      '^.+\\.css$': 'identity-obj-proxy',
      '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx'
    },
  
    // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
    // modulePathIgnorePatterns: [],
  
    // Activates notifications for test results
    // notify: false,
  
    // An enum that specifies notification mode. Requires { notify: true }
    // notifyMode: "failure-change",
  
    // A preset that is used as a base for Jest's configuration
    // preset: undefined,
  
    // Run tests from one or more projects
    // projects: undefined,
  
    // Use this configuration option to add custom reporters to Jest
    // reporters: undefined,
  
    // Automatically reset mock state before every test
    // resetMocks: false,
  
    // Reset the module registry before running each individual test
    // resetModules: false,
  
    // A path to a custom resolver
    // resolver: undefined,
  
    // Automatically restore mock state and implementation before every test
    // restoreMocks: false,
  
    // The root directory that Jest should scan for tests and modules within
    // rootDir: undefined,
  
    // A list of paths to directories that Jest should use to search for files in
    // roots: [
    //   ""
    // ],
  
    // Allows you to use a custom runner instead of Jest's default test runner
    // runner: "jest-runner",
  
    // The paths to modules that run some code to configure or set up the testing environment before each test
    // setupFiles: [],
  
    // A list of paths to modules that run some code to configure or set up the testing framework before each test
    setupFilesAfterEnv: ['./jest-setup.js'], //setupFilesAfterEnv: ['/jest-setup.js']
  
    // The number of seconds after which a test is considered as slow and reported as such in the results.
    // slowTestThreshold: 5,
  
    // A list of paths to snapshot serializer modules Jest should use for snapshot testing
    // snapshotSerializers: [],
  
    // The test environment that will be used for testing
    testEnvironment: 'jsdom',
  
    // Options that will be passed to the testEnvironment
    // testEnvironmentOptions: {},
  
    // Adds a location field to test results
    // testLocationInResults: false,
  
    // The glob patterns Jest uses to detect test files
    // testMatch: [
    //   "**/__tests__/**/*.[jt]s?(x)",
    //   "**/?(*.)+(spec|test).[tj]s?(x)"
    // ],
  
    // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
    // testPathIgnorePatterns: [
    //   "/node_modules/"
    // ],
  
    // The regexp pattern or array of patterns that Jest uses to detect test files
    // testRegex: [],
  
    // This option allows the use of a custom results processor
    // testResultsProcessor: undefined,
  
    // This option allows use of a custom test runner
    // testRunner: "jest-circus/runner",
  
    // A map from regular expressions to paths to transformers
    transform: {
      '.(ts|tsx)$': 'ts-jest',
      '.(js|jsx)$': 'babel-jest'
    },
  
    // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
    transformIgnorePatterns: [
       "/node_modules/(?!uuid)/"
    //   "\\.pnp\\.[^\\/]+$"
    ],
  
    // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
    // unmockedModulePathPatterns: undefined,
  
    // Indicates whether each individual test should be reported during the run
    // verbose: undefined,
  
    // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
    // watchPathIgnorePatterns: [],
  
    // Whether to use watchman for file crawling
    // watchman: true,
  };
  
  module.exports = config;

================================================
FILE: package.json
================================================
{
  "name": "design-react-kit",
  "description": "Componenti React per Bootstrap 5",
  "keywords": [
    "react",
    "bootstrap",
    "bootstrap-italia"
  ],
  "author": "Presidenza del Consiglio dei Ministri",
  "contributors": [
    "Matteo Avesani",
    "Gianluca Esposito",
    "Matteo Manchi",
    "Paolo Mariotti",
    "Marco Liberati",
    "Francesco Zaia",
    "Sanyam Dogra",
    "Silvio Relli",
    "Sabatino Galasso",
    "Andrea Stagi",
    "Federico Turbino",
    "Nicola Squartini",
    "Davide Bizzi"
  ],
  "bugs": {
    "url": "https://github.com/italia/design-react-kit/issues"
  },
  "version": "5.10.0",
  "license": "BSD-3",
  "type": "module",
  "module": "./dist/index.js",
  "main": "./dist/index.cjs",
  "types": "./dist/types/index.d.ts",
  "exports": {
    ".": {
      "types": "./dist/types/index.d.ts",
      "module": "./dist/index.js",
      "main": "./dist/index.cjs"
    }
  },
  "sideEffects": [
    "dist/track-focus.js",
    "src/track-focus.js",
    "dist/index.ts",
    "dist/index.js",
    "src/index.ts"
  ],
  "files": [
    "dist",
    "src"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/italia/design-react-kit.git"
  },
  "engines": {
    "node": ">=20"
  },
  "scripts": {
    "start": "NODE_OPTIONS=--max_old_space_size=16384 npm run storybook:serve",
    "build": "tsup && tsc",
    "test": "jest ./src ./test --passWithNoTests",
    "test:ci": "jest ./src ./test --passWithNoTests --runInBand --ci",
    "lint": "npx eslint .",
    "prepare": "tsup && tsc && husky install",
    "format-code": "npx prettier . --write",
    "storybook:serve": "storybook dev -p 9001",
    "storybook:build": "storybook build --docs",
    "storybook:build:base": "storybook build",
    "version": "conventional-changelog -p angular -i CHANGELOG.md -s && node scripts/wait-confirm && git add CHANGELOG.md",
    "postversion": "echo \"You can now publish your version using 'git push --follow-tags'\""
  },
  "peerDependencies": {
    "bootstrap-italia": "^2.18.0",
    "react": ">=18.2.0"
  },
  "browserslist": [
    "extends browserslist-config-design-italia"
  ],
  "lint-staged": {
    "./{src,stories,test}/**/*.{js,ts,tsx,jsx,mdx}": "yarn lint"
  },
  "devDependencies": {
    "@babel/core": "^7.26.0",
    "@babel/preset-env": "^7.26.0",
    "@babel/preset-react": "^7.25.9",
    "@babel/preset-typescript": "^7.26.0",
    "@commitlint/cli": "^18.4.3",
    "@commitlint/config-conventional": "^18.4.3",
    "@eslint/js": "^9.10.0",
    "@storybook/addon-a11y": "^9.1.2",
    "@storybook/addon-docs": "^9.1.2",
    "@storybook/addon-links": "^9.1.2",
    "@storybook/addon-onboarding": "^9.1.2",
    "@storybook/react-vite": "^9.1.2",
    "@testing-library/dom": "^10.4.1",
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^16.3.0",
    "@types/is-number": "^7.0.3",
    "@types/jest": "^29.5.12",
    "@types/node": "^20.12.2",
    "@types/react": "^18.2.75",
    "@types/react-bootstrap": "^0.32.37",
    "@types/react-dom": "^18.2.24",
    "@types/react-transition-group": "^4.4.10",
    "@types/uuid": "^10.0.0",
    "bootstrap-italia": "^2.18.0",
    "browserslist-config-design-italia": "^1.0.0",
    "conventional-changelog": "^7.1.1",
    "eslint": "^9.10.0",
    "eslint-plugin-mdx": "^3.1.5",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-react-refresh": "^0.4.11",
    "eslint-plugin-storybook": "^9.1.2",
    "globals": "^15.9.0",
    "husky": "^8.0.1",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "jest-transform-stub": "^2.0.0",
    "lint-staged": "15.2.10",
    "prettier": "^3.2.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-layout-masonry": "^1.2.0",
    "sass-embedded": "^1.90.0",
    "storybook": "^9.1.2",
    "ts-jest": "^29.1.2",
    "tslib": "^2.4.0",
    "tsup": "^8.0.2",
    "typeface-lora": "^1.1.13",
    "typeface-roboto-mono": "^1.1.13",
    "typescript": "^5.4.5",
    "typescript-eslint": "^8.4.0",
    "vite": "^6.4.2"
  },
  "dependencies": {
    "@splidejs/react-splide": "^0.7.12",
    "accessible-autocomplete": "^3.0.1",
    "classnames": "^2.3.1",
    "is-number": "^7.0.0",
    "react-bootstrap": "^2.10.6",
    "react-toastify": "^7.0.4",
    "react-transition-group": "^4.4.5",
    "reactstrap": "9.2.2",
    "webfontloader": "^1.6.28"
  },
  "resolutions": {
    "@types/react": "18.2.75",
    "@types/react-dom": "18.2.24"
  },
  "overrides": {
    "react-stickup": {
      "react": "^18.2.0"
    }
  }
}


================================================
FILE: publiccode.yml
================================================
publiccodeYmlVersion: 0.5.0
name: Design React Kit
applicationSuite: Design system Italia
url: https://github.com/italia/design-react-kit
softwareVersion: v5.10.0
releaseDate: '2026-03-17'
platforms:
  - web
categories:
  - website-builder
  - integrated-library-system
  - it-development
  - design
organisation:
  uri: urn:x-italian-pa:pcm
  name: Dipartimento per la trasformazione digitale
roadmap: https://github.com/orgs/italia/projects/17/views/5?filterQuery=repo%3Aitalia%2Fdesign-react-kit
developmentStatus: stable
softwareType: library
intendedAudience:
  countries:
    - IT
description:
  it-IT:
    shortDescription: Libreria di componenti React per sviluppare interfacce web
      accessibili e coerenti per i siti e i servizi digitali della PA.
    longDescription: Il Design React Kit, risorsa ufficiale del Design system
      Italia, è una libreria di componenti sviluppati con React, pensata per
      supportare la realizzazione di interfacce web per siti e servizi digitali
      della Pubblica Amministrazione. Costruito sulle fondamenta di Bootstrap
      Italia, ne eredita funzionalità, componenti, griglia e classi di utilità,
      rendendoli disponibili in forma riutilizzabile all'interno di applicazioni
      React. Il kit consente di sviluppare interfacce accessibili, inclusive e
      semplici da mantenere, supportando la creazione di applicazioni web
      dinamiche.
    documentation: https://italia.github.io/design-react-kit/
    features:
      - Componenti React pronti all'uso
      - Basato su Bootstrap Italia
      - Implementa lo UI Kit Italia
      - Realizzazione di interfacce responsive e accessibili
      - Integrazione in applicazioni React
      - Riutilizzo dei componenti
      - Conformità alle Linee guida di design per i siti internet e servizi
        digitali della PA
legal:
  license: BSD-3-Clause-Clear
maintenance:
  type: community
  contacts:
    - name: Designers Italia
      email: contatti@designers.italia.it
localisation:
  localisationReady: false
  availableLanguages:
    - it


================================================
FILE: scripts/import_svgs.sh
================================================
#!/bin/sh

# Import icons from BI and make them TS React components
echo 'Importing SVGs...'

npx svgr node_modules/bootstrap-italia/src/svg | tee src/Icon/assets/index.ts

echo 'Linting new components...'

npx eslint src/Icon/assets/*.ts* --fix

echo 'Reconfigure tests for new icons...'
# Find out what SVGs have no title tag and print them into a txt file used for testing
find node_modules/bootstrap-italia/src/svg -iname "*.svg" -exec grep -Li "title" {} + | xargs -L 1 basename > ./test/icons-with-no-title.txt


================================================
FILE: scripts/svgIndexTemplate.js
================================================
const path = require('path');

const kebabCase = (string) =>
  string
    .replace(/([a-z])([A-Z])/g, '$1-$2')
    .replace(/\s+/g, '-')
    .toLowerCase();

function defaultIndexTemplate(filePaths) {
  const iconsMap = [];
  const switchCases = [];
  for (const filePath of filePaths) {
    const basename = path.basename(filePath, path.extname(filePath));
    const exportName = /^\d/.test(basename) ? `Svg${basename}` : basename;

    const kebabName = kebabCase(exportName);
    iconsMap.push(kebabName);
    switchCases.push(`case '${kebabName}': {
      return import('./${exportName}');
    }`);
  }
  const file = `
const iconList: Record = {
  ${iconsMap.map((name) => `  "${name}": true,`).join('\n')}
};
export type IconName = keyof typeof iconList;

export const loadIcon = (
  name: IconName
) => {
  switch (name) {
${switchCases.join('\n')}
    default:
      throw Error(\`It should not land here. Requested icon: "\${name}"\`);
  }
};

export function isBundledIcon(name: string): name is IconName {
  return name in iconList;
}

export const allIcons = Object.keys(iconList)
  `;
  return file;
}
module.exports = defaultIndexTemplate;


================================================
FILE: scripts/svgTemplate.js
================================================
function defaultTemplate({ imports, componentName, props, jsx, interfaces }, { tpl }) {
  return tpl`${imports}
    ${interfaces}
  export const component = (${props}) => {
    return ${jsx};
  };
    `;
}
module.exports = defaultTemplate;


================================================
FILE: scripts/wait-confirm.js
================================================
var stdin = process.stdin;

console.log('⌨️ Press any key to continue or ctrl+c to abort...');

stdin.resume();
stdin.setEncoding('utf8');

stdin.on('data', function (key) {
  if (key === '\u0003') {
    process.exit(1);
  } else {
    process.exit(0);
  }
});


================================================
FILE: src/Accordion/Accordion.tsx
================================================
import React, { ElementType, FC, HTMLAttributes } from 'react';
import classNames from 'classnames';

export interface AccordionProps extends HTMLAttributes {
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente Badge */
  className?: string;
  /** Utilizzare questo attributo per ottenere header con sfondo di colore primario quando questi è attivo o all’hover. */
  background?: 'active' | 'hover';
  /** Utilizzare questo attributo per mostrare, mediante un'icona a sinistra, lo stato di apertura */
  iconLeft?: boolean;
  testId?: string;
}

export const Accordion: FC = ({
  tag = 'div',
  className,
  background,
  iconLeft = false,
  testId,
  ...attributes
}) => {
  const Tag = tag;
  const classes = classNames('accordion', className, {
    'accordion-background-active': background === 'active',
    'accordion-background-hover': background === 'hover',
    'accordion-left-icon': iconLeft
  });

  return ;
};


================================================
FILE: src/Accordion/AccordionBody.tsx
================================================
import classNames from 'classnames';
import React, { ElementType, PropsWithChildren, useCallback, useRef, useState } from 'react';
import { Transition } from 'react-transition-group';
import type { TransitionProps } from 'react-transition-group/Transition';
import { TransitionTimeouts, TransitionsKeys } from '../transitions';
import { omit, pick } from '../utils';

export type AccordionBodyProps = Partial & {
  tag?: ElementType;
  className?: string;
  listClassName?: string;
  active?: boolean;
  onToggle?: () => void;
};

// hardcode these entries to avoid leaks
const transitionStatusToClassHash: Record = {
  entering: 'collapsing',
  entered: 'collapse show',
  exiting: 'collapsing',
  exited: 'collapse'
};

function getTransitionClass(status: string) {
  return transitionStatusToClassHash[status] || 'collapse';
}

function getHeight(node: HTMLElement) {
  return node.scrollHeight;
}

export const AccordionBody = ({
  className,
  listClassName,
  tag = 'div',
  active = false,
  children,
  timeout = TransitionTimeouts.Collapse,
  ...attributes
}: PropsWithChildren) => {
  const [height, setHeight] = useState(null);
  const nodeRef = useRef(null);
  const onEntering = useCallback(
    (isAppearing: boolean) => {
      if (nodeRef.current) {
        setHeight(getHeight(nodeRef.current));
        attributes.onEntering?.(nodeRef.current, isAppearing);
      }
    },
    [attributes.onEntering]
  );
  const onEntered = useCallback(
    (isAppearing: boolean) => {
      setHeight(null);
      if (nodeRef.current) {
        attributes.onEntered?.(nodeRef.current, isAppearing);
      }
    },
    [attributes.onEntered]
  );
  const onExit = useCallback(
    () => {
      if (nodeRef.current) {
        setHeight(getHeight(nodeRef.current));
        attributes.onExit?.(nodeRef.current);
      }
    },
    [attributes.onExit]
  );
  const onExiting = useCallback(
    () => {
      if (nodeRef.current) {
        // getting this variable triggers a reflow
        // @ts-expect-error variabile non usata
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        const _unused = nodeRef.current.offsetHeight;
        setHeight(0);
        attributes.onExiting?.(nodeRef.current);
      }
    },
    [attributes.onExiting]
  );
  const onExited = useCallback(
    () => {
      setHeight(null);
      if (nodeRef.current) {
        attributes.onExited?.(nodeRef.current);
      }
    },
    [attributes.onExited]
  );
  const Tag = tag;

  const transitionProps = pick(attributes, TransitionsKeys);
  const childProps = omit(attributes, TransitionsKeys);

  return (
    
      {(status) => {
        const transitionClass = getTransitionClass(status);
        const classes = classNames(className, transitionClass);
        const listClasses = classNames(listClassName, 'accordion-body');
        const style = height == null ? null : { height };

        return (
          
            
{children}

          
        );
      }}
    
  );
};


================================================
FILE: src/Accordion/AccordionHeader.tsx
================================================
import classNames from 'classnames';
import React, { ElementType, FC, HTMLAttributes, ReactNode } from 'react';

export interface AccordionHeaderProps extends HTMLAttributes {
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente AccordionHeader */
  className?: string;
  /** Utilizzare questo attributo per indicare se l'elemento è attivo o no */
  active?: boolean;
  /** Questa funzione verrà chiamata quando avviene un click sul componente AccordionHeader */
  onToggle?: () => void;
  /** Contenuto aggiuntivo all'interno del bottone dell'AccordionHeader */
  append?: ReactNode;
  testId?: string;
}

export const AccordionHeader: FC = ({
  className,
  tag = 'button',
  active = false,
  append,
  onToggle,
  testId,
  ...attributes
}) => {
  const Tag = tag;
  const toggleClasses = classNames(className, 'accordion-button', {
    collapsed: !active
  });
  return (
    

      
      {append}
    

  );
};


================================================
FILE: src/Accordion/AccordionItem.tsx
================================================
import classNames from 'classnames';
import React, { ElementType, FC, HTMLAttributes } from 'react';

export interface AccordionItemProps extends HTMLAttributes {
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente */
  className?: string;
}

export const AccordionItem: FC = ({ tag = 'div', className, ...attributes }) => {
  const Tag = tag;
  const classes = classNames('accordion-item', className);

  return ;
};


================================================
FILE: src/Alert/Alert.tsx
================================================
import React, { ElementType, FC, HTMLAttributes, MouseEventHandler, Ref } from 'react';
import { FadeProps, Alert as InnerAlert } from 'reactstrap';
import { CSSModule } from 'reactstrap/types/lib/utils';

// Copy over from reactstrap and add new ones
export interface AlertProps extends HTMLAttributes {
  closeClassName?: string;
  closeAriaLabel?: string;
  /** Oggetto contenente la nuova mappatura per le classi CSS. */
  cssModule?: CSSModule;
  /** Le varianti di colore definite in Bootstrap Italia
   * @default primary
   */
  color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | string;
  /** Quando abilitato mostra un'animazione di entrata ed uscita del componente Alert.
   * @default true */
  fade?: boolean;
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  transition?: FadeProps;
  /** Da utilizzare per impostare un riferimento all'elemento DOM */
  innerRef?: Ref;
  /** Quando abilitato mostra l'alert
   * @default true
   */
  isOpen?: boolean;
  toggle?: MouseEventHandler;
  testId?: string;
}

export const Alert: FC = ({ color = 'success', isOpen = true, fade = true, testId, ...props }) => {
  const baseProps = {
    color,
    isOpen,
    fade
  };
  return ;
};


================================================
FILE: src/Autocomplete/Autocomplete.tsx
================================================
import React, { FC, useEffect } from 'react';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore non ci sono i types
import BaseAutocomplete from 'accessible-autocomplete/react';
// Reference to https://www.npmjs.com/package/accessible-autocomplete
// Implementation example: https://github.com/alphagov/accessible-autocomplete/blob/main/examples/react/index.html

export interface AutocompleteAttributes {
  /** Identificativo */
  id: string;
  /** Label */
  label: string;
  /** Valori all'interno della select */
  source: (query: string, syncResults: () => void) => void;
  /** Valori chiave - valore all'interno della select */
  onConfirm?: (value: string) => void;
  /** Placeholder (default: ``) */
  placeholder?: string;
  /** Valore di default (default: ``) */
  defaultValue?: string;
  /** Modalità display menu (default: `inline`) */
  displayMenu?: string;
  /** Utilizzare per mostrare il successo nella validazione del valore nel campo Input */
  valid?: boolean;
  /** Testo di validazione per l'elemento del moduleo form. */
  validationText?: string;
  /** Funzione ritornante stringa in caso di nessun risultato */
  tNoResults?: () => string;
  /** Funzione ritornante stringa di suggerimento */
  tAssistiveHint?: () => string;
  /** Funzione ritornante stringa se la query è troppo corta */
  tStatusQueryTooShort?: () => string;
  /** Funzione ritornante stringa se non ci sono risultati di ricerca */
  tStatusNoResults?: () => string;
  /** Funzione ritornante stringa che identifica l'opzione selezionata */
  tStatusSelectedOption?: () => string;
  /** Funzione ritornante stringa che identifica i risultati */
  tStatusResults?: () => string;
  /** Classi aggiuntive da usare per il componente Button */
  className?: string;
  testId?: string;
}

const tAssistiveHintDefault = () =>
  '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';
const tNoResultsDefault = () => 'Nessun risultato trovato';
const tStatusQueryTooShortDefault = (minQueryLength: number) =>
  `Digita ${minQueryLength} o più caratteri per mostrare le opzioni di ricerca`;
const tStatusNoResultsDefault = () => 'Nessun risultato di ricerca';
const tStatusSelectedOptionDefault = (selectedOption: number, length: number, index: number) =>
  `${selectedOption} ${index + 1} di ${length} è sottolineato`;
const tStatusResultsDefault = (length: number, contentSelectedOption: number) => {
  const words = {
    result: length === 1 ? 'risultato' : 'risultati',
    is: length === 1 ? 'è' : 'sono',
    available: length === 1 ? 'disponibile' : 'disponibili'
  };

  return `${length} ${words.result} ${words.is} ${words.available}. ${contentSelectedOption}`;
};

export const Autocomplete: FC = ({
  tAssistiveHint = tAssistiveHintDefault,
  tNoResults = tNoResultsDefault,
  tStatusQueryTooShort = tStatusQueryTooShortDefault,
  tStatusNoResults = tStatusNoResultsDefault,
  tStatusSelectedOption = tStatusSelectedOptionDefault,
  tStatusResults = tStatusResultsDefault,
  placeholder = '',
  defaultValue = '',
  displayMenu = 'inline',
  source,
  validationText,
  onConfirm,
  ...attributes
}) => {
  const { id, valid } = attributes;
  const validityCheck = valid === true || valid === false;

  useEffect(() => {
    const inputElement: HTMLInputElement = document.getElementById(id) as HTMLInputElement;
    const labelElement = inputElement?.parentElement?.parentElement?.getElementsByTagName('label')[0];

    if (inputElement.value !== '') {
      labelElement?.classList.add('active');
    }

    inputElement?.addEventListener('focus', () => {
      labelElement?.classList.add('active');
    });
    inputElement?.addEventListener('blur', () => {
      if (inputElement.value === '') {
        labelElement?.classList.remove('active');
      }
      if (onConfirm) {
        onConfirm(inputElement.value);
      }
    });
  }, [id]);

  return (
    <>
      
      
      

        {!valid && validationText}
      

    
  );
};


================================================
FILE: src/Avatar/AvatarContainer.tsx
================================================
import React, { FC, HTMLAttributes, ElementType } from 'react';
import classNames from 'classnames';

export interface AvatarContainerProps extends HTMLAttributes {
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente AvatarContainer */
  className?: string;
  testId?: string;
}

export const AvatarContainer: FC = ({ className, tag = 'div', testId, ...attributes }) => {
  const Tag = tag;
  const wrapperClasses = classNames(
    'd-flex align-items-center justify-content-around flex-wrap flex-sm-nowrap',
    className
  );
  return ;
};


================================================
FILE: src/Avatar/AvatarExtraText.tsx
================================================
import React, { FC, HTMLAttributes, ElementType } from 'react';
import classNames from 'classnames';

export interface AvatarExtraTextProps extends HTMLAttributes {
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente AvatarExtraText */
  className?: string;
  testId?: string;
}

export const AvatarExtraText: FC = ({ className, tag = 'div', testId, ...attributes }) => {
  const Tag = tag;
  const wrapperClass = classNames('extra-text', className);
  return ;
};


================================================
FILE: src/Avatar/AvatarGroupContainer.tsx
================================================
import classNames from 'classnames';
import React, { ElementType, FC, HTMLAttributes } from 'react';

export interface AvatarGroupContainerProps extends HTMLAttributes {
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente più esterno di AvatarGroupContainer */
  wrapperClassName?: string;
  testId?: string;
}

export const AvatarGroupContainer: FC = ({
  tag = 'ul',
  wrapperClassName,
  testId,
  ...attributes
}) => {
  const Tag = tag;
  const wrapperClasses = classNames('avatar-group-stacked', wrapperClassName);
  return ;
};


================================================
FILE: src/Avatar/AvatarIcon.tsx
================================================
import classNames from 'classnames';
import React, { ElementType, FC, HTMLAttributes, Ref } from 'react';

export interface AvatarIconProps extends HTMLAttributes {
  /**
   * Utilizzarlo in caso di utilizzo di componenti personalizzati, come ad esempio
   * un link gestito da handler onClick.
   * */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente AvatarIcon */
  className?: string;
  /** Le varianti di colore definite in Bootstrap Italia */
  color?: 'primary' | 'secondary' | 'green' | 'orange' | 'red' | string;
  /** Le dimensioni dell'icona definite in Bootstrap Italia */
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
  /**
   * Quando definito rende l'icona un link cliccabile. Nota: se definito ignora la prop Tag.
   * */
  href?: string;
  /** Da utilizzare per impostare un riferimento all'elemento DOM */
  innerRef?: Ref;
  testId?: string;
}

export const AvatarIcon: FC = ({
  className,
  tag = 'div',
  size = 'md',
  href,
  color,
  innerRef,
  testId,
  children,
  ...attributes
}) => {
  const Tag = tag;
  const typeClass = classNames('avatar', {
    [`size-${size}`]: size,
    [`avatar-${color}`]: color,
    className
  });
  if (href) {
    return (
      }
        data-testid={testId}
      >
        {children}
      
    );
  }

  return (
    
      {children}
    
  );
};


================================================
FILE: src/Avatar/AvatarPresence.tsx
================================================
import classNames from 'classnames';
import React, { ElementType, FC, HTMLAttributes } from 'react';

export interface AvatarPresenceProps extends HTMLAttributes {
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente AvatarPresence */
  className?: string;
  /** Utilizzare questo attributo per indicare il tipo di presenza dell'utente. */
  presence: 'active' | 'busy' | 'hidden' | string;
  testId?: string;
}

export const AvatarPresence: FC = ({
  className,
  tag = 'div',
  presence,
  testId,
  ...attributes
}) => {
  const Tag = tag;
  const typeClass = classNames(
    'avatar-presence',
    {
      presence
    },
    className
  );
  return ;
};


================================================
FILE: src/Avatar/AvatarStatus.tsx
================================================
import classNames from 'classnames';
import React, { ElementType, FC, HTMLAttributes } from 'react';

export interface AvatarStatusProps extends HTMLAttributes {
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente AvatarStatus */
  className?: string;
  /** Utilizzare questo attributo per indicare il tipo di stato dell'utente. */
  status: 'approved' | 'declined' | 'notify' | string;
  testId?: string;
}

export const AvatarStatus: FC = ({ className, tag = 'div', status, testId, ...attributes }) => {
  const Tag = tag;
  const typeClass = classNames(
    'avatar-status',
    {
      status
    },
    className
  );
  return ;
};


================================================
FILE: src/Avatar/AvatarWrapper.tsx
================================================
import React, { FC, HTMLAttributes, ElementType } from 'react';
import classNames from 'classnames';

export interface AvatarWrapperProps extends HTMLAttributes {
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente AvatarStatus */
  className?: string;
  /** Utilizzare questo attributo qualora si volesse utilizzare un componente AvatarExtraText all'interno dell'Avatar. */
  extra?: 'text' | string;
  testId?: string;
}

export const AvatarWrapper: FC = ({ className, tag = 'div', extra, testId, ...attributes }) => {
  const Tag = tag;
  const wrapperClass = classNames('avatar-wrapper', className, {
    [`avatar-extra-${extra}`]: extra
  });
  return ;
};


================================================
FILE: src/BackToTop/BackToTop.tsx
================================================
import React, { useLayoutEffect, useState } from 'react';
import { Icon } from '../Icon/Icon';
import classNames from 'classnames';

export interface BackToTopProps {
  /**
   * Aria label che definisce lo scopo del componente (default: `Torna su`)
   */
  ariaLabel?: string;
  /**
   * Classi aggiuntive da usare per il componente
   */
  className?: string;
  /**
   * Renderizza la variante `dark` del componente
   */
  dark?: boolean;
  /**
   * Renderizza la variante `small` del componente
   */
  small?: boolean;
  /**
   * Aggiunge l'ombra al componente
   */
  shadow?: boolean;
  /**
   * Configurazione riguardante dopo quanti pixel di scroll il bottone viene mostrato
   */
  showOffset?: number;
}

const backToTop = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
};

export const BackToTop = ({
  ariaLabel = 'Torna su',
  className,
  dark = false,
  small = false,
  shadow = false,
  showOffset = 200
}: BackToTopProps) => {
  const [showBtn, setShowBtn] = useState(false);

  useLayoutEffect(() => {
    window.addEventListener('scroll', () => {
      if (window.scrollY > showOffset) {
        setShowBtn(true);
      } else {
        setShowBtn(false);
      }
    });
  }, [showOffset]);

  return (
    
      
    
  );
};


================================================
FILE: src/Badge/Badge.tsx
================================================
import React, { FC, HTMLAttributes, ElementType, Ref, ReactNode, AnchorHTMLAttributes } from 'react';
import { Badge as BadgeReact } from 'reactstrap';
import { CSSModule } from 'reactstrap/types/lib/utils';

export type BadgeProps = {
  /** Le varianti di colore definite in Bootstrap Italia */
  color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | string;
  /** Quando attivo rende i Badge arrotondati */
  pill?: boolean;
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente Badge */
  className?: string;
  /** Oggetto contenente la nuova mappatura per le classi CSS. */
  cssModule?: CSSModule;
  /** Da utilizzare per impostare un riferimento all'elemento DOM */
  innerRef?: Ref;
  /** Il contenuto del badge */
  children: ReactNode;
  testId?: string;
} & (HTMLAttributes | AnchorHTMLAttributes);

export const Badge: FC = ({
  color = 'secondary',
  pill = false,
  tag = 'span',
  children,
  testId,
  ...attributes
}) => {
  return (
    
      {children}
    
  );
};


================================================
FILE: src/BottomNav/BottomNav.tsx
================================================
import React, { ElementType, FC, HTMLAttributes } from 'react';

export interface BottomNavProps extends HTMLAttributes {
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente BottomNav */
  className?: string;
  testId?: string;
}

export const BottomNav: FC = ({ tag = 'nav', testId, ...attributes }) => {
  const Tag = tag;
  return (
    
      
    
    
  );
};


================================================
FILE: src/BottomNav/BottomNavItem.tsx
================================================
import React, { ElementType, FC, HTMLAttributes, MouseEvent } from 'react';
import classNames from 'classnames';
import { Icon } from '../Icon/Icon';

export interface BottomNavItemProps extends HTMLAttributes {
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente BottomNavItem */
  className?: string;
  /** Quando abilitato mostra l'elemento come attivo */
  active?: boolean;
  /** Indica l'URL a cui puntare (utilizzare o questo o onClick) */
  url?: string;
  /** Indica il link route a cui l'elemento deve puntare. */
  to?: string;
  /** Etichetta da associare all'elemento */
  label?: string;
  /** Testo esplicativo per dispositivi screen reader. */
  srText?: string;
  /** Icona da utilizzare per l'elemento */
  iconName?: string;
  /** Quando abilitato indica una sezione che richiede attenzione o presenta nuovi contenuti */
  alert?: boolean;
  /** Visualizza dei badge con indicazioni numeriche in alto a destra dell'icona */
  badge?: number;
  /** Da utilizzare al posto di url quando la gestione del click è in JS */
  onLinkClick?: (event: MouseEvent) => void;
  /**
   * Indica l'URL a cui far puntare il componente BottomNavItem.
   * @deprecated. Usare `url` o `onLinkClick`
   * */
  link?: string;
  testId?: string;
}

export const BottomNavItem: FC = ({
  active = false,
  badge,
  alert = false,
  url,
  to,
  srText,
  iconName = 'it-comment',
  label,
  tag = 'a',
  onLinkClick,
  link,
  testId,
  ...attributes
}) => {
  const Tag = tag;
  const activeClass = classNames({ active });
  const badgeWrapper = Boolean(badge) && (
    
    
      {badge}
    
    
  );
  const alertWrapper = Boolean(alert) && (
    
    
      
    
    
  );
  return (
    
  • 
      
        {badgeWrapper}
        {alertWrapper}
        
        
          {label}
          {srText ? {srText} : null}
        
      
    
    • 
  );
};


================================================
FILE: src/Breadcrumb/Breadcrumb.tsx
================================================
import React, { ElementType, FC, HTMLAttributes } from 'react';
import { Breadcrumb as BreadcrumbBase } from 'reactstrap';
import classNames from 'classnames';
import { CSSModule } from 'reactstrap/types/lib/utils';

export interface BreadcrumbProps extends HTMLAttributes {
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati per la l'elemento lista interno */
  listTag?: ElementType;
  /** Classi aggiuntive da usare per il componente Nav */
  className?: string;
  /** Classi aggiuntive da usare per il componente di lista interno */
  listClassName?: string;
  /** Oggetto contenente la nuova mappatura per le classi CSS. */
  cssModule?: CSSModule;
  /** Indica se si vuole la versione con fondo scuro */
  dark?: boolean;
  /** Etichetta significativa per descrivere il tipo di navigazione */
  'aria-label'?: string;
  testId?: string;
}

export const Breadcrumb: FC = ({
  className,
  listClassName,
  dark,
  'aria-label': label,
  testId,
  ...attributes
}) => {
  const classes = classNames(className, 'breadcrumb-container');
  const listClasses = classNames(listClassName, { dark }, dark && 'px-3');
  const ariaLabel = label ?? 'Percorso di navigazione';
  return (
    
  );
};


================================================
FILE: src/Button/Button.tsx
================================================
import React, { FC, ButtonHTMLAttributes, ElementType, Ref } from 'react';
import classNames from 'classnames';

import { Button as ButtonBase } from 'reactstrap';
import { CSSModule } from 'reactstrap/types/lib/utils';

// reactstrap wrapper
export interface ButtonProps extends ButtonHTMLAttributes {
  /** Quando abilitato, estende il componente Button fino a prendere tutta la larghezza disponibile */
  block?: boolean;
  /** Utilizzarlo disabilitare il colore di sfondo, ed applicarlo invece al bordo.  */
  outline?: boolean;
  /** Utilizzarlo in caso di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente Button */
  className?: string;
  /** Oggetto contenente la nuova mappatura per le classi CSS. */
  cssModule?: CSSModule;
  innerRef?: Ref;
  /** Da utilizzare si usa una icona nel contenuto del Button */
  icon?: boolean;
  /** Da utilizzare per le varianti di dimensione del componente Button */
  size?: 'lg' | 'sm' | 'xs';
  /** Da utilizzare per i bottoni di chiusura all'interno di altri componenti (i.e. Chips, Modali, etc...) */
  close?: boolean;
  active?: boolean;
  href?: string;
  testId?: string;
}

export const Button: FC = ({
  tag = 'button',
  icon = false,
  color = '',
  className,
  testId,
  ...attributes
}) => {
  const classes = classNames(className, {
    'btn-icon': icon
  });

  const ariaAttributes = {
    ...(attributes.disabled && { 'aria-disabled': true })
  };

  const baseProps = { color, tag };

  return ;
};


================================================
FILE: src/Callout/Callout.tsx
================================================
import React, { FC, ElementType, HTMLAttributes } from 'react';
import classNames from 'classnames';

export interface CalloutProps extends HTMLAttributes {
  /** Classi aggiuntive per il componente */
  className?: string;
  /** Permette di dichiarare il colore del bordo e del titolo */
  color?: 'success' | 'warning' | 'danger' | 'note' | 'important' | string;
  /** Permette personalizzare il tag utilizzato per il Callout (diverso da "div"). Accetta sia tag HTML che componenti React. */
  tag?: ElementType;
  /** Abilita il Callout di tipo Highlight */
  highlight?: boolean;
  /** Abilita il Callout di tipo Approfondimento */
  detailed?: boolean;
  testId?: string;
}

export const Callout: FC = ({
  children,
  color = '',
  highlight = false,
  className,
  detailed,
  tag = 'div',
  testId,
  ...attributes
}) => {
  const Tag = tag;
  const classes = classNames(className, color, 'callout', {
    'callout-highlight': highlight,
    'callout-more': detailed
  });
  return (
    
      {!highlight && !detailed ? 
    {children}
     : children}
        
  );
};


================================================
FILE: src/Callout/CalloutMoreFooter.tsx
================================================
import classNames from 'classnames';
import React, { ElementType, FC, PropsWithChildren, useState } from 'react';
import { Button } from '../Button/Button';
import { Icon } from '../Icon/Icon';

export interface CalloutMoreFooterProps {
  id?: string;
  /** Utilizzarlo in caso si utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente */
  className?: string;
  fileUrl?: string;
}

export const CalloutMoreFooter: FC> = ({
  id = 'cm-footer',
  tag = 'div',
  className,
  fileUrl,
  children,
  ...attributes
}) => {
  const Tag = tag;
  const classes = classNames('collapse-div', className);

  const [isOpen, setOpen] = useState(false);

  return (
    
      
    
        
        {fileUrl && (
          
            
            PDFDownload
          
        )}
      
    
      
    
        
    {children}
    
      
    
        
  );
};


================================================
FILE: src/Callout/CalloutText.tsx
================================================
import React, { FC, ElementType, HTMLAttributes } from 'react';
import classNames from 'classnames';

export interface CalloutTextProps extends HTMLAttributes {
  /** Aumenta la dimensione del testo nel paragrafo contenuto  */
  bigText?: boolean;
  /** Classi aggiuntive per il componente */
  className?: string;
  /** Permette personalizzare il tag utilizzato per il contenitore del titolo (diverso da "div"). Accetta sia tag HTML che componenti React. */
  tag?: ElementType;
  testId?: string;
}

export const CalloutText: FC = ({
  bigText = false,
  children,
  className,
  tag = 'p',
  testId,
  ...attributes
}) => {
  const Tag = tag;
  const classes = classNames(className, {
    'callout-big-text': bigText
  });
  return (
    
      {children}
    
  );
};


================================================
FILE: src/Callout/CalloutTitle.tsx
================================================
import React, { FC, ElementType, HTMLAttributes } from 'react';
import classNames from 'classnames';

export interface CalloutTitleProps extends HTMLAttributes {
  /** Classi aggiuntive per il componente */
  className?: string;
  /** Permette personalizzare il tag utilizzato per il contenitore del titolo (diverso da "div"). Accetta sia tag HTML che componenti React. */
  tag?: ElementType;
  testId?: string;
}

export const CalloutTitle: FC = ({ children, className, tag = 'div', testId, ...attributes }) => {
  const Tag = tag;
  const classes = classNames(className, 'callout-title');
  return (
    
      {children}
    
  );
};


================================================
FILE: src/Card/Card.tsx
================================================
import React, { FC, HTMLAttributes, ElementType, Ref } from 'react';
import classNames from 'classnames';
import { CSSModule } from 'reactstrap/types/lib/utils';

export interface CardProps extends HTMLAttributes {
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente Card */
  className?: string;
  /** Da utilizzare per impostare un riferimento all'elemento DOM */
  innerRef?: Ref;
  /** Oggetto contenente la nuova mappatura per le classi CSS. */
  cssModule?: CSSModule;
  /** Abilita la versione teaser della Card */
  teaser?: boolean;
  /** La card contiene un'immagine */
  image?: boolean;
  /** La card è di tipo banner */
  banner?: boolean;
  /** La card è di tipo profile */
  profile?: boolean;
  /** La card è inline */
  inline?: boolean;
  /** La card è inline-reverse */
  inlineReverse?: boolean;
  /** La card è inline-mini */
  inlineMini?: boolean;
  /** La card è arrotondata */
  rounded?: boolean;
  /** La card è full height */
  fullHeight?: boolean;
  /** La card ha un bordo */
  border?: boolean;
  /** La card ha un bordo di estremità */
  borderTop?: boolean;
  /** La card ha un bordo */
  shadow?: 'sm' | 'lg' | 'normal' | null;
  testId?: string;
}

export const Card: FC = ({
  tag = 'article',
  teaser,
  image,
  border=true,
  borderTop,
  inline,
  inlineReverse,
  inlineMini,
  rounded,
  fullHeight,
  banner,
  profile,
  shadow=null,
  testId,
  ...attributes
}) => {
  const cardClasses = classNames('it-card', attributes.className, {
    'card-teaser': teaser,
    'it-card-image': image,
    'border': border,
    'it-card-inline': inline,
    'it-card-inline-reverse': inlineReverse,
    'it-card-inline-mini': inlineMini,
    'it-card-height-full': fullHeight,
    'rounded': rounded,
    'card-teaser-wrapper': teaser,
    'shadow': shadow === 'normal',
    'shadow-lg': shadow === 'lg',
    'shadow-sm': shadow === 'sm',
    'it-card-banner': banner,
    'it-card-profile': profile,
    'it-border-top': borderTop,
    'it-border-top-secondary': borderTop,

  });

  const T = tag;

  return (
    
  );

};


================================================
FILE: src/Card/CardBody.tsx
================================================
import React, { FC, HTMLAttributes, ElementType, Ref } from 'react';
import { CardBody as InnerCardBody } from 'reactstrap';
import { CSSModule } from 'reactstrap/types/lib/utils';
// Note: this is a wrapper class around a reactstrap component.
// TODO: remove this class and restore the direct import when
// https://github.com/storybookjs/storybook/issues/10536 gets resolved

export interface CardBodyProps extends HTMLAttributes {
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente Card */
  className?: string;
  /** Da utilizzare per impostare un riferimento all'elemento DOM */
  innerRef?: Ref;
  /** Oggetto contenente la nuova mappatura per le classi CSS. */
  cssModule?: CSSModule;
  testId?: string;
}

export const CardBody: FC = ({ tag = 'div', testId, ...props }) => (
  
);


================================================
FILE: src/Card/CardCategory.tsx
================================================
import React, { FC, HTMLAttributes, MouseEvent } from 'react';
import classNames from 'classnames';

import { Icon } from '../Icon/Icon';

export interface CardCategoryProps extends HTMLAttributes {
  /** Mostra un'icona nella Card. Passare il nome dell'icona per utilizzarlo. */
  iconName?: string;
  /** Mostra la data nella Card. Passare una data già formattata come stringa. */
  date?: string;
  /** Se usato come link, passare l'URL target. */
  href?: string;
  /** Descrizione della data (es. 'Data evento') */
  dateDescription?: string;
  /** Descrizione del testo (es. 'Titolo evento') */
  textDescription?: string;
  /** Titolo dell' icona */
  iconTitle?: string;
  /** Da utilizzare al posto di url quando la gestione del click è in JS */
  onClick?: (event: MouseEvent) => void;
  testId?: string;
}

export const CardCategory: FC = ({
  iconName,
  iconTitle,
  date,
  href,
  onClick,
  testId,
  children,
  textDescription,
  dateDescription,
  ...rest
}) => {
  const classes = classNames({
    'category-top': date || ' ',
    'categoryicon-top': iconName
  });
  // Simple category link
  const categoryLink = !iconName && (
    <>
      {textDescription && {textDescription}}
      
        {children}
      
    
  );
  const categoryDate = date && {date};
  // Category with icon
  const categoryText = iconName && {children};
  const categoryIcon = iconName && ;

  return (
    
    
      {categoryLink}
      {categoryIcon}
      {categoryText && textDescription && {textDescription}}
      {categoryText}
      {dateDescription && {dateDescription}}
      {categoryDate}
    
    
  );
};


================================================
FILE: src/Card/CardFooterCTA.tsx
================================================
import React, { FC, HTMLAttributes, ElementType } from 'react';
import classNames from 'classnames';

export interface CardFooterCTAProps extends HTMLAttributes {
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente CardFooterCTA*/
  className?: string;
  testId?: string;
}

export const CardFooterCTA: FC = ({ className, tag = 'div', testId, ...attributes }) => {
  const Tag = tag;
  const classes = classNames(className, 'it-card-footer');
  return ;
};


================================================
FILE: src/Card/CardReadMore.tsx
================================================
import React, { FC, HTMLAttributes, ElementType } from 'react';
import classNames from 'classnames';

import { Icon } from '../Icon/Icon';

export interface CardReadMoreProps extends HTMLAttributes {
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente CardReadMore*/
  className?: string;
  /** Il contenuto in testo da mostrare */
  text: string;
  /** Passare l'URL target. */
  href?: string;
  /** Mostra un'icona nella Card per l'azione "Leggi di più". Passare il nome dell'icona per utilizzarlo. */
  iconName?: string;
  testId?: string;
}

export const CardReadMore: FC = ({
  className,
  text,
  iconName = 'it-arrow-right',
  tag = 'a',
  href,
  testId,
  ...attributes
}) => {
  const Tag = tag;
  const classes = classNames(className, 'read-more');
  return (
    
      {text}
      {iconName && }
    
  );
};


================================================
FILE: src/Card/CardSignature.tsx
================================================
import React, { FC, HTMLAttributes, ElementType } from 'react';
import classNames from 'classnames';

export interface CardSignatureProps extends HTMLAttributes {
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente CardSignature*/
  className?: string;
  testId?: string;
}

export const CardSignature: FC = ({ className, tag = 'span', testId, ...attributes }) => {
  const Tag = tag;
  const classes = classNames(className, 'card-signature');
  return ;
};


================================================
FILE: src/Card/CardTag.tsx
================================================
import React, { AnchorHTMLAttributes, FC, ElementType } from 'react';
import classNames from 'classnames';

export interface CardTagProps extends AnchorHTMLAttributes {
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente CardTag*/
  className?: string;
  testId?: string;
}

export const CardTag: FC = ({ className, tag = 'a', testId, ...attributes }) => {
  const Tag = tag;
  const classes = classNames(className, 'card-tag');
  return ;
};


================================================
FILE: src/Card/CardTagsHeader.tsx
================================================
import React, { FC, HTMLAttributes, ElementType } from 'react';
import classNames from 'classnames';

export interface CardTagsHeaderProps extends HTMLAttributes {
  /** Mostra la data nella Card. Passare una data già formattata come stringa. */
  date?: string;
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente CardTagsHeader */
  className?: string;
  testId?: string;
}

export const CardTagsHeader: FC = ({
  date,
  children,
  className,
  tag = 'div',
  testId,
  ...attributes
}) => {
  const Tag = tag;
  const classes = classNames('head-tags', className);
  return (
    
      {children}
      {date && {date}}
    
  );
};


================================================
FILE: src/Card/CardText.tsx
================================================
import React, { FC, HTMLAttributes, ElementType } from 'react';
import { CardText as InnerCardText } from 'reactstrap';
import { CSSModule } from 'reactstrap/types/lib/utils';
// Note: this is a wrapper class around a reactstrap component.
// TODO: remove this class and restore the direct import when
// https://github.com/storybookjs/storybook/issues/10536 gets resolved

export interface CardTextProps extends HTMLAttributes {
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente CardText */
  className?: string;
  /** Oggetto contenente la nuova mappatura per le classi CSS. */
  cssModule?: CSSModule;
  testId?: string;
}

export const CardText: FC = (props) => {
  return ;
};


================================================
FILE: src/Card/CardTitle.tsx
================================================
import React, { FC, HTMLAttributes, ElementType } from 'react';
import { CardTitle as InnerCardTitle } from 'reactstrap';

// Note: this is a wrapper class around a reactstrap component.
// TODO: remove this class and restore the direct import when
// https://github.com/storybookjs/storybook/issues/10536 gets resolved

export interface CardTitleProps extends HTMLAttributes {
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente CardTitle */
  className?: string;
  testId?: string;
}

export const CardTitle: FC = (props) => {
  return ;
};


================================================
FILE: src/Carousel/Carousel.tsx
================================================
import React, { FC } from 'react';
import classNames from 'classnames';

import {Splide, SplideProps} from '@splidejs/react-splide'

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const CONFIG_DEFAULT: any = {
  slideFocus: false,
  rewind: true,
  perMove: 1,
  i18n: {
    prev: 'Slide precedente',
    next: 'Slide successiva',
    first: 'Vai alla prima slide',
    last: 'Vai all’ultima slide',
    slideX: 'Vai alla slide %s',
    pageX: 'Vai a pagina %s',
    play: 'Attiva autoplay',
    pause: 'Pausa autoplay',
    carousel: 'Carosello',
    select: 'Seleziona una slide da mostrare',
    slide: 'slide',
    slideLabel: '%s di %s',
  },
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const CONFIGS: any= {
  'landscape-three-cols': {
    type: 'slide',
    perPage: 3,
    gap: 24,
    padding: { left: 0, right: 0 },
    arrows: false,
    breakpoints: {
      768: {
        perPage: 1,
        gap: 24,
        padding: { left: 0, right: 0 },
        arrows: false,
      },
      992: {
        perPage: 2,
        gap: 24,
        padding: { left: 40, right: 40 },
        arrows: false,
      },
    },
  },
  'landscape-three-cols-arrows': {
    type: 'slide',
    perPage: 3,
    gap: 24,
    padding: { left: 0, right: 0 },
    arrows: true,
    breakpoints: {
      768: {
        perPage: 1,
        gap: 24,
        padding: { left: 40, right: 40 },
        arrows: true,
      },
      992: {
        perPage: 2,
        gap: 24,
        padding: { left: 40, right: 40 },
        arrows: true,
      },
    },
  },
  'big-image': {
    type: 'loop',
    perPage: 1,
    gap: 48,
    padding: { left: 320, right: 320 },
    arrows: false,
    breakpoints: {
      768: {
        perPage: 1,
        gap: 0,
        padding: { left: 0, right: 0 },
        arrows: false,
      },
      992: {
        perPage: 1,
        gap: 24,
        padding: { left: 160, right: 160 },
        arrows: false,
      },
    },
  },
  'standard-image': {
    type: 'loop',
    perPage: 3,
    gap: 24,
    padding: { left: 48, right: 48 },
    arrows: false,
    breakpoints: {
      768: {
        perPage: 1,
        gap: 24,
        padding: { left: 40, right: 40 },
        arrows: false,
      },
      992: {
        perPage: 2,
        gap: 24,
        padding: { left: 48, right: 48 },
        arrows: false,
      },
    },
  },
  'landscape': {
    type: 'slide',
    perPage: 1,
    gap: 24,
    padding: { left: 0, right: 0 },
    arrows: false,
    breakpoints: {
      768: {
        perPage: 1,
        gap: 24,
        padding: { left: 0, right: 0 },
        arrows: false,
      },
      992: {
        perPage: 1,
        gap: 24,
        padding: { left: 24, right: 24 },
        arrows: false,
      },
    },
  },
  'calendar-wrapper': {
    type: 'slide',
    perPage: 4,
    gap: 0,
    padding: { left: 0, right: 0 },
    arrows: false,
    breakpoints: {
      560: {
        perPage: 1,
        gap: 0,
        padding: { left: 24, right: 24 },
        arrows: false,
      },
      768: {
        perPage: 2,
        gap: 0,
        padding: { left: 0, right: 0 },
        arrows: false,
      },
      992: {
        perPage: 3,
        gap: 0,
        padding: { left: 0, right: 0 },
        arrows: false,
      },
    },
  },
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const EXTRA_CLASSES: any= {
  'landscape-three-cols': [
    'it-carousel-landscape-abstract-three-cols'
  ],
  'landscape-three-cols-arrows': [
    'it-carousel-landscape-abstract-three-cols-arrow-visible'
  ],
  'big-image': [
    'it-carousel-landscape-abstract-three-cols',
    'it-full-carousel',
    'it-big-img'
  ],
  'standard-image': [
    'it-carousel-landscape-abstract-three-cols',
    'it-full-carousel',
    'it-standard-image'
  ],
  'landscape': [
    'it-carousel-landscape-abstract'
  ],
  'calendar-wrapper': [
    'it-calendar-wrapper'
  ]
}

export interface CarouselProps extends SplideProps {
  type: string;
  children?: React.ReactNode;
}

// Splide wrapper
export const Carousel: FC = ({
  className = '',
  type,
  children,
  ...attributes
}) => {
  let conf = Object.assign({}, CONFIG_DEFAULT)
  if (['big-image', 'standard-image'].includes(type)){
    conf = Object.assign({}, conf, CONFIGS['landscape-three-cols'])
  }
  conf = Object.assign({}, conf, CONFIGS[type])
  return {children};
};


================================================
FILE: src/Carousel/CarouselSlide.tsx
================================================
import React from 'react';
import {SplideSlide} from '@splidejs/react-splide'

// Splide wrapper
export const CarouselSlide: React.FC = ({
  children,
}) => {

  return 
    
    
      {children}
    
    
      ;
};


================================================
FILE: src/Chips/Chip.tsx
================================================
import React, { HTMLAttributes, FC, ElementType } from 'react';
import classNames from 'classnames';

export interface ChipProps extends HTMLAttributes {
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente Chip */
  className?: string;
  /** Impostarlo su `true` per centrare la label all'interno */
  simple?: boolean;
  /** Impostarlo su `true` per una versione più grande del componente Chip. */
  large?: boolean;
  /** Impostarlo su `true` per renderizzare il componente Chip come disabilitato */
  disabled?: boolean;
  /** Le varianti di colore definite in Bootstrap Italia */
  color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | string;
  testId?: string;
}

export const Chip: FC = ({
  className,
  color = '',
  tag = 'div',
  simple = false,
  large = false,
  disabled = false,
  testId,
  ...attributes
}) => {
  const Tag = tag;
  const classes = classNames('chip', className, {
    'chip-simple': simple,
    'chip-lg': large,
    'chip-disabled': disabled,
    [`chip-${color}`]: color
  });

  return ;
};


================================================
FILE: src/Chips/ChipLabel.tsx
================================================
import React, { ElementType, FC, HTMLAttributes } from 'react';
import classNames from 'classnames';

export interface ChipLabelProps extends HTMLAttributes {
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente ChipLabel */
  className?: string;
  testId?: string;
}

export const ChipLabel: FC = ({ className, tag = 'span', testId, ...attributes }) => {
  const Tag = tag;
  const classes = classNames(className, 'chip-label');
  return ;
};


================================================
FILE: src/Collapse/Collapse.tsx
================================================
import classNames from 'classnames';
import React, { ElementType, FC, HTMLAttributes, Ref, useEffect, useRef, useState } from 'react';

import { Collapse as CollapseBase } from 'reactstrap';
import { CSSModule } from 'reactstrap/types/lib/utils';

import { Icon } from '../Icon/Icon';

// Copy over from reactstrap and add new ones
export interface CollapseProps extends HTMLAttributes {
  /** Indica se il menu HeaderNav sia aperto o meno. Usato unicamente nel caso della HeaderNav, ovvero con navbar e header entrambi true */
  isOpen?: boolean;
  /** Oggetto contenente la nuova mappatura per le classi CSS. */
  cssModule?: CSSModule;
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Indica se il componente Collapse è usato all'interno di un componente navbar */
  navbar?: boolean;
  /** Indica se il componente Collapse ha al suo interno un Megamenu */
  megamenu?: boolean;
  /** Indica se il componente Collapse è usato all'interno di un componente Header */
  header?: boolean;
  delay?: {
    show: number;
    hide: number;
  };
  /** Funzione chiamata all'apertura del componente Collapse */
  onOpened?: () => void;
  /** Funzione chiamata alla chiusura del componente Collapse */
  onClosed?: () => void;
  /** Funzione chiamata durante la trasizione di apertura del componente Collapse */
  onEntering?: () => void;
  /** Funzione chiamata al termine della trasizione di apertura del componente Collapse */
  onEntered?: () => void;
  onExit?: () => void;
  /** Funzione chiamata durante la trasizione di chiusura del componente Collapse */
  onExiting?: () => void;
  /** Funzione chiamata al termine della trasizione di chiusura del componente Collapse */
  onExited?: () => void;
  /** Funzione chiamata su click di overlay dell'HeaderNav aperto. Usato unicamente nel caso della HeaderNav, ovvero con navbar e header entrambi true */
  onOverlayClick?: () => void;
  /** Da utilizzare per impostare un riferimento all'elemento DOM */
  innerRef?: Ref;
  /** Testo pulsante di chiusura per screen reader */
  closeSrText?: string;
  testId?: string;
}

export const Collapse: FC = ({
  header = false,
  className,
  navbar,
  megamenu,
  children,
  isOpen = false,
  onOverlayClick,
  cssModule,
  testId,
  closeSrText = 'Nascondi la navigazione',
  ...attributes
}) => {
  const newCssModule = {
    'navbar-collapse': 'navbar-collapsable',
    ...cssModule
  };

  // Two-phase state to allow CSS transitions to play.
  // isVisible controls display:block/none; isExpanded controls the animation class.
  const [isVisible, setIsVisible] = useState(isOpen);
  const [isExpanded, setIsExpanded] = useState(isOpen);
  const panelRef = useRef(null);
  const triggerRef = useRef(null);

  useEffect(() => {
    if (!(megamenu || navbar)) return;
    if (isOpen) {
      triggerRef.current = document.activeElement;
      setIsVisible(true);
      // Double rAF ensures the browser has painted display:block before adding
      // the expanded class, so the CSS transform transition can fire.
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          setIsExpanded(true);
          panelRef.current?.focus();
        });
      });
      return;
    }
    setIsExpanded(false);
    // Wait for the CSS transition to complete before hiding.
    const timer = setTimeout(() => {
      setIsVisible(false);
      (triggerRef.current as HTMLElement | null)?.focus();
    }, PANEL_TRANSITION_MS);
    return () => clearTimeout(timer);
  }, [isOpen, megamenu, navbar]);

  useEffect(() => {
    if (!(megamenu || navbar)) return;
    if (isOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => { document.body.style.overflow = ''; };
  }, [isOpen, megamenu, navbar]);

  useEffect(() => {
    if (!(megamenu || navbar)) return;
    const main = document.querySelector('main');
    if (!main) return;
    if (isOpen) {
      main.setAttribute('inert', '');
    } else {
      main.removeAttribute('inert');
    }
    return () => main.removeAttribute('inert');
  }, [isOpen, megamenu, navbar]);

  useEffect(() => {
    if (!(megamenu || navbar)) return;
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape' && isOpen) {
        onOverlayClick?.();
      }
    };
    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, [isOpen, megamenu, navbar, onOverlayClick]);

  // Must match the longest CSS transition on .navbar-collapsable (currently 0.3s + buffer).
  const PANEL_TRANSITION_MS = 350;

  if (megamenu || navbar) {
    const classes = classNames(className, 'navbar-collapse', {
      expanded: isExpanded
    });
    const overlayClasses = classNames('overlay', {
      fade: isVisible,
      show: isExpanded
    });
    const displayStyle = { display: isVisible ? 'block' : 'none' };
    return (
      
        
    
        
    
          
        
    
        {megamenu ? 
    {children}
     : <>{children}}
          
    );
  }
  const classes = classNames(className, {
    'link-list-wrapper': header
  });

  return (
    
      {children}
    
  );
};


================================================
FILE: src/Dimmer/Dimmer.tsx
================================================
import classNames from 'classnames';
import React, { FC, HTMLAttributes } from 'react';

import { Icon } from '../Icon/Icon';

export interface DimmerProps extends HTMLAttributes {
  /** Il nome dell'icona da mostrare */
  icon?: string;
  /** Le varianti di colore definite in Bootstrap Italia */
  color?: 'primary' | 'secondary';
  /** Classi aggiuntive da usare per il componente Dimmer */
  className?: string;
  /** Mostra il wrapper */
  show?: boolean;
  /**
   * Classi aggiuntive da usare per il componente contenitore del Dimmer
   * Per replicare il comportamento precedente, in cui `className` veniva applicato anche al wrapper,
   * passare `true`.
   * */
  wrapperClassName?: string | true;
  testId?: string;
}

export const Dimmer: FC = ({
  icon,
  color,
  className,
  show = true,
  wrapperClassName,
  testId,
  ...attributes
}) => {
  const { children, ...rest } = attributes,
    classes = classNames('dimmer fade', { show: show }, wrapperClassName === true ? className : wrapperClassName, {
      [`dimmer-${color}`]: color
    }),
    innerClasses = classNames('dimmer-inner', className),
    dimmerIcon = icon && (
      
    
        
      
    
    );

  return (
    
    
      
    
        {dimmerIcon}
        {children}
      
    
    
    
  );
};


================================================
FILE: src/Dimmer/DimmerButtons.tsx
================================================
import classNames from 'classnames';
import React, { FC, HTMLAttributes } from 'react';

export interface DimmerButtonsProps extends HTMLAttributes {
  /** Classi aggiuntive da usare per il componente Dimmer */
  className?: string;
  /** Da utilizzare in presenza di un singolo bottone: quando abilitato ne centra il contenuto. */
  single?: boolean;
  /** Da utilizzare con `false` per abilitare il precedente comportamento senza sfondo scuro.
   * @deprecated
   */
  dark?: boolean;
  testId?: string;
}

export const DimmerButtons: FC = ({
  className,
  single = false,
  dark = true,
  testId,
  ...attributes
}) => {
  const { children, ...rest } = attributes;
  const classes = classNames('dimmer-buttons', className, {
    'bg-dark': dark,
    'single-button': single
  });

  return (
    
    
      {children}
    
    
  );
};


================================================
FILE: src/Dropdown/Dropdown.tsx
================================================
import classNames from 'classnames';
import React, { ElementType, FC } from 'react';
import { Dropdown as BSDRopdown, DropdownProps as BSDRopdownProps } from 'reactstrap';
export interface DropdownProps extends BSDRopdownProps {
  tag?: ElementType;
  inNavbar?: boolean;
  textCenter?: boolean;
  theme?: string;
  /** Classi aggiuntive da usare per il componente Button */
  className?: string;
  testId?: string;
}

export const Dropdown: FC = ({
  className,
  testId,
  children,
  inNavbar,
  textCenter,
  theme,
  ...attributes
}) => {
  const classes = classNames(className, {
    'text-center': textCenter
  });

  const [isOpen, setIsOpen] = React.useState(false);
  const toggle = () => setIsOpen(!isOpen);

  return (
    
      {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        React.Children.map(children, (child: any) => React.cloneElement(child, { inNavbar: inNavbar }))
      }
    
  );
};


================================================
FILE: src/Dropdown/DropdownMenu.tsx
================================================
import React, { FC, HTMLAttributes } from 'react';
import { DropdownMenu as BSDRopdownMenu } from 'reactstrap';
import { SLIM, useHeaderContext } from '../Header/HeaderContext';

export interface DropdownMenuProps extends HTMLAttributes {
  /** Classi aggiuntive da usare per il componente Button */
  inNavbar?: boolean;
  className?: string;
  testId?: string;
}

export const DropdownMenu: FC = ({ className, inNavbar, testId, children, ...attributes }) => {
  const type = useHeaderContext();
  const style = inNavbar && type === SLIM ? { top: 'unset !important' } : {};

  return (
    
      {children}
    
  );
};


================================================
FILE: src/Dropdown/DropdownToggle.tsx
================================================
import React, { ElementType, FC, HTMLAttributes } from 'react';
import { DropdownToggle as BSDropdownToggle } from 'reactstrap';
import classNames from 'classnames';
import { Icon } from '../Icon/Icon';

export interface DropdownToggleProps extends HTMLAttributes {
  caret?: boolean;
  tag?: ElementType;
  inNavbar?: boolean;
  testId?: string;
  /** Classi aggiuntive da usare per il componente Button */
  color?: string;
  className?: string;
  outline?: boolean;
}

export const DropdownToggle: FC = ({
  className,
  testId,
  children,
  caret,
  inNavbar,
  color = '',
  tag = 'button'
}) => {
  const Tag = tag === 'a' || inNavbar ? 'a' : 'button';

  const classes = classNames(className, {
    'btn-dropdown': Tag === 'a' && !inNavbar,
    'dropdown-toggle': true,
    btn: tag === 'button' && !inNavbar
  });

  let colorClass = '';
  if (tag === 'button' && color) {
    colorClass = `btn-${color}`;
  }

  const iconClasses = classNames({
    'icon-expand': true,
    'icon-sm': !inNavbar,
    'icon-xs': inNavbar,
    'ms-1': inNavbar,
    'icon-light': Tag.valueOf() !== 'a' ? true : false,
    color: color ? 'white' : 'primary'
  });
  return (
    
      {children as React.ReactNode}
      {caret === true ?  : null}
    
  );
};


================================================
FILE: src/FontLoader/FontLoader.tsx
================================================
import { useEffect } from 'react';

export interface FontLoaderProps {
  /**
   * Una lista di font aggiuntivi da caricare.
   * I font di default Titillium Web, Lora and Roboto Mono vengono aggiunti a questa lista e caricati sempre.
   * */
  fonts?: string[];
}

const defaultFonts = [
  'Titillium Web:300,400,600,700:latin-ext',
  'Lora:400,700:latin-ext',
  'Roboto Mono:400,700:latin-ext'
];

export function useFontLoader({ fonts }: FontLoaderProps) {
  useEffect(() => {
    if (typeof window !== 'undefined') {
      // eslint-disable-next-line @typescript-eslint/no-require-imports
      const WebFont = require('webfontloader');
      WebFont.load({
        custom: {
          families: [...defaultFonts, ...(fonts || [])]
        }
      });
    }
  }, [fonts]);
}

export const FontLoader = (props: FontLoaderProps) => {
  useFontLoader(props);

  return null;
};


================================================
FILE: src/Forward/Forward.tsx
================================================
import React, { FC, AnchorHTMLAttributes } from 'react';
import classNames from 'classnames';

export interface ForwardProps extends AnchorHTMLAttributes {
  /** Classi aggiuntive da usare per il componente Forward */
  className?: string;
  /** Riferimento al nodo a cui scorrere quando premuto */
  // scrollToRef: MutableRefObject;
  testId?: string;
}

export const Forward: FC = ({ className, children, testId, ...attributes }) => {
  const classes = classNames(className, 'forward');
  return (
     {
        e.preventDefault();
        if (attributes.href) {
          const scrollToRef = document.querySelector(attributes.href);
          if (scrollToRef) {
            scrollToRef.scrollIntoView({
              behavior: 'smooth',
              block: 'start'
            });
          }
        }
      }}
      data-testid={testId}
      {...attributes}
    >
      {children}
    
  );
};


================================================
FILE: src/GoBack/GoBack.tsx
================================================
import classNames from 'classnames';
import React, { ReactNode } from 'react';
import { Button } from '../Button/Button';
import { Icon } from '../Icon/Icon';

export interface GoBackProps {
  /**
   * Optional classnames to pass to the element
   */
  className?: string;
  /**
   * Render the link variant of the go back button
   */
  link?: boolean;
  /**
   * Render the up variant of the go back button
   */
  up?: boolean;
  children?: ReactNode;
}

const goBack = () => {
  window.history.back();
};

export const GoBack = ({ className, link = false, up = false, children }: GoBackProps) => {
  const Tag = link ? 'a' : Button;

  return (
    
      
      {children}
    
  );
};


================================================
FILE: src/Grid/GridItem.tsx
================================================
import React, { ElementType, FC, HTMLAttributes } from 'react';
import classname from 'classnames';

export interface GridItemProps extends HTMLAttributes {
  /** Classi aggiuntive da usare per il componente LinkListItem */
  className?: string;
  /** Indica il tag da utilizzare per il titolo */
  tag?: ElementType;
  testId?: string;
}

export const GridItem: FC = ({ tag: Tag = 'div', className, children, testId, ...attributes }) => {
  const classes = classname('it-grid-item-wrapper', className);
  return (
    
      {children}
    
  );
};


================================================
FILE: src/Grid/GridItemText.tsx
================================================
import React, { FC, HTMLAttributes } from 'react';
import classname from 'classnames';

export interface GridItemTextProps extends HTMLAttributes {
  /** Classi aggiuntive da usare per l'elemento */
  className?: string;
  testId?: string;
}

export const GridItemText: FC = ({ className, children, testId, ...attributes }) => {
  const classes = classname('it-griditem-text', className);
  return (
    
      {children}
    
  );
};


================================================
FILE: src/Grid/GridItemTextWrapper.tsx
================================================
import React, { ElementType, FC, HTMLAttributes } from 'react';
import classname from 'classnames';

export interface GridItemTextWrapperProps extends HTMLAttributes {
  /** Classi aggiuntive da usare per l'elemento */
  className?: string;
  testId?: string;
  /** Tag dell'elemento (può essere ad esempio trasformato in figcaption) */
  tag?: ElementType;
}

export const GridItemTextWrapper: FC = ({
  className,
  children,
  testId,
  tag = 'span',
  ...attributes
}) => {
  const classes = classname('it-griditem-text-wrapper', className);
  const Tag = tag;
  return (
    
      {children}
    
  );
};


================================================
FILE: src/Grid/GridList.tsx
================================================
import React, { FC, HTMLAttributes } from 'react';
import classname from 'classnames';

export interface GridListProps extends HTMLAttributes {
  /** Classi aggiuntive da usare per il componente LinkListItem */
  className?: string;
  testId?: string;
}

export const GridList: FC = ({ className, children, testId, ...attributes }) => {
  const classes = classname('it-grid-list-wrapper', className);
  return (
    
    
      {children}
    
    
  );
};


================================================
FILE: src/Grid/GridRow.tsx
================================================
import React, { FC, HTMLAttributes } from 'react';
import classname from 'classnames';

export interface GridRowProps extends HTMLAttributes {
  /** Classi aggiuntive da usare per il componente LinkListItem */
  className?: string;
  testId?: string;
}

export const GridRow: FC = ({ className, children, testId, ...attributes }) => {
  const classes = classname('grid-row', className);
  return (
    
    
      {children}
    
    
  );
};


================================================
FILE: src/Grid/index.ts
================================================
export { GridItem } from './GridItem';
export { GridItemText } from './GridItemText';
export { GridItemTextWrapper } from './GridItemTextWrapper';
export { GridList } from './GridList';
export { GridRow } from './GridRow';

export type { GridItemProps } from './GridItem';
export type { GridItemTextProps } from './GridItemText';
export type { GridItemTextWrapperProps } from './GridItemTextWrapper';
export type { GridListProps } from './GridList';
export type { GridRowProps } from './GridRow';


================================================
FILE: src/Header/Header.tsx
================================================
import React, { FC, HTMLAttributes } from 'react';
import classNames from 'classnames';

import { HeaderContext, CENTER, NAVBAR } from './HeaderContext';

export interface HeaderProps extends HTMLAttributes {
  /** Classi aggiuntive da usare per il componente Header */
  className?: string;
  /** Tipo di componente Header: può essere solamente uno di questi tre tipi */
  type: 'slim' | 'center' | 'navbar';
  /** Riduce la grandezza del componente Header. Funziona solamente con Header "center". */
  small?: boolean;
  /** Imposta il tema per il componente Header. Per gli Header di tipo "slim" o "center"
   *  il valore di default è "dark". Per l'Header di tipo "nav" il tema di default è "light"
   *  in mobile, mentre "dark" in versione desktop.
   */
  theme?: 'light' | 'dark' | '';
  testId?: string;
}

export const Header: FC = ({ className, small = false, theme = '', type, testId, ...attributes }) => {
  // use context here as theme
  const classes = classNames(className, {
    [`it-header-${type}-wrapper`]: type,
    'it-small-header': type === CENTER && small,
    [`theme-${theme}`]: type !== NAVBAR && theme,
    'theme-dark-mobile': type === NAVBAR && theme === 'dark',
    'theme-light-desk': type === NAVBAR && theme === 'light'
  });
  return (
    
      
    
    
  );
};


================================================
FILE: src/Header/HeaderBrand.tsx
================================================
import React, { AnchorHTMLAttributes, ElementType, ReactNode } from 'react';
import classNames from 'classnames';
import { NavbarBrand } from 'reactstrap';
import { CSSModule } from 'reactstrap/types/lib/utils';
import { CENTER, useHeaderContext } from './HeaderContext';
import { Icon } from '../Icon/Icon';

export interface HeaderBrandProps extends AnchorHTMLAttributes {
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente HeaderBrand */
  className?: string;
  /** Oggetto contenente la nuova mappatura per le classi CSS. */
  cssModule?: CSSModule;
  /** Da usare con il componente Header Nav in versione "responsive" */
  responsive?: boolean;
  /** Da utilizzare per specificare URL risorsa esterna. */
  href?: string;
  /** Icona da utilizzare nel componente. Utilizzata unicamente quando l'Header è di tipo Center.  */
  iconName?: string;
  /** Alt text da utilizzare nell'icona. Utilizzata unicamente quando l'Header è di tipo Center.  */
  iconAlt?: string;
  /** Elementi React da renderizzare al proprio interno. */
  children: ReactNode | ReactNode[];
  testId?: string;
}

export const HeaderBrand = ({
  className,
  href,
  iconName,
  iconAlt,
  children,
  tag = 'a',
  responsive = false,
  testId,
  ...attributes
}: HeaderBrandProps) => {
  const type = useHeaderContext();
  const defaultAttributes = { tag };
  if (type !== CENTER) {
    const classes = classNames('d-lg-block', className, {
      'd-none': !responsive
    });
    return (
      
        {children}
      
    );
  }
  return (
    
  );
};


================================================
FILE: src/Header/HeaderContent.tsx
================================================
import React, { HTMLAttributes } from 'react';
import classNames from 'classnames';
import { Col, Container, Navbar, Row } from 'reactstrap';

import { SLIM, CENTER, NAVBAR, useHeaderContext } from './HeaderContext';

export interface HeaderContentProps extends HTMLAttributes {
  /** Classi aggiuntive da usare per il componente HeaderContent */
  className?: string;
  /** Da utilizzare per indicare che all'interno dell'Header verrà utilizzato un Megamenu */
  megamenu?: boolean;
  /** Parametro per il controllo responsive del componente secondo Bootstrap Italia. */
  expand?: boolean | 'sm' | 'md' | 'lg' | 'xl';
  testId?: string;
}

export const HeaderContent = ({ className, megamenu, testId, ...attributes }: HeaderContentProps) => {
  const type = useHeaderContext();
  const classes = classNames(className, {
    'it-header-slim-wrapper-content': type === SLIM,
    'it-header-center-content-wrapper': type === CENTER,
    navbar: type === NAVBAR,
    'has-megamenu': megamenu
  });

  const Content =
    type === NAVBAR ? (
      
    ) : (
      
    
    );
  return (
    
      
        {Content}
      
    
  );
};


================================================
FILE: src/Header/HeaderContext.tsx
================================================
import { createContext, useContext } from 'react';

export const SLIM = 'slim';
export const CENTER = 'center';
export const NAVBAR = 'navbar';

export const HeaderContext = /* @__PURE__ */ createContext<{
  type?: typeof SLIM | typeof CENTER | typeof NAVBAR;
}>({});

export const useHeaderContext = () => {
  const { type } = useContext(HeaderContext);
  return type;
};


================================================
FILE: src/Header/HeaderLinkZone.tsx
================================================
import React, { FC, HTMLAttributes } from 'react';
import classNames from 'classnames';

export interface HeaderLinkZoneProps extends HTMLAttributes {
  /** Classi addizionali per il componente HeaderLinkZone, applicata all'element "nav" annidato */
  className?: string;
  testId?: string;
}

export const HeaderLinkZone: FC = ({ className, testId, ...attributes }) => {
  const classes = classNames(className);
  return (
    
    
      
    
  );
};


================================================
FILE: src/Header/HeaderRightZone.tsx
================================================
import React, { HTMLAttributes } from 'react';
import classNames from 'classnames';

import { SLIM, useHeaderContext } from './HeaderContext';

export interface HeaderRightZoneProps extends HTMLAttributes {
  /** Classi addizionali per il componente HeaderLinkZone, applicata all'element "nav" annidato */
  className?: string;
  testId?: string;
}

export const HeaderRightZone = ({ className, testId, ...attributes }: HeaderRightZoneProps) => {
  const type = useHeaderContext();
  const classes = classNames(className, {
    // BI >= 1.3.6
    'it-header-slim-right-zone': type === SLIM,
    // BI < 1.3.6
    'header-slim-right-zone': type === SLIM,
    'it-right-zone': type !== SLIM
  });
  return 
    ;
};


================================================
FILE: src/Header/HeaderSearch.tsx
================================================
import React, { FC, HTMLAttributes } from 'react';
import classNames from 'classnames';

import { Icon } from '../Icon/Icon';

export interface HeaderSearchProps extends HTMLAttributes {
  /** Classi aggiuntive da usare per il componente HeaderSearch */
  className?: string;
  /** Etichetta di testo da applicare all'elemento. In caso di stringa vuota non verrà mostrato alcun testo */
  label: string;
  /** Nome dell'icona da utilizzare */
  iconName: string;
  /** Indirizzo di indirizzamento al click dell'icona */
  href?: string;
  testId?: string;
}

export const HeaderSearch: FC = ({
  className,
  label,
  href,
  iconName = 'it-search',
  testId,
  ...attributes
}) => {
  const classes = classNames('it-search-wrapper', className);
  return (
    
    
      {label && {label}}
      
        
      
    
    
  );
};


================================================
FILE: src/Header/HeaderSocialsZone.tsx
================================================
import React, { FC, HTMLAttributes, ReactNode } from 'react';
import classNames from 'classnames';

export interface HeaderSocialsZoneProps extends HTMLAttributes {
  /** Classi addizionali per il componente HeaderSocialsZone, verrà applicato all'elemento wrapper più esterno. */
  className?: string;
  /** Etichetta utilizzata per presentare i social presenti. In caso di stringa vuota non verrà mostrata alcuna etichetta */
  label?: string;
  /** Utilizzato per elencare i social da mostrare */
  children?: ReactNode;
  testId?: string;
}

export const HeaderSocialsZone: FC = ({
  className,
  children,
  label,
  testId,
  ...attributes
}) => {
  const classes = classNames('it-socials d-none d-md-flex', className);
  return (
    
    
      {label && {label}}
      {children}
    
    
  );
};


================================================
FILE: src/Header/HeaderToggler.tsx
================================================
import React, { ElementType, ButtonHTMLAttributes, useEffect } from 'react';
import classNames from 'classnames';
import { NavbarToggler } from 'reactstrap';

import { SLIM, NAVBAR, useHeaderContext } from './HeaderContext';

export interface HeaderTogglerProps extends ButtonHTMLAttributes {
  /** Tipo di elemento DOM da utilizzare: di default "a" per Header Slim, "button" per altri tipi di Header.
   * Se fornito questo sovrascriverà il valore di default.
   */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente HeaderToggler */
  className?: string;
  /** Indica l'attributo "type" sull'elemento DOM. Di default '' per Header Slim, "button" per altri tipi di Header.
   * Se fornito questo sovrascriverà il valore di default.
   */
  type?: 'button' | 'submit' | 'reset';
  isOpen?: boolean;
  testId?: string;
}

const BUTTON = 'button';

export const HeaderToggler = ({ className, tag, type, isOpen = false, testId, ...attributes }: HeaderTogglerProps) => {
  const HeaderType = useHeaderContext();
  const defaultTag = HeaderType === SLIM ? 'a' : BUTTON;
  const defaultType = HeaderType === SLIM ? undefined : BUTTON;
  const classes = classNames(
    {
      'it-opener d-lg-none': HeaderType === SLIM,
      'custom-navbar-toggler': HeaderType === NAVBAR
    },
    className
  );
  const expanded = isOpen ? 'true' : 'false';
  useEffect(() => {
    document.querySelectorAll('.container-fluid').forEach((element) => {
      element.classList.remove('container-fluid');
    });
  });
  return (
    
  );
};


================================================
FILE: src/Header/Headers.tsx
================================================
import React, { FC, HTMLAttributes } from 'react';
import classNames from 'classnames';
export interface HeadersProps extends HTMLAttributes {
  /** Aggiunge un ombra per enfatizzare il componente rispetto alla pagina in cui è contenuto */
  shadow?: boolean;
  /** Aggiunge il comportamento "sticky" ai componenti Header contenuti */
  sticky?: boolean;
  /** Classi addizionali per il componente Headers */
  className?: string;
  testId?: string;
}

export const Headers: FC = ({ className, shadow = false, sticky = false, testId, ...attributes }) => {
  const classes = classNames(
    'it-header-wrapper',
    {
      'it-shadow': shadow,
      'it-header-sticky': sticky,
      'sticky-top': sticky

    },
    className
  );
  return 
    ;
};


================================================
FILE: src/Hero/Hero.tsx
================================================
import classname from 'classnames';
import React, { ElementType, FC, HTMLAttributes } from 'react';

export interface HeroProps extends HTMLAttributes {
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Indica se il componente Hero deve ridurre l'altezza */
  small?: boolean;
  /** Indica al componente Hero di centrare i contenuti testuali orizzontalmente */
  centered?: boolean;
  /** Da utilizzare per creare un testi in overlay su immagini, al fine di migliorare la leggibilità di testo */
  overlay?: 'dark' | 'primary' | 'filter';
  /** Aggiunge margine negativo in fondo al componente Hero per creare una sovrapposizione con il contenuto seguente. */
  overlap?: boolean;
  testId?: string;
}

export const Hero: FC = ({
  tag: Tag = 'section',
  small,
  centered,
  overlay,
  overlap,
  className,
  testId,
  ...attributes
}) => {
  const classes = classname('it-hero-wrapper', className, {
    'it-overlay': overlay,
    ['it-' + overlay]: overlay,
    'it-hero-small-size': small,
    'it-text-centered': centered,
    'it-bottom-overlapping-content': overlap
  });
  return ;
};


================================================
FILE: src/Hero/HeroBackground.tsx
================================================
import React, { FC, HTMLAttributes } from 'react';

export interface HeroBackgroundProps extends HTMLAttributes {
  /** Un testo alternativo per descrivere l'immagine mostrata */
  alt: string;
  /** L'URI dell'immagine da mostrare */
  src: string;
  /** Il titolo dell'immagine */
  title?: string;
  testId?: string;
}

export const HeroBackground: FC = ({ alt, testId, ...attributes }) => {
  return (
    
    
      
    
        
    
          {alt}
        
    
      
    
    
    
  );
};


================================================
FILE: src/Hero/HeroBody.tsx
================================================
import React, { FC, HTMLAttributes } from 'react';
import classname from 'classnames';
import { Col, Container, Row } from 'reactstrap';

export interface HeroBodyProps extends HTMLAttributes {
  /** Eventuali classi aggiuntive */
  className?: string;
  testId?: string;
}

export const HeroBody: FC = ({ children, className, testId }) => {
  const classes = classname('it-hero-text-wrapper', 'bg-dark', className);
  return (
    
      
        
          
    
            {children}
          
    
        
          
        
  );
};


================================================
FILE: src/Hero/HeroButton.tsx
================================================
import React, { FC } from 'react';
import classname from 'classnames';
import { Button, ButtonProps } from '../Button/Button';

export interface HeroButtonProps extends ButtonProps {
  wrapperClassName?: string;
  testId?: string;
}

export const HeroButton: FC = ({ wrapperClassName, testId, ...attributes }) => {
  const classes = classname('it-btn-container', wrapperClassName);
  return (
    
    
      
    
  );
};


================================================
FILE: src/Hero/HeroCategory.tsx
================================================
import React, { FC, HTMLAttributes } from 'react';
import classname from 'classnames';

export interface HeroCategoryProps extends HTMLAttributes {
  /** Eventuali classi aggiuntive per la categoria */
  className?: string;
  testId?: string;
}

export const HeroCategory: FC = ({ className, testId, ...attributes }) => {
  const classes = classname('it-category', className);
  return ;
};


================================================
FILE: src/Hero/HeroTitle.tsx
================================================
import React, { ElementType, FC, HTMLAttributes } from 'react';
import classname from 'classnames';

export interface HeroTitleProps extends HTMLAttributes {
  /** Indica il tag da utilizzare per il titolo */
  tag?: ElementType;
  testId?: string;
}

export const HeroTitle: FC = ({ tag: Tag = 'h1', className, testId, ...attributes }) => {
  const classes = classname(className);
  return ;
};


================================================
FILE: src/Hero/index.ts
================================================
export { Hero } from './Hero';
export { HeroBackground } from './HeroBackground';
export { HeroBody } from './HeroBody';
export { HeroButton } from './HeroButton';
export { HeroCategory } from './HeroCategory';
export { HeroTitle } from './HeroTitle';

export type { HeroProps } from './Hero';
export type { HeroBackgroundProps } from './HeroBackground';
export type { HeroBodyProps } from './HeroBody';
export type { HeroButtonProps } from './HeroButton';
export type { HeroCategoryProps } from './HeroCategory';
export type { HeroTitleProps } from './HeroTitle';


================================================
FILE: src/Icon/EmptyIcon.tsx
================================================
import React, { FC, SVGProps } from 'react';
interface SVGRProps {
  title?: string;
  titleId?: string;
}
export const EmptyIcon: FC & SVGRProps> = ({ title, titleId, ...props }) => (
  
    {title ? {title} : null}
    
  
);


================================================
FILE: src/Icon/Icon.tsx
================================================
import classNames from 'classnames';
import React, { FC, ImgHTMLAttributes, SVGProps, useEffect, useState } from 'react';
import { EmptyIcon } from './EmptyIcon';
import { IconName, SVGRProps, allIcons, isBundledIcon, loadIcon } from './assets/index';
export type { IconName } from './assets';

export const iconsList = allIcons;

let iconsCache: Record>> = {};

/**
 * Preload a list of icons in cache
 * @param icons - the list of icons to preload
 * @returns true if the icons have been preloaded
 */
export async function preloadIcons(icons: IconName[]) {
  const preloadedIcons = await Promise.all(icons.map((icon) => loadIcon(icon)));
  preloadedIcons.forEach(({ component }, i) => {
    iconsCache[icons[i]] = (() => component) as unknown as FC>;
  });
  return true;
}

/**
 * Removes icons from cache
 * @param icon? - the icon to remove, or nothing to clear the whole cache
 * @returns an object containing the removed icons
 */
export const clearIconCache = (iconName?: IconName) => {
  let deletedItems;
  if (iconName) {
    deletedItems = { [iconName]: iconsCache[iconName] };
    delete iconsCache[iconName];
  } else {
    deletedItems = { ...iconsCache };
    iconsCache = {};
  }
  return deletedItems;
};

export interface IconProps extends SVGProps {
  /** Classi aggiuntive da usare per il componente Badge */
  className?: string;
  /** Le varianti di colore definite in Bootstrap Italia */
  color?: 'success' | 'warning' | 'danger' | 'note' | 'important' | string;
  /** Le dimensioni dell'icona. In ordine dalla più grande alla più piccola: "xl", "lg", '' (stringa vuota), "sm", "xs". */
  size?: 'xl' | 'lg' | '' | 'sm' | 'xs';
  /**
   * Il nome dell'icona da mostrare. Per una lista completa vedi:
   * Lista icone.
   * In caso di un'immagine esterna l'URL da utilizzare.
   **/
  icon: string;
  /** Il titolo da dare all'icona. Quando si utilizza un'immagine esterna viene utilizzato come attributo "alt". */
  title?: string;
  /** Quando abilitato riduce la dimensione dell'icona all'interno del contenitore.  */
  padding?: boolean;
  /** Funzione chiamata al caricamento dell'icona */
  onIconLoad?: () => void;
  /** Id da utilizzare in caso di testing */
  testId?: string;
}

export const Icon: FC = ({
  color = '',
  size = '',
  icon = '',
  title = '',
  className,
  padding = false,
  onIconLoad,
  testId,
  ...attributes
}) => {
  const [IconComponent, setCurrentIcon] = useState & SVGRProps>>(iconsCache[icon]);
  const classes = classNames('icon', className, {
    [`icon-${color}`]: color,
    [`icon-${size}`]: size,
    'icon-padded': padding
  });

  useEffect(() => {
    if (isBundledIcon(icon) && !iconsCache[icon]) {
      loadIcon(icon).then(({ component }) => {
        iconsCache[icon] = (() => component) as unknown as FC & SVGRProps>;
        setCurrentIcon(iconsCache[icon]);
        onIconLoad?.();
      });
    } else {
      if (IconComponent !== iconsCache[icon]) {
        setCurrentIcon(iconsCache[icon]);
      }
      onIconLoad?.();
    }
  }, [IconComponent, icon, onIconLoad]);

  if (!isBundledIcon(icon)) {
    // assume it's an image and let the browser do its job
    return (
      {title})}
      />
    );
  }

  if (!IconComponent) {
    return (
      
    );
  }

  return (
    
  );
};


================================================
FILE: src/Icon/assets/ItAndroid.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItAndroidSquare.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItApple.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItAppleSquare.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItArrowDown.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItArrowDownCircle.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItArrowDownTriangle.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItArrowLeft.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItArrowLeftCircle.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItArrowLeftTriangle.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItArrowRight.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItArrowRightCircle.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItArrowRightTriangle.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItArrowUp.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItArrowUpCircle.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItArrowUpTriangle.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItBan.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItBehance.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItBluesky.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItBookmark.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItBox.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItBurger.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItCalendar.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItCamera.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItCar.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItCard.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItCart.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItChartLine.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItCheck.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItCheckCircle.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItChevronLeft.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItChevronRight.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItClip.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItClock.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItClose.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItCloseBig.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItCloseCircle.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItCodeCircle.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItCollapse.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItComment.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItCopy.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItDelete.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItDesignersItalia.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItDownload.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItError.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItExchangeCircle.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItExpand.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItExternalLink.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFacebook.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFacebookSquare.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFigma.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
      
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFigmaSquare.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFile.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFileAudio.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
        
      
      
        
          
        
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFileCompressed.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
        
      
      
        
          
        
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFileCsv.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
        
      
      
        
          
        
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFileDocx.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
      
      
      

    
  );
};


================================================
FILE: src/Icon/assets/ItFileImage.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFileJson.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFileOdp.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFileOds.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFileOdt.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFilePdf.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
        
      
      
        
          
        
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFilePdfExt.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFilePpt.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFileSheet.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
        
      
      
        
          
        
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFileSigned.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}

      
      
      
      
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFileSlides.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFileTxt.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFileVideo.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
        
      
      
        
          
        
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFileXlsx.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
      
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFileXml.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFiles.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFlag.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFlickr.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFlickrSquare.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFolder.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFullscreen.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItFunnel.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItGithub.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItGoogle.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItHearing.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItHelp.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItHelpCircle.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItHorn.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItInbox.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItInfoCircle.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItInstagram.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItKey.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItLessCircle.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItLink.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItLinkedin.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItLinkedinSquare.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItList.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItLock.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItLocked.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItLogout.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
        
      
      
        
          
        
      
    
  );
};


================================================
FILE: src/Icon/assets/ItMail.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItMailOpen.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItMapMarker.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItMapMarkerCircle.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItMapMarkerMinus.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItMapMarkerPlus.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItMastodon.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItMastodonSquare.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItMaximize.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItMaximizeAlt.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItMedium.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItMediumSquare.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItMinimize.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItMinus.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItMinusCircle.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItMoodle.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItMoodleSquare.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItMoreActions.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItMoreItems.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItNote.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItOpenSource.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItPa.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItPasswordInvisible.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItPasswordVisible.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItPencil.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItPiattaforme.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItPin.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItPinterest.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItPinterestSquare.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItPlug.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItPlus.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItPlusCircle.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItPresentation.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItPrint.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItQuora.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItQuoraSquare.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItReddit.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItRedditSquare.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItRefresh.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItRestore.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItRss.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItRssSquare.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItSearch.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItSettings.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItShare.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItSign.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItSlack.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItSlackSquare.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItSnapchat.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItSnapchatSquare.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItSoftware.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItSpotify.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItStackexchange.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItStackexchangeSquare.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItStackoverflow.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItStackoverflowSquare.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItStarFull.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItStarOutline.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItTeamDigitale.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItTelegram.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItTelephone.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItThreads.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItThreadsSquare.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItTiktok.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItTiktokSquare.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItTool.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItTwitter.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItTwitterSquare.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItUnlocked.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItUpload.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItUser.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItVideo.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItVimeo.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItVimeoSquare.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItWarning.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItWarningCircle.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItWhatsapp.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItWhatsappSquare.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItWifi.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
      
    
  );
};


================================================
FILE: src/Icon/assets/ItYoutube.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItZoomIn.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';
export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/ItZoomOut.tsx
================================================
import * as React from 'react';
import { SVGProps } from 'react';
import { SVGRProps } from '.';

export const component = ({ title, titleId, ...props }: SVGProps & SVGRProps) => {
  return (
    
      {title ? {title} : null}
      
    
  );
};


================================================
FILE: src/Icon/assets/index.ts
================================================
const iconList: Record = {
  'it-android-square': true,
  'it-android': true,
  'it-apple-square': true,
  'it-apple': true,
  'it-arrow-down-circle': true,
  'it-arrow-down-triangle': true,
  'it-arrow-down': true,
  'it-arrow-left-circle': true,
  'it-arrow-left-triangle': true,
  'it-arrow-left': true,
  'it-arrow-right-circle': true,
  'it-arrow-right-triangle': true,
  'it-arrow-right': true,
  'it-arrow-up-circle': true,
  'it-arrow-up-triangle': true,
  'it-arrow-up': true,
  'it-ban': true,
  'it-behance': true,
  'it-bluesky': true,
  'it-bookmark': true,
  'it-box': true,
  'it-burger': true,
  'it-calendar': true,
  'it-camera': true,
  'it-car': true,
  'it-card': true,
  'it-cart': true,
  'it-chart-line': true,
  'it-check-circle': true,
  'it-check': true,
  'it-chevron-left': true,
  'it-chevron-right': true,
  'it-clip': true,
  'it-clock': true,
  'it-close-big': true,
  'it-close-circle': true,
  'it-close': true,
  'it-code-circle': true,
  'it-collapse': true,
  'it-comment': true,
  'it-copy': true,
  'it-delete': true,
  'it-designers-italia': true,
  'it-download': true,
  'it-error': true,
  'it-exchange-circle': true,
  'it-expand': true,
  'it-external-link': true,
  'it-facebook-square': true,
  'it-facebook': true,
  'it-figma-square': true,
  'it-figma': true,
  'it-file-audio': true,
  'it-file-docx': true,
  'it-file-compressed': true,
  'it-file-csv': true,
  'it-file-json': true,
  'it-file-image': true,
  'it-file-odp': true,
  'it-file-ods': true,
  'it-file-odt': true,
  'it-file-pdf-ext': true,
  'it-file-pdf': true,
  'it-file-ppt': true,
  'it-file-sheet': true,
  'it-file-signed': true,
  'it-file-slides': true,
  'it-file-txt': true,
  'it-file-video': true,
  'it-file-xlsx': true,
  'it-file-xml': true,
  'it-file': true,
  'it-files': true,
  'it-flag': true,
  'it-flickr-square': true,
  'it-flickr': true,
  'it-folder': true,
  'it-fullscreen': true,
  'it-funnel': true,
  'it-github': true,
  'it-google': true,
  'it-hearing': true,
  'it-help-circle': true,
  'it-help': true,
  'it-horn': true,
  'it-inbox': true,
  'it-info-circle': true,
  'it-instagram': true,
  'it-key': true,
  'it-less-circle': true,
  'it-link': true,
  'it-linkedin-square': true,
  'it-linkedin': true,
  'it-list': true,
  'it-lock': true,
  'it-locked': true,
  'it-logout': true,
  'it-mail-open': true,
  'it-mail': true,
  'it-map-marker-circle': true,
  'it-map-marker-minus': true,
  'it-map-marker-plus': true,
  'it-map-marker': true,
  'it-mastodon-square': true,
  'it-mastodon': true,
  'it-maximize-alt': true,
  'it-maximize': true,
  'it-medium-square': true,
  'it-medium': true,
  'it-minimize': true,
  'it-minus-circle': true,
  'it-minus': true,
  'it-moodle-square': true,
  'it-moodle': true,
  'it-more-actions': true,
  'it-more-items': true,
  'it-note': true,
  'it-open-source': true,
  'it-pa': true,
  'it-password-invisible': true,
  'it-password-visible': true,
  'it-pencil': true,
  'it-piattaforme': true,
  'it-pin': true,
  'it-pinterest-square': true,
  'it-pinterest': true,
  'it-plug': true,
  'it-plus-circle': true,
  'it-plus': true,
  'it-presentation': true,
  'it-print': true,
  'it-quora-square': true,
  'it-quora': true,
  'it-reddit-square': true,
  'it-reddit': true,
  'it-refresh': true,
  'it-restore': true,
  'it-rss-square': true,
  'it-rss': true,
  'it-search': true,
  'it-settings': true,
  'it-share': true,
  'it-sign': true,
  'it-slack-square': true,
  'it-slack': true,
  'it-snapchat-square': true,
  'it-snapchat': true,
  'it-software': true,
  'it-spotify': true,
  'it-stackexchange-square': true,
  'it-stackexchange': true,
  'it-stackoverflow-square': true,
  'it-stackoverflow': true,
  'it-star-full': true,
  'it-star-outline': true,
  'it-team-digitale': true,
  'it-telegram': true,
  'it-telephone': true,
  'it-tiktok-square': true,
  'it-tiktok': true,
  'it-tool': true,
  'it-threads-square': true,
  'it-threads': true,
  'it-twitter-square': true,
  'it-twitter': true,
  'it-unlocked': true,
  'it-upload': true,
  'it-user': true,
  'it-video': true,
  'it-vimeo-square': true,
  'it-vimeo': true,
  'it-warning-circle': true,
  'it-warning': true,
  'it-whatsapp-square': true,
  'it-whatsapp': true,
  'it-wifi': true,
  'it-youtube': true,
  'it-zoom-in': true,
  'it-zoom-out': true
};
export type IconName = keyof typeof iconList;

export const loadIcon = (name: IconName) => {
  switch (name) {
    case 'it-android-square': {
      return import('./ItAndroidSquare');
    }
    case 'it-android': {
      return import('./ItAndroid');
    }
    case 'it-apple-square': {
      return import('./ItAppleSquare');
    }
    case 'it-apple': {
      return import('./ItApple');
    }
    case 'it-arrow-down-circle': {
      return import('./ItArrowDownCircle');
    }
    case 'it-arrow-down-triangle': {
      return import('./ItArrowDownTriangle');
    }
    case 'it-arrow-down': {
      return import('./ItArrowDown');
    }
    case 'it-arrow-left-circle': {
      return import('./ItArrowLeftCircle');
    }
    case 'it-arrow-left-triangle': {
      return import('./ItArrowLeftTriangle');
    }
    case 'it-arrow-left': {
      return import('./ItArrowLeft');
    }
    case 'it-arrow-right-circle': {
      return import('./ItArrowRightCircle');
    }
    case 'it-arrow-right-triangle': {
      return import('./ItArrowRightTriangle');
    }
    case 'it-arrow-right': {
      return import('./ItArrowRight');
    }
    case 'it-arrow-up-circle': {
      return import('./ItArrowUpCircle');
    }
    case 'it-arrow-up-triangle': {
      return import('./ItArrowUpTriangle');
    }
    case 'it-arrow-up': {
      return import('./ItArrowUp');
    }
    case 'it-ban': {
      return import('./ItBan');
    }
    case 'it-behance': {
      return import('./ItBehance');
    }
    case 'it-bluesky': {
      return import('./ItBluesky');
    }
    case 'it-bookmark': {
      return import('./ItBookmark');
    }
    case 'it-box': {
      return import('./ItBox');
    }
    case 'it-burger': {
      return import('./ItBurger');
    }
    case 'it-calendar': {
      return import('./ItCalendar');
    }
    case 'it-camera': {
      return import('./ItCamera');
    }
    case 'it-car': {
      return import('./ItCar');
    }
    case 'it-cart': {
      return import('./ItCart');
    }
    case 'it-card': {
      return import('./ItCard');
    }
    case 'it-chart-line': {
      return import('./ItChartLine');
    }
    case 'it-check-circle': {
      return import('./ItCheckCircle');
    }
    case 'it-check': {
      return import('./ItCheck');
    }
    case 'it-chevron-left': {
      return import('./ItChevronLeft');
    }
    case 'it-chevron-right': {
      return import('./ItChevronRight');
    }
    case 'it-clip': {
      return import('./ItClip');
    }
    case 'it-clock': {
      return import('./ItClock');
    }
    case 'it-close-big': {
      return import('./ItCloseBig');
    }
    case 'it-close-circle': {
      return import('./ItCloseCircle');
    }
    case 'it-close': {
      return import('./ItClose');
    }
    case 'it-code-circle': {
      return import('./ItCodeCircle');
    }
    case 'it-collapse': {
      return import('./ItCollapse');
    }
    case 'it-comment': {
      return import('./ItComment');
    }
    case 'it-copy': {
      return import('./ItCopy');
    }
    case 'it-delete': {
      return import('./ItDelete');
    }
    case 'it-designers-italia': {
      return import('./ItDesignersItalia');
    }
    case 'it-download': {
      return import('./ItDownload');
    }
    case 'it-error': {
      return import('./ItError');
    }
    case 'it-exchange-circle': {
      return import('./ItExchangeCircle');
    }
    case 'it-expand': {
      return import('./ItExpand');
    }
    case 'it-external-link': {
      return import('./ItExternalLink');
    }
    case 'it-facebook-square': {
      return import('./ItFacebookSquare');
    }
    case 'it-facebook': {
      return import('./ItFacebook');
    }
    case 'it-figma-square': {
      return import('./ItFigmaSquare');
    }
    case 'it-figma': {
      return import('./ItFigma');
    }
    case 'it-file-audio': {
      return import('./ItFileAudio');
    }
    case 'it-file-compressed': {
      return import('./ItFileCompressed');
    }
    case 'it-file-csv': {
      return import('./ItFileCsv');
    }
    case 'it-file-json': {
      return import('./ItFileJson');
    }
    case 'it-file-odp': {
      return import('./ItFileOdp');
    }
    case 'it-file-ods': {
      return import('./ItFileOds');
    }
    case 'it-file-odt': {
      return import('./ItFileOdt');
    }
    case 'it-file-pdf-ext': {
      return import('./ItFilePdfExt');
    }
    case 'it-file-pdf': {
      return import('./ItFilePdf');
    }
    case 'it-file-ppt': {
      return import('./ItFilePpt');
    }
    case 'it-file-sheet': {
      return import('./ItFileSheet');
    }
    case 'it-file-slides': {
      return import('./ItFileSlides');
    }
    case 'it-file-txt': {
      return import('./ItFileTxt');
    }
    case 'it-file-video': {
      return import('./ItFileVideo');
    }
    case 'it-file-xml': {
      return import('./ItFileXml');
    }
    case 'it-file-docx': {
      return import('./ItFileDocx');
    }
    case 'it-file-image': {
      return import('./ItFileImage');
    }
    case 'it-file-signed': {
      return import('./ItFileSigned');
    }
    case 'it-file-xlsx': {
      return import('./ItFileXlsx');
    }
    case 'it-file': {
      return import('./ItFile');
    }
    case 'it-files': {
      return import('./ItFiles');
    }
    case 'it-flag': {
      return import('./ItFlag');
    }
    case 'it-flickr-square': {
      return import('./ItFlickrSquare');
    }
    case 'it-flickr': {
      return import('./ItFlickr');
    }
    case 'it-folder': {
      return import('./ItFolder');
    }
    case 'it-fullscreen': {
      return import('./ItFullscreen');
    }
    case 'it-funnel': {
      return import('./ItFunnel');
    }
    case 'it-github': {
      return import('./ItGithub');
    }
    case 'it-google': {
      return import('./ItGoogle');
    }
    case 'it-hearing': {
      return import('./ItHearing');
    }
    case 'it-help-circle': {
      return import('./ItHelpCircle');
    }
    case 'it-help': {
      return import('./ItHelp');
    }
    case 'it-horn': {
      return import('./ItHorn');
    }
    case 'it-inbox': {
      return import('./ItInbox');
    }
    case 'it-info-circle': {
      return import('./ItInfoCircle');
    }
    case 'it-instagram': {
      return import('./ItInstagram');
    }
    case 'it-key': {
      return import('./ItKey');
    }
    case 'it-less-circle': {
      return import('./ItLessCircle');
    }
    case 'it-link': {
      return import('./ItLink');
    }
    case 'it-linkedin-square': {
      return import('./ItLinkedinSquare');
    }
    case 'it-linkedin': {
      return import('./ItLinkedin');
    }
    case 'it-list': {
      return import('./ItList');
    }
    case 'it-lock': {
      return import('./ItLock');
    }
    case 'it-locked': {
      return import('./ItLocked');
    }
    case 'it-logout': {
      return import('./ItLogout');
    }
    case 'it-mail-open': {
      return import('./ItMailOpen');
    }
    case 'it-mail': {
      return import('./ItMail');
    }
    case 'it-map-marker-circle': {
      return import('./ItMapMarkerCircle');
    }
    case 'it-map-marker-minus': {
      return import('./ItMapMarkerMinus');
    }
    case 'it-map-marker-plus': {
      return import('./ItMapMarkerPlus');
    }
    case 'it-map-marker': {
      return import('./ItMapMarker');
    }
    case 'it-mastodon-square': {
      return import('./ItMastodonSquare');
    }
    case 'it-mastodon': {
      return import('./ItMastodon');
    }
    case 'it-maximize-alt': {
      return import('./ItMaximizeAlt');
    }
    case 'it-maximize': {
      return import('./ItMaximize');
    }
    case 'it-medium-square': {
      return import('./ItMediumSquare');
    }
    case 'it-medium': {
      return import('./ItMedium');
    }
    case 'it-minimize': {
      return import('./ItMinimize');
    }
    case 'it-minus-circle': {
      return import('./ItMinusCircle');
    }
    case 'it-minus': {
      return import('./ItMinus');
    }
    case 'it-moodle-square': {
      return import('./ItMoodleSquare');
    }
    case 'it-moodle': {
      return import('./ItMoodle');
    }
    case 'it-more-actions': {
      return import('./ItMoreActions');
    }
    case 'it-more-items': {
      return import('./ItMoreItems');
    }
    case 'it-note': {
      return import('./ItNote');
    }
    case 'it-open-source': {
      return import('./ItOpenSource');
    }
    case 'it-pa': {
      return import('./ItPa');
    }
    case 'it-password-invisible': {
      return import('./ItPasswordInvisible');
    }
    case 'it-password-visible': {
      return import('./ItPasswordVisible');
    }
    case 'it-pencil': {
      return import('./ItPencil');
    }
    case 'it-piattaforme': {
      return import('./ItPiattaforme');
    }
    case 'it-pin': {
      return import('./ItPin');
    }
    case 'it-pinterest-square': {
      return import('./ItPinterestSquare');
    }
    case 'it-pinterest': {
      return import('./ItPinterest');
    }
    case 'it-plug': {
      return import('./ItPlug');
    }
    case 'it-plus-circle': {
      return import('./ItPlusCircle');
    }
    case 'it-plus': {
      return import('./ItPlus');
    }
    case 'it-presentation': {
      return import('./ItPresentation');
    }
    case 'it-print': {
      return import('./ItPrint');
    }
    case 'it-quora-square': {
      return import('./ItQuoraSquare');
    }
    case 'it-quora': {
      return import('./ItQuora');
    }
    case 'it-reddit-square': {
      return import('./ItRedditSquare');
    }
    case 'it-reddit': {
      return import('./ItReddit');
    }
    case 'it-refresh': {
      return import('./ItRefresh');
    }
    case 'it-restore': {
      return import('./ItRestore');
    }
    case 'it-rss-square': {
      return import('./ItRssSquare');
    }
    case 'it-rss': {
      return import('./ItRss');
    }
    case 'it-search': {
      return import('./ItSearch');
    }
    case 'it-settings': {
      return import('./ItSettings');
    }
    case 'it-share': {
      return import('./ItShare');
    }
    case 'it-sign': {
      return import('./ItSign');
    }
    case 'it-slack-square': {
      return import('./ItSlackSquare');
    }
    case 'it-slack': {
      return import('./ItSlack');
    }
    case 'it-snapchat-square': {
      return import('./ItSnapchatSquare');
    }
    case 'it-snapchat': {
      return import('./ItSnapchat');
    }
    case 'it-software': {
      return import('./ItSoftware');
    }
    case 'it-spotify': {
      return import('./ItSpotify');
    }
    case 'it-stackexchange-square': {
      return import('./ItStackexchangeSquare');
    }
    case 'it-stackexchange': {
      return import('./ItStackexchange');
    }
    case 'it-stackoverflow-square': {
      return import('./ItStackoverflowSquare');
    }
    case 'it-stackoverflow': {
      return import('./ItStackoverflow');
    }
    case 'it-star-full': {
      return import('./ItStarFull');
    }
    case 'it-star-outline': {
      return import('./ItStarOutline');
    }
    case 'it-team-digitale': {
      return import('./ItTeamDigitale');
    }
    case 'it-telegram': {
      return import('./ItTelegram');
    }
    case 'it-telephone': {
      return import('./ItTelephone');
    }
    case 'it-tiktok-square': {
      return import('./ItTiktokSquare');
    }
    case 'it-tiktok': {
      return import('./ItTiktok');
    }
    case 'it-tool': {
      return import('./ItTool');
    }
    case 'it-threads-square': {
      return import('./ItThreadsSquare');
    }
    case 'it-threads': {
      return import('./ItThreads');
    }
    case 'it-twitter-square': {
      return import('./ItTwitterSquare');
    }
    case 'it-twitter': {
      return import('./ItTwitter');
    }
    case 'it-unlocked': {
      return import('./ItUnlocked');
    }
    case 'it-upload': {
      return import('./ItUpload');
    }
    case 'it-user': {
      return import('./ItUser');
    }
    case 'it-video': {
      return import('./ItVideo');
    }
    case 'it-vimeo-square': {
      return import('./ItVimeoSquare');
    }
    case 'it-vimeo': {
      return import('./ItVimeo');
    }
    case 'it-warning-circle': {
      return import('./ItWarningCircle');
    }
    case 'it-warning': {
      return import('./ItWarning');
    }
    case 'it-whatsapp-square': {
      return import('./ItWhatsappSquare');
    }
    case 'it-whatsapp': {
      return import('./ItWhatsapp');
    }
    case 'it-wifi': {
      return import('./ItWifi');
    }
    case 'it-youtube': {
      return import('./ItYoutube');
    }
    case 'it-zoom-in': {
      return import('./ItZoomIn');
    }
    case 'it-zoom-out': {
      return import('./ItZoomOut');
    }
    default:
      throw Error(`It should not land here. Requested icon: "${name}"`);
  }
};

export function isBundledIcon(name: string): name is IconName {
  return name in iconList;
}

export const allIcons = Object.keys(iconList);

export interface SVGRProps {
  title?: string;
  titleId?: string;
}


================================================
FILE: src/Input/Input.tsx
================================================
import isNumber from 'is-number';
import React, {
  ElementType,
  InputHTMLAttributes,
  ReactNode,
  Ref,
  useCallback,
  useRef,
  useState
} from 'react';

import classNames from 'classnames';
import type { CSSModule } from 'reactstrap/types/lib/utils';
import { Icon } from '../Icon/Icon';
import { notifyDeprecation } from '../utils';
import { InputContainer } from './InputContainer';
import { getClasses, getFormControlClass, getTag, getValidationTextControlClass, useFocus } from './utils';

// taken from reactstrap types
type InputType =
  | 'text'
  | 'email'
  | 'select'
  | 'file'
  | 'radio'
  | 'checkbox'
  | 'textarea'
  | 'button'
  | 'reset'
  | 'submit'
  | 'date'
  | 'datetime-local'
  | 'hidden'
  | 'image'
  | 'month'
  | 'number'
  | 'range'
  | 'search'
  | 'tel'
  | 'url'
  | 'week'
  | 'password'
  | 'datetime'
  | 'time'
  | 'color'
  | 'adaptive'
  | 'currency'
  | 'percentage';

export interface InputProps extends InputHTMLAttributes {
  /** Il tipo specifico di input da utilizzare. Il valore di default è `text`. */
  type?: InputType;
  /** Dimensione personalizzate del campo di Input secondo le classi Bootstrap/Bootstrap Italia. */
  bsSize?: 'lg' | 'sm';
  size?: number;
  /** Etichetta del campo Input. */
  label?: string | ReactNode;
  /** Etichetta del pulsante incremento. */
  incrementLabel?: string | ReactNode;
  /** Etichetta del pulsante decremento. */
  decrementLabel?: string | ReactNode;
  /** Testo di esempio da utilizzare per il campo. */
  placeholder?: string;
  /** Testo di validazione per l'elemento del modulo form. */
  validationText?: string;
  /** Testo di aiuto per l'elemento del moduleo form. Richiede che il componente `Input` abbia la prop `id` impostata. */
  infoText?: string;
  /** Il valore nel campo Input. */
  value?: string | number;
  /** Da utilizzare per impedire la modifica del valore contenuto. */
  readOnly?: boolean;
  /** Associato all'attributo readOnly mostra il campo con lo stile classico, mantenendo lo stato di sola lettura. */
  normalized?: boolean;
  /** Utilizzare per mostrare il successo nella validazione del valore nel campo Input */
  valid?: boolean;
  innerRef?: Ref;
  /** Utilizzare per mostrare testo statico non modificabile. */
  plaintext?: boolean;
  /** Utilizzare per mostrare un elemento un simbolo attivando la proprietà addon nel campo input all'interno del componente */
  addonText?: string;
  /** Oggetto contenente la nuova mappatura per le classi CSS. */
  cssModule?: CSSModule;
  /** Classi aggiuntive da usare per il wrapper del componente Input */
  wrapperClassName?: string;
  /**
   * Classi aggiuntive da usare per il wrapper del componente Input.
   * @deprecated. Usare `wrapperClassName`.
   * */
  wrapperClass?: string;
  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
  tag?: ElementType;
  /** Classi aggiuntive da usare per il componente Input */
  className?: string;
  /**
   * Usare "plaintext".
   * @deprecated
   */
  static?: boolean;
  /** Quando attivo rimuove il componente contenitore dell'Input. Utile per un controllo maggiore dello styling */
  noWrapper?: boolean;
  /** Indica che il componente ha un bottone a destra rispetto all'input */
  hasButtonRight?: boolean;
  /** Componente per il bottone */
  buttonRight?: ReactNode;
  /** Indica che il componente ha una icona a sinistra rispetto all'input */
  hasIconLeft?: boolean;
  /** Componente per l'icona */
  iconLeft?: ReactNode;
  testId?: string;
}

export const Input = ({
  id,
  className,
  cssModule,
  type = 'text',
  tag,
  addonText,
  static: staticInput,
  plaintext,
  innerRef,
  label,
  incrementLabel,
  decrementLabel,
  validationText,
  infoText,
  placeholder,
  normalized,
  value,
  wrapperClass: originalWrapperClassOld,
  wrapperClassName: originalWrapperClass,
  size,
  testId,
  noWrapper = false,
  hasButtonRight,
  buttonRight,
  hasIconLeft,
  iconLeft,
  ...attributes
}: InputProps) => {
  const [isHidden, setHidden] = useState(true);
  const [hasIcon, toggleIcon] = useState(true);

  const { toggleFocusLabel, toggleBlurLabel, isFocused } = useFocus({
    onFocus: attributes.onFocus,
    onBlur: attributes.onBlur
  });

  const toggleShow = useCallback(() => {
    setHidden(!isHidden);
    toggleIcon(!hasIcon);
  }, [hasIcon, isHidden]);

  const inputRef = useRef(null);

  // eslint-disable-next-line prefer-const
  let { bsSize, valid, ...rest } = attributes;

  const Tag = getTag({ tag, plaintext, staticInput, type });
  const formControlClass = getFormControlClass(
    {
      plaintext,
      staticInput,
      type,
      normalized
    },
    cssModule
  );
  const validationTextControlClass = getValidationTextControlClass({ valid }, cssModule);

  const extraAttributes: {
    type?: InputType;
    size?: number;
    ['aria-describedby']?: string;
  } = {};
  if (size && !isNumber(size)) {
    notifyDeprecation('Please use the prop "bsSize" instead of the "size" to bootstrap\'s input sizing.');
    bsSize = size as unknown as InputProps['bsSize'];
  } else {
    extraAttributes.size = size;
  }

  if (Tag === 'input' || typeof tag !== 'string') {
    extraAttributes.type = type;
  }

  // associate the input field with the help text
  const infoId = id && infoText ? `${id}Description` : undefined;
  if (infoId) {
    extraAttributes['aria-describedby'] = infoId;
  }

  if (
    attributes.children &&
    !(plaintext || staticInput || type === 'select' || typeof Tag !== 'string' || Tag === 'select')
  ) {
    notifyDeprecation(
      `Input with a type of "${type}" cannot have children. Please use "value"/"defaultValue" instead.`
    );
    delete attributes.children;
  }

  const inputPassword = extraAttributes.type === 'password';

  const indeterminateCheckboxInput = type === 'checkbox' && className?.includes('semi-checked');

  // Styling
  const { activeClass, extraLabelClass, validationTextClass, inputClasses, wrapperClass } = getClasses(
    className,
    type,
    {
      valid,
      bsSize,
      placeholder,
      value,
      label,
      validationText,
      normalized: Boolean(normalized),
      inputPassword,
      formControlClass,
      validationTextControlClass,
      isFocused: isFocused,
      originalWrapperClass: originalWrapperClass || originalWrapperClassOld
    },
    cssModule
  );

  // set of attributes always shared by the Input components
  const sharedAttributes = {
    id,
    onFocus: toggleFocusLabel,
    onBlur: toggleBlurLabel,
    value: value,
    ref: innerRef
  };

  // set of attributes always shared by the wrapper component
  const containerProps = {
    id,
    infoId,
    infoText,
    activeClass,
    extraLabelClass,
    label,
    validationTextClass,
    validationText,
    wrapperClass,
    hasButtonRight,
    buttonRight,
    hasIconLeft,
    iconLeft
  };

  if (noWrapper) {
    return (
      
    );
  }

  const clickIncrDecr = (mode: number) => {
    let step = parseFloat(inputRef.current?.step ? inputRef.current.step : '1');
    const min = parseFloat(inputRef.current?.min ? inputRef.current.min : 'Nan');
    const max = parseFloat(inputRef.current?.max ? inputRef.current.max : 'Nan');
    step = isNaN(step) ? 1 : step;
    const newValue = parseFloat(inputRef.current?.value ? inputRef.current.value : '0') + mode * step;
    if (!isNaN(max) && newValue > max) {
      return;
    }
    if (!isNaN(min) && newValue < min) {
      return;
    }
    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
    nativeInputValueSetter?.call(inputRef.current, `${newValue}`);
    const ev1 = new Event('change', { bubbles: true });
    const ev2 = new Event('input', { bubbles: true });
    inputRef.current?.dispatchEvent(ev1);
    inputRef.current?.dispatchEvent(ev2);
    inputRef.current?.focus();
  };

  if (['currency', 'percentage', 'adaptive', 'number'].includes(type)) {
    if (containerProps.extraLabelClass && ['currency', 'percentage'].includes(type)) {
      containerProps.extraLabelClass = containerProps.extraLabelClass + ' input-symbol-label';
    }
    return (
      
        
    
          {['currency', 'percentage'].includes(type) && (
            {addonText}
          )}
          
          
            
            
          
        
    
          
    );
  }

  if (placeholder) {
    return (
      
        
      
    );
  }

  if (indeterminateCheckboxInput) {
    return (
      
    );
  }

  if (inputPassword) {
    return (
      
        
        
      
    );
  }
  if (normalized) {
    return (
      
        
      
    );
  }
  if (label || validationText) {
    return (
      
        
      
    );
  }

  return ;
};


================================================
FILE: src/Input/InputContainer.tsx
================================================
import React, { FC, HTMLAttributes, ReactNode } from 'react';

export interface InputContainerProps extends HTMLAttributes {
  wrapperClass: string;
  activeClass: string;
  extraLabelClass: string;
  validationTextClass: string;
  label: string | ReactNode | undefined;
  validationText: string | undefined;
  id: string | undefined;
  infoId: string | undefined;
  infoText: string | undefined;
  /** Indica che il componente ha un bottone a destra rispetto all'input */
  hasButtonRight?: boolean;
  /** Componente per il bottone */
  buttonRight?: ReactNode;
  /** Indica che il componente ha una icona a sinistra rispetto all'input */
  hasIconLeft?: boolean;
  /** Componente per l'icona */
  iconLeft?: ReactNode;
  testId?: string;
}

export const InputContainer: FC = ({
  id,
  infoId,
  infoText,
  testId,
  activeClass,
  extraLabelClass,
  label,
  validationTextClass,
  validationText,
  wrapperClass,
  hasButtonRight,
  buttonRight,
  hasIconLeft,
  iconLeft,
  children
}) => {
  if (hasButtonRight || hasIconLeft) {
    return (
      
    
        
    
          {hasIconLeft && {iconLeft}}
          
          {children}
          {infoText && (
            
              {infoText}
            
          )}
          
    {validationText}
    
          {hasButtonRight && 
    {buttonRight}
    }
        
    
      
    
    );
  }
  return (
    
    
      
      {children}
      {infoText && (
        
          {infoText}
        
      )}
      
    {validationText}
    
    
    
  );
};


================================================
FILE: src/Input/TextArea.tsx
================================================
import React, { ReactNode, Ref, TextareaHTMLAttributes } from 'react';

import type { CSSModule } from 'reactstrap/types/lib/utils';
import { InputContainer } from './InputContainer';
import { getClasses, getFormControlClass, getValidationTextControlClass, useFocus } from './utils';

export interface TextAreaProps extends TextareaHTMLAttributes {
  /** Etichetta del campo TextArea. */
  label?: string | ReactNode;
  /** Testo di esempio da utilizzare per il campo. */
  placeholder?: string;
  /** Testo di validazione per l'elemento del moduleo */
  validationText?: string;
  /** Testo di aiuto per l'elemento del moduleo form. Richiede che il componente `TextArea` abbia la prop `id` impostata. */
  infoText?: string;
  /** Il valore nel campo TextArea. */
  value?: string | number;
  /** Da utilizzare per impedire la modifica del valore contenuto. */
  readOnly?: boolean;
  /** Associato all'attributo readOnly mostra il campo con lo stile classico, mantenento lo stato di sola lettura. */
  normalized?: boolean;
  /** Utilizzare per mostrare il successo nella validazione del valore nel campo TextArea */
  valid?: boolean;
  innerRef?: Ref;
  /** Oggetto contenente la nuova mappatura per le classi CSS. */
  cssModule?: CSSModule;
  /** Classi aggiuntive da usare per il wrapper del componente TextArea */
  wrapperClassName?: string;
  /** Classi aggiuntive da usare per il componente TextArea */
  className?: string;
  testId?: string;
}

export const TextArea = ({
  id,
  className,
  cssModule,
  innerRef,
  label,
  validationText,
  infoText,
  placeholder,
  normalized,
  value,
  wrapperClassName: originalWrapperClass,
  valid,
  testId,
  ...attributes
}: TextAreaProps) => {
  const { toggleFocusLabel, toggleBlurLabel, isFocused } = useFocus({
    onFocus: attributes.onFocus,
    onBlur: attributes.onBlur
  });

  const validationTextControlClass = getValidationTextControlClass({ valid }, cssModule);

  const extraAttributes: { ['aria-describedby']?: string } = {};

  //Chiamo questa funzione per impostare classNames a 'form-control'
  const formControlClass = getFormControlClass({}, cssModule);
  // associate the input field with the help text
  const infoId = id ? `${id}Description` : undefined;
  if (id) {
    extraAttributes['aria-describedby'] = infoId;
  }

  // Styling
  const { activeClass, extraLabelClass, validationTextClass, inputClasses, wrapperClass } = getClasses(
    className,
    'textarea',
    {
      valid,
      placeholder,
      value,
      label,
      validationText,
      normalized: Boolean(normalized),
      formControlClass,
      validationTextControlClass,
      isFocused,
      originalWrapperClass
    },
    cssModule
  );

  // set of attributes always shared by the Input components
  const sharedAttributes = {
    id,
    onFocus: toggleFocusLabel,
    onBlur: toggleBlurLabel,
    value,
    ref: innerRef
  };

  // set of attributes always shared by the wrapper component
  const containerProps = {
    id,
    infoId,
    infoText,
    activeClass,
    extraLabelClass,
    label,
    validationTextClass,
    validationText,
    wrapperClass
  };

  if (placeholder) {
    return (