From 3d0493f6e3257c58c893a1f168a5a5e7224bc25c Mon Sep 17 00:00:00 2001
From: Sergey Kazarinov <kazarinov092@gmail.com>
Date: Sun, 4 May 2025 13:51:56 +0500
Subject: [PATCH 01/18] docs: add typescript examples

---
 docs-site/package.json                        |   9 +-
 .../Example/{index.jsx => index.tsx}          |  52 +-
 docs-site/src/components/Examples/config.tsx  | 772 ++++++++++++++++++
 .../src/components/Examples/examples.scss     |  33 +-
 docs-site/src/components/Examples/hero.scss   |   1 +
 docs-site/src/components/Examples/index.jsx   | 609 --------------
 docs-site/src/components/Examples/index.tsx   |  55 ++
 docs-site/src/components/Examples/reset.scss  |   8 +-
 docs-site/src/components/Examples/style.scss  |   1 +
 .../examples/{ => js}/calendarContainer.js    |   2 +
 .../src/examples/{ => js}/calendarIcon.js     |   1 +
 .../examples/{ => js}/calendarIconExternal.js |   1 +
 .../examples/{ => js}/calendarIconSvgIcon.js  |   1 +
 .../src/examples/{ => js}/calendarStartDay.js |   1 +
 docs-site/src/examples/{ => js}/children.js   |   1 +
 docs-site/src/examples/{ => js}/clearInput.js |   1 +
 .../src/examples/{ => js}/closeOnScroll.js    |   3 +-
 .../{ => js}/closeOnScrollCallback.js         |   1 +
 .../examples/{ => js}/configureFloatingUI.js  |   1 +
 .../{ => js}/customCalendarClassName.js       |   1 +
 .../src/examples/{ => js}/customClassName.js  |   1 +
 .../src/examples/{ => js}/customDateFormat.js |   1 +
 .../examples/{ => js}/customDayClassName.js   |   1 +
 .../src/examples/{ => js}/customInput.js      |   2 +
 .../examples/{ => js}/customTimeClassName.js  |   2 +-
 .../src/examples/{ => js}/customTimeInput.js  |   2 +
 docs-site/src/examples/{ => js}/dateRange.js  |   1 +
 .../{ => js}/dateRangeInputWithClearButton.js |   3 +-
 .../examples/{ => js}/dateRangeWithPortal.js  |   3 +-
 .../dateRangeWithShowDisabledNavigation.js    |   2 +
 docs-site/src/examples/{ => js}/default.js    |   1 +
 docs-site/src/examples/{ => js}/disabled.js   |   1 +
 .../{ => js}/disabledKeyboardNavigation.js    |   1 +
 .../examples/{ => js}/dontCloseOnSelect.js    |   1 +
 .../examples/{ => js}/excludeDateIntervals.js |   1 +
 .../src/examples/{ => js}/excludeDates.js     |   1 +
 .../{ => js}/excludeDatesMonthPicker.js       |   1 +
 .../{ => js}/excludeDatesRangeMonthPicker.js  |   0
 .../{ => js}/excludeDatesWithMessage.js       |   1 +
 .../examples/{ => js}/excludeTimePeriod.js    |   1 +
 .../src/examples/{ => js}/excludeTimes.js     |   1 +
 .../src/examples/{ => js}/excludeWeeks.js     |   1 +
 .../src/examples/{ => js}/externalForm.js     |   2 +-
 .../src/examples/{ => js}/filterDates.js      |   2 +
 .../src/examples/{ => js}/filterTimes.js      |   2 +
 .../src/examples/{ => js}/fixedCalendar.js    |   1 +
 .../src/examples/{ => js}/hideTimeCaption.js  |   1 +
 .../src/examples/{ => js}/highlightDates.js   |   1 +
 .../examples/{ => js}/highlightDatesRanges.js |   2 +
 .../src/examples/{ => js}/holidayDates.js     |   1 +
 .../examples/{ => js}/includeDateIntervals.js |   1 +
 .../src/examples/{ => js}/includeDates.js     |   1 +
 .../{ => js}/includeDatesMonthPicker.js       |   1 +
 .../src/examples/{ => js}/includeTimes.js     |   1 +
 .../src/examples/{ => js}/injectTimes.js      |   1 +
 docs-site/src/examples/{ => js}/inline.js     |   1 +
 .../src/examples/{ => js}/inlineVisible.js    |   3 +
 docs-site/src/examples/{ => js}/locale.js     |   1 +
 .../src/examples/{ => js}/localeWithTime.js   |   1 +
 .../{ => js}/localeWithoutGlobalVariable.js   |   1 +
 docs-site/src/examples/{ => js}/maxDate.js    |   1 +
 docs-site/src/examples/{ => js}/minDate.js    |   1 +
 .../src/examples/{ => js}/monthDropdown.js    |   1 +
 .../examples/{ => js}/monthDropdownShort.js   |   1 +
 .../src/examples/{ => js}/monthPicker.js      |   1 +
 .../{ => js}/monthPickerFourColumns.js        |   1 +
 .../examples/{ => js}/monthPickerFullName.js  |   1 +
 .../{ => js}/monthPickerTwoColumns.js         |   1 +
 .../examples/{ => js}/monthYearDropdown.js    |   1 +
 docs-site/src/examples/{ => js}/multiMonth.js |   1 +
 .../examples/{ => js}/multiMonthDropdown.js   |   1 +
 .../src/examples/{ => js}/multiMonthInline.js |   1 +
 .../examples/{ => js}/multiMonthPrevious.js   |   1 +
 .../src/examples/{ => js}/noAnchorArrow.js    |   1 +
 .../src/examples/{ => js}/onBlurCallbacks.js  |   2 +
 .../{ => js}/onCalendarOpenStateCallbacks.js  |   0
 docs-site/src/examples/{ => js}/openToDate.js |   1 +
 .../src/examples/{ => js}/placeholderText.js  |   0
 docs-site/src/examples/{ => js}/portal.js     |   1 +
 docs-site/src/examples/{ => js}/portalById.js |   1 +
 .../src/examples/{ => js}/quarterPicker.js    |   1 +
 .../src/examples/{ => js}/rangeMonthPicker.js |   1 +
 .../{ => js}/rangeMonthPickerSelectsRange.js  |   0
 .../examples/{ => js}/rangeQuarterPicker.js   |   1 +
 .../rangeQuarterPickerSelectsRange.js         |   0
 .../src/examples/{ => js}/rangeSwapRange.js   |   2 +
 .../src/examples/{ => js}/rangeYearPicker.js  |   1 +
 .../{ => js}/rangeYearPickerSelectsRange.js   |   0
 docs-site/src/examples/{ => js}/rawChange.js  |   2 +
 docs-site/src/examples/{ => js}/readOnly.js   |   1 +
 .../src/examples/{ => js}/renderCustomDay.js  |   2 +
 .../examples/{ => js}/renderCustomHeader.js   |  11 +-
 .../{ => js}/renderCustomHeaderTwoMonths.js   |   1 +
 .../examples/{ => js}/renderCustomMonth.js    |   1 +
 .../examples/{ => js}/renderCustomQuarter.js  |   1 +
 .../src/examples/{ => js}/renderCustomYear.js |   1 +
 .../src/examples/{ => js}/selectsMultiple.js  |   2 +
 .../{ => js}/selectsMultipleMonths.js         |   2 +
 .../src/examples/{ => js}/selectsRange.js     |   2 +
 .../{ => js}/selectsRangeWithDisabledDates.js |   2 +
 docs-site/src/examples/{ => js}/showTime.js   |   1 +
 .../src/examples/{ => js}/showTimeOnly.js     |   1 +
 .../examples/{ => js}/specificDateRange.js    |   1 +
 .../src/examples/{ => js}/strictParsing.js    |   1 +
 docs-site/src/examples/{ => js}/tabIndex.js   |   1 +
 docs-site/src/examples/{ => js}/timeInput.js  |   1 +
 docs-site/src/examples/{ => js}/today.js      |   1 +
 .../{ => js}/toggleCalendarOnIconClick.js     |   1 +
 .../src/examples/{ => js}/weekNumbers.js      |   1 +
 docs-site/src/examples/{ => js}/weekPicker.js |   1 +
 .../src/examples/{ => js}/withPortalById.js   |   1 +
 .../src/examples/{ => js}/yearDropdown.js     |   1 +
 .../src/examples/{ => js}/yearItemNumber.js   |   1 +
 docs-site/src/examples/{ => js}/yearPicker.js |   1 +
 .../examples/{ => js}/yearSelectDropdown.js   |   1 +
 .../src/examples/ts/calendarContainer.ts      |  30 +
 docs-site/src/examples/ts/calendarIcon.ts     |  17 +
 .../src/examples/ts/calendarIconExternal.ts   |  18 +
 .../src/examples/ts/calendarIconSvgIcon.ts    |  40 +
 docs-site/src/examples/ts/calendarStartDay.ts |  17 +
 docs-site/src/examples/ts/children.ts         |  15 +
 docs-site/src/examples/ts/clearInput.ts       |  18 +
 docs-site/src/examples/ts/closeOnScroll.ts    |  17 +
 .../src/examples/ts/closeOnScrollCallback.ts  |  17 +
 .../src/examples/ts/configureFloatingUI.ts    |  27 +
 .../examples/ts/customCalendarClassName.ts    |  17 +
 docs-site/src/examples/ts/customClassName.ts  |  17 +
 docs-site/src/examples/ts/customDateFormat.ts |  17 +
 .../src/examples/ts/customDayClassName.ts     |  19 +
 docs-site/src/examples/ts/customInput.ts      |  49 ++
 .../src/examples/ts/customTimeClassName.ts    |  22 +
 docs-site/src/examples/ts/customTimeInput.ts  |  34 +
 docs-site/src/examples/ts/dateRange.ts        |  30 +
 .../ts/dateRangeInputWithClearButton.ts       |  22 +
 .../src/examples/ts/dateRangeWithPortal.ts    |  22 +
 .../ts/dateRangeWithShowDisabledNavigation.ts |  30 +
 docs-site/src/examples/ts/default.ts          |  13 +
 docs-site/src/examples/ts/disabled.ts         |  18 +
 .../examples/ts/disabledKeyboardNavigation.ts |  18 +
 .../src/examples/ts/dontCloseOnSelect.ts      |  17 +
 .../src/examples/ts/excludeDateIntervals.ts   |  30 +
 docs-site/src/examples/ts/excludeDates.ts     |  25 +
 .../examples/ts/excludeDatesMonthPicker.ts    |  29 +
 .../ts/excludeDatesRangeMonthPicker.ts        |  43 +
 .../examples/ts/excludeDatesWithMessage.ts    |  28 +
 .../src/examples/ts/excludeTimePeriod.ts      |  22 +
 docs-site/src/examples/ts/excludeTimes.ts     |  30 +
 docs-site/src/examples/ts/excludeWeeks.ts     |  31 +
 docs-site/src/examples/ts/externalForm.ts     |  23 +
 docs-site/src/examples/ts/filterDates.ts      |  25 +
 docs-site/src/examples/ts/filterTimes.ts      |  30 +
 docs-site/src/examples/ts/fixedCalendar.ts    |  17 +
 docs-site/src/examples/ts/hideTimeCaption.ts  |  21 +
 docs-site/src/examples/ts/highlightDates.ts   |  29 +
 .../src/examples/ts/highlightDatesRanges.ts   |  43 +
 docs-site/src/examples/ts/holidayDates.ts     |  31 +
 .../src/examples/ts/includeDateIntervals.ts   |  27 +
 docs-site/src/examples/ts/includeDates.ts     |  24 +
 .../examples/ts/includeDatesMonthPicker.ts    |  23 +
 docs-site/src/examples/ts/includeTimes.ts     |  28 +
 docs-site/src/examples/ts/index.ts            | 106 +++
 docs-site/src/examples/ts/injectTimes.ts      |  28 +
 docs-site/src/examples/ts/inline.ts           |  17 +
 docs-site/src/examples/ts/inlineVisible.ts    |  31 +
 docs-site/src/examples/ts/locale.ts           |  18 +
 docs-site/src/examples/ts/localeWithTime.ts   |  21 +
 .../ts/localeWithoutGlobalVariable.ts         |  17 +
 docs-site/src/examples/ts/maxDate.ts          |  18 +
 docs-site/src/examples/ts/minDate.ts          |  18 +
 docs-site/src/examples/ts/monthDropdown.ts    |  17 +
 .../src/examples/ts/monthDropdownShort.ts     |  18 +
 docs-site/src/examples/ts/monthPicker.ts      |  18 +
 .../src/examples/ts/monthPickerFourColumns.ts |  20 +
 .../src/examples/ts/monthPickerFullName.ts    |  19 +
 .../src/examples/ts/monthPickerTwoColumns.ts  |  20 +
 .../src/examples/ts/monthYearDropdown.ts      |  20 +
 docs-site/src/examples/ts/multiMonth.ts       |  17 +
 .../src/examples/ts/multiMonthDropdown.ts     |  18 +
 docs-site/src/examples/ts/multiMonthInline.ts |  18 +
 .../src/examples/ts/multiMonthPrevious.ts     |  18 +
 docs-site/src/examples/ts/noAnchorArrow.ts    |  17 +
 docs-site/src/examples/ts/onBlurCallbacks.ts  |  28 +
 .../ts/onCalendarOpenStateCallbacks.ts        |  21 +
 docs-site/src/examples/ts/openToDate.ts       |  17 +
 docs-site/src/examples/ts/placeholderText.ts  |   9 +
 docs-site/src/examples/ts/portal.ts           |  17 +
 docs-site/src/examples/ts/portalById.ts       |  17 +
 docs-site/src/examples/ts/quarterPicker.ts    |  18 +
 docs-site/src/examples/ts/rangeMonthPicker.ts |  33 +
 .../ts/rangeMonthPickerSelectsRange.ts        |  27 +
 .../src/examples/ts/rangeQuarterPicker.ts     |  33 +
 .../ts/rangeQuarterPickerSelectsRange.ts      |  27 +
 docs-site/src/examples/ts/rangeSwapRange.ts   |  37 +
 docs-site/src/examples/ts/rangeYearPicker.ts  |  33 +
 .../ts/rangeYearPickerSelectsRange.ts         |  27 +
 docs-site/src/examples/ts/rawChange.ts        |  24 +
 docs-site/src/examples/ts/readOnly.ts         |  18 +
 docs-site/src/examples/ts/renderCustomDay.ts  |  23 +
 .../src/examples/ts/renderCustomHeader.ts     |  85 ++
 .../ts/renderCustomHeaderTwoMonths.ts         |  67 ++
 .../src/examples/ts/renderCustomMonth.ts      |  23 +
 .../src/examples/ts/renderCustomQuarter.ts    |  22 +
 docs-site/src/examples/ts/renderCustomYear.ts |  21 +
 docs-site/src/examples/ts/selectsMultiple.ts  |  23 +
 .../src/examples/ts/selectsMultipleMonths.ts  |  25 +
 docs-site/src/examples/ts/selectsRange.ts     |  27 +
 .../ts/selectsRangeWithDisabledDates.ts       |  36 +
 docs-site/src/examples/ts/showTime.ts         |  21 +
 docs-site/src/examples/ts/showTimeOnly.ts     |  21 +
 .../src/examples/ts/specificDateRange.ts      |  19 +
 docs-site/src/examples/ts/strictParsing.ts    |  17 +
 docs-site/src/examples/ts/tabIndex.ts         |  17 +
 docs-site/src/examples/ts/timeInput.ts        |  19 +
 docs-site/src/examples/ts/today.ts            |  17 +
 .../examples/ts/toggleCalendarOnIconClick.ts  |  18 +
 docs-site/src/examples/ts/weekNumbers.ts      |  18 +
 docs-site/src/examples/ts/weekPicker.ts       |  20 +
 docs-site/src/examples/ts/withPortalById.ts   |  18 +
 docs-site/src/examples/ts/yearDropdown.ts     |  20 +
 docs-site/src/examples/ts/yearItemNumber.ts   |  19 +
 docs-site/src/examples/ts/yearPicker.ts       |  18 +
 .../src/examples/ts/yearSelectDropdown.ts     |  20 +
 docs-site/src/{index.jsx => index.tsx}        |   2 +-
 docs-site/src/types/global.d.ts               |   9 +
 docs-site/src/types/index.ts                  |   6 +
 docs-site/tsconfig.json                       |  23 +
 docs-site/tsconfig.node.json                  |  10 +
 docs-site/{vite.config.js => vite.config.ts}  |   0
 docs-site/yarn.lock                           | 347 +++++++-
 229 files changed, 4073 insertions(+), 633 deletions(-)
 rename docs-site/src/components/Example/{index.jsx => index.tsx} (61%)
 create mode 100644 docs-site/src/components/Examples/config.tsx
 delete mode 100644 docs-site/src/components/Examples/index.jsx
 create mode 100644 docs-site/src/components/Examples/index.tsx
 rename docs-site/src/examples/{ => js}/calendarContainer.js (99%)
 rename docs-site/src/examples/{ => js}/calendarIcon.js (99%)
 rename docs-site/src/examples/{ => js}/calendarIconExternal.js (99%)
 rename docs-site/src/examples/{ => js}/calendarIconSvgIcon.js (99%)
 rename docs-site/src/examples/{ => js}/calendarStartDay.js (99%)
 rename docs-site/src/examples/{ => js}/children.js (99%)
 rename docs-site/src/examples/{ => js}/clearInput.js (99%)
 rename docs-site/src/examples/{ => js}/closeOnScroll.js (87%)
 rename docs-site/src/examples/{ => js}/closeOnScrollCallback.js (99%)
 rename docs-site/src/examples/{ => js}/configureFloatingUI.js (99%)
 rename docs-site/src/examples/{ => js}/customCalendarClassName.js (99%)
 rename docs-site/src/examples/{ => js}/customClassName.js (99%)
 rename docs-site/src/examples/{ => js}/customDateFormat.js (99%)
 rename docs-site/src/examples/{ => js}/customDayClassName.js (99%)
 rename docs-site/src/examples/{ => js}/customInput.js (99%)
 rename docs-site/src/examples/{ => js}/customTimeClassName.js (90%)
 rename docs-site/src/examples/{ => js}/customTimeInput.js (99%)
 rename docs-site/src/examples/{ => js}/dateRange.js (99%)
 rename docs-site/src/examples/{ => js}/dateRangeInputWithClearButton.js (91%)
 rename docs-site/src/examples/{ => js}/dateRangeWithPortal.js (91%)
 rename docs-site/src/examples/{ => js}/dateRangeWithShowDisabledNavigation.js (99%)
 rename docs-site/src/examples/{ => js}/default.js (99%)
 rename docs-site/src/examples/{ => js}/disabled.js (99%)
 rename docs-site/src/examples/{ => js}/disabledKeyboardNavigation.js (99%)
 rename docs-site/src/examples/{ => js}/dontCloseOnSelect.js (99%)
 rename docs-site/src/examples/{ => js}/excludeDateIntervals.js (99%)
 rename docs-site/src/examples/{ => js}/excludeDates.js (99%)
 rename docs-site/src/examples/{ => js}/excludeDatesMonthPicker.js (99%)
 rename docs-site/src/examples/{ => js}/excludeDatesRangeMonthPicker.js (100%)
 rename docs-site/src/examples/{ => js}/excludeDatesWithMessage.js (99%)
 rename docs-site/src/examples/{ => js}/excludeTimePeriod.js (99%)
 rename docs-site/src/examples/{ => js}/excludeTimes.js (99%)
 rename docs-site/src/examples/{ => js}/excludeWeeks.js (99%)
 rename docs-site/src/examples/{ => js}/externalForm.js (86%)
 rename docs-site/src/examples/{ => js}/filterDates.js (99%)
 rename docs-site/src/examples/{ => js}/filterTimes.js (99%)
 rename docs-site/src/examples/{ => js}/fixedCalendar.js (99%)
 rename docs-site/src/examples/{ => js}/hideTimeCaption.js (99%)
 rename docs-site/src/examples/{ => js}/highlightDates.js (99%)
 rename docs-site/src/examples/{ => js}/highlightDatesRanges.js (99%)
 rename docs-site/src/examples/{ => js}/holidayDates.js (99%)
 rename docs-site/src/examples/{ => js}/includeDateIntervals.js (99%)
 rename docs-site/src/examples/{ => js}/includeDates.js (99%)
 rename docs-site/src/examples/{ => js}/includeDatesMonthPicker.js (99%)
 rename docs-site/src/examples/{ => js}/includeTimes.js (99%)
 rename docs-site/src/examples/{ => js}/injectTimes.js (99%)
 rename docs-site/src/examples/{ => js}/inline.js (99%)
 rename docs-site/src/examples/{ => js}/inlineVisible.js (99%)
 rename docs-site/src/examples/{ => js}/locale.js (99%)
 rename docs-site/src/examples/{ => js}/localeWithTime.js (99%)
 rename docs-site/src/examples/{ => js}/localeWithoutGlobalVariable.js (99%)
 rename docs-site/src/examples/{ => js}/maxDate.js (99%)
 rename docs-site/src/examples/{ => js}/minDate.js (99%)
 rename docs-site/src/examples/{ => js}/monthDropdown.js (99%)
 rename docs-site/src/examples/{ => js}/monthDropdownShort.js (99%)
 rename docs-site/src/examples/{ => js}/monthPicker.js (99%)
 rename docs-site/src/examples/{ => js}/monthPickerFourColumns.js (99%)
 rename docs-site/src/examples/{ => js}/monthPickerFullName.js (99%)
 rename docs-site/src/examples/{ => js}/monthPickerTwoColumns.js (99%)
 rename docs-site/src/examples/{ => js}/monthYearDropdown.js (99%)
 rename docs-site/src/examples/{ => js}/multiMonth.js (99%)
 rename docs-site/src/examples/{ => js}/multiMonthDropdown.js (99%)
 rename docs-site/src/examples/{ => js}/multiMonthInline.js (99%)
 rename docs-site/src/examples/{ => js}/multiMonthPrevious.js (99%)
 rename docs-site/src/examples/{ => js}/noAnchorArrow.js (99%)
 rename docs-site/src/examples/{ => js}/onBlurCallbacks.js (99%)
 rename docs-site/src/examples/{ => js}/onCalendarOpenStateCallbacks.js (100%)
 rename docs-site/src/examples/{ => js}/openToDate.js (99%)
 rename docs-site/src/examples/{ => js}/placeholderText.js (100%)
 rename docs-site/src/examples/{ => js}/portal.js (99%)
 rename docs-site/src/examples/{ => js}/portalById.js (99%)
 rename docs-site/src/examples/{ => js}/quarterPicker.js (99%)
 rename docs-site/src/examples/{ => js}/rangeMonthPicker.js (99%)
 rename docs-site/src/examples/{ => js}/rangeMonthPickerSelectsRange.js (100%)
 rename docs-site/src/examples/{ => js}/rangeQuarterPicker.js (99%)
 rename docs-site/src/examples/{ => js}/rangeQuarterPickerSelectsRange.js (100%)
 rename docs-site/src/examples/{ => js}/rangeSwapRange.js (99%)
 rename docs-site/src/examples/{ => js}/rangeYearPicker.js (99%)
 rename docs-site/src/examples/{ => js}/rangeYearPickerSelectsRange.js (100%)
 rename docs-site/src/examples/{ => js}/rawChange.js (99%)
 rename docs-site/src/examples/{ => js}/readOnly.js (99%)
 rename docs-site/src/examples/{ => js}/renderCustomDay.js (99%)
 rename docs-site/src/examples/{ => js}/renderCustomHeader.js (91%)
 rename docs-site/src/examples/{ => js}/renderCustomHeaderTwoMonths.js (99%)
 rename docs-site/src/examples/{ => js}/renderCustomMonth.js (99%)
 rename docs-site/src/examples/{ => js}/renderCustomQuarter.js (99%)
 rename docs-site/src/examples/{ => js}/renderCustomYear.js (99%)
 rename docs-site/src/examples/{ => js}/selectsMultiple.js (99%)
 rename docs-site/src/examples/{ => js}/selectsMultipleMonths.js (99%)
 rename docs-site/src/examples/{ => js}/selectsRange.js (99%)
 rename docs-site/src/examples/{ => js}/selectsRangeWithDisabledDates.js (99%)
 rename docs-site/src/examples/{ => js}/showTime.js (99%)
 rename docs-site/src/examples/{ => js}/showTimeOnly.js (99%)
 rename docs-site/src/examples/{ => js}/specificDateRange.js (99%)
 rename docs-site/src/examples/{ => js}/strictParsing.js (99%)
 rename docs-site/src/examples/{ => js}/tabIndex.js (99%)
 rename docs-site/src/examples/{ => js}/timeInput.js (99%)
 rename docs-site/src/examples/{ => js}/today.js (99%)
 rename docs-site/src/examples/{ => js}/toggleCalendarOnIconClick.js (99%)
 rename docs-site/src/examples/{ => js}/weekNumbers.js (99%)
 rename docs-site/src/examples/{ => js}/weekPicker.js (99%)
 rename docs-site/src/examples/{ => js}/withPortalById.js (99%)
 rename docs-site/src/examples/{ => js}/yearDropdown.js (99%)
 rename docs-site/src/examples/{ => js}/yearItemNumber.js (99%)
 rename docs-site/src/examples/{ => js}/yearPicker.js (99%)
 rename docs-site/src/examples/{ => js}/yearSelectDropdown.js (99%)
 create mode 100644 docs-site/src/examples/ts/calendarContainer.ts
 create mode 100644 docs-site/src/examples/ts/calendarIcon.ts
 create mode 100644 docs-site/src/examples/ts/calendarIconExternal.ts
 create mode 100644 docs-site/src/examples/ts/calendarIconSvgIcon.ts
 create mode 100644 docs-site/src/examples/ts/calendarStartDay.ts
 create mode 100644 docs-site/src/examples/ts/children.ts
 create mode 100644 docs-site/src/examples/ts/clearInput.ts
 create mode 100644 docs-site/src/examples/ts/closeOnScroll.ts
 create mode 100644 docs-site/src/examples/ts/closeOnScrollCallback.ts
 create mode 100644 docs-site/src/examples/ts/configureFloatingUI.ts
 create mode 100644 docs-site/src/examples/ts/customCalendarClassName.ts
 create mode 100644 docs-site/src/examples/ts/customClassName.ts
 create mode 100644 docs-site/src/examples/ts/customDateFormat.ts
 create mode 100644 docs-site/src/examples/ts/customDayClassName.ts
 create mode 100644 docs-site/src/examples/ts/customInput.ts
 create mode 100644 docs-site/src/examples/ts/customTimeClassName.ts
 create mode 100644 docs-site/src/examples/ts/customTimeInput.ts
 create mode 100644 docs-site/src/examples/ts/dateRange.ts
 create mode 100644 docs-site/src/examples/ts/dateRangeInputWithClearButton.ts
 create mode 100644 docs-site/src/examples/ts/dateRangeWithPortal.ts
 create mode 100644 docs-site/src/examples/ts/dateRangeWithShowDisabledNavigation.ts
 create mode 100644 docs-site/src/examples/ts/default.ts
 create mode 100644 docs-site/src/examples/ts/disabled.ts
 create mode 100644 docs-site/src/examples/ts/disabledKeyboardNavigation.ts
 create mode 100644 docs-site/src/examples/ts/dontCloseOnSelect.ts
 create mode 100644 docs-site/src/examples/ts/excludeDateIntervals.ts
 create mode 100644 docs-site/src/examples/ts/excludeDates.ts
 create mode 100644 docs-site/src/examples/ts/excludeDatesMonthPicker.ts
 create mode 100644 docs-site/src/examples/ts/excludeDatesRangeMonthPicker.ts
 create mode 100644 docs-site/src/examples/ts/excludeDatesWithMessage.ts
 create mode 100644 docs-site/src/examples/ts/excludeTimePeriod.ts
 create mode 100644 docs-site/src/examples/ts/excludeTimes.ts
 create mode 100644 docs-site/src/examples/ts/excludeWeeks.ts
 create mode 100644 docs-site/src/examples/ts/externalForm.ts
 create mode 100644 docs-site/src/examples/ts/filterDates.ts
 create mode 100644 docs-site/src/examples/ts/filterTimes.ts
 create mode 100644 docs-site/src/examples/ts/fixedCalendar.ts
 create mode 100644 docs-site/src/examples/ts/hideTimeCaption.ts
 create mode 100644 docs-site/src/examples/ts/highlightDates.ts
 create mode 100644 docs-site/src/examples/ts/highlightDatesRanges.ts
 create mode 100644 docs-site/src/examples/ts/holidayDates.ts
 create mode 100644 docs-site/src/examples/ts/includeDateIntervals.ts
 create mode 100644 docs-site/src/examples/ts/includeDates.ts
 create mode 100644 docs-site/src/examples/ts/includeDatesMonthPicker.ts
 create mode 100644 docs-site/src/examples/ts/includeTimes.ts
 create mode 100644 docs-site/src/examples/ts/index.ts
 create mode 100644 docs-site/src/examples/ts/injectTimes.ts
 create mode 100644 docs-site/src/examples/ts/inline.ts
 create mode 100644 docs-site/src/examples/ts/inlineVisible.ts
 create mode 100644 docs-site/src/examples/ts/locale.ts
 create mode 100644 docs-site/src/examples/ts/localeWithTime.ts
 create mode 100644 docs-site/src/examples/ts/localeWithoutGlobalVariable.ts
 create mode 100644 docs-site/src/examples/ts/maxDate.ts
 create mode 100644 docs-site/src/examples/ts/minDate.ts
 create mode 100644 docs-site/src/examples/ts/monthDropdown.ts
 create mode 100644 docs-site/src/examples/ts/monthDropdownShort.ts
 create mode 100644 docs-site/src/examples/ts/monthPicker.ts
 create mode 100644 docs-site/src/examples/ts/monthPickerFourColumns.ts
 create mode 100644 docs-site/src/examples/ts/monthPickerFullName.ts
 create mode 100644 docs-site/src/examples/ts/monthPickerTwoColumns.ts
 create mode 100644 docs-site/src/examples/ts/monthYearDropdown.ts
 create mode 100644 docs-site/src/examples/ts/multiMonth.ts
 create mode 100644 docs-site/src/examples/ts/multiMonthDropdown.ts
 create mode 100644 docs-site/src/examples/ts/multiMonthInline.ts
 create mode 100644 docs-site/src/examples/ts/multiMonthPrevious.ts
 create mode 100644 docs-site/src/examples/ts/noAnchorArrow.ts
 create mode 100644 docs-site/src/examples/ts/onBlurCallbacks.ts
 create mode 100644 docs-site/src/examples/ts/onCalendarOpenStateCallbacks.ts
 create mode 100644 docs-site/src/examples/ts/openToDate.ts
 create mode 100644 docs-site/src/examples/ts/placeholderText.ts
 create mode 100644 docs-site/src/examples/ts/portal.ts
 create mode 100644 docs-site/src/examples/ts/portalById.ts
 create mode 100644 docs-site/src/examples/ts/quarterPicker.ts
 create mode 100644 docs-site/src/examples/ts/rangeMonthPicker.ts
 create mode 100644 docs-site/src/examples/ts/rangeMonthPickerSelectsRange.ts
 create mode 100644 docs-site/src/examples/ts/rangeQuarterPicker.ts
 create mode 100644 docs-site/src/examples/ts/rangeQuarterPickerSelectsRange.ts
 create mode 100644 docs-site/src/examples/ts/rangeSwapRange.ts
 create mode 100644 docs-site/src/examples/ts/rangeYearPicker.ts
 create mode 100644 docs-site/src/examples/ts/rangeYearPickerSelectsRange.ts
 create mode 100644 docs-site/src/examples/ts/rawChange.ts
 create mode 100644 docs-site/src/examples/ts/readOnly.ts
 create mode 100644 docs-site/src/examples/ts/renderCustomDay.ts
 create mode 100644 docs-site/src/examples/ts/renderCustomHeader.ts
 create mode 100644 docs-site/src/examples/ts/renderCustomHeaderTwoMonths.ts
 create mode 100644 docs-site/src/examples/ts/renderCustomMonth.ts
 create mode 100644 docs-site/src/examples/ts/renderCustomQuarter.ts
 create mode 100644 docs-site/src/examples/ts/renderCustomYear.ts
 create mode 100644 docs-site/src/examples/ts/selectsMultiple.ts
 create mode 100644 docs-site/src/examples/ts/selectsMultipleMonths.ts
 create mode 100644 docs-site/src/examples/ts/selectsRange.ts
 create mode 100644 docs-site/src/examples/ts/selectsRangeWithDisabledDates.ts
 create mode 100644 docs-site/src/examples/ts/showTime.ts
 create mode 100644 docs-site/src/examples/ts/showTimeOnly.ts
 create mode 100644 docs-site/src/examples/ts/specificDateRange.ts
 create mode 100644 docs-site/src/examples/ts/strictParsing.ts
 create mode 100644 docs-site/src/examples/ts/tabIndex.ts
 create mode 100644 docs-site/src/examples/ts/timeInput.ts
 create mode 100644 docs-site/src/examples/ts/today.ts
 create mode 100644 docs-site/src/examples/ts/toggleCalendarOnIconClick.ts
 create mode 100644 docs-site/src/examples/ts/weekNumbers.ts
 create mode 100644 docs-site/src/examples/ts/weekPicker.ts
 create mode 100644 docs-site/src/examples/ts/withPortalById.ts
 create mode 100644 docs-site/src/examples/ts/yearDropdown.ts
 create mode 100644 docs-site/src/examples/ts/yearItemNumber.ts
 create mode 100644 docs-site/src/examples/ts/yearPicker.ts
 create mode 100644 docs-site/src/examples/ts/yearSelectDropdown.ts
 rename docs-site/src/{index.jsx => index.tsx} (90%)
 create mode 100644 docs-site/src/types/global.d.ts
 create mode 100644 docs-site/src/types/index.ts
 create mode 100644 docs-site/tsconfig.json
 create mode 100644 docs-site/tsconfig.node.json
 rename docs-site/{vite.config.js => vite.config.ts} (100%)

diff --git a/docs-site/package.json b/docs-site/package.json
index 7f499c1303..e85ff945f4 100644
--- a/docs-site/package.json
+++ b/docs-site/package.json
@@ -16,14 +16,18 @@
   },
   "scripts": {
     "start": "vite",
-    "build": "vite build",
+    "build": "tsc && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit"
   },
   "devDependencies": {
     "@eslint/js": "^9.24.0",
+    "@types/lodash": "^4.17.11",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.2",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.23.0",
     "eslint-plugin-react": "^7.37.5",
@@ -31,6 +35,7 @@
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
     "sass": "^1.86.3",
+    "typescript": "^5.3.3",
     "vite": "^6.2.5"
   },
   "packageManager": "yarn@4.6.0"
diff --git a/docs-site/src/components/Example/index.jsx b/docs-site/src/components/Example/index.tsx
similarity index 61%
rename from docs-site/src/components/Example/index.jsx
rename to docs-site/src/components/Example/index.tsx
index f45a158f6c..74529ff556 100644
--- a/docs-site/src/components/Example/index.jsx
+++ b/docs-site/src/components/Example/index.tsx
@@ -12,16 +12,44 @@ import slugify from "slugify";
 import range from "lodash/range";
 import { themes } from "prism-react-renderer";
 import editIcon from "./edit-regular.svg";
+import { IExampleConfig } from "../../types";
+
+type TState = {
+  activeTab: "js" | "ts";
+};
+
+type TProps = {
+  example: IExampleConfig;
+};
+
+export default class CodeExampleComponent extends React.Component<
+  TProps,
+  TState
+> {
+  state: TState = {
+    activeTab: "js",
+  };
 
-export default class CodeExampleComponent extends React.Component {
   componentDidMount() {
     registerLocale("fi", fi);
     registerLocale("pt-BR", ptBR);
     registerLocale("en-GB", enGB);
   }
 
+  handleTabChange = (tab: TState["activeTab"]) => {
+    this.setState({ activeTab: tab });
+  };
+
   render() {
-    const { title, description, component } = this.props.example;
+    const { title, description, component, componentTS } = this.props.example;
+    const { activeTab } = this.state;
+
+    const jsCode = component.trim();
+    const tsCode = componentTS?.trim();
+
+    const code = activeTab === "js" ? jsCode : tsCode;
+    const isTS = activeTab === "ts";
+
     return (
       <div
         id={`example-${slugify(title, { lower: true })}`}
@@ -29,9 +57,25 @@ export default class CodeExampleComponent extends React.Component {
       >
         <h2 className="example__heading">{title}</h2>
         {description && <p>{description}</p>}
+        <div className="example__tabs">
+          <button
+            className={`example__tab ${activeTab === "js" ? "active" : ""}`}
+            onClick={() => this.handleTabChange("js")}
+          >
+            JavaScript
+          </button>
+          {tsCode && (
+            <button
+              className={`example__tab ${activeTab === "ts" ? "active" : ""}`}
+              onClick={() => this.handleTabChange("ts")}
+            >
+              TypeScript
+            </button>
+          )}
+        </div>
         <div className="row">
           <LiveProvider
-            code={component.trim()}
+            code={code}
             scope={{
               // NB any globals added here should also be referenced in ../../examples/.eslintrc
               useState,
@@ -43,6 +87,8 @@ export default class CodeExampleComponent extends React.Component {
               forwardRef,
             }}
             theme={themes.github}
+            noInline={isTS}
+            language={isTS ? "tsx" : "jsx"}
           >
             <pre className="example__code">
               <img
diff --git a/docs-site/src/components/Examples/config.tsx b/docs-site/src/components/Examples/config.tsx
new file mode 100644
index 0000000000..95fa47e3ab
--- /dev/null
+++ b/docs-site/src/components/Examples/config.tsx
@@ -0,0 +1,772 @@
+import { IExampleConfig } from "../../types";
+
+import Default from "../../examples/js/default?raw";
+import NoAnchorArrow from "../../examples/js/noAnchorArrow?raw";
+import ShowTime from "../../examples/js/showTime?raw";
+import ShowTimeOnly from "../../examples/js/showTimeOnly?raw";
+import HideTimeCaption from "../../examples/js/hideTimeCaption?raw";
+import ExcludeTimes from "../../examples/js/excludeTimes?raw";
+import IncludeTimes from "../../examples/js/includeTimes?raw";
+import InjectTimes from "../../examples/js/injectTimes?raw";
+import FilterTimes from "../../examples/js/filterTimes?raw";
+import ExcludeTimePeriod from "../../examples/js/excludeTimePeriod?raw";
+import CustomDateFormat from "../../examples/js/customDateFormat?raw";
+import CustomClassName from "../../examples/js/customClassName?raw";
+import CustomCalendarClassName from "../../examples/js/customCalendarClassName?raw";
+import CustomDayClassName from "../../examples/js/customDayClassName?raw";
+import CustomTimeClassName from "../../examples/js/customTimeClassName?raw";
+import Today from "../../examples/js/today?raw";
+import PlaceholderText from "../../examples/js/placeholderText?raw";
+import SpecificDateRange from "../../examples/js/specificDateRange?raw";
+import MinDate from "../../examples/js/minDate?raw";
+import MaxDate from "../../examples/js/maxDate?raw";
+import DateRangeWithShowDisabledNavigation from "../../examples/js/dateRangeWithShowDisabledNavigation?raw";
+import Locale from "../../examples/js/locale?raw";
+import LocaleWithTime from "../../examples/js/localeWithTime?raw";
+import LocaleWithoutGlobalVariable from "../../examples/js/localeWithoutGlobalVariable?raw";
+import ExcludeDates from "../../examples/js/excludeDates?raw";
+import ExcludedWithMessage from "../../examples/js/excludeDatesWithMessage?raw";
+import ExcludeDateIntervals from "../../examples/js/excludeDateIntervals?raw";
+import ExcludeDatesMonthPicker from "../../examples/js/excludeDatesMonthPicker?raw";
+import ExcludeDatesRangeMonthPicker from "../../examples/js/excludeDatesRangeMonthPicker?raw";
+import HighlightDates from "../../examples/js/highlightDates?raw";
+import HolidayDates from "../../examples/js/holidayDates?raw";
+import HighlightDatesRanges from "../../examples/js/highlightDatesRanges?raw";
+import IncludeDates from "../../examples/js/includeDates?raw";
+import IncludeDateIntervals from "../../examples/js/includeDateIntervals?raw";
+import IncludeDatesMonthPicker from "../../examples/js/includeDatesMonthPicker?raw";
+import FilterDates from "../../examples/js/filterDates?raw";
+import DateRange from "../../examples/js/dateRange?raw";
+import DateRangeInputWithClearButton from "../../examples/js/dateRangeInputWithClearButton?raw";
+import DateRangeWithPortal from "../../examples/js/dateRangeWithPortal?raw";
+import Disabled from "../../examples/js/disabled?raw";
+import DisabledKeyboardNavigation from "../../examples/js/disabledKeyboardNavigation?raw";
+import ReadOnly from "../../examples/js/readOnly?raw";
+import ClearInput from "../../examples/js/clearInput?raw";
+import OnBlurCallbacks from "../../examples/js/onBlurCallbacks?raw";
+import ConfigureFloatingUI from "../../examples/js/configureFloatingUI?raw";
+import Portal from "../../examples/js/portal?raw";
+import PortalById from "../../examples/js/portalById?raw";
+import WithPortalById from "../../examples/js/withPortalById?raw";
+import TabIndex from "../../examples/js/tabIndex?raw";
+import YearDropdown from "../../examples/js/yearDropdown?raw";
+import YearItemNumber from "../../examples/js/yearItemNumber?raw";
+import MonthDropdown from "../../examples/js/monthDropdown?raw";
+import MonthDropdownShort from "../../examples/js/monthDropdownShort?raw";
+import MonthYearDropdown from "../../examples/js/monthYearDropdown?raw";
+import YearSelectDropdown from "../../examples/js/yearSelectDropdown?raw";
+import Inline from "../../examples/js/inline?raw";
+import InlineVisible from "../../examples/js/inlineVisible?raw";
+import OpenToDate from "../../examples/js/openToDate?raw";
+import FixedCalendar from "../../examples/js/fixedCalendar?raw";
+import WeekNumbers from "../../examples/js/weekNumbers?raw";
+import CustomInput from "../../examples/js/customInput?raw";
+import MultiMonth from "../../examples/js/multiMonth?raw";
+import MultiMonthPrevious from "../../examples/js/multiMonthPrevious?raw";
+import MultiMonthDropdown from "../../examples/js/multiMonthDropdown?raw";
+import MultiMonthInline from "../../examples/js/multiMonthInline?raw";
+import Children from "../../examples/js/children?raw";
+import CalendarContainer from "../../examples/js/calendarContainer?raw";
+import RawChange from "../../examples/js/rawChange?raw";
+import DontCloseOnSelect from "../../examples/js/dontCloseOnSelect?raw";
+import RenderCustomHeader from "../../examples/js/renderCustomHeader?raw";
+import RenderCustomHeaderTwoMonths from "../../examples/js/renderCustomHeaderTwoMonths?raw";
+import RenderCustomDay from "../../examples/js/renderCustomDay?raw";
+import RenderCustomMonth from "../../examples/js/renderCustomMonth?raw";
+import RenderCustomQuarter from "../../examples/js/renderCustomQuarter?raw";
+import RenderCustomYear from "../../examples/js/renderCustomYear?raw";
+import TimeInput from "../../examples/js/timeInput?raw";
+import StrictParsing from "../../examples/js/strictParsing?raw";
+import MonthPicker from "../../examples/js/monthPicker?raw";
+import WeekPicker from "../../examples/js/weekPicker?raw";
+import ExcludeWeeks from "../../examples/js/excludeWeeks?raw";
+import monthPickerFullName from "../../examples/js/monthPickerFullName?raw";
+import monthPickerTwoColumns from "../../examples/js/monthPickerTwoColumns?raw";
+import monthPickerFourColumns from "../../examples/js/monthPickerFourColumns?raw";
+import RangeMonthPicker from "../../examples/js/rangeMonthPicker?raw";
+import RangeMonthPickerSelectsRange from "../../examples/js/rangeMonthPickerSelectsRange?raw";
+import QuarterPicker from "../../examples/js/quarterPicker?raw";
+import RangeQuarterPicker from "../../examples/js/rangeQuarterPicker?raw";
+import RangeQuarterPickerSelectsRange from "../../examples/js/rangeQuarterPickerSelectsRange?raw";
+import YearPicker from "../../examples/js/yearPicker?raw";
+import RangeYearPicker from "../../examples/js/rangeYearPicker?raw";
+import RangeYearPickerSelectsRange from "../../examples/js/rangeYearPickerSelectsRange?raw";
+import OnCalendarChangeStateCallbacks from "../../examples/js/onCalendarOpenStateCallbacks?raw";
+import CustomTimeInput from "../../examples/js/customTimeInput?raw";
+import CloseOnScroll from "../../examples/js/closeOnScroll?raw";
+import CloseOnScrollCallback from "../../examples/js/closeOnScrollCallback?raw";
+import SelectsRange from "../../examples/js/selectsRange?raw";
+import selectsRangeWithDisabledDates from "../../examples/js/selectsRangeWithDisabledDates?raw";
+import CalendarStartDay from "../../examples/js/calendarStartDay?raw";
+import ExternalForm from "../../examples/js/externalForm?raw";
+import CalendarIcon from "../../examples/js/calendarIcon?raw";
+import SelectsMultiple from "../../examples/js/selectsMultiple?raw";
+import SelectsMultipleMonths from "../../examples/js/selectsMultipleMonths?raw";
+import CalendarIconExternal from "../../examples/js/calendarIconExternal?raw";
+import CalendarIconSvgIcon from "../../examples/js/calendarIconSvgIcon?raw";
+import ToggleCalendarOnIconClick from "../../examples/js/toggleCalendarOnIconClick?raw";
+import RangeSwapRange from "../../examples/js/rangeSwapRange?raw";
+
+// TS Examples
+import {
+  defaultTS,
+  calendarContainerTS,
+  calendarIconTS,
+  calendarIconSvgIconTS,
+  calendarIconExternalTS,
+  calendarStartDayTS,
+  onCalendarOpenStateCallbacksTS,
+  toggleCalendarOnIconClickTS,
+  childrenTS,
+  clearInputTS,
+  closeOnScrollTS,
+  closeOnScrollCallbackTS,
+  configureFloatingUIS,
+  customInputTS,
+  renderCustomHeaderTS,
+  renderCustomHeaderTwoMonthsTS,
+  renderCustomDayTS,
+  renderCustomMonthTS,
+  renderCustomQuarterTS,
+  renderCustomYearTS,
+  customCalendarClassNameTS,
+  customClassNameTS,
+  customDayClassNameTS,
+  customDateFormatTS,
+  customTimeClassNameTS,
+  customTimeInputTS,
+  dateRangeTS,
+  selectsRangeTS,
+  selectsRangeWithDisabledDatesTS,
+  dateRangeWithShowDisabledNavigationTS,
+  dateRangeInputWithClearButtonTS,
+  dateRangeWithPortalTS,
+  disabledTS,
+  disabledKeyboardNavigationTS,
+  weekNumbersTS,
+  dontCloseOnSelectTS,
+  excludeDatesTS,
+  excludeDatesWithMessageTS,
+  excludeDateIntervalsTS,
+  excludeDatesMonthPickerTS,
+  excludeDatesRangeMonthPickerTS,
+  excludeTimesTS,
+  filterDatesTS,
+  filterTimesTS,
+  fixedCalendarTS,
+  rawChangeTS,
+  highlightDatesTS,
+  highlightDatesRangesTS,
+  holidayDatesTS,
+  includeDatesTS,
+  includeDateIntervalsTS,
+  includeDatesMonthPickerTS,
+  includeTimesTS,
+  injectTimesTS,
+  inlineTS,
+  inlineVisibleTS,
+  timeInputTS,
+  localeTS,
+  localeWithTimeTS,
+  localeWithoutGlobalVariableTS,
+  maxDateTS,
+  minDateTS,
+  monthPickerTS,
+  monthPickerFullNameTS,
+  monthPickerTwoColumnsTS,
+  monthPickerFourColumnsTS,
+  monthDropdownTS,
+  monthDropdownShortTS,
+  monthYearDropdownTS,
+  multiMonthTS,
+  multiMonthDropdownTS,
+  multiMonthInlineTS,
+  noAnchorArrowTS,
+  onBlurCallbacksTS,
+  openToDateTS,
+  placeholderTextTS,
+  portalTS,
+  portalByIdTS,
+  withPortalByIdTS,
+  quarterPickerTS,
+  rangeMonthPickerTS,
+  rangeMonthPickerSelectsRangeTS,
+  rangeQuarterPickerTS,
+  rangeQuarterPickerSelectsRangeTS,
+  rangeSwapRangeTS,
+  readOnlyTS,
+  showTimeTS,
+  showTimeOnlyTS,
+  hideTimeCaptionTS,
+  multiMonthPreviousTS,
+  specificDateRangeTS,
+  excludeTimePeriodTS,
+  selectsMultipleTS,
+  selectsMultipleMonthsTS,
+  strictParsingTS,
+  tabIndexTS,
+  todayTS,
+  yearPickerTS,
+  rangeYearPickerTS,
+  rangeYearPickerSelectsRangeTS,
+  yearDropdownTS,
+  yearSelectDropdownTS,
+  yearItemNumberTS,
+  weekPickerTS,
+  excludeWeeksTS,
+  externalFormTS,
+} from "../../examples/ts";
+
+export const EXAMPLE_CONFIG: IExampleConfig[] = [
+  {
+    title: "Default",
+    component: Default,
+    componentTS: defaultTS,
+  },
+  {
+    title: "Calendar Icon",
+    component: CalendarIcon,
+    componentTS: calendarIconTS,
+  },
+  {
+    title: "Calendar Icon using React Svg Component",
+    component: CalendarIconSvgIcon,
+    componentTS: calendarIconSvgIconTS,
+  },
+  {
+    title: "Calendar Icon using External Lib",
+    component: CalendarIconExternal,
+    componentTS: calendarIconExternalTS,
+  },
+  {
+    title: "Toggle Calendar open status on click of the calendar icon",
+    component: ToggleCalendarOnIconClick,
+    componentTS: toggleCalendarOnIconClickTS,
+  },
+  {
+    title: "Calendar container",
+    component: CalendarContainer,
+    componentTS: calendarContainerTS,
+  },
+  {
+    title: "Calendar open state callbacks",
+    component: OnCalendarChangeStateCallbacks,
+    componentTS: onCalendarOpenStateCallbacksTS,
+  },
+  {
+    title: "Children",
+    component: Children,
+    componentTS: childrenTS,
+  },
+  {
+    title: "Clear datepicker input",
+    component: ClearInput,
+    componentTS: clearInputTS,
+  },
+  {
+    title: "Close on scroll",
+    component: CloseOnScroll,
+    componentTS: closeOnScrollTS,
+  },
+  {
+    title: "Close on scroll callback",
+    component: CloseOnScrollCallback,
+    componentTS: closeOnScrollCallbackTS,
+  },
+  {
+    title: "Configure Floating UI Properties",
+    component: ConfigureFloatingUI,
+    description: (
+      <div>
+        Full docs for the underlying library that manages the overlay used can
+        be found at{" "}
+        <a
+          href="https://floating-ui.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          floating-ui.com
+        </a>
+      </div>
+    ),
+    componentTS: configureFloatingUIS,
+  },
+  {
+    title: "Custom input",
+    component: CustomInput,
+    componentTS: customInputTS,
+  },
+  {
+    title: "Custom header",
+    component: RenderCustomHeader,
+    componentTS: renderCustomHeaderTS,
+  },
+  {
+    title: "Custom header with two months displayed",
+    component: RenderCustomHeaderTwoMonths,
+    componentTS: renderCustomHeaderTwoMonthsTS,
+  },
+  {
+    title: "Custom Day",
+    component: RenderCustomDay,
+    componentTS: renderCustomDayTS,
+  },
+  {
+    title: "Custom Month",
+    component: RenderCustomMonth,
+    componentTS: renderCustomMonthTS,
+  },
+  {
+    title: "Custom Quarter",
+    component: RenderCustomQuarter,
+    componentTS: renderCustomQuarterTS,
+  },
+  {
+    title: "Custom Year",
+    component: RenderCustomYear,
+    componentTS: renderCustomYearTS,
+  },
+  {
+    title: "Custom calendar class name",
+    component: CustomCalendarClassName,
+    componentTS: customCalendarClassNameTS,
+  },
+  {
+    title: "Custom class name",
+    component: CustomClassName,
+    componentTS: customClassNameTS,
+  },
+  {
+    title: "Custom day class name",
+    component: CustomDayClassName,
+    componentTS: customDayClassNameTS,
+  },
+  {
+    title: "Custom date format",
+    component: CustomDateFormat,
+    componentTS: customDateFormatTS,
+  },
+  {
+    title: "Custom time class name",
+    component: CustomTimeClassName,
+    componentTS: customTimeClassNameTS,
+  },
+  {
+    title: "Custom time input",
+    component: CustomTimeInput,
+    componentTS: customTimeInputTS,
+  },
+  {
+    title: "Date Range",
+    component: DateRange,
+    componentTS: dateRangeTS,
+  },
+  {
+    title: "Date range for one datepicker",
+    component: SelectsRange,
+    componentTS: selectsRangeTS,
+  },
+  {
+    title: "Date range for one datepicker with disabled dates highlighted",
+    component: selectsRangeWithDisabledDates,
+    componentTS: selectsRangeWithDisabledDatesTS,
+  },
+  {
+    title: "Date Range with disabled navigation shown",
+    component: DateRangeWithShowDisabledNavigation,
+    componentTS: dateRangeWithShowDisabledNavigationTS,
+  },
+  {
+    title: "Date Range using input with clear button",
+    component: DateRangeInputWithClearButton,
+    componentTS: dateRangeInputWithClearButtonTS,
+  },
+  {
+    title: "Date Range with Portal",
+    component: DateRangeWithPortal,
+    componentTS: dateRangeWithPortalTS,
+  },
+  {
+    title: "Disable datepicker",
+    component: Disabled,
+    componentTS: disabledTS,
+  },
+  {
+    title: "Disable keyboard navigation",
+    component: DisabledKeyboardNavigation,
+    componentTS: disabledKeyboardNavigationTS,
+  },
+  {
+    title: "Display Week Numbers",
+    component: WeekNumbers,
+    componentTS: weekNumbersTS,
+  },
+  {
+    title: "Don't hide calendar on date selection",
+    component: DontCloseOnSelect,
+    componentTS: dontCloseOnSelectTS,
+  },
+  {
+    title: "Exclude dates",
+    component: ExcludeDates,
+    componentTS: excludeDatesTS,
+  },
+  {
+    title: "Exclude dates with message",
+    component: ExcludedWithMessage,
+    componentTS: excludeDatesWithMessageTS,
+  },
+  {
+    title: "Exclude date intervals",
+    component: ExcludeDateIntervals,
+    componentTS: excludeDateIntervalsTS,
+  },
+  {
+    title: "Exclude Months in Month Picker",
+    component: ExcludeDatesMonthPicker,
+    componentTS: excludeDatesMonthPickerTS,
+  },
+  {
+    title: "Exclude Months in Range Month Picker",
+    component: ExcludeDatesRangeMonthPicker,
+    componentTS: excludeDatesRangeMonthPickerTS,
+  },
+  {
+    title: "Exclude Times",
+    component: ExcludeTimes,
+    componentTS: excludeTimesTS,
+  },
+  {
+    title: "Filter dates",
+    component: FilterDates,
+    componentTS: filterDatesTS,
+  },
+  {
+    title: "Filter times",
+    component: FilterTimes,
+    componentTS: filterTimesTS,
+  },
+  {
+    title: "Fixed height of Calendar",
+    component: FixedCalendar,
+    componentTS: fixedCalendarTS,
+  },
+  {
+    title: "Get raw input value on change",
+    component: RawChange,
+    componentTS: rawChangeTS,
+  },
+  {
+    title: "Highlight dates",
+    component: HighlightDates,
+    componentTS: highlightDatesTS,
+  },
+  {
+    title: "Highlight dates with custom class names and ranges",
+    component: HighlightDatesRanges,
+    componentTS: highlightDatesRangesTS,
+  },
+  {
+    title: "Holiday dates",
+    component: HolidayDates,
+    componentTS: holidayDatesTS,
+  },
+  {
+    title: "Include dates",
+    component: IncludeDates,
+    componentTS: includeDatesTS,
+  },
+  {
+    title: "Include date intervals",
+    component: IncludeDateIntervals,
+    componentTS: includeDateIntervalsTS,
+  },
+  {
+    title: "Include Months in Month Picker",
+    component: IncludeDatesMonthPicker,
+    componentTS: includeDatesMonthPickerTS,
+  },
+  {
+    title: "Include Times",
+    component: IncludeTimes,
+    componentTS: includeTimesTS,
+  },
+  {
+    title: "Inject Specific Times",
+    component: InjectTimes,
+    componentTS: injectTimesTS,
+  },
+  {
+    title: "Inline version",
+    component: Inline,
+    componentTS: inlineTS,
+  },
+  {
+    title: "Button to show Inline version",
+    component: InlineVisible,
+    componentTS: inlineVisibleTS,
+  },
+  {
+    title: "Input time",
+    component: TimeInput,
+    componentTS: timeInputTS,
+  },
+  {
+    title: "Locale",
+    component: Locale,
+    componentTS: localeTS,
+  },
+  {
+    title: "Locale with time",
+    component: LocaleWithTime,
+    componentTS: localeWithTimeTS,
+  },
+  {
+    title: "Locale without global variables",
+    component: LocaleWithoutGlobalVariable,
+    componentTS: localeWithoutGlobalVariableTS,
+  },
+  {
+    title: "Min date",
+    component: MinDate,
+    componentTS: minDateTS,
+  },
+  {
+    title: "Max date",
+    component: MaxDate,
+    componentTS: maxDateTS,
+  },
+  {
+    title: "Month Picker",
+    component: MonthPicker,
+    componentTS: monthPickerTS,
+  },
+  {
+    title: "Month Picker with Full Name",
+    component: monthPickerFullName,
+    componentTS: monthPickerFullNameTS,
+  },
+  {
+    title: "Month Picker Two Columns Layout",
+    component: monthPickerTwoColumns,
+    componentTS: monthPickerTwoColumnsTS,
+  },
+  {
+    title: "Month Picker Four Columns Layout",
+    component: monthPickerFourColumns,
+    componentTS: monthPickerFourColumnsTS,
+  },
+  {
+    title: "Month dropdown",
+    component: MonthDropdown,
+    componentTS: monthDropdownTS,
+  },
+  {
+    title: "Month dropdown short month",
+    component: MonthDropdownShort,
+    componentTS: monthDropdownShortTS,
+  },
+  {
+    title: "MonthYear dropdown",
+    component: MonthYearDropdown,
+    componentTS: monthYearDropdownTS,
+  },
+  {
+    title: "Multiple months",
+    component: MultiMonth,
+    componentTS: multiMonthTS,
+  },
+  {
+    title: "Multiple months with year dropdown",
+    component: MultiMonthDropdown,
+    componentTS: multiMonthDropdownTS,
+  },
+  {
+    title: "Multiple months inline",
+    component: MultiMonthInline,
+    componentTS: multiMonthInlineTS,
+  },
+  {
+    title: "No Anchor Arrow",
+    component: NoAnchorArrow,
+    componentTS: noAnchorArrowTS,
+  },
+  {
+    title: "onBlur callbacks in console",
+    component: OnBlurCallbacks,
+    componentTS: onBlurCallbacksTS,
+  },
+  {
+    title: "Open to date",
+    component: OpenToDate,
+    componentTS: openToDateTS,
+  },
+  {
+    title: "Placeholder text",
+    component: PlaceholderText,
+    componentTS: placeholderTextTS,
+  },
+  {
+    title: "Portal version",
+    component: Portal,
+    componentTS: portalTS,
+  },
+  {
+    title: "Portal by id",
+    description:
+      "If the provided portalId cannot be found in the dom, one will be created by default with that id.",
+    component: PortalById,
+    componentTS: portalByIdTS,
+  },
+  {
+    title: "Portal version with portal by id",
+    description:
+      "If the provided portalId cannot be found in the dom, one will be created by default with that id.",
+    component: WithPortalById,
+    componentTS: withPortalByIdTS,
+  },
+  {
+    title: "Quarter Picker",
+    component: QuarterPicker,
+    componentTS: quarterPickerTS,
+  },
+  {
+    title: "Range Month Picker",
+    component: RangeMonthPicker,
+    componentTS: rangeMonthPickerTS,
+  },
+  {
+    title: "Range Month Picker for one month picker",
+    component: RangeMonthPickerSelectsRange,
+    componentTS: rangeMonthPickerSelectsRangeTS,
+  },
+  {
+    title: "Range Quarter Picker",
+    component: RangeQuarterPicker,
+    componentTS: rangeQuarterPickerTS,
+  },
+  {
+    title: "Range Quarter Picker for one quarter picker",
+    component: RangeQuarterPickerSelectsRange,
+    componentTS: rangeQuarterPickerSelectsRangeTS,
+  },
+  {
+    title: "Range Swap Range",
+    description:
+      "Swap the start and end date if the end date is before the start date in a pick sequence.",
+    component: RangeSwapRange,
+    componentTS: rangeSwapRangeTS,
+  },
+  {
+    title: "Read only datepicker",
+    component: ReadOnly,
+    componentTS: readOnlyTS,
+  },
+  {
+    title: "Select Time",
+    component: ShowTime,
+    componentTS: showTimeTS,
+  },
+  {
+    title: "Select Time Only",
+    component: ShowTimeOnly,
+    componentTS: showTimeOnlyTS,
+  },
+  {
+    title: "Hide Time Caption",
+    component: HideTimeCaption,
+    componentTS: hideTimeCaptionTS,
+  },
+  {
+    title: "Show previous months",
+    component: MultiMonthPrevious,
+    componentTS: multiMonthPreviousTS,
+  },
+  {
+    title: "Specific date range",
+    component: SpecificDateRange,
+    componentTS: specificDateRangeTS,
+  },
+  {
+    title: "Specific Time Range",
+    component: ExcludeTimePeriod,
+    componentTS: excludeTimePeriodTS,
+  },
+  {
+    title: "Select multiple dates",
+    component: SelectsMultiple,
+    componentTS: selectsMultipleTS,
+  },
+  {
+    title: "Select multiple months",
+    component: SelectsMultipleMonths,
+    componentTS: selectsMultipleMonthsTS,
+  },
+  {
+    title: "Strict parsing",
+    description:
+      "Enables strict format validation for manual date input. When this flag is activated, the component will only accept values that exactly match the specified date format (`dateFormat`).",
+    component: StrictParsing,
+    componentTS: strictParsingTS,
+  },
+  {
+    title: "TabIndex",
+    component: TabIndex,
+    componentTS: tabIndexTS,
+  },
+  {
+    title: "Today button",
+    component: Today,
+    componentTS: todayTS,
+  },
+  {
+    title: "Year Picker",
+    component: YearPicker,
+    componentTS: yearPickerTS,
+  },
+  {
+    title: "Range Year Picker",
+    component: RangeYearPicker,
+    componentTS: rangeYearPickerTS,
+  },
+  {
+    title: "Range Year Picker for one datepicker",
+    component: RangeYearPickerSelectsRange,
+    componentTS: rangeYearPickerSelectsRangeTS,
+  },
+  {
+    title: "Year dropdown",
+    component: YearDropdown,
+    componentTS: yearDropdownTS,
+  },
+  {
+    title: "Year select dropdown",
+    component: YearSelectDropdown,
+    componentTS: yearSelectDropdownTS,
+  },
+  {
+    title: "Year item number",
+    component: YearItemNumber,
+    componentTS: yearItemNumberTS,
+  },
+  {
+    title: "Calendar Start day",
+    component: CalendarStartDay,
+    componentTS: calendarStartDayTS,
+  },
+  {
+    title: "Week Picker",
+    component: WeekPicker,
+    componentTS: weekPickerTS,
+  },
+  {
+    title: "Exclude Weeks",
+    component: ExcludeWeeks,
+    componentTS: excludeWeeksTS,
+  },
+  {
+    title: "External Form",
+    component: ExternalForm,
+    componentTS: externalFormTS,
+  },
+];
diff --git a/docs-site/src/components/Examples/examples.scss b/docs-site/src/components/Examples/examples.scss
index 9c38c04cec..34f7081944 100644
--- a/docs-site/src/components/Examples/examples.scss
+++ b/docs-site/src/components/Examples/examples.scss
@@ -68,6 +68,30 @@
     margin-bottom: 20px;
   }
 
+  &__tabs {
+    display: flex;
+  }
+
+  &__tab {
+    font-family: "Open Sans", sans-serif;
+    box-sizing: border-box;
+    padding: 8px;
+    border: none;
+    border-bottom: 2px solid transparent;
+    background: none;
+    cursor: pointer;
+    font-size: 14px;
+    transition: all 0.2s ease;
+  }
+
+  &__tab:hover {
+    border-bottom: 2px solid #216ba5;
+  }
+
+  &__tab.active {
+    border-bottom: 2px solid #216ba5;
+  }
+
   &__code {
     position: relative;
     background-color: #f5f8fb;
@@ -75,8 +99,7 @@
     margin-left: -20px;
     border-top: 1px solid #d8e4ef;
     border-bottom: 1px solid #d8e4ef;
-    overflow-x: auto;
-    overflow-y: hidden;
+    overflow: auto hidden;
 
     @include helpers.breakpoint(768px) {
       width: 70%;
@@ -98,15 +121,19 @@
       z-index: 10;
     }
   }
+
   &__preview {
     padding: 20px;
+
     @include helpers.breakpoint(768px) {
       width: 30%;
     }
+
     @media (max-width: 768px) {
       padding-left: 0;
     }
   }
+
   &#example-portal-by-id {
     position: relative;
     overflow: hidden;
@@ -121,9 +148,11 @@
   .react-datepicker__week:nth-child(3n + 1) {
     background-color: #215005;
   }
+
   .react-datepicker__week:nth-child(3n + 2) {
     background-color: #eea429;
   }
+
   .react-datepicker__week:nth-child(3n + 3) {
     background-color: #a82a15;
   }
diff --git a/docs-site/src/components/Examples/hero.scss b/docs-site/src/components/Examples/hero.scss
index a9f34dd041..35ebc67aff 100644
--- a/docs-site/src/components/Examples/hero.scss
+++ b/docs-site/src/components/Examples/hero.scss
@@ -6,6 +6,7 @@
 
   &__content {
     @extend %container-styling;
+
     text-align: center;
     padding: 175px 0;
   }
diff --git a/docs-site/src/components/Examples/index.jsx b/docs-site/src/components/Examples/index.jsx
deleted file mode 100644
index 0584f09c3a..0000000000
--- a/docs-site/src/components/Examples/index.jsx
+++ /dev/null
@@ -1,609 +0,0 @@
-import React from "react";
-import hljs from "highlight.js/lib/core";
-import hljsJavaScriptLanguage from "highlight.js/lib/languages/javascript";
-import slugify from "slugify";
-import CodeExampleComponent from "../Example/index.jsx";
-
-import Default from "../../examples/default?raw";
-import NoAnchorArrow from "../../examples/noAnchorArrow?raw";
-import ShowTime from "../../examples/showTime?raw";
-import ShowTimeOnly from "../../examples/showTimeOnly?raw";
-import HideTimeCaption from "../../examples/hideTimeCaption?raw";
-import ExcludeTimes from "../../examples/excludeTimes?raw";
-import IncludeTimes from "../../examples/includeTimes?raw";
-import InjectTimes from "../../examples/injectTimes?raw";
-import FilterTimes from "../../examples/filterTimes?raw";
-import ExcludeTimePeriod from "../../examples/excludeTimePeriod?raw";
-import CustomDateFormat from "../../examples/customDateFormat?raw";
-import CustomClassName from "../../examples/customClassName?raw";
-import CustomCalendarClassName from "../../examples/customCalendarClassName?raw";
-import CustomDayClassName from "../../examples/customDayClassName?raw";
-import CustomTimeClassName from "../../examples/customTimeClassName?raw";
-import Today from "../../examples/today?raw";
-import PlaceholderText from "../../examples/placeholderText?raw";
-import SpecificDateRange from "../../examples/specificDateRange?raw";
-import MinDate from "../../examples/minDate?raw";
-import MaxDate from "../../examples/maxDate?raw";
-import DateRangeWithShowDisabledNavigation from "../../examples/dateRangeWithShowDisabledNavigation?raw";
-import Locale from "../../examples/locale?raw";
-import LocaleWithTime from "../../examples/localeWithTime?raw";
-import LocaleWithoutGlobalVariable from "../../examples/localeWithoutGlobalVariable?raw";
-import ExcludeDates from "../../examples/excludeDates?raw";
-import ExcludedWithMessage from "../../examples/excludeDatesWithMessage?raw";
-import ExcludeDateIntervals from "../../examples/excludeDateIntervals?raw";
-import ExcludeDatesMonthPicker from "../../examples/excludeDatesMonthPicker?raw";
-import ExcludeDatesRangeMonthPicker from "../../examples/excludeDatesRangeMonthPicker?raw";
-import HighlightDates from "../../examples/highlightDates?raw";
-import HolidayDates from "../../examples/holidayDates?raw";
-import HighlightDatesRanges from "../../examples/highlightDatesRanges?raw";
-import IncludeDates from "../../examples/includeDates?raw";
-import IncludeDateIntervals from "../../examples/includeDateIntervals?raw";
-import IncludeDatesMonthPicker from "../../examples/includeDatesMonthPicker?raw";
-import FilterDates from "../../examples/filterDates?raw";
-import DateRange from "../../examples/dateRange?raw";
-import DateRangeInputWithClearButton from "../../examples/dateRangeInputWithClearButton?raw";
-import DateRangeWithPortal from "../../examples/dateRangeWithPortal?raw";
-import Disabled from "../../examples/disabled?raw";
-import DisabledKeyboardNavigation from "../../examples/disabledKeyboardNavigation?raw";
-import ReadOnly from "../../examples/readOnly?raw";
-import ClearInput from "../../examples/clearInput?raw";
-import OnBlurCallbacks from "../../examples/onBlurCallbacks?raw";
-import ConfigureFloatingUI from "../../examples/configureFloatingUI?raw";
-import Portal from "../../examples/portal?raw";
-import PortalById from "../../examples/portalById?raw";
-import WithPortalById from "../../examples/withPortalById?raw";
-import TabIndex from "../../examples/tabIndex?raw";
-import YearDropdown from "../../examples/yearDropdown?raw";
-import YearItemNumber from "../../examples/yearItemNumber?raw";
-import MonthDropdown from "../../examples/monthDropdown?raw";
-import MonthDropdownShort from "../../examples/monthDropdownShort?raw";
-import MonthYearDropdown from "../../examples/monthYearDropdown?raw";
-import YearSelectDropdown from "../../examples/yearSelectDropdown?raw";
-import Inline from "../../examples/inline?raw";
-import InlineVisible from "../../examples/inlineVisible?raw";
-import OpenToDate from "../../examples/openToDate?raw";
-import FixedCalendar from "../../examples/fixedCalendar?raw";
-import WeekNumbers from "../../examples/weekNumbers?raw";
-import CustomInput from "../../examples/customInput?raw";
-import MultiMonth from "../../examples/multiMonth?raw";
-import MultiMonthPrevious from "../../examples/multiMonthPrevious?raw";
-import MultiMonthDropdown from "../../examples/multiMonthDropdown?raw";
-import MultiMonthInline from "../../examples/multiMonthInline?raw";
-import Children from "../../examples/children?raw";
-import CalendarContainer from "../../examples/calendarContainer?raw";
-import RawChange from "../../examples/rawChange?raw";
-import DontCloseOnSelect from "../../examples/dontCloseOnSelect?raw";
-import RenderCustomHeader from "../../examples/renderCustomHeader?raw";
-import RenderCustomHeaderTwoMonths from "../../examples/renderCustomHeaderTwoMonths?raw";
-import RenderCustomDay from "../../examples/renderCustomDay?raw";
-import RenderCustomMonth from "../../examples/renderCustomMonth?raw";
-import RenderCustomQuarter from "../../examples/renderCustomQuarter?raw";
-import RenderCustomYear from "../../examples/renderCustomYear?raw";
-import TimeInput from "../../examples/timeInput?raw";
-import StrictParsing from "../../examples/strictParsing?raw";
-import MonthPicker from "../../examples/monthPicker?raw";
-import WeekPicker from "../../examples/weekPicker?raw";
-import ExcludeWeeks from "../../examples/excludeWeeks?raw";
-import monthPickerFullName from "../../examples/monthPickerFullName?raw";
-import monthPickerTwoColumns from "../../examples/monthPickerTwoColumns?raw";
-import monthPickerFourColumns from "../../examples/monthPickerFourColumns?raw";
-import RangeMonthPicker from "../../examples/rangeMonthPicker?raw";
-import RangeMonthPickerSelectsRange from "../../examples/rangeMonthPickerSelectsRange?raw";
-import QuarterPicker from "../../examples/quarterPicker?raw";
-import RangeQuarterPicker from "../../examples/rangeQuarterPicker?raw";
-import RangeQuarterPickerSelectsRange from "../../examples/rangeQuarterPickerSelectsRange?raw";
-import YearPicker from "../../examples/yearPicker?raw";
-import RangeYearPicker from "../../examples/rangeYearPicker?raw";
-import RangeYearPickerSelectsRange from "../../examples/rangeYearPickerSelectsRange?raw";
-import OnCalendarChangeStateCallbacks from "../../examples/onCalendarOpenStateCallbacks?raw";
-import CustomTimeInput from "../../examples/customTimeInput?raw";
-import CloseOnScroll from "../../examples/closeOnScroll?raw";
-import CloseOnScrollCallback from "../../examples/closeOnScrollCallback?raw";
-import SelectsRange from "../../examples/selectsRange?raw";
-import selectsRangeWithDisabledDates from "../../examples/selectsRangeWithDisabledDates?raw";
-import CalendarStartDay from "../../examples/calendarStartDay?raw";
-import ExternalForm from "../../examples/externalForm?raw";
-import CalendarIcon from "../../examples/calendarIcon?raw";
-import SelectsMultiple from "../../examples/selectsMultiple?raw";
-import SelectsMultipleMonths from "../../examples/selectsMultipleMonths?raw";
-import CalendarIconExternal from "../../examples/calendarIconExternal?raw";
-import CalendarIconSvgIcon from "../../examples/calendarIconSvgIcon?raw";
-import ToggleCalendarOnIconClick from "../../examples/toggleCalendarOnIconClick?raw";
-import SwapRange from "../../examples/rangeSwapRange?raw";
-
-import "./style.scss";
-import "react-datepicker/dist/react-datepicker.css";
-
-export default class exampleComponents extends React.Component {
-  componentDidMount() {
-    hljs.registerLanguage("javascript", hljsJavaScriptLanguage);
-    hljs.highlightAll();
-  }
-
-  examples = [
-    {
-      title: "Default",
-      component: Default,
-    },
-    {
-      title: "Calendar Icon",
-      component: CalendarIcon,
-    },
-    {
-      title: "Calendar Icon using React Svg Component",
-      component: CalendarIconSvgIcon,
-    },
-    {
-      title: "Calendar Icon using External Lib",
-      component: CalendarIconExternal,
-    },
-    {
-      title: "Toggle Calendar open status on click of the calendar icon",
-      component: ToggleCalendarOnIconClick,
-    },
-    {
-      title: "Calendar container",
-      component: CalendarContainer,
-    },
-    {
-      title: "Calendar open state callbacks",
-      component: OnCalendarChangeStateCallbacks,
-    },
-    {
-      title: "Children",
-      component: Children,
-    },
-    {
-      title: "Clear datepicker input",
-      component: ClearInput,
-    },
-    {
-      title: "Close on scroll",
-      component: CloseOnScroll,
-    },
-    {
-      title: "Close on scroll callback",
-      component: CloseOnScrollCallback,
-    },
-    {
-      title: "Configure Floating UI Properties",
-      component: ConfigureFloatingUI,
-      description: (
-        <div>
-          Full docs for the underlying library that manages the overlay used can
-          be found at{" "}
-          <a
-            href="https://floating-ui.com/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            floating-ui.com
-          </a>
-        </div>
-      ),
-    },
-    {
-      title: "Custom input",
-      component: CustomInput,
-    },
-    {
-      title: "Custom header",
-      component: RenderCustomHeader,
-    },
-    {
-      title: "Custom header with two months displayed",
-      component: RenderCustomHeaderTwoMonths,
-    },
-    {
-      title: "Custom Day",
-      component: RenderCustomDay,
-    },
-    {
-      title: "Custom Month",
-      component: RenderCustomMonth,
-    },
-    {
-      title: "Custom Quarter",
-      component: RenderCustomQuarter,
-    },
-    {
-      title: "Custom Year",
-      component: RenderCustomYear,
-    },
-    {
-      title: "Custom calendar class name",
-      component: CustomCalendarClassName,
-    },
-    {
-      title: "Custom class name",
-      component: CustomClassName,
-    },
-    {
-      title: "Custom day class name",
-      component: CustomDayClassName,
-    },
-    {
-      title: "Custom date format",
-      component: CustomDateFormat,
-    },
-    {
-      title: "Custom time class name",
-      component: CustomTimeClassName,
-    },
-    {
-      title: "Custom time input",
-      component: CustomTimeInput,
-    },
-    {
-      title: "Date Range",
-      component: DateRange,
-    },
-    {
-      title: "Date range for one datepicker",
-      component: SelectsRange,
-    },
-    {
-      title: "Date range for one datepicker with disabled dates highlighted",
-      component: selectsRangeWithDisabledDates,
-    },
-    {
-      title: "Date Range with disabled navigation shown",
-      component: DateRangeWithShowDisabledNavigation,
-    },
-    {
-      title: "Date Range using input with clear button",
-      component: DateRangeInputWithClearButton,
-    },
-    {
-      title: "Date Range with Portal",
-      component: DateRangeWithPortal,
-    },
-    {
-      title: "Disable datepicker",
-      component: Disabled,
-    },
-    {
-      title: "Disable keyboard navigation",
-      component: DisabledKeyboardNavigation,
-    },
-    {
-      title: "Display Week Numbers",
-      component: WeekNumbers,
-    },
-    {
-      title: "Don't hide calendar on date selection",
-      component: DontCloseOnSelect,
-    },
-    {
-      title: "Exclude dates",
-      component: ExcludeDates,
-    },
-    {
-      title: "Exclude dates with message",
-      component: ExcludedWithMessage,
-    },
-    {
-      title: "Exclude date intervals",
-      component: ExcludeDateIntervals,
-    },
-    {
-      title: "Exclude Months in Month Picker",
-      component: ExcludeDatesMonthPicker,
-    },
-    {
-      title: "Exclude Months in Range Month Picker",
-      component: ExcludeDatesRangeMonthPicker,
-    },
-    {
-      title: "Exclude Times",
-      component: ExcludeTimes,
-    },
-    {
-      title: "Filter dates",
-      component: FilterDates,
-    },
-    {
-      title: "Filter times",
-      component: FilterTimes,
-    },
-    {
-      title: "Fixed height of Calendar",
-      component: FixedCalendar,
-    },
-    {
-      title: "Get raw input value on change",
-      component: RawChange,
-    },
-    {
-      title: "Highlight dates",
-      component: HighlightDates,
-    },
-    {
-      title: "Highlight dates with custom class names and ranges",
-      component: HighlightDatesRanges,
-    },
-    {
-      title: "Holiday dates",
-      component: HolidayDates,
-    },
-    {
-      title: "Include dates",
-      component: IncludeDates,
-    },
-    {
-      title: "Include date intervals",
-      component: IncludeDateIntervals,
-    },
-    {
-      title: "Include Months in Month Picker",
-      component: IncludeDatesMonthPicker,
-    },
-    {
-      title: "Include Times",
-      component: IncludeTimes,
-    },
-    {
-      title: "Inject Specific Times",
-      component: InjectTimes,
-    },
-    {
-      title: "Inline version",
-      component: Inline,
-    },
-    {
-      title: "Button to show Inline version",
-      component: InlineVisible,
-    },
-    {
-      title: "Input time",
-      component: TimeInput,
-    },
-    {
-      title: "Locale",
-      component: Locale,
-    },
-    {
-      title: "Locale with time",
-      component: LocaleWithTime,
-    },
-    {
-      title: "Locale without global variables",
-      component: LocaleWithoutGlobalVariable,
-    },
-    {
-      title: "Min date",
-      component: MinDate,
-    },
-    {
-      title: "Max date",
-      component: MaxDate,
-    },
-    {
-      title: "Month Picker",
-      component: MonthPicker,
-    },
-    {
-      title: "Month Picker with Full Name",
-      component: monthPickerFullName,
-    },
-    {
-      title: "Month Picker Two Columns Layout",
-      component: monthPickerTwoColumns,
-    },
-    {
-      title: "Month Picker Four Columns Layout",
-      component: monthPickerFourColumns,
-    },
-    {
-      title: "Month dropdown",
-      component: MonthDropdown,
-    },
-    {
-      title: "Month dropdown short month",
-      component: MonthDropdownShort,
-    },
-    {
-      title: "MonthYear dropdown",
-      component: MonthYearDropdown,
-    },
-    {
-      title: "Multiple months",
-      component: MultiMonth,
-    },
-    {
-      title: "Multiple months with year dropdown",
-      component: MultiMonthDropdown,
-    },
-    {
-      title: "Multiple months inline",
-      component: MultiMonthInline,
-    },
-    {
-      title: "No Anchor Arrow",
-      component: NoAnchorArrow,
-    },
-    {
-      title: "onBlur callbacks in console",
-      component: OnBlurCallbacks,
-    },
-    {
-      title: "Open to date",
-      component: OpenToDate,
-    },
-    {
-      title: "Placeholder text",
-      component: PlaceholderText,
-    },
-    {
-      title: "Portal version",
-      component: Portal,
-    },
-    {
-      title: "Portal by id",
-      description:
-        "If the provided portalId cannot be found in the dom, one will be created by default with that id.",
-      component: PortalById,
-    },
-    {
-      title: "Portal version with portal by id",
-      description:
-        "If the provided portalId cannot be found in the dom, one will be created by default with that id.",
-      component: WithPortalById,
-    },
-    {
-      title: "Quarter Picker",
-      component: QuarterPicker,
-    },
-    {
-      title: "Range Month Picker",
-      component: RangeMonthPicker,
-    },
-    {
-      title: "Range Month Picker for one month picker",
-      component: RangeMonthPickerSelectsRange,
-    },
-    {
-      title: "Range Quarter Picker",
-      component: RangeQuarterPicker,
-    },
-    {
-      title: "Range Quarter Picker for one quarter picker",
-      component: RangeQuarterPickerSelectsRange,
-    },
-    {
-      title: "Range Swap Range",
-      description:
-        "Swap the start and end date if the end date is before the start date in a pick sequence.",
-      component: SwapRange,
-    },
-    {
-      title: "Read only datepicker",
-      component: ReadOnly,
-    },
-    {
-      title: "Select Time",
-      component: ShowTime,
-    },
-    {
-      title: "Select Time Only",
-      component: ShowTimeOnly,
-    },
-    {
-      title: "Hide Time Caption",
-      component: HideTimeCaption,
-    },
-    {
-      title: "Show previous months",
-      component: MultiMonthPrevious,
-    },
-    {
-      title: "Specific date range",
-      component: SpecificDateRange,
-    },
-    {
-      title: "Specific Time Range",
-      component: ExcludeTimePeriod,
-    },
-    {
-      title: "Select multiple dates",
-      component: SelectsMultiple,
-    },
-    {
-      title: "Select multiple months",
-      component: SelectsMultipleMonths,
-    },
-    {
-      title: "Strict parsing",
-      component: StrictParsing,
-    },
-    {
-      title: "TabIndex",
-      component: TabIndex,
-    },
-    {
-      title: "Today button",
-      component: Today,
-    },
-    {
-      title: "Year Picker",
-      component: YearPicker,
-    },
-    {
-      title: "Range Year Picker",
-      component: RangeYearPicker,
-    },
-    {
-      title: "Range Year Picker for one datepicker",
-      component: RangeYearPickerSelectsRange,
-    },
-    {
-      title: "Year dropdown",
-      component: YearDropdown,
-    },
-    {
-      title: "Year select dropdown",
-      component: YearSelectDropdown,
-    },
-    {
-      title: "Year item number",
-      component: YearItemNumber,
-    },
-    {
-      title: "Calendar Start day",
-      component: CalendarStartDay,
-    },
-    {
-      title: "Week Picker",
-      component: WeekPicker,
-    },
-    {
-      title: "Exclude Weeks",
-      component: ExcludeWeeks,
-    },
-    {
-      title: "External Form",
-      component: ExternalForm,
-    },
-  ];
-
-  handleAnchorClick = (e, id) => {
-    e.preventDefault();
-    window.history.replaceState(null, document.title, `#${id}`);
-    document
-      .getElementById(id)
-      .scrollIntoView({ behavior: "smooth", block: "start" });
-  };
-
-  render() {
-    return (
-      <>
-        <h1>Examples</h1>
-        <ul className="examples__navigation">
-          {this.examples.map((example) => (
-            <li
-              className="examples__navigation-item"
-              key={`link-${example.title}`}
-            >
-              <a
-                href={`#example-${slugify(example.title, { lower: true })}`}
-                onClick={(e) =>
-                  this.handleAnchorClick(
-                    e,
-                    `example-${slugify(example.title, { lower: true })}`,
-                  )
-                }
-              >
-                {example.title}
-              </a>
-            </li>
-          ))}
-        </ul>
-        <div className="examples">
-          {this.examples.map((example) => (
-            <CodeExampleComponent key={example.title} example={example} />
-          ))}
-        </div>
-      </>
-    );
-  }
-}
diff --git a/docs-site/src/components/Examples/index.tsx b/docs-site/src/components/Examples/index.tsx
new file mode 100644
index 0000000000..792ee4afc3
--- /dev/null
+++ b/docs-site/src/components/Examples/index.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import hljs from "highlight.js/lib/core";
+import hljsJavaScriptLanguage from "highlight.js/lib/languages/javascript";
+import slugify from "slugify";
+import CodeExampleComponent from "../Example/index.jsx";
+
+import "./style.scss";
+import "react-datepicker/dist/react-datepicker.css";
+import { EXAMPLE_CONFIG } from './config.js';
+
+export default class exampleComponents extends React.Component {
+  componentDidMount() {
+    hljs.registerLanguage("javascript", hljsJavaScriptLanguage);
+    hljs.highlightAll();
+  }
+
+  handleAnchorClick = (e: React.MouseEvent, id: string): void => {
+    e.preventDefault();
+    window.history.replaceState(null, document.title, `#${id}`);
+    document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
+  };
+
+  render() {
+    return (
+      <>
+        <h1>Examples</h1>
+        <ul className="examples__navigation">
+          {EXAMPLE_CONFIG.map((example) => (
+            <li
+              className="examples__navigation-item"
+              key={`link-${example.title}`}
+            >
+              <a
+                href={`#example-${slugify(example.title, { lower: true })}`}
+                onClick={(e) =>
+                  this.handleAnchorClick(
+                    e,
+                    `example-${slugify(example.title, { lower: true })}`,
+                  )
+                }
+              >
+                {example.title}
+              </a>
+            </li>
+          ))}
+        </ul>
+        <div className="examples">
+          {EXAMPLE_CONFIG.map((example) => (
+            <CodeExampleComponent key={example.title} example={example} />
+          ))}
+        </div>
+      </>
+    );
+  }
+}
diff --git a/docs-site/src/components/Examples/reset.scss b/docs-site/src/components/Examples/reset.scss
index 04a683bf25..72f4a5c1ad 100644
--- a/docs-site/src/components/Examples/reset.scss
+++ b/docs-site/src/components/Examples/reset.scss
@@ -114,10 +114,10 @@ blockquote {
   quotes: none;
 }
 
-q:before,
-q:after,
-blockquote:before,
-blockquote:after {
+q::before,
+q::after,
+blockquote::before,
+blockquote::after {
   content: "";
   content: none;
 }
diff --git a/docs-site/src/components/Examples/style.scss b/docs-site/src/components/Examples/style.scss
index cb7ad5e36c..9f3fa05280 100644
--- a/docs-site/src/components/Examples/style.scss
+++ b/docs-site/src/components/Examples/style.scss
@@ -67,6 +67,7 @@ strong {
 
 .wrapper {
   @extend %container-styling;
+
   padding: 20px;
 }
 
diff --git a/docs-site/src/examples/calendarContainer.js b/docs-site/src/examples/js/calendarContainer.js
similarity index 99%
rename from docs-site/src/examples/calendarContainer.js
rename to docs-site/src/examples/js/calendarContainer.js
index 5bb2563024..813d2fbc34 100644
--- a/docs-site/src/examples/calendarContainer.js
+++ b/docs-site/src/examples/js/calendarContainer.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   const MyContainer = ({ className, children }) => {
     return (
       <div style={{ padding: "16px", background: "#216ba5", color: "#fff" }}>
@@ -12,6 +13,7 @@
       </div>
     );
   };
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/calendarIcon.js b/docs-site/src/examples/js/calendarIcon.js
similarity index 99%
rename from docs-site/src/examples/calendarIcon.js
rename to docs-site/src/examples/js/calendarIcon.js
index e94873b8d3..8b88b36655 100644
--- a/docs-site/src/examples/calendarIcon.js
+++ b/docs-site/src/examples/js/calendarIcon.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       showIcon
diff --git a/docs-site/src/examples/calendarIconExternal.js b/docs-site/src/examples/js/calendarIconExternal.js
similarity index 99%
rename from docs-site/src/examples/calendarIconExternal.js
rename to docs-site/src/examples/js/calendarIconExternal.js
index f3e6f6b26d..f037967d08 100644
--- a/docs-site/src/examples/calendarIconExternal.js
+++ b/docs-site/src/examples/js/calendarIconExternal.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       showIcon
diff --git a/docs-site/src/examples/calendarIconSvgIcon.js b/docs-site/src/examples/js/calendarIconSvgIcon.js
similarity index 99%
rename from docs-site/src/examples/calendarIconSvgIcon.js
rename to docs-site/src/examples/js/calendarIconSvgIcon.js
index ffd88f8bc3..f9eefbfa03 100644
--- a/docs-site/src/examples/calendarIconSvgIcon.js
+++ b/docs-site/src/examples/js/calendarIconSvgIcon.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       showIcon
diff --git a/docs-site/src/examples/calendarStartDay.js b/docs-site/src/examples/js/calendarStartDay.js
similarity index 99%
rename from docs-site/src/examples/calendarStartDay.js
rename to docs-site/src/examples/js/calendarStartDay.js
index 9552124d92..15c2f30113 100644
--- a/docs-site/src/examples/calendarStartDay.js
+++ b/docs-site/src/examples/js/calendarStartDay.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/children.js b/docs-site/src/examples/js/children.js
similarity index 99%
rename from docs-site/src/examples/children.js
rename to docs-site/src/examples/js/children.js
index c7b8475250..330230b1e6 100644
--- a/docs-site/src/examples/children.js
+++ b/docs-site/src/examples/js/children.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker selected={startDate} onChange={(date) => setStartDate(date)}>
       <div style={{ color: "red" }}>Don't forget to check the weather!</div>
diff --git a/docs-site/src/examples/clearInput.js b/docs-site/src/examples/js/clearInput.js
similarity index 99%
rename from docs-site/src/examples/clearInput.js
rename to docs-site/src/examples/js/clearInput.js
index 759304f4f6..3cd1393e3f 100644
--- a/docs-site/src/examples/clearInput.js
+++ b/docs-site/src/examples/js/clearInput.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/closeOnScroll.js b/docs-site/src/examples/js/closeOnScroll.js
similarity index 87%
rename from docs-site/src/examples/closeOnScroll.js
rename to docs-site/src/examples/js/closeOnScroll.js
index 4deabe1d90..8f010ea572 100644
--- a/docs-site/src/examples/closeOnScroll.js
+++ b/docs-site/src/examples/js/closeOnScroll.js
@@ -1,8 +1,9 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
-      closeOnScroll={true}
+      closeOnScroll
       selected={startDate}
       onChange={(date) => setStartDate(date)}
     />
diff --git a/docs-site/src/examples/closeOnScrollCallback.js b/docs-site/src/examples/js/closeOnScrollCallback.js
similarity index 99%
rename from docs-site/src/examples/closeOnScrollCallback.js
rename to docs-site/src/examples/js/closeOnScrollCallback.js
index d9a3576d34..fd740a1ba5 100644
--- a/docs-site/src/examples/closeOnScrollCallback.js
+++ b/docs-site/src/examples/js/closeOnScrollCallback.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       closeOnScroll={(e) => e.target === document}
diff --git a/docs-site/src/examples/configureFloatingUI.js b/docs-site/src/examples/js/configureFloatingUI.js
similarity index 99%
rename from docs-site/src/examples/configureFloatingUI.js
rename to docs-site/src/examples/js/configureFloatingUI.js
index eb8311fd73..b6e57b369e 100644
--- a/docs-site/src/examples/configureFloatingUI.js
+++ b/docs-site/src/examples/js/configureFloatingUI.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/customCalendarClassName.js b/docs-site/src/examples/js/customCalendarClassName.js
similarity index 99%
rename from docs-site/src/examples/customCalendarClassName.js
rename to docs-site/src/examples/js/customCalendarClassName.js
index 8e951036d7..d1d1c5590c 100644
--- a/docs-site/src/examples/customCalendarClassName.js
+++ b/docs-site/src/examples/js/customCalendarClassName.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/customClassName.js b/docs-site/src/examples/js/customClassName.js
similarity index 99%
rename from docs-site/src/examples/customClassName.js
rename to docs-site/src/examples/js/customClassName.js
index 11a3521e4c..d18a9a7128 100644
--- a/docs-site/src/examples/customClassName.js
+++ b/docs-site/src/examples/js/customClassName.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/customDateFormat.js b/docs-site/src/examples/js/customDateFormat.js
similarity index 99%
rename from docs-site/src/examples/customDateFormat.js
rename to docs-site/src/examples/js/customDateFormat.js
index 562735b69b..a5110ac583 100644
--- a/docs-site/src/examples/customDateFormat.js
+++ b/docs-site/src/examples/js/customDateFormat.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       dateFormat="yyyy/MM/dd"
diff --git a/docs-site/src/examples/customDayClassName.js b/docs-site/src/examples/js/customDayClassName.js
similarity index 99%
rename from docs-site/src/examples/customDayClassName.js
rename to docs-site/src/examples/js/customDayClassName.js
index 989a7cbc9e..2c0178843e 100644
--- a/docs-site/src/examples/customDayClassName.js
+++ b/docs-site/src/examples/js/customDayClassName.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/customInput.js b/docs-site/src/examples/js/customInput.js
similarity index 99%
rename from docs-site/src/examples/customInput.js
rename to docs-site/src/examples/js/customInput.js
index 7312003114..2327699d18 100644
--- a/docs-site/src/examples/customInput.js
+++ b/docs-site/src/examples/js/customInput.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   const ExampleCustomInput = forwardRef(
     ({ value, onClick, className }, ref) => (
       <button className={className} onClick={onClick} ref={ref}>
@@ -7,6 +8,7 @@
       </button>
     ),
   );
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/customTimeClassName.js b/docs-site/src/examples/js/customTimeClassName.js
similarity index 90%
rename from docs-site/src/examples/customTimeClassName.js
rename to docs-site/src/examples/js/customTimeClassName.js
index 8c53ea413e..253f019215 100644
--- a/docs-site/src/examples/customTimeClassName.js
+++ b/docs-site/src/examples/js/customTimeClassName.js
@@ -1,7 +1,7 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
 
-  let handleColor = (time) => {
+  const handleColor = (time) => {
     return time.getHours() > 12 ? "text-success" : "text-error";
   };
 
diff --git a/docs-site/src/examples/customTimeInput.js b/docs-site/src/examples/js/customTimeInput.js
similarity index 99%
rename from docs-site/src/examples/customTimeInput.js
rename to docs-site/src/examples/js/customTimeInput.js
index 4cb543ed05..8288b5f3aa 100644
--- a/docs-site/src/examples/customTimeInput.js
+++ b/docs-site/src/examples/js/customTimeInput.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   const ExampleCustomTimeInput = ({ value, onChange }) => (
     <input
       value={value}
@@ -8,6 +9,7 @@
       style={{ border: "solid 1px pink" }}
     />
   );
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/dateRange.js b/docs-site/src/examples/js/dateRange.js
similarity index 99%
rename from docs-site/src/examples/dateRange.js
rename to docs-site/src/examples/js/dateRange.js
index 96e2c887f2..110fe222ea 100644
--- a/docs-site/src/examples/dateRange.js
+++ b/docs-site/src/examples/js/dateRange.js
@@ -1,6 +1,7 @@
 () => {
   const [startDate, setStartDate] = useState(new Date("2014/02/08"));
   const [endDate, setEndDate] = useState(new Date("2014/02/10"));
+
   return (
     <>
       <DatePicker
diff --git a/docs-site/src/examples/dateRangeInputWithClearButton.js b/docs-site/src/examples/js/dateRangeInputWithClearButton.js
similarity index 91%
rename from docs-site/src/examples/dateRangeInputWithClearButton.js
rename to docs-site/src/examples/js/dateRangeInputWithClearButton.js
index edd6199709..b17d9f4170 100644
--- a/docs-site/src/examples/dateRangeInputWithClearButton.js
+++ b/docs-site/src/examples/js/dateRangeInputWithClearButton.js
@@ -1,14 +1,15 @@
 () => {
   const [dateRange, setDateRange] = useState([null, null]);
   const [startDate, endDate] = dateRange;
+
   return (
     <DatePicker
-      selectsRange={true}
       startDate={startDate}
       endDate={endDate}
       onChange={(update) => {
         setDateRange(update);
       }}
+      selectsRange
       isClearable={true}
     />
   );
diff --git a/docs-site/src/examples/dateRangeWithPortal.js b/docs-site/src/examples/js/dateRangeWithPortal.js
similarity index 91%
rename from docs-site/src/examples/dateRangeWithPortal.js
rename to docs-site/src/examples/js/dateRangeWithPortal.js
index fa7f5dbed5..22af3c5628 100644
--- a/docs-site/src/examples/dateRangeWithPortal.js
+++ b/docs-site/src/examples/js/dateRangeWithPortal.js
@@ -1,14 +1,15 @@
 () => {
   const [dateRange, setDateRange] = useState([null, null]);
   const [startDate, endDate] = dateRange;
+
   return (
     <DatePicker
-      selectsRange={true}
       startDate={startDate}
       endDate={endDate}
       onChange={(update) => {
         setDateRange(update);
       }}
+      selectsRange
       withPortal
     />
   );
diff --git a/docs-site/src/examples/dateRangeWithShowDisabledNavigation.js b/docs-site/src/examples/js/dateRangeWithShowDisabledNavigation.js
similarity index 99%
rename from docs-site/src/examples/dateRangeWithShowDisabledNavigation.js
rename to docs-site/src/examples/js/dateRangeWithShowDisabledNavigation.js
index 1f574fc8e0..f2cb355f45 100644
--- a/docs-site/src/examples/dateRangeWithShowDisabledNavigation.js
+++ b/docs-site/src/examples/js/dateRangeWithShowDisabledNavigation.js
@@ -1,11 +1,13 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
   const [endDate, setEndDate] = useState(null);
+
   const onChange = (dates) => {
     const [start, end] = dates;
     setStartDate(start);
     setEndDate(end);
   };
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/default.js b/docs-site/src/examples/js/default.js
similarity index 99%
rename from docs-site/src/examples/default.js
rename to docs-site/src/examples/js/default.js
index d3dc5e291d..89a44d0e49 100644
--- a/docs-site/src/examples/default.js
+++ b/docs-site/src/examples/js/default.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
   );
diff --git a/docs-site/src/examples/disabled.js b/docs-site/src/examples/js/disabled.js
similarity index 99%
rename from docs-site/src/examples/disabled.js
rename to docs-site/src/examples/js/disabled.js
index 237316a241..91e23654d5 100644
--- a/docs-site/src/examples/disabled.js
+++ b/docs-site/src/examples/js/disabled.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(null);
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/disabledKeyboardNavigation.js b/docs-site/src/examples/js/disabledKeyboardNavigation.js
similarity index 99%
rename from docs-site/src/examples/disabledKeyboardNavigation.js
rename to docs-site/src/examples/js/disabledKeyboardNavigation.js
index e8e8b4942d..a598aa5dcc 100644
--- a/docs-site/src/examples/disabledKeyboardNavigation.js
+++ b/docs-site/src/examples/js/disabledKeyboardNavigation.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(null);
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/dontCloseOnSelect.js b/docs-site/src/examples/js/dontCloseOnSelect.js
similarity index 99%
rename from docs-site/src/examples/dontCloseOnSelect.js
rename to docs-site/src/examples/js/dontCloseOnSelect.js
index 04807cad1e..94ec19d402 100644
--- a/docs-site/src/examples/dontCloseOnSelect.js
+++ b/docs-site/src/examples/js/dontCloseOnSelect.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/excludeDateIntervals.js b/docs-site/src/examples/js/excludeDateIntervals.js
similarity index 99%
rename from docs-site/src/examples/excludeDateIntervals.js
rename to docs-site/src/examples/js/excludeDateIntervals.js
index 616457e895..ee2f932589 100644
--- a/docs-site/src/examples/excludeDateIntervals.js
+++ b/docs-site/src/examples/js/excludeDateIntervals.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/excludeDates.js b/docs-site/src/examples/js/excludeDates.js
similarity index 99%
rename from docs-site/src/examples/excludeDates.js
rename to docs-site/src/examples/js/excludeDates.js
index 5934b2412a..31fa33274a 100644
--- a/docs-site/src/examples/excludeDates.js
+++ b/docs-site/src/examples/js/excludeDates.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/excludeDatesMonthPicker.js b/docs-site/src/examples/js/excludeDatesMonthPicker.js
similarity index 99%
rename from docs-site/src/examples/excludeDatesMonthPicker.js
rename to docs-site/src/examples/js/excludeDatesMonthPicker.js
index 13a0a0a256..3c409863a9 100644
--- a/docs-site/src/examples/excludeDatesMonthPicker.js
+++ b/docs-site/src/examples/js/excludeDatesMonthPicker.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date("2024-08-01"));
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/excludeDatesRangeMonthPicker.js b/docs-site/src/examples/js/excludeDatesRangeMonthPicker.js
similarity index 100%
rename from docs-site/src/examples/excludeDatesRangeMonthPicker.js
rename to docs-site/src/examples/js/excludeDatesRangeMonthPicker.js
diff --git a/docs-site/src/examples/excludeDatesWithMessage.js b/docs-site/src/examples/js/excludeDatesWithMessage.js
similarity index 99%
rename from docs-site/src/examples/excludeDatesWithMessage.js
rename to docs-site/src/examples/js/excludeDatesWithMessage.js
index 59ab497926..5879d0caa8 100644
--- a/docs-site/src/examples/excludeDatesWithMessage.js
+++ b/docs-site/src/examples/js/excludeDatesWithMessage.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/excludeTimePeriod.js b/docs-site/src/examples/js/excludeTimePeriod.js
similarity index 99%
rename from docs-site/src/examples/excludeTimePeriod.js
rename to docs-site/src/examples/js/excludeTimePeriod.js
index a10233b705..9cce5c97b4 100644
--- a/docs-site/src/examples/excludeTimePeriod.js
+++ b/docs-site/src/examples/js/excludeTimePeriod.js
@@ -2,6 +2,7 @@
   const [startDate, setStartDate] = useState(
     setHours(setMinutes(new Date(), 30), 17),
   );
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/excludeTimes.js b/docs-site/src/examples/js/excludeTimes.js
similarity index 99%
rename from docs-site/src/examples/excludeTimes.js
rename to docs-site/src/examples/js/excludeTimes.js
index 2e9271632a..f288f28069 100644
--- a/docs-site/src/examples/excludeTimes.js
+++ b/docs-site/src/examples/js/excludeTimes.js
@@ -2,6 +2,7 @@
   const [startDate, setStartDate] = useState(
     setHours(setMinutes(new Date(), 30), 16),
   );
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/excludeWeeks.js b/docs-site/src/examples/js/excludeWeeks.js
similarity index 99%
rename from docs-site/src/examples/excludeWeeks.js
rename to docs-site/src/examples/js/excludeWeeks.js
index 0694be1b67..f28fef537f 100644
--- a/docs-site/src/examples/excludeWeeks.js
+++ b/docs-site/src/examples/js/excludeWeeks.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date("2021/02/22"));
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/externalForm.js b/docs-site/src/examples/js/externalForm.js
similarity index 86%
rename from docs-site/src/examples/externalForm.js
rename to docs-site/src/examples/js/externalForm.js
index 3b1e906a8a..2f981bb92b 100644
--- a/docs-site/src/examples/externalForm.js
+++ b/docs-site/src/examples/js/externalForm.js
@@ -10,7 +10,7 @@
         form="external-form"
       />
       <form id="external-form">
-        <input type="submit" />
+        <button type="submit">Submit</button>
       </form>
     </>
   );
diff --git a/docs-site/src/examples/filterDates.js b/docs-site/src/examples/js/filterDates.js
similarity index 99%
rename from docs-site/src/examples/filterDates.js
rename to docs-site/src/examples/js/filterDates.js
index 9eb67a0084..89cbba8316 100644
--- a/docs-site/src/examples/filterDates.js
+++ b/docs-site/src/examples/js/filterDates.js
@@ -1,9 +1,11 @@
 () => {
   const [startDate, setStartDate] = useState(null);
+
   const isWeekday = (date) => {
     const day = getDay(date);
     return day !== 0 && day !== 6;
   };
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/filterTimes.js b/docs-site/src/examples/js/filterTimes.js
similarity index 99%
rename from docs-site/src/examples/filterTimes.js
rename to docs-site/src/examples/js/filterTimes.js
index 3d95eb584b..a90ab49bdd 100644
--- a/docs-site/src/examples/filterTimes.js
+++ b/docs-site/src/examples/js/filterTimes.js
@@ -2,12 +2,14 @@
   const [startDate, setStartDate] = useState(
     setHours(setMinutes(new Date(), 0), 9),
   );
+
   const filterPassedTime = (time) => {
     const currentDate = new Date();
     const selectedDate = new Date(time);
 
     return currentDate.getTime() < selectedDate.getTime();
   };
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/fixedCalendar.js b/docs-site/src/examples/js/fixedCalendar.js
similarity index 99%
rename from docs-site/src/examples/fixedCalendar.js
rename to docs-site/src/examples/js/fixedCalendar.js
index 30eb818e87..dfc34516cc 100644
--- a/docs-site/src/examples/fixedCalendar.js
+++ b/docs-site/src/examples/js/fixedCalendar.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(null);
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/hideTimeCaption.js b/docs-site/src/examples/js/hideTimeCaption.js
similarity index 99%
rename from docs-site/src/examples/hideTimeCaption.js
rename to docs-site/src/examples/js/hideTimeCaption.js
index 214c7420ad..37537f7854 100644
--- a/docs-site/src/examples/hideTimeCaption.js
+++ b/docs-site/src/examples/js/hideTimeCaption.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/highlightDates.js b/docs-site/src/examples/js/highlightDates.js
similarity index 99%
rename from docs-site/src/examples/highlightDates.js
rename to docs-site/src/examples/js/highlightDates.js
index 27bc91c8c8..9299eaf0c5 100644
--- a/docs-site/src/examples/highlightDates.js
+++ b/docs-site/src/examples/js/highlightDates.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/highlightDatesRanges.js b/docs-site/src/examples/js/highlightDatesRanges.js
similarity index 99%
rename from docs-site/src/examples/highlightDatesRanges.js
rename to docs-site/src/examples/js/highlightDatesRanges.js
index 9035e1318b..780aa57fa6 100644
--- a/docs-site/src/examples/highlightDatesRanges.js
+++ b/docs-site/src/examples/js/highlightDatesRanges.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   const highlightWithRanges = [
     {
       "react-datepicker__day--highlighted-custom-1": [
@@ -18,6 +19,7 @@
       ],
     },
   ];
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/holidayDates.js b/docs-site/src/examples/js/holidayDates.js
similarity index 99%
rename from docs-site/src/examples/holidayDates.js
rename to docs-site/src/examples/js/holidayDates.js
index 32c667ecff..64a0f18e8d 100644
--- a/docs-site/src/examples/holidayDates.js
+++ b/docs-site/src/examples/js/holidayDates.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/includeDateIntervals.js b/docs-site/src/examples/js/includeDateIntervals.js
similarity index 99%
rename from docs-site/src/examples/includeDateIntervals.js
rename to docs-site/src/examples/js/includeDateIntervals.js
index 3a22fa9222..095ba8ad3e 100644
--- a/docs-site/src/examples/includeDateIntervals.js
+++ b/docs-site/src/examples/js/includeDateIntervals.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(null);
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/includeDates.js b/docs-site/src/examples/js/includeDates.js
similarity index 99%
rename from docs-site/src/examples/includeDates.js
rename to docs-site/src/examples/js/includeDates.js
index d4b177668c..0a8d009227 100644
--- a/docs-site/src/examples/includeDates.js
+++ b/docs-site/src/examples/js/includeDates.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(null);
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/includeDatesMonthPicker.js b/docs-site/src/examples/js/includeDatesMonthPicker.js
similarity index 99%
rename from docs-site/src/examples/includeDatesMonthPicker.js
rename to docs-site/src/examples/js/includeDatesMonthPicker.js
index 4257e5bd83..6606df85d8 100644
--- a/docs-site/src/examples/includeDatesMonthPicker.js
+++ b/docs-site/src/examples/js/includeDatesMonthPicker.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(1661990400000);
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/includeTimes.js b/docs-site/src/examples/js/includeTimes.js
similarity index 99%
rename from docs-site/src/examples/includeTimes.js
rename to docs-site/src/examples/js/includeTimes.js
index 5ceece61e0..af3c2cae4a 100644
--- a/docs-site/src/examples/includeTimes.js
+++ b/docs-site/src/examples/js/includeTimes.js
@@ -2,6 +2,7 @@
   const [startDate, setStartDate] = useState(
     setHours(setMinutes(new Date(), 30), 16),
   );
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/injectTimes.js b/docs-site/src/examples/js/injectTimes.js
similarity index 99%
rename from docs-site/src/examples/injectTimes.js
rename to docs-site/src/examples/js/injectTimes.js
index eb83aff185..ef74376920 100644
--- a/docs-site/src/examples/injectTimes.js
+++ b/docs-site/src/examples/js/injectTimes.js
@@ -2,6 +2,7 @@
   const [startDate, setStartDate] = useState(
     setHours(setMinutes(new Date(), 30), 16),
   );
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/inline.js b/docs-site/src/examples/js/inline.js
similarity index 99%
rename from docs-site/src/examples/inline.js
rename to docs-site/src/examples/js/inline.js
index 0034f5dcb3..a568491571 100644
--- a/docs-site/src/examples/inline.js
+++ b/docs-site/src/examples/js/inline.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/inlineVisible.js b/docs-site/src/examples/js/inlineVisible.js
similarity index 99%
rename from docs-site/src/examples/inlineVisible.js
rename to docs-site/src/examples/js/inlineVisible.js
index 9649f919d7..cd5e9786ef 100644
--- a/docs-site/src/examples/inlineVisible.js
+++ b/docs-site/src/examples/js/inlineVisible.js
@@ -1,14 +1,17 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
   const [isOpen, setIsOpen] = useState(false);
+
   const handleChange = (e) => {
     setIsOpen(!isOpen);
     setStartDate(e);
   };
+
   const handleClick = (e) => {
     e.preventDefault();
     setIsOpen(!isOpen);
   };
+
   return (
     <>
       <button className="example-custom-input" onClick={handleClick}>
diff --git a/docs-site/src/examples/locale.js b/docs-site/src/examples/js/locale.js
similarity index 99%
rename from docs-site/src/examples/locale.js
rename to docs-site/src/examples/js/locale.js
index 9761958de9..e12b700df6 100644
--- a/docs-site/src/examples/locale.js
+++ b/docs-site/src/examples/js/locale.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/localeWithTime.js b/docs-site/src/examples/js/localeWithTime.js
similarity index 99%
rename from docs-site/src/examples/localeWithTime.js
rename to docs-site/src/examples/js/localeWithTime.js
index 9e6338eb66..6c8b0d928d 100644
--- a/docs-site/src/examples/localeWithTime.js
+++ b/docs-site/src/examples/js/localeWithTime.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/localeWithoutGlobalVariable.js b/docs-site/src/examples/js/localeWithoutGlobalVariable.js
similarity index 99%
rename from docs-site/src/examples/localeWithoutGlobalVariable.js
rename to docs-site/src/examples/js/localeWithoutGlobalVariable.js
index 2f03ebb755..1ea3591443 100644
--- a/docs-site/src/examples/localeWithoutGlobalVariable.js
+++ b/docs-site/src/examples/js/localeWithoutGlobalVariable.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/maxDate.js b/docs-site/src/examples/js/maxDate.js
similarity index 99%
rename from docs-site/src/examples/maxDate.js
rename to docs-site/src/examples/js/maxDate.js
index bbe11c0c12..f9b9a0ae99 100644
--- a/docs-site/src/examples/maxDate.js
+++ b/docs-site/src/examples/js/maxDate.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/minDate.js b/docs-site/src/examples/js/minDate.js
similarity index 99%
rename from docs-site/src/examples/minDate.js
rename to docs-site/src/examples/js/minDate.js
index 3183efe325..b1be62f3f9 100644
--- a/docs-site/src/examples/minDate.js
+++ b/docs-site/src/examples/js/minDate.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(null);
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/monthDropdown.js b/docs-site/src/examples/js/monthDropdown.js
similarity index 99%
rename from docs-site/src/examples/monthDropdown.js
rename to docs-site/src/examples/js/monthDropdown.js
index 4c0b8421d1..12eaab2444 100644
--- a/docs-site/src/examples/monthDropdown.js
+++ b/docs-site/src/examples/js/monthDropdown.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/monthDropdownShort.js b/docs-site/src/examples/js/monthDropdownShort.js
similarity index 99%
rename from docs-site/src/examples/monthDropdownShort.js
rename to docs-site/src/examples/js/monthDropdownShort.js
index 2efd131b3e..e073b74e81 100644
--- a/docs-site/src/examples/monthDropdownShort.js
+++ b/docs-site/src/examples/js/monthDropdownShort.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/monthPicker.js b/docs-site/src/examples/js/monthPicker.js
similarity index 99%
rename from docs-site/src/examples/monthPicker.js
rename to docs-site/src/examples/js/monthPicker.js
index d6274f9743..e72910dec7 100644
--- a/docs-site/src/examples/monthPicker.js
+++ b/docs-site/src/examples/js/monthPicker.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/monthPickerFourColumns.js b/docs-site/src/examples/js/monthPickerFourColumns.js
similarity index 99%
rename from docs-site/src/examples/monthPickerFourColumns.js
rename to docs-site/src/examples/js/monthPickerFourColumns.js
index 235e4a3eb8..9ad3c67749 100644
--- a/docs-site/src/examples/monthPickerFourColumns.js
+++ b/docs-site/src/examples/js/monthPickerFourColumns.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/monthPickerFullName.js b/docs-site/src/examples/js/monthPickerFullName.js
similarity index 99%
rename from docs-site/src/examples/monthPickerFullName.js
rename to docs-site/src/examples/js/monthPickerFullName.js
index 1d424bab41..244701efba 100644
--- a/docs-site/src/examples/monthPickerFullName.js
+++ b/docs-site/src/examples/js/monthPickerFullName.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/monthPickerTwoColumns.js b/docs-site/src/examples/js/monthPickerTwoColumns.js
similarity index 99%
rename from docs-site/src/examples/monthPickerTwoColumns.js
rename to docs-site/src/examples/js/monthPickerTwoColumns.js
index d2d41d0d43..0aeee4cf0f 100644
--- a/docs-site/src/examples/monthPickerTwoColumns.js
+++ b/docs-site/src/examples/js/monthPickerTwoColumns.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/monthYearDropdown.js b/docs-site/src/examples/js/monthYearDropdown.js
similarity index 99%
rename from docs-site/src/examples/monthYearDropdown.js
rename to docs-site/src/examples/js/monthYearDropdown.js
index 664f5d4ecc..87ea8d62b6 100644
--- a/docs-site/src/examples/monthYearDropdown.js
+++ b/docs-site/src/examples/js/monthYearDropdown.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/multiMonth.js b/docs-site/src/examples/js/multiMonth.js
similarity index 99%
rename from docs-site/src/examples/multiMonth.js
rename to docs-site/src/examples/js/multiMonth.js
index 14245cb84d..ee339a764e 100644
--- a/docs-site/src/examples/multiMonth.js
+++ b/docs-site/src/examples/js/multiMonth.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/multiMonthDropdown.js b/docs-site/src/examples/js/multiMonthDropdown.js
similarity index 99%
rename from docs-site/src/examples/multiMonthDropdown.js
rename to docs-site/src/examples/js/multiMonthDropdown.js
index b9c5c4226c..7bfdef31ab 100644
--- a/docs-site/src/examples/multiMonthDropdown.js
+++ b/docs-site/src/examples/js/multiMonthDropdown.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/multiMonthInline.js b/docs-site/src/examples/js/multiMonthInline.js
similarity index 99%
rename from docs-site/src/examples/multiMonthInline.js
rename to docs-site/src/examples/js/multiMonthInline.js
index c612cde763..eece68b1ad 100644
--- a/docs-site/src/examples/multiMonthInline.js
+++ b/docs-site/src/examples/js/multiMonthInline.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/multiMonthPrevious.js b/docs-site/src/examples/js/multiMonthPrevious.js
similarity index 99%
rename from docs-site/src/examples/multiMonthPrevious.js
rename to docs-site/src/examples/js/multiMonthPrevious.js
index b68a657cbd..b6b01e5fa4 100644
--- a/docs-site/src/examples/multiMonthPrevious.js
+++ b/docs-site/src/examples/js/multiMonthPrevious.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/noAnchorArrow.js b/docs-site/src/examples/js/noAnchorArrow.js
similarity index 99%
rename from docs-site/src/examples/noAnchorArrow.js
rename to docs-site/src/examples/js/noAnchorArrow.js
index 0c66e1359b..6a8fa78baf 100644
--- a/docs-site/src/examples/noAnchorArrow.js
+++ b/docs-site/src/examples/js/noAnchorArrow.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       showPopperArrow={false}
diff --git a/docs-site/src/examples/onBlurCallbacks.js b/docs-site/src/examples/js/onBlurCallbacks.js
similarity index 99%
rename from docs-site/src/examples/onBlurCallbacks.js
rename to docs-site/src/examples/js/onBlurCallbacks.js
index 064af8dcf7..3a6c5d445b 100644
--- a/docs-site/src/examples/onBlurCallbacks.js
+++ b/docs-site/src/examples/js/onBlurCallbacks.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(null);
+
   const handleOnBlur = ({ target: { value } }) => {
     const date = new Date(value);
     if (isValid(date)) {
@@ -8,6 +9,7 @@
       console.log("value: %s", date);
     }
   };
+
   return (
     <DatePicker
       key="example9"
diff --git a/docs-site/src/examples/onCalendarOpenStateCallbacks.js b/docs-site/src/examples/js/onCalendarOpenStateCallbacks.js
similarity index 100%
rename from docs-site/src/examples/onCalendarOpenStateCallbacks.js
rename to docs-site/src/examples/js/onCalendarOpenStateCallbacks.js
diff --git a/docs-site/src/examples/openToDate.js b/docs-site/src/examples/js/openToDate.js
similarity index 99%
rename from docs-site/src/examples/openToDate.js
rename to docs-site/src/examples/js/openToDate.js
index a013629ef3..ae843c1cf3 100644
--- a/docs-site/src/examples/openToDate.js
+++ b/docs-site/src/examples/js/openToDate.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(null);
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/placeholderText.js b/docs-site/src/examples/js/placeholderText.js
similarity index 100%
rename from docs-site/src/examples/placeholderText.js
rename to docs-site/src/examples/js/placeholderText.js
diff --git a/docs-site/src/examples/portal.js b/docs-site/src/examples/js/portal.js
similarity index 99%
rename from docs-site/src/examples/portal.js
rename to docs-site/src/examples/js/portal.js
index bbc323322a..7488d78bf3 100644
--- a/docs-site/src/examples/portal.js
+++ b/docs-site/src/examples/js/portal.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/portalById.js b/docs-site/src/examples/js/portalById.js
similarity index 99%
rename from docs-site/src/examples/portalById.js
rename to docs-site/src/examples/js/portalById.js
index cebf037bda..3bcf13cf7e 100644
--- a/docs-site/src/examples/portalById.js
+++ b/docs-site/src/examples/js/portalById.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/quarterPicker.js b/docs-site/src/examples/js/quarterPicker.js
similarity index 99%
rename from docs-site/src/examples/quarterPicker.js
rename to docs-site/src/examples/js/quarterPicker.js
index 2282145530..15b597855c 100644
--- a/docs-site/src/examples/quarterPicker.js
+++ b/docs-site/src/examples/js/quarterPicker.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/rangeMonthPicker.js b/docs-site/src/examples/js/rangeMonthPicker.js
similarity index 99%
rename from docs-site/src/examples/rangeMonthPicker.js
rename to docs-site/src/examples/js/rangeMonthPicker.js
index 4ecaf1f62a..7138ca40e1 100644
--- a/docs-site/src/examples/rangeMonthPicker.js
+++ b/docs-site/src/examples/js/rangeMonthPicker.js
@@ -1,6 +1,7 @@
 () => {
   const [startDate, setStartDate] = useState(new Date("2014/02/08"));
   const [endDate, setEndDate] = useState(new Date("2014/04/08"));
+
   return (
     <>
       <DatePicker
diff --git a/docs-site/src/examples/rangeMonthPickerSelectsRange.js b/docs-site/src/examples/js/rangeMonthPickerSelectsRange.js
similarity index 100%
rename from docs-site/src/examples/rangeMonthPickerSelectsRange.js
rename to docs-site/src/examples/js/rangeMonthPickerSelectsRange.js
diff --git a/docs-site/src/examples/rangeQuarterPicker.js b/docs-site/src/examples/js/rangeQuarterPicker.js
similarity index 99%
rename from docs-site/src/examples/rangeQuarterPicker.js
rename to docs-site/src/examples/js/rangeQuarterPicker.js
index 1c96a593fe..8f55f2c5d5 100644
--- a/docs-site/src/examples/rangeQuarterPicker.js
+++ b/docs-site/src/examples/js/rangeQuarterPicker.js
@@ -1,6 +1,7 @@
 () => {
   const [startDate, setStartDate] = useState(new Date("2014/02/08"));
   const [endDate, setEndDate] = useState(new Date("2014/07/08"));
+
   return (
     <>
       <DatePicker
diff --git a/docs-site/src/examples/rangeQuarterPickerSelectsRange.js b/docs-site/src/examples/js/rangeQuarterPickerSelectsRange.js
similarity index 100%
rename from docs-site/src/examples/rangeQuarterPickerSelectsRange.js
rename to docs-site/src/examples/js/rangeQuarterPickerSelectsRange.js
diff --git a/docs-site/src/examples/rangeSwapRange.js b/docs-site/src/examples/js/rangeSwapRange.js
similarity index 99%
rename from docs-site/src/examples/rangeSwapRange.js
rename to docs-site/src/examples/js/rangeSwapRange.js
index d78e30da31..8fe5e3f8d7 100644
--- a/docs-site/src/examples/rangeSwapRange.js
+++ b/docs-site/src/examples/js/rangeSwapRange.js
@@ -1,11 +1,13 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
   const [endDate, setEndDate] = useState(null);
+
   const onChange = (dates) => {
     const [start, end] = dates;
     setStartDate(start);
     setEndDate(end);
   };
+
   return (
     <DatePicker
       swapRange
diff --git a/docs-site/src/examples/rangeYearPicker.js b/docs-site/src/examples/js/rangeYearPicker.js
similarity index 99%
rename from docs-site/src/examples/rangeYearPicker.js
rename to docs-site/src/examples/js/rangeYearPicker.js
index 0328cfe123..7eff1e879d 100644
--- a/docs-site/src/examples/rangeYearPicker.js
+++ b/docs-site/src/examples/js/rangeYearPicker.js
@@ -1,6 +1,7 @@
 () => {
   const [startDate, setStartDate] = useState(new Date("2014/02/08"));
   const [endDate, setEndDate] = useState(new Date("2024/04/08"));
+
   return (
     <>
       <DatePicker
diff --git a/docs-site/src/examples/rangeYearPickerSelectsRange.js b/docs-site/src/examples/js/rangeYearPickerSelectsRange.js
similarity index 100%
rename from docs-site/src/examples/rangeYearPickerSelectsRange.js
rename to docs-site/src/examples/js/rangeYearPickerSelectsRange.js
diff --git a/docs-site/src/examples/rawChange.js b/docs-site/src/examples/js/rawChange.js
similarity index 99%
rename from docs-site/src/examples/rawChange.js
rename to docs-site/src/examples/js/rawChange.js
index 6d37c40555..f72ae853c3 100644
--- a/docs-site/src/examples/rawChange.js
+++ b/docs-site/src/examples/js/rawChange.js
@@ -1,10 +1,12 @@
 () => {
   const [startDate, setStartDate] = useState(null);
+
   const handleChangeRaw = (value) => {
     if (value === "tomorrow") {
       setStartDate(addDays(new Date(), 1));
     }
   };
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/readOnly.js b/docs-site/src/examples/js/readOnly.js
similarity index 99%
rename from docs-site/src/examples/readOnly.js
rename to docs-site/src/examples/js/readOnly.js
index 09b65e4a15..44bb59dc66 100644
--- a/docs-site/src/examples/readOnly.js
+++ b/docs-site/src/examples/js/readOnly.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(null);
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/renderCustomDay.js b/docs-site/src/examples/js/renderCustomDay.js
similarity index 99%
rename from docs-site/src/examples/renderCustomDay.js
rename to docs-site/src/examples/js/renderCustomDay.js
index e3fe960224..bf0e69f0dd 100644
--- a/docs-site/src/examples/renderCustomDay.js
+++ b/docs-site/src/examples/js/renderCustomDay.js
@@ -1,9 +1,11 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   const renderDayContents = (day, date) => {
     const tooltipText = `Tooltip for date: ${date}`;
     return <span title={tooltipText}>{getDate(date)}</span>;
   };
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/renderCustomHeader.js b/docs-site/src/examples/js/renderCustomHeader.js
similarity index 91%
rename from docs-site/src/examples/renderCustomHeader.js
rename to docs-site/src/examples/js/renderCustomHeader.js
index d4216c737b..9aa0a239fc 100644
--- a/docs-site/src/examples/renderCustomHeader.js
+++ b/docs-site/src/examples/js/renderCustomHeader.js
@@ -1,7 +1,9 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   const years = range(1990, getYear(new Date()) + 1, 1);
-  const months = [
+
+  const MONTHS = [
     "January",
     "February",
     "March",
@@ -15,6 +17,7 @@
     "November",
     "December",
   ];
+
   return (
     <DatePicker
       renderCustomHeader={({
@@ -48,12 +51,12 @@
           </select>
 
           <select
-            value={months[getMonth(date)]}
+            value={MONTHS[getMonth(date)]}
             onChange={({ target: { value } }) =>
-              changeMonth(months.indexOf(value))
+              changeMonth(MONTHS.indexOf(value))
             }
           >
-            {months.map((option) => (
+            {MONTHS.map((option) => (
               <option key={option} value={option}>
                 {option}
               </option>
diff --git a/docs-site/src/examples/renderCustomHeaderTwoMonths.js b/docs-site/src/examples/js/renderCustomHeaderTwoMonths.js
similarity index 99%
rename from docs-site/src/examples/renderCustomHeaderTwoMonths.js
rename to docs-site/src/examples/js/renderCustomHeaderTwoMonths.js
index 39e4450674..f5a06e6596 100644
--- a/docs-site/src/examples/renderCustomHeaderTwoMonths.js
+++ b/docs-site/src/examples/js/renderCustomHeaderTwoMonths.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       renderCustomHeader={({
diff --git a/docs-site/src/examples/renderCustomMonth.js b/docs-site/src/examples/js/renderCustomMonth.js
similarity index 99%
rename from docs-site/src/examples/renderCustomMonth.js
rename to docs-site/src/examples/js/renderCustomMonth.js
index d9ffa17984..1406314e9c 100644
--- a/docs-site/src/examples/renderCustomMonth.js
+++ b/docs-site/src/examples/js/renderCustomMonth.js
@@ -5,6 +5,7 @@
 
     return <span title={tooltipText}>{shortMonth}</span>;
   };
+
   return (
     <DatePicker
       selected={new Date()}
diff --git a/docs-site/src/examples/renderCustomQuarter.js b/docs-site/src/examples/js/renderCustomQuarter.js
similarity index 99%
rename from docs-site/src/examples/renderCustomQuarter.js
rename to docs-site/src/examples/js/renderCustomQuarter.js
index cb73ea62f9..ed16201e56 100644
--- a/docs-site/src/examples/renderCustomQuarter.js
+++ b/docs-site/src/examples/js/renderCustomQuarter.js
@@ -3,6 +3,7 @@
     const tooltipText = `Tooltip for quarter: ${quarter}`;
     return <span title={tooltipText}>{shortQuarter}</span>;
   };
+
   return (
     <DatePicker
       selected={new Date()}
diff --git a/docs-site/src/examples/renderCustomYear.js b/docs-site/src/examples/js/renderCustomYear.js
similarity index 99%
rename from docs-site/src/examples/renderCustomYear.js
rename to docs-site/src/examples/js/renderCustomYear.js
index 044a776e96..694f46f918 100644
--- a/docs-site/src/examples/renderCustomYear.js
+++ b/docs-site/src/examples/js/renderCustomYear.js
@@ -3,6 +3,7 @@
     const tooltipText = `Tooltip for year: ${year}`;
     return <span title={tooltipText}>{year}</span>;
   };
+
   return (
     <DatePicker
       selected={new Date()}
diff --git a/docs-site/src/examples/selectsMultiple.js b/docs-site/src/examples/js/selectsMultiple.js
similarity index 99%
rename from docs-site/src/examples/selectsMultiple.js
rename to docs-site/src/examples/js/selectsMultiple.js
index 4848505590..e9d9873814 100644
--- a/docs-site/src/examples/selectsMultiple.js
+++ b/docs-site/src/examples/js/selectsMultiple.js
@@ -1,8 +1,10 @@
 () => {
   const [selectedDates, setSelectedDates] = useState([new Date()]);
+
   const onChange = (dates) => {
     setSelectedDates(dates);
   };
+
   return (
     <DatePicker
       selectedDates={selectedDates}
diff --git a/docs-site/src/examples/selectsMultipleMonths.js b/docs-site/src/examples/js/selectsMultipleMonths.js
similarity index 99%
rename from docs-site/src/examples/selectsMultipleMonths.js
rename to docs-site/src/examples/js/selectsMultipleMonths.js
index ac2a694a32..796362d69d 100644
--- a/docs-site/src/examples/selectsMultipleMonths.js
+++ b/docs-site/src/examples/js/selectsMultipleMonths.js
@@ -1,8 +1,10 @@
 () => {
   const [selectedDates, setSelectedDates] = useState([new Date()]);
+
   const onChange = (dates) => {
     setSelectedDates(dates);
   };
+
   return (
     <DatePicker
       selectedDates={selectedDates}
diff --git a/docs-site/src/examples/selectsRange.js b/docs-site/src/examples/js/selectsRange.js
similarity index 99%
rename from docs-site/src/examples/selectsRange.js
rename to docs-site/src/examples/js/selectsRange.js
index 5bc0cd1465..c8b0083a08 100644
--- a/docs-site/src/examples/selectsRange.js
+++ b/docs-site/src/examples/js/selectsRange.js
@@ -1,11 +1,13 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
   const [endDate, setEndDate] = useState(null);
+
   const onChange = (dates) => {
     const [start, end] = dates;
     setStartDate(start);
     setEndDate(end);
   };
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/selectsRangeWithDisabledDates.js b/docs-site/src/examples/js/selectsRangeWithDisabledDates.js
similarity index 99%
rename from docs-site/src/examples/selectsRangeWithDisabledDates.js
rename to docs-site/src/examples/js/selectsRangeWithDisabledDates.js
index e776ec1d3a..a87c86ac02 100644
--- a/docs-site/src/examples/selectsRangeWithDisabledDates.js
+++ b/docs-site/src/examples/js/selectsRangeWithDisabledDates.js
@@ -1,11 +1,13 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
   const [endDate, setEndDate] = useState(null);
+
   const onChange = (dates) => {
     const [start, end] = dates;
     setStartDate(start);
     setEndDate(end);
   };
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/showTime.js b/docs-site/src/examples/js/showTime.js
similarity index 99%
rename from docs-site/src/examples/showTime.js
rename to docs-site/src/examples/js/showTime.js
index 5cb165731b..5ba20dc646 100644
--- a/docs-site/src/examples/showTime.js
+++ b/docs-site/src/examples/js/showTime.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/showTimeOnly.js b/docs-site/src/examples/js/showTimeOnly.js
similarity index 99%
rename from docs-site/src/examples/showTimeOnly.js
rename to docs-site/src/examples/js/showTimeOnly.js
index 875bce1e36..3932e90dd3 100644
--- a/docs-site/src/examples/showTimeOnly.js
+++ b/docs-site/src/examples/js/showTimeOnly.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/specificDateRange.js b/docs-site/src/examples/js/specificDateRange.js
similarity index 99%
rename from docs-site/src/examples/specificDateRange.js
rename to docs-site/src/examples/js/specificDateRange.js
index 1526de88c9..88a15f6369 100644
--- a/docs-site/src/examples/specificDateRange.js
+++ b/docs-site/src/examples/js/specificDateRange.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(null);
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/strictParsing.js b/docs-site/src/examples/js/strictParsing.js
similarity index 99%
rename from docs-site/src/examples/strictParsing.js
rename to docs-site/src/examples/js/strictParsing.js
index e40769fe30..4866bab787 100644
--- a/docs-site/src/examples/strictParsing.js
+++ b/docs-site/src/examples/js/strictParsing.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/tabIndex.js b/docs-site/src/examples/js/tabIndex.js
similarity index 99%
rename from docs-site/src/examples/tabIndex.js
rename to docs-site/src/examples/js/tabIndex.js
index f102c8133d..670fd74467 100644
--- a/docs-site/src/examples/tabIndex.js
+++ b/docs-site/src/examples/js/tabIndex.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/timeInput.js b/docs-site/src/examples/js/timeInput.js
similarity index 99%
rename from docs-site/src/examples/timeInput.js
rename to docs-site/src/examples/js/timeInput.js
index 8059d7bd3a..d43a0ccad0 100644
--- a/docs-site/src/examples/timeInput.js
+++ b/docs-site/src/examples/js/timeInput.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/today.js b/docs-site/src/examples/js/today.js
similarity index 99%
rename from docs-site/src/examples/today.js
rename to docs-site/src/examples/js/today.js
index 2fbd13d77b..33867f6d2c 100644
--- a/docs-site/src/examples/today.js
+++ b/docs-site/src/examples/js/today.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       todayButton="Vandaag"
diff --git a/docs-site/src/examples/toggleCalendarOnIconClick.js b/docs-site/src/examples/js/toggleCalendarOnIconClick.js
similarity index 99%
rename from docs-site/src/examples/toggleCalendarOnIconClick.js
rename to docs-site/src/examples/js/toggleCalendarOnIconClick.js
index aea108c751..b422aef3a6 100644
--- a/docs-site/src/examples/toggleCalendarOnIconClick.js
+++ b/docs-site/src/examples/js/toggleCalendarOnIconClick.js
@@ -1,5 +1,6 @@
 () => {
   const [selectedDate, setSelectedDate] = useState(new Date());
+
   return (
     <DatePicker
       showIcon
diff --git a/docs-site/src/examples/weekNumbers.js b/docs-site/src/examples/js/weekNumbers.js
similarity index 99%
rename from docs-site/src/examples/weekNumbers.js
rename to docs-site/src/examples/js/weekNumbers.js
index 83f1378a17..a8038ad9a0 100644
--- a/docs-site/src/examples/weekNumbers.js
+++ b/docs-site/src/examples/js/weekNumbers.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/weekPicker.js b/docs-site/src/examples/js/weekPicker.js
similarity index 99%
rename from docs-site/src/examples/weekPicker.js
rename to docs-site/src/examples/js/weekPicker.js
index d4fc21c649..18ca5b69f6 100644
--- a/docs-site/src/examples/weekPicker.js
+++ b/docs-site/src/examples/js/weekPicker.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date("2021/02/22"));
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/withPortalById.js b/docs-site/src/examples/js/withPortalById.js
similarity index 99%
rename from docs-site/src/examples/withPortalById.js
rename to docs-site/src/examples/js/withPortalById.js
index d7d6680b54..21f93951e0 100644
--- a/docs-site/src/examples/withPortalById.js
+++ b/docs-site/src/examples/js/withPortalById.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/yearDropdown.js b/docs-site/src/examples/js/yearDropdown.js
similarity index 99%
rename from docs-site/src/examples/yearDropdown.js
rename to docs-site/src/examples/js/yearDropdown.js
index 5c629b4caa..64eb474da3 100644
--- a/docs-site/src/examples/yearDropdown.js
+++ b/docs-site/src/examples/js/yearDropdown.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/yearItemNumber.js b/docs-site/src/examples/js/yearItemNumber.js
similarity index 99%
rename from docs-site/src/examples/yearItemNumber.js
rename to docs-site/src/examples/js/yearItemNumber.js
index 86052f5916..8cf5c82340 100644
--- a/docs-site/src/examples/yearItemNumber.js
+++ b/docs-site/src/examples/js/yearItemNumber.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/yearPicker.js b/docs-site/src/examples/js/yearPicker.js
similarity index 99%
rename from docs-site/src/examples/yearPicker.js
rename to docs-site/src/examples/js/yearPicker.js
index a0acb9534b..0c3016f465 100644
--- a/docs-site/src/examples/yearPicker.js
+++ b/docs-site/src/examples/js/yearPicker.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/yearSelectDropdown.js b/docs-site/src/examples/js/yearSelectDropdown.js
similarity index 99%
rename from docs-site/src/examples/yearSelectDropdown.js
rename to docs-site/src/examples/js/yearSelectDropdown.js
index f7e97fa1d6..fa6e9873aa 100644
--- a/docs-site/src/examples/yearSelectDropdown.js
+++ b/docs-site/src/examples/js/yearSelectDropdown.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/ts/calendarContainer.ts b/docs-site/src/examples/ts/calendarContainer.ts
new file mode 100644
index 0000000000..bdfe718090
--- /dev/null
+++ b/docs-site/src/examples/ts/calendarContainer.ts
@@ -0,0 +1,30 @@
+const calendarContainerTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  const MyContainer = ({ className, children }: {className: string, children: ReactNode}) => {
+    return (
+      <div style={{ padding: "16px", background: "#216ba5", color: "#fff" }}>
+        <CalendarContainer className={className}>
+          <div style={{ background: "#f0f0f0" }}>
+            What is your favorite day?
+          </div>
+          <div style={{ position: "relative" }}>{children}</div>
+        </CalendarContainer>
+      </div>
+    );
+  };
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      calendarContainer={MyContainer}
+    />
+  );
+}
+
+render(<Example />);
+`;
+
+export default calendarContainerTS;
diff --git a/docs-site/src/examples/ts/calendarIcon.ts b/docs-site/src/examples/ts/calendarIcon.ts
new file mode 100644
index 0000000000..b62434ab67
--- /dev/null
+++ b/docs-site/src/examples/ts/calendarIcon.ts
@@ -0,0 +1,17 @@
+const calendarIconTS  = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      showIcon
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default calendarIconTS;
diff --git a/docs-site/src/examples/ts/calendarIconExternal.ts b/docs-site/src/examples/ts/calendarIconExternal.ts
new file mode 100644
index 0000000000..d3675509dc
--- /dev/null
+++ b/docs-site/src/examples/ts/calendarIconExternal.ts
@@ -0,0 +1,18 @@
+const calendarIconExternalTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      showIcon
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      icon="fa fa-calendar"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default calendarIconExternalTS;
diff --git a/docs-site/src/examples/ts/calendarIconSvgIcon.ts b/docs-site/src/examples/ts/calendarIconSvgIcon.ts
new file mode 100644
index 0000000000..0da06a0c04
--- /dev/null
+++ b/docs-site/src/examples/ts/calendarIconSvgIcon.ts
@@ -0,0 +1,40 @@
+const calendarIconSvgIconTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      showIcon
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      icon={
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          viewBox="0 0 48 48"
+        >
+          <mask id="ipSApplication0">
+            <g fill="none" stroke="#fff" strokeLinejoin="round" strokeWidth="4">
+              <path strokeLinecap="round" d="M40.04 22v20h-32V22"></path>
+              <path
+                fill="#fff"
+                d="M5.842 13.777C4.312 17.737 7.263 22 11.51 22c3.314 0 6.019-2.686 6.019-6a6 6 0 0 0 6 6h1.018a6 6 0 0 0 6-6c0 3.314 2.706 6 6.02 6c4.248 0 7.201-4.265 5.67-8.228L39.234 6H8.845l-3.003 7.777Z"
+              ></path>
+            </g>
+          </mask>
+          <path
+            fill="currentColor"
+            d="M0 0h48v48H0z"
+            mask="url(#ipSApplication0)"
+          ></path>
+        </svg>
+      }
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default calendarIconSvgIconTS;
diff --git a/docs-site/src/examples/ts/calendarStartDay.ts b/docs-site/src/examples/ts/calendarStartDay.ts
new file mode 100644
index 0000000000..b8d0d7fef2
--- /dev/null
+++ b/docs-site/src/examples/ts/calendarStartDay.ts
@@ -0,0 +1,17 @@
+const calendarStartDayTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      calendarStartDay={3}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default calendarStartDayTS;
diff --git a/docs-site/src/examples/ts/children.ts b/docs-site/src/examples/ts/children.ts
new file mode 100644
index 0000000000..6d75178277
--- /dev/null
+++ b/docs-site/src/examples/ts/children.ts
@@ -0,0 +1,15 @@
+const childrenTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker selected={startDate} onChange={(date: Date | null) => setStartDate(date)}>
+      <div style={{ color: "red" }}>Don't forget to check the weather!</div>
+    </DatePicker>
+  );
+};
+
+render(<Example />);
+`;
+
+export default childrenTS;
diff --git a/docs-site/src/examples/ts/clearInput.ts b/docs-site/src/examples/ts/clearInput.ts
new file mode 100644
index 0000000000..856a097cdc
--- /dev/null
+++ b/docs-site/src/examples/ts/clearInput.ts
@@ -0,0 +1,18 @@
+const clearInputTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      isClearable
+      placeholderText="I have been cleared!"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default clearInputTS;
diff --git a/docs-site/src/examples/ts/closeOnScroll.ts b/docs-site/src/examples/ts/closeOnScroll.ts
new file mode 100644
index 0000000000..043b244031
--- /dev/null
+++ b/docs-site/src/examples/ts/closeOnScroll.ts
@@ -0,0 +1,17 @@
+const closeOnScrollTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      closeOnScroll
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default closeOnScrollTS;
diff --git a/docs-site/src/examples/ts/closeOnScrollCallback.ts b/docs-site/src/examples/ts/closeOnScrollCallback.ts
new file mode 100644
index 0000000000..7d4ef9489e
--- /dev/null
+++ b/docs-site/src/examples/ts/closeOnScrollCallback.ts
@@ -0,0 +1,17 @@
+const closeOnScrollCallbackTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      closeOnScroll={(e: Event): boolean => e.target === document}
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default closeOnScrollCallbackTS;
diff --git a/docs-site/src/examples/ts/configureFloatingUI.ts b/docs-site/src/examples/ts/configureFloatingUI.ts
new file mode 100644
index 0000000000..c5afca7a29
--- /dev/null
+++ b/docs-site/src/examples/ts/configureFloatingUI.ts
@@ -0,0 +1,27 @@
+const configureFloatingUIS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      popperClassName="some-custom-class"
+      popperPlacement="top-end"
+      popperModifiers={[
+        {
+          name: "myModifier",
+          fn(state: MiddlewareState) {
+            // Do something with the state
+            return state;
+          },
+        },
+      ]}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default configureFloatingUIS;
diff --git a/docs-site/src/examples/ts/customCalendarClassName.ts b/docs-site/src/examples/ts/customCalendarClassName.ts
new file mode 100644
index 0000000000..e588c285ab
--- /dev/null
+++ b/docs-site/src/examples/ts/customCalendarClassName.ts
@@ -0,0 +1,17 @@
+const CustomCalendarClassNameTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      calendarClassName="rasta-stripes"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default CustomCalendarClassNameTS;
diff --git a/docs-site/src/examples/ts/customClassName.ts b/docs-site/src/examples/ts/customClassName.ts
new file mode 100644
index 0000000000..ef6cf8e867
--- /dev/null
+++ b/docs-site/src/examples/ts/customClassName.ts
@@ -0,0 +1,17 @@
+const CustomClassNameTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      className="red-border"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default CustomClassNameTS;
diff --git a/docs-site/src/examples/ts/customDateFormat.ts b/docs-site/src/examples/ts/customDateFormat.ts
new file mode 100644
index 0000000000..1ebbe6cfb2
--- /dev/null
+++ b/docs-site/src/examples/ts/customDateFormat.ts
@@ -0,0 +1,17 @@
+const CustomDateFormatTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      dateFormat="yyyy/MM/dd"
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default CustomDateFormatTS;
diff --git a/docs-site/src/examples/ts/customDayClassName.ts b/docs-site/src/examples/ts/customDayClassName.ts
new file mode 100644
index 0000000000..d4db65f670
--- /dev/null
+++ b/docs-site/src/examples/ts/customDayClassName.ts
@@ -0,0 +1,19 @@
+const CustomDayClassNameTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      dayClassName={(date: Date) =>
+        getDate(date) < Math.random() * 31 ? "random" : undefined
+      }
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default CustomDayClassNameTS;
diff --git a/docs-site/src/examples/ts/customInput.ts b/docs-site/src/examples/ts/customInput.ts
new file mode 100644
index 0000000000..2594f7e88b
--- /dev/null
+++ b/docs-site/src/examples/ts/customInput.ts
@@ -0,0 +1,49 @@
+const customInputTS = `
+type ExampleCustomInputProps = {
+  className?: string;
+  value?: string;
+  onClick?: () => void;
+  onBlur?: (event: React.FocusEvent<HTMLElement>) => void;
+  onChange?: (...args: Parameters<Required<DatePickerProps>["onChangeRaw"]>) => void;
+  onFocus?: (event: React.FocusEvent<HTMLElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
+  id?: ComponentProps<typeof DatePicker>["id"];
+  name?: ComponentProps<typeof DatePicker>["name"];
+  form?: ComponentProps<typeof DatePicker>["form"];
+  autoFocus?: ComponentProps<typeof DatePicker>["autoFocus"];
+  placeholder?: ComponentProps<typeof DatePicker>["placeholderText"];
+  disabled?: ComponentProps<typeof DatePicker>["disabled"];
+  autoComplete?: ComponentProps<typeof DatePicker>["autoComplete"];
+  title?: ComponentProps<typeof DatePicker>["title"];
+  readOnly?: ComponentProps<typeof DatePicker>["readOnly"];
+  required?: ComponentProps<typeof DatePicker>["required"];
+  tabIndex?: ComponentProps<typeof DatePicker>["tabIndex"];
+  "aria-describedby"?: ComponentProps<typeof DatePicker>["ariaDescribedBy"];
+  "aria-invalid"?: ComponentProps<typeof DatePicker>["ariaInvalid"];
+  "aria-labelledby"?: ComponentProps<typeof DatePicker>["ariaLabelledBy"];
+};
+
+const Example = () => {
+  const [startDate, setStartDate] = useState(new Date());
+
+  const ExampleCustomInput = forwardRef<HTMLButtonElement, ExampleCustomInputProps>(
+    ({ value, onClick, className }, ref) => (
+      <button className={className} onClick={onClick} ref={ref}>
+        {value}
+      </button>
+    ),
+  );
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date) => setStartDate(date)}
+      customInput={<ExampleCustomInput className="example-custom-input" />}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default customInputTS;
diff --git a/docs-site/src/examples/ts/customTimeClassName.ts b/docs-site/src/examples/ts/customTimeClassName.ts
new file mode 100644
index 0000000000..f0027b52e0
--- /dev/null
+++ b/docs-site/src/examples/ts/customTimeClassName.ts
@@ -0,0 +1,22 @@
+const CustomTimeClassNameTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  const handleColor = (time: Date): string => {
+    return time.getHours() > 12 ? "text-success" : "text-error";
+  };
+
+  return (
+    <DatePicker
+      showTimeSelect
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      timeClassName={handleColor}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default CustomTimeClassNameTS;
diff --git a/docs-site/src/examples/ts/customTimeInput.ts b/docs-site/src/examples/ts/customTimeInput.ts
new file mode 100644
index 0000000000..b38d9a37ac
--- /dev/null
+++ b/docs-site/src/examples/ts/customTimeInput.ts
@@ -0,0 +1,34 @@
+const CustomTimeInputTS = `
+
+interface ExampleCustomTimeInputProps {
+  date?: Date;
+  value: string;
+  onChange: (time: string) => void;
+}
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  const ExampleCustomTimeInput = ({ value, onChange }: ExampleCustomTimeInputProps) => (
+    <input
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      onClick={(e) => e.target?.focus()}
+      style={{ border: "solid 1px pink" }}
+    />
+  );
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showTimeInput
+      customTimeInput={<ExampleCustomTimeInput />}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default CustomTimeInputTS;
diff --git a/docs-site/src/examples/ts/dateRange.ts b/docs-site/src/examples/ts/dateRange.ts
new file mode 100644
index 0000000000..e82cf91bd4
--- /dev/null
+++ b/docs-site/src/examples/ts/dateRange.ts
@@ -0,0 +1,30 @@
+const dateRangeTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date("2014/02/08"));
+  const [endDate, setEndDate] = useState<Date | null>(new Date("2014/02/10"));
+
+  return (
+    <>
+      <DatePicker
+        selected={startDate}
+        onChange={(date: Date | null) => setStartDate(date)}
+        selectsStart
+        startDate={startDate}
+        endDate={endDate}
+      />
+      <DatePicker
+        selected={endDate}
+        onChange={(date: Date | null) => setEndDate(date)}
+        selectsEnd
+        startDate={startDate}
+        endDate={endDate}
+        minDate={startDate}
+      />
+    </>
+  );
+};
+
+render(<Example />);
+`;
+
+export default dateRangeTS;
diff --git a/docs-site/src/examples/ts/dateRangeInputWithClearButton.ts b/docs-site/src/examples/ts/dateRangeInputWithClearButton.ts
new file mode 100644
index 0000000000..72b3a3c6fe
--- /dev/null
+++ b/docs-site/src/examples/ts/dateRangeInputWithClearButton.ts
@@ -0,0 +1,22 @@
+const DateRangeInputWithClearButtonTS = `
+const Example = () => {
+  const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([null, null]);
+  const [startDate, endDate] = dateRange;
+
+  return (
+    <DatePicker
+      startDate={startDate}
+      endDate={endDate}
+      onChange={(update: [Date | null, Date | null]) => {
+        setDateRange(update);
+      }}
+      selectsRange
+      isClearable
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default DateRangeInputWithClearButtonTS;
diff --git a/docs-site/src/examples/ts/dateRangeWithPortal.ts b/docs-site/src/examples/ts/dateRangeWithPortal.ts
new file mode 100644
index 0000000000..95d13c31dc
--- /dev/null
+++ b/docs-site/src/examples/ts/dateRangeWithPortal.ts
@@ -0,0 +1,22 @@
+const DateRangeWithPortalTS = `
+const Example = () => {
+  const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([null, null]);
+  const [startDate, endDate] = dateRange;
+
+  return (
+    <DatePicker
+      startDate={startDate}
+      endDate={endDate}
+      onChange={(update: [Date | null, Date | null]) => {
+        setDateRange(update);
+      }}
+      selectsRange
+      withPortal
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default DateRangeWithPortalTS;
diff --git a/docs-site/src/examples/ts/dateRangeWithShowDisabledNavigation.ts b/docs-site/src/examples/ts/dateRangeWithShowDisabledNavigation.ts
new file mode 100644
index 0000000000..a38423bff9
--- /dev/null
+++ b/docs-site/src/examples/ts/dateRangeWithShowDisabledNavigation.ts
@@ -0,0 +1,30 @@
+const dateRangeWithShowDisabledNavigationTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [endDate, setEndDate] = useState<Date | null>(null);
+
+  const onChange = (dates: [Date | null, Date | null]) => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+  };
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={onChange}
+      minDate={new Date()}
+      maxDate={addMonths(new Date(), 5)}
+      startDate={startDate}
+      endDate={endDate}
+      selectsRange
+      inline
+      showDisabledMonthNavigation
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default dateRangeWithShowDisabledNavigationTS;
diff --git a/docs-site/src/examples/ts/default.ts b/docs-site/src/examples/ts/default.ts
new file mode 100644
index 0000000000..5cbb5e8af0
--- /dev/null
+++ b/docs-site/src/examples/ts/default.ts
@@ -0,0 +1,13 @@
+const defaultTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
+  );
+};
+
+render(<Example />);
+`;
+
+export default defaultTS;
diff --git a/docs-site/src/examples/ts/disabled.ts b/docs-site/src/examples/ts/disabled.ts
new file mode 100644
index 0000000000..0488676599
--- /dev/null
+++ b/docs-site/src/examples/ts/disabled.ts
@@ -0,0 +1,18 @@
+const DisabledTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      disabled
+      placeholderText="This is disabled"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default DisabledTS;
diff --git a/docs-site/src/examples/ts/disabledKeyboardNavigation.ts b/docs-site/src/examples/ts/disabledKeyboardNavigation.ts
new file mode 100644
index 0000000000..ee8733cbdc
--- /dev/null
+++ b/docs-site/src/examples/ts/disabledKeyboardNavigation.ts
@@ -0,0 +1,18 @@
+const DisabledKeyboardNavigationTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      disabledKeyboardNavigation
+      placeholderText="This has disabled keyboard navigation"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default DisabledKeyboardNavigationTS;
diff --git a/docs-site/src/examples/ts/dontCloseOnSelect.ts b/docs-site/src/examples/ts/dontCloseOnSelect.ts
new file mode 100644
index 0000000000..f3d144a988
--- /dev/null
+++ b/docs-site/src/examples/ts/dontCloseOnSelect.ts
@@ -0,0 +1,17 @@
+const DontCloseOnSelectTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      shouldCloseOnSelect={false}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default DontCloseOnSelectTS;
diff --git a/docs-site/src/examples/ts/excludeDateIntervals.ts b/docs-site/src/examples/ts/excludeDateIntervals.ts
new file mode 100644
index 0000000000..9d7648139d
--- /dev/null
+++ b/docs-site/src/examples/ts/excludeDateIntervals.ts
@@ -0,0 +1,30 @@
+const excludeDateIntervalsTS = `
+type TExcludeDateIntervals = {
+  start: Date;
+  end: Date;
+}[];
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  const excludeDateIntervals: TExcludeDateIntervals = [
+    {
+      start: subDays(new Date(), 5),
+      end: addDays(new Date(), 5)
+    },
+  ]
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      excludeDateIntervals={excludeDateIntervals}
+      placeholderText="Select a date other than the interval from 5 days ago to 5 days in the future"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default excludeDateIntervalsTS;
diff --git a/docs-site/src/examples/ts/excludeDates.ts b/docs-site/src/examples/ts/excludeDates.ts
new file mode 100644
index 0000000000..cfebc66bf1
--- /dev/null
+++ b/docs-site/src/examples/ts/excludeDates.ts
@@ -0,0 +1,25 @@
+const excludeDatesTS = `
+type TExcludeDates = {
+  date: Date;
+  message?: string;
+}[] | Date[];
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  const excludeDates: TExcludeDates = [new Date(), subDays(new Date(), 1)]
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      excludeDates={excludeDates}
+      placeholderText="Select a date other than today or yesterday"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default excludeDatesTS;
diff --git a/docs-site/src/examples/ts/excludeDatesMonthPicker.ts b/docs-site/src/examples/ts/excludeDatesMonthPicker.ts
new file mode 100644
index 0000000000..093cbc0945
--- /dev/null
+++ b/docs-site/src/examples/ts/excludeDatesMonthPicker.ts
@@ -0,0 +1,29 @@
+const excludeDatesMonthPickerTS = `
+type TExcludeDates = {
+  date: Date;
+  message?: string;
+}[] | Date[];
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date("2024-08-01"));
+
+  const excludeDates: TExcludeDates = [
+    new Date("2024-05-01"),
+    new Date("2024-06-01"),
+  ]
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      dateFormat="MM/yyyy"
+      excludeDates={excludeDates}
+      showMonthYearPicker
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default excludeDatesMonthPickerTS;
diff --git a/docs-site/src/examples/ts/excludeDatesRangeMonthPicker.ts b/docs-site/src/examples/ts/excludeDatesRangeMonthPicker.ts
new file mode 100644
index 0000000000..7e340e1151
--- /dev/null
+++ b/docs-site/src/examples/ts/excludeDatesRangeMonthPicker.ts
@@ -0,0 +1,43 @@
+const excludeDatesRangeMonthPickerTS = `
+type TExcludeDates = {
+  date: Date;
+  message?: string;
+}[] | Date[];
+
+const Example = () => {
+  const defaultStartDate = new Date("2024-08-01");
+  const defaultEndDate = new Date("2024-10-01");
+  const [startDate, setStartDate] = useState<Date | null>(defaultStartDate);
+  const [endDate, setEndDate] = useState<Date | null>(defaultEndDate);
+
+  const handleChange = ([newStartDate, newEndDate]: [Date | null, Date | null]) => {
+    setStartDate(newStartDate);
+    setEndDate(newEndDate);
+  };
+
+  const excludeDates: TExcludeDates = [
+    new Date("2024-05-01"),
+    new Date("2024-02-01"),
+    new Date("2024-01-01"),
+    new Date("2024-11-01"),
+  ]
+
+  return (
+    <DatePicker
+      selected={startDate}
+      startDate={startDate}
+      endDate={endDate}
+      onChange={handleChange}
+      excludeDates={excludeDates}
+      dateFormat="MM/yyyy"
+      placeholderText="Select a month other than the disabled months"
+      showMonthYearPicker
+      selectsRange
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default excludeDatesRangeMonthPickerTS;
diff --git a/docs-site/src/examples/ts/excludeDatesWithMessage.ts b/docs-site/src/examples/ts/excludeDatesWithMessage.ts
new file mode 100644
index 0000000000..e520e74ab4
--- /dev/null
+++ b/docs-site/src/examples/ts/excludeDatesWithMessage.ts
@@ -0,0 +1,28 @@
+const excludeDatesWithMessageTS = `
+type TExcludeDates = {
+  date: Date;
+  message?: string;
+}[] | Date[];
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  const excludeDates: TExcludeDates = [
+    { date: new Date(), message: "Today is excluded" },
+    { date: subDays(new Date(), 1), message: "This day is excluded" },
+  ]
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      excludeDates={excludeDates}
+      placeholderText="Select a date other than today or yesterday"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default excludeDatesWithMessageTS;
diff --git a/docs-site/src/examples/ts/excludeTimePeriod.ts b/docs-site/src/examples/ts/excludeTimePeriod.ts
new file mode 100644
index 0000000000..2aa804f9c7
--- /dev/null
+++ b/docs-site/src/examples/ts/excludeTimePeriod.ts
@@ -0,0 +1,22 @@
+const excludeTimePeriodTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    setHours(setMinutes(new Date(), 30), 17),
+  );
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showTimeSelect
+      minTime={setHours(setMinutes(new Date(), 0), 17)}
+      maxTime={setHours(setMinutes(new Date(), 30), 20)}
+      dateFormat="MMMM d, yyyy h:mm aa"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default excludeTimePeriodTS;
diff --git a/docs-site/src/examples/ts/excludeTimes.ts b/docs-site/src/examples/ts/excludeTimes.ts
new file mode 100644
index 0000000000..2d9aae610d
--- /dev/null
+++ b/docs-site/src/examples/ts/excludeTimes.ts
@@ -0,0 +1,30 @@
+const excludeTimesTS = `
+type TExcludeTimes = Date[];
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    setHours(setMinutes(new Date(), 30), 16),
+  );
+
+  const excludeTimes: TExcludeTimes = [
+    setHours(setMinutes(new Date(), 0), 17),
+    setHours(setMinutes(new Date(), 30), 18),
+    setHours(setMinutes(new Date(), 30), 19),
+    setHours(setMinutes(new Date(), 30), 17),
+  ]
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showTimeSelect
+      excludeTimes={excludeTimes}
+      dateFormat="MMMM d, yyyy h:mm aa"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default excludeTimesTS;
diff --git a/docs-site/src/examples/ts/excludeWeeks.ts b/docs-site/src/examples/ts/excludeWeeks.ts
new file mode 100644
index 0000000000..05e1453bfb
--- /dev/null
+++ b/docs-site/src/examples/ts/excludeWeeks.ts
@@ -0,0 +1,31 @@
+const excludeWeeksTS = `
+type TExcludeDateIntervals = {
+  start: Date;
+  end: Date;
+}[];
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date("2021/02/22"));
+
+  const excludeWeeks: TExcludeDateIntervals = [
+    { start: "2021/02/08", end: "2021/02/14" },
+    { start: "2021/01/18", end: "2021/01/24" },
+  ]
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      dateFormat="I/R"
+      locale="en-GB"
+      excludeDateIntervals={excludeWeeks}
+      showWeekNumbers
+      showWeekPicker
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default excludeWeeksTS;
diff --git a/docs-site/src/examples/ts/externalForm.ts b/docs-site/src/examples/ts/externalForm.ts
new file mode 100644
index 0000000000..ef43f561e0
--- /dev/null
+++ b/docs-site/src/examples/ts/externalForm.ts
@@ -0,0 +1,23 @@
+const externalFormTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  return (
+    <>
+      <DatePicker
+        selected={startDate}
+        onChange={(date: Date | null) => setStartDate(date)}
+        required
+        form="external-form"
+      />
+      <form id="external-form">
+        <button type="submit">Submit</button>
+      </form>
+    </>
+  );
+};
+
+render(<Example />);
+`;
+
+export default externalFormTS;
diff --git a/docs-site/src/examples/ts/filterDates.ts b/docs-site/src/examples/ts/filterDates.ts
new file mode 100644
index 0000000000..980504607e
--- /dev/null
+++ b/docs-site/src/examples/ts/filterDates.ts
@@ -0,0 +1,25 @@
+const filterDatesTS = `
+type TFilterDate = (date: Date) => boolean;
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  const isWeekday: TFilterDate = (date) => {
+    const day = getDay(date);
+    return day !== 0 && day !== 6;
+  };
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      filterDate={isWeekday}
+      placeholderText="Select a weekday"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default filterDatesTS;
diff --git a/docs-site/src/examples/ts/filterTimes.ts b/docs-site/src/examples/ts/filterTimes.ts
new file mode 100644
index 0000000000..165f4c3803
--- /dev/null
+++ b/docs-site/src/examples/ts/filterTimes.ts
@@ -0,0 +1,30 @@
+const filterTimesTS = `
+type TFilterTime = (time: Date) => boolean;
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    setHours(setMinutes(new Date(), 0), 9),
+  );
+
+  const filterPassedTime: TFilterTime = (time) => {
+    const currentDate = new Date();
+    const selectedDate = new Date(time);
+
+    return currentDate.getTime() < selectedDate.getTime();
+  };
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showTimeSelect
+      filterTime={filterPassedTime}
+      dateFormat="MMMM d, yyyy h:mm aa"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default filterTimesTS;
diff --git a/docs-site/src/examples/ts/fixedCalendar.ts b/docs-site/src/examples/ts/fixedCalendar.ts
new file mode 100644
index 0000000000..a732a7e81b
--- /dev/null
+++ b/docs-site/src/examples/ts/fixedCalendar.ts
@@ -0,0 +1,17 @@
+const fixedCalendarTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      fixedHeight
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default fixedCalendarTS;
diff --git a/docs-site/src/examples/ts/hideTimeCaption.ts b/docs-site/src/examples/ts/hideTimeCaption.ts
new file mode 100644
index 0000000000..a496d0a7c8
--- /dev/null
+++ b/docs-site/src/examples/ts/hideTimeCaption.ts
@@ -0,0 +1,21 @@
+const hideTimeCaptionTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showTimeSelect
+      showTimeSelectOnly
+      timeIntervals={15}
+      dateFormat="h:mm aa"
+      showTimeCaption={false}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default hideTimeCaptionTS;
diff --git a/docs-site/src/examples/ts/highlightDates.ts b/docs-site/src/examples/ts/highlightDates.ts
new file mode 100644
index 0000000000..bec63ab7dd
--- /dev/null
+++ b/docs-site/src/examples/ts/highlightDates.ts
@@ -0,0 +1,29 @@
+const highlightDatesTS = `
+type HighlightDate = {
+  [className: string]: Date[];
+}
+
+type THighlightDates = (Date | HighlightDate)[];
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  const highlightDates: THighlightDates = [
+    subDays(new Date(), 7),
+    addDays(new Date(), 7),
+  ];
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      highlightDates={highlightDates}
+      placeholderText="This highlights a week ago and a week from today"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default highlightDatesTS;
diff --git a/docs-site/src/examples/ts/highlightDatesRanges.ts b/docs-site/src/examples/ts/highlightDatesRanges.ts
new file mode 100644
index 0000000000..591588f90e
--- /dev/null
+++ b/docs-site/src/examples/ts/highlightDatesRanges.ts
@@ -0,0 +1,43 @@
+const highlightDatesRangesTS = `
+type HighlightDate = {
+  [className: string]: Date[];
+}
+
+type THighlightDates = (Date | HighlightDate)[];
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  const highlightWithRanges: THighlightDates = [
+    {
+      "react-datepicker__day--highlighted-custom-1": [
+        subDays(new Date(), 4),
+        subDays(new Date(), 3),
+        subDays(new Date(), 2),
+        subDays(new Date(), 1),
+      ],
+    },
+    {
+      "react-datepicker__day--highlighted-custom-2": [
+        addDays(new Date(), 1),
+        addDays(new Date(), 2),
+        addDays(new Date(), 3),
+        addDays(new Date(), 4),
+      ],
+    },
+  ];
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      highlightDates={highlightWithRanges}
+      placeholderText="This highlight two ranges with custom classes"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default highlightDatesRangesTS;
diff --git a/docs-site/src/examples/ts/holidayDates.ts b/docs-site/src/examples/ts/holidayDates.ts
new file mode 100644
index 0000000000..5ed02e1959
--- /dev/null
+++ b/docs-site/src/examples/ts/holidayDates.ts
@@ -0,0 +1,31 @@
+const holidayDatesTS = `
+type Holiday = {
+  date: string;
+  holidayName: string;
+}
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  const holidays: Holiday[] = [
+    { date: "2023-08-15", holidayName: "India's Independence Day" },
+    { date: "2023-12-31", holidayName: "New Year's Eve" },
+    { date: "2023-12-25", holidayName: "Christmas" },
+    { date: "2024-01-01", holidayName: "New Year's Day" },
+    { date: "2023-11-23", holidayName: "Thanksgiving Day" },
+  ];
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      holidays={holidays}
+      placeholderText="This display holidays"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default holidayDatesTS;
diff --git a/docs-site/src/examples/ts/includeDateIntervals.ts b/docs-site/src/examples/ts/includeDateIntervals.ts
new file mode 100644
index 0000000000..78496d9964
--- /dev/null
+++ b/docs-site/src/examples/ts/includeDateIntervals.ts
@@ -0,0 +1,27 @@
+const includeDateIntervalsTS = `
+type TIncludeDateIntervals = {
+  start: Date;
+  end: Date;
+}[];
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  const includeDateIntervals: TIncludeDateIntervals = [
+    { start: subDays(new Date(), 5), end: addDays(new Date(), 5) },
+  ];
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      includeDateIntervals={includeDateIntervals}
+      placeholderText="This only includes dates from 5 days ago to 5 days in the future"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default includeDateIntervalsTS;
diff --git a/docs-site/src/examples/ts/includeDates.ts b/docs-site/src/examples/ts/includeDates.ts
new file mode 100644
index 0000000000..4636ecb28d
--- /dev/null
+++ b/docs-site/src/examples/ts/includeDates.ts
@@ -0,0 +1,24 @@
+const includeDatesTS = `
+type TIncludeDates = Date[];
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  const includeDates: TIncludeDates = [
+    new Date(),
+    addDays(new Date(), 1),
+  ];
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      includeDates={includeDates}
+      placeholderText="This only includes today and tomorrow"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default includeDatesTS;
diff --git a/docs-site/src/examples/ts/includeDatesMonthPicker.ts b/docs-site/src/examples/ts/includeDatesMonthPicker.ts
new file mode 100644
index 0000000000..94352c904e
--- /dev/null
+++ b/docs-site/src/examples/ts/includeDatesMonthPicker.ts
@@ -0,0 +1,23 @@
+const includeDatesMonthPickerTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  const includeDates: Date[] = [
+    1661990400000, 1664582400000, 1667260800000, 1672531200000,
+  ];
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      dateFormat="MM/yyyy"
+      includeDates={includeDates}
+      showMonthYearPicker
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default includeDatesMonthPickerTS;
diff --git a/docs-site/src/examples/ts/includeTimes.ts b/docs-site/src/examples/ts/includeTimes.ts
new file mode 100644
index 0000000000..00b114625c
--- /dev/null
+++ b/docs-site/src/examples/ts/includeTimes.ts
@@ -0,0 +1,28 @@
+const includeTimesTs = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    setHours(setMinutes(new Date(), 30), 16),
+  );
+
+  const includeTimes: Date[] = [
+    setHours(setMinutes(new Date(), 0), 17),
+    setHours(setMinutes(new Date(), 30), 18),
+    setHours(setMinutes(new Date(), 30), 19),
+    setHours(setMinutes(new Date(), 30), 17),
+  ];
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showTimeSelect
+      includeTimes={includeTimes}
+      dateFormat="MMMM d, yyyy h:mm aa"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default includeTimesTs;
diff --git a/docs-site/src/examples/ts/index.ts b/docs-site/src/examples/ts/index.ts
new file mode 100644
index 0000000000..ca32a16025
--- /dev/null
+++ b/docs-site/src/examples/ts/index.ts
@@ -0,0 +1,106 @@
+export { default as calendarContainerTS } from "./calendarContainer";
+export { default as calendarIconTS } from "./calendarIcon";
+export { default as defaultTS } from "./default";
+export { default as calendarIconSvgIconTS } from "./calendarIconSvgIcon";
+export { default as calendarIconExternalTS } from "./calendarIconExternal";
+export { default as calendarStartDayTS } from "./calendarStartDay";
+export { default as onCalendarOpenStateCallbacksTS } from "./onCalendarOpenStateCallbacks";
+export { default as toggleCalendarOnIconClickTS } from "./toggleCalendarOnIconClick";
+export { default as childrenTS } from "./children";
+export { default as clearInputTS } from "./clearInput";
+export { default as closeOnScrollTS } from "./closeOnScroll";
+export { default as closeOnScrollCallbackTS } from "./closeOnScrollCallback";
+export { default as configureFloatingUIS } from "./configureFloatingUI";
+export { default as customInputTS } from "./customInput";
+export { default as renderCustomHeaderTS } from "./renderCustomHeader";
+export { default as renderCustomHeaderTwoMonthsTS } from "./renderCustomHeaderTwoMonths";
+export { default as renderCustomDayTS } from "./renderCustomDay";
+export { default as renderCustomMonthTS } from "./renderCustomMonth";
+export { default as renderCustomQuarterTS } from "./renderCustomQuarter";
+export { default as renderCustomYearTS } from "./renderCustomYear";
+export { default as customCalendarClassNameTS } from "./customCalendarClassName";
+export { default as customClassNameTS } from "./customClassName";
+export { default as customDayClassNameTS } from "./customDayClassName";
+export { default as customDateFormatTS } from "./customDateFormat";
+export { default as customTimeClassNameTS } from "./customTimeClassName";
+export { default as customTimeInputTS } from "./customTimeInput";
+export { default as dateRangeTS } from "./dateRange";
+export { default as selectsRangeTS } from "./selectsRange";
+export { default as selectsRangeWithDisabledDatesTS } from "./selectsRangeWithDisabledDates";
+export { default as dateRangeWithShowDisabledNavigationTS } from "./dateRangeWithShowDisabledNavigation";
+export { default as dateRangeInputWithClearButtonTS } from "./dateRangeInputWithClearButton";
+export { default as dateRangeWithPortalTS } from "./dateRangeWithPortal";
+export { default as disabledTS } from "./disabled";
+export { default as disabledKeyboardNavigationTS } from "./disabledKeyboardNavigation";
+export { default as weekNumbersTS } from "./weekNumbers";
+export { default as dontCloseOnSelectTS } from "./dontCloseOnSelect";
+export { default as excludeDatesTS } from "./excludeDates";
+export { default as excludeDatesWithMessageTS } from "./excludeDatesWithMessage";
+export { default as excludeDateIntervalsTS } from "./excludeDateIntervals";
+export { default as excludeDatesMonthPickerTS } from "./excludeDatesMonthPicker";
+export { default as excludeDatesRangeMonthPickerTS } from "./excludeDatesRangeMonthPicker";
+export { default as excludeTimesTS } from "./excludeTimes";
+export { default as filterDatesTS } from "./filterDates";
+export { default as filterTimesTS } from "./filterTimes";
+export { default as fixedCalendarTS } from "./fixedCalendar";
+export { default as rawChangeTS } from "./rawChange";
+export { default as highlightDatesTS } from "./highlightDates";
+export { default as highlightDatesRangesTS } from "./highlightDatesRanges";
+export { default as holidayDatesTS } from "./holidayDates";
+export { default as includeDatesTS } from "./includeDates";
+export { default as includeDateIntervalsTS } from "./includeDateIntervals";
+export { default as includeDatesMonthPickerTS } from "./includeDatesMonthPicker";
+export { default as includeTimesTS } from "./includeTimes";
+export { default as injectTimesTS } from "./injectTimes";
+export { default as inlineTS } from "./inline";
+export { default as inlineVisibleTS } from "./inlineVisible";
+export { default as timeInputTS } from "./timeInput";
+export { default as localeTS } from "./locale";
+export { default as localeWithTimeTS } from "./localeWithTime";
+export { default as localeWithoutGlobalVariableTS } from "./localeWithoutGlobalVariable";
+export { default as minDateTS } from "./minDate";
+export { default as maxDateTS } from "./maxDate";
+export { default as monthPickerTS } from "./monthPicker";
+export { default as monthPickerFullNameTS } from "./monthPickerFullName";
+export { default as monthPickerTwoColumnsTS } from "./monthPickerTwoColumns";
+export { default as monthPickerFourColumnsTS } from "./monthPickerFourColumns";
+export { default as monthDropdownTS } from "./monthDropdown";
+export { default as monthDropdownShortTS } from "./monthDropdownShort";
+export { default as monthYearDropdownTS } from "./monthYearDropdown";
+export { default as multiMonthTS } from "./multiMonth";
+export { default as multiMonthDropdownTS } from "./multiMonthDropdown";
+export { default as multiMonthInlineTS } from "./multiMonthInline";
+export { default as noAnchorArrowTS } from "./noAnchorArrow";
+export { default as onBlurCallbacksTS } from "./onBlurCallbacks";
+export { default as openToDateTS } from "./openToDate";
+export { default as placeholderTextTS } from "./placeholderText";
+export { default as portalTS } from "./portal";
+export { default as portalByIdTS } from "./portalById";
+export { default as withPortalByIdTS } from "./withPortalById";
+export { default as quarterPickerTS } from "./quarterPicker";
+export { default as rangeMonthPickerTS } from "./rangeMonthPicker";
+export { default as rangeMonthPickerSelectsRangeTS } from "./rangeMonthPickerSelectsRange";
+export { default as rangeQuarterPickerTS } from "./rangeQuarterPicker";
+export { default as rangeQuarterPickerSelectsRangeTS } from "./rangeQuarterPickerSelectsRange";
+export { default as rangeSwapRangeTS } from "./rangeSwapRange";
+export { default as readOnlyTS } from "./readOnly";
+export { default as showTimeTS } from "./showTime";
+export { default as showTimeOnlyTS } from "./showTimeOnly";
+export { default as hideTimeCaptionTS } from "./hideTimeCaption";
+export { default as multiMonthPreviousTS } from "./multiMonthPrevious";
+export { default as specificDateRangeTS } from "./specificDateRange";
+export { default as excludeTimePeriodTS } from "./excludeTimePeriod";
+export { default as selectsMultipleTS } from "./selectsMultiple";
+export { default as selectsMultipleMonthsTS } from "./selectsMultipleMonths";
+export { default as strictParsingTS } from "./strictParsing";
+export { default as tabIndexTS } from "./tabIndex";
+export { default as todayTS } from "./today";
+export { default as yearPickerTS } from "./yearPicker";
+export { default as rangeYearPickerTS } from "./rangeYearPicker";
+export { default as rangeYearPickerSelectsRangeTS } from "./rangeYearPickerSelectsRange";
+export { default as yearDropdownTS } from "./yearDropdown";
+export { default as yearSelectDropdownTS } from "./yearSelectDropdown";
+export { default as yearItemNumberTS } from "./yearItemNumber";
+export { default as weekPickerTS } from "./weekPicker";
+export { default as excludeWeeksTS } from "./excludeWeeks";
+export { default as externalFormTS } from "./externalForm";
diff --git a/docs-site/src/examples/ts/injectTimes.ts b/docs-site/src/examples/ts/injectTimes.ts
new file mode 100644
index 0000000000..9fc3e8606c
--- /dev/null
+++ b/docs-site/src/examples/ts/injectTimes.ts
@@ -0,0 +1,28 @@
+const injectTimesTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    setHours(setMinutes(new Date(), 30), 16),
+  );
+
+  const injectTimes: Date[] = [
+    setHours(setMinutes(setSeconds(new Date(), 10), 1), 0),
+    setHours(setMinutes(new Date(), 5), 12),
+    setHours(setMinutes(new Date(), 59), 23),
+  ];
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showTimeSelect
+      timeFormat="HH:mm:ss"
+      injectTimes={injectTimes}
+      dateFormat="MMMM d, yyyy h:mm aa"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default injectTimesTS;
diff --git a/docs-site/src/examples/ts/inline.ts b/docs-site/src/examples/ts/inline.ts
new file mode 100644
index 0000000000..fffdff62e7
--- /dev/null
+++ b/docs-site/src/examples/ts/inline.ts
@@ -0,0 +1,17 @@
+const inlineTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      inline
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default inlineTS;
diff --git a/docs-site/src/examples/ts/inlineVisible.ts b/docs-site/src/examples/ts/inlineVisible.ts
new file mode 100644
index 0000000000..7f46d2e499
--- /dev/null
+++ b/docs-site/src/examples/ts/inlineVisible.ts
@@ -0,0 +1,31 @@
+const inlineVisibleTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleChange = (e: Date | null) => {
+    setIsOpen(!isOpen);
+    setStartDate(e);
+  };
+
+  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+    e.preventDefault();
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <>
+      <button className="example-custom-input" onClick={handleClick}>
+        {format(startDate, "dd-MM-yyyy")}
+      </button>
+      {isOpen && (
+        <DatePicker selected={startDate} onChange={handleChange} inline />
+      )}
+    </>
+  );
+};
+
+render(<Example />);
+`;
+
+export default inlineVisibleTS;
diff --git a/docs-site/src/examples/ts/locale.ts b/docs-site/src/examples/ts/locale.ts
new file mode 100644
index 0000000000..919133db99
--- /dev/null
+++ b/docs-site/src/examples/ts/locale.ts
@@ -0,0 +1,18 @@
+const localeTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      locale="en-GB"
+      placeholderText="Weeks start on Monday"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default localeTS;
diff --git a/docs-site/src/examples/ts/localeWithTime.ts b/docs-site/src/examples/ts/localeWithTime.ts
new file mode 100644
index 0000000000..a9816fe5b6
--- /dev/null
+++ b/docs-site/src/examples/ts/localeWithTime.ts
@@ -0,0 +1,21 @@
+const localeWithTimeTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      locale="pt-BR"
+      showTimeSelect
+      timeFormat="p"
+      timeIntervals={15}
+      dateFormat="Pp"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default localeWithTimeTS;
diff --git a/docs-site/src/examples/ts/localeWithoutGlobalVariable.ts b/docs-site/src/examples/ts/localeWithoutGlobalVariable.ts
new file mode 100644
index 0000000000..4f4aa06b5e
--- /dev/null
+++ b/docs-site/src/examples/ts/localeWithoutGlobalVariable.ts
@@ -0,0 +1,17 @@
+const localeWithoutGlobalVariableTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      locale={fi}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default localeWithoutGlobalVariableTS;
diff --git a/docs-site/src/examples/ts/maxDate.ts b/docs-site/src/examples/ts/maxDate.ts
new file mode 100644
index 0000000000..31a03fddc8
--- /dev/null
+++ b/docs-site/src/examples/ts/maxDate.ts
@@ -0,0 +1,18 @@
+const maxDateTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      maxDate={addDays(new Date(), 5)}
+      placeholderText="Select a date before 5 days in the future"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default maxDateTS;
diff --git a/docs-site/src/examples/ts/minDate.ts b/docs-site/src/examples/ts/minDate.ts
new file mode 100644
index 0000000000..cc58b8b7c1
--- /dev/null
+++ b/docs-site/src/examples/ts/minDate.ts
@@ -0,0 +1,18 @@
+const minDateTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      minDate={subDays(new Date(), 5)}
+      placeholderText="Select a date after 5 days ago"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default minDateTS;
diff --git a/docs-site/src/examples/ts/monthDropdown.ts b/docs-site/src/examples/ts/monthDropdown.ts
new file mode 100644
index 0000000000..e2d898613f
--- /dev/null
+++ b/docs-site/src/examples/ts/monthDropdown.ts
@@ -0,0 +1,17 @@
+const monthDropdownTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showMonthDropdown
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default monthDropdownTS;
diff --git a/docs-site/src/examples/ts/monthDropdownShort.ts b/docs-site/src/examples/ts/monthDropdownShort.ts
new file mode 100644
index 0000000000..eb3317bcaf
--- /dev/null
+++ b/docs-site/src/examples/ts/monthDropdownShort.ts
@@ -0,0 +1,18 @@
+const monthDropdownShortTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showMonthDropdown
+      useShortMonthInDropdown
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default monthDropdownShortTS;
diff --git a/docs-site/src/examples/ts/monthPicker.ts b/docs-site/src/examples/ts/monthPicker.ts
new file mode 100644
index 0000000000..87432655b3
--- /dev/null
+++ b/docs-site/src/examples/ts/monthPicker.ts
@@ -0,0 +1,18 @@
+const monthPickerTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      dateFormat="MM/yyyy"
+      showMonthYearPicker
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default monthPickerTS;
diff --git a/docs-site/src/examples/ts/monthPickerFourColumns.ts b/docs-site/src/examples/ts/monthPickerFourColumns.ts
new file mode 100644
index 0000000000..2f12abe8b7
--- /dev/null
+++ b/docs-site/src/examples/ts/monthPickerFourColumns.ts
@@ -0,0 +1,20 @@
+const monthPickerFourColumnsTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      dateFormat="MM/yyyy"
+      showMonthYearPicker
+      showFullMonthYearPicker
+      showFourColumnMonthYearPicker
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default monthPickerFourColumnsTS;
diff --git a/docs-site/src/examples/ts/monthPickerFullName.ts b/docs-site/src/examples/ts/monthPickerFullName.ts
new file mode 100644
index 0000000000..f37533316d
--- /dev/null
+++ b/docs-site/src/examples/ts/monthPickerFullName.ts
@@ -0,0 +1,19 @@
+const monthPickerFullNameTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      dateFormat="MM/yyyy"
+      showMonthYearPicker
+      showFullMonthYearPicker
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default monthPickerFullNameTS;
diff --git a/docs-site/src/examples/ts/monthPickerTwoColumns.ts b/docs-site/src/examples/ts/monthPickerTwoColumns.ts
new file mode 100644
index 0000000000..498948c673
--- /dev/null
+++ b/docs-site/src/examples/ts/monthPickerTwoColumns.ts
@@ -0,0 +1,20 @@
+const monthPickerTwoColumnsTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      dateFormat="MM/yyyy"
+      showMonthYearPicker
+      showFullMonthYearPicker
+      showTwoColumnMonthYearPicker
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default monthPickerTwoColumnsTS;
diff --git a/docs-site/src/examples/ts/monthYearDropdown.ts b/docs-site/src/examples/ts/monthYearDropdown.ts
new file mode 100644
index 0000000000..907117474e
--- /dev/null
+++ b/docs-site/src/examples/ts/monthYearDropdown.ts
@@ -0,0 +1,20 @@
+const monthYearDropdownTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      dateFormatCalendar={"MMM yyyy"}
+      minDate={subMonths(new Date(), 6)}
+      maxDate={addMonths(new Date(), 6)}
+      showMonthYearDropdown
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default monthYearDropdownTS;
diff --git a/docs-site/src/examples/ts/multiMonth.ts b/docs-site/src/examples/ts/multiMonth.ts
new file mode 100644
index 0000000000..3c39daa295
--- /dev/null
+++ b/docs-site/src/examples/ts/multiMonth.ts
@@ -0,0 +1,17 @@
+const multiMonthTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      monthsShown={2}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default multiMonthTS;
diff --git a/docs-site/src/examples/ts/multiMonthDropdown.ts b/docs-site/src/examples/ts/multiMonthDropdown.ts
new file mode 100644
index 0000000000..697090ea90
--- /dev/null
+++ b/docs-site/src/examples/ts/multiMonthDropdown.ts
@@ -0,0 +1,18 @@
+const multiMonthDropdownTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      monthsShown={2}
+      showYearDropdown
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default multiMonthDropdownTS;
diff --git a/docs-site/src/examples/ts/multiMonthInline.ts b/docs-site/src/examples/ts/multiMonthInline.ts
new file mode 100644
index 0000000000..55752c34ed
--- /dev/null
+++ b/docs-site/src/examples/ts/multiMonthInline.ts
@@ -0,0 +1,18 @@
+const multiMonthInlineTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      monthsShown={2}
+      inline
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default multiMonthInlineTS;
diff --git a/docs-site/src/examples/ts/multiMonthPrevious.ts b/docs-site/src/examples/ts/multiMonthPrevious.ts
new file mode 100644
index 0000000000..12627cecdb
--- /dev/null
+++ b/docs-site/src/examples/ts/multiMonthPrevious.ts
@@ -0,0 +1,18 @@
+const multiMonthPreviousTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      showPreviousMonths
+      onChange={(date: Date | null) => setStartDate(date)}
+      monthsShown={2}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default multiMonthPreviousTS;
diff --git a/docs-site/src/examples/ts/noAnchorArrow.ts b/docs-site/src/examples/ts/noAnchorArrow.ts
new file mode 100644
index 0000000000..17dde3a775
--- /dev/null
+++ b/docs-site/src/examples/ts/noAnchorArrow.ts
@@ -0,0 +1,17 @@
+const noAnchorArrowTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      showPopperArrow={false}
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default noAnchorArrowTS;
diff --git a/docs-site/src/examples/ts/onBlurCallbacks.ts b/docs-site/src/examples/ts/onBlurCallbacks.ts
new file mode 100644
index 0000000000..1059dfc767
--- /dev/null
+++ b/docs-site/src/examples/ts/onBlurCallbacks.ts
@@ -0,0 +1,28 @@
+const onBlurCallbacksTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  const handleOnBlur = ({ target: { value } }: React.FocusEvent<HTMLElement>) => {
+    const date = new Date(value);
+    if (isValid(date)) {
+      console.log("date: %s", format(date, "dd/MM/yyyy"));
+    } else {
+      console.log("value: %s", date);
+    }
+  };
+
+  return (
+    <DatePicker
+      key="example9"
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      onBlur={handleOnBlur}
+      placeholderText="View blur callbacks in console"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default onBlurCallbacksTS;
diff --git a/docs-site/src/examples/ts/onCalendarOpenStateCallbacks.ts b/docs-site/src/examples/ts/onCalendarOpenStateCallbacks.ts
new file mode 100644
index 0000000000..5b90d15fe8
--- /dev/null
+++ b/docs-site/src/examples/ts/onCalendarOpenStateCallbacks.ts
@@ -0,0 +1,21 @@
+const onCalendarOpenStateCallbacksTS = `
+const Example = () => {
+  const [date, setDate] = useState<Date | null>(new Date());
+
+  const handleCalendarClose = () => console.log("Calendar closed");
+  const handleCalendarOpen = () => console.log("Calendar opened");
+
+  return (
+    <DatePicker
+      selected={date}
+      onChange={(date: Date | null) => setDate(date)}
+      onCalendarClose={handleCalendarClose}
+      onCalendarOpen={handleCalendarOpen}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default onCalendarOpenStateCallbacksTS;
diff --git a/docs-site/src/examples/ts/openToDate.ts b/docs-site/src/examples/ts/openToDate.ts
new file mode 100644
index 0000000000..730ffa3083
--- /dev/null
+++ b/docs-site/src/examples/ts/openToDate.ts
@@ -0,0 +1,17 @@
+const openToDateTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      openToDate={new Date("1993/09/28")}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default openToDateTS;
diff --git a/docs-site/src/examples/ts/placeholderText.ts b/docs-site/src/examples/ts/placeholderText.ts
new file mode 100644
index 0000000000..7ac0df4400
--- /dev/null
+++ b/docs-site/src/examples/ts/placeholderText.ts
@@ -0,0 +1,9 @@
+const placeholderTextTS = `
+const Example = () => {
+  return <DatePicker placeholderText="Click to select a date" />;
+};
+
+render(<Example />);
+`;
+
+export default placeholderTextTS;
diff --git a/docs-site/src/examples/ts/portal.ts b/docs-site/src/examples/ts/portal.ts
new file mode 100644
index 0000000000..98763c3300
--- /dev/null
+++ b/docs-site/src/examples/ts/portal.ts
@@ -0,0 +1,17 @@
+const portalTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      withPortal
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default portalTS;
diff --git a/docs-site/src/examples/ts/portalById.ts b/docs-site/src/examples/ts/portalById.ts
new file mode 100644
index 0000000000..9e1463df3b
--- /dev/null
+++ b/docs-site/src/examples/ts/portalById.ts
@@ -0,0 +1,17 @@
+const portalByIdTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      portalId="root-portal"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default portalByIdTS;
diff --git a/docs-site/src/examples/ts/quarterPicker.ts b/docs-site/src/examples/ts/quarterPicker.ts
new file mode 100644
index 0000000000..a5de662e8a
--- /dev/null
+++ b/docs-site/src/examples/ts/quarterPicker.ts
@@ -0,0 +1,18 @@
+const quarterPickerTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      dateFormat="yyyy, QQQ"
+      showQuarterYearPicker
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default quarterPickerTS;
diff --git a/docs-site/src/examples/ts/rangeMonthPicker.ts b/docs-site/src/examples/ts/rangeMonthPicker.ts
new file mode 100644
index 0000000000..71f589bfd5
--- /dev/null
+++ b/docs-site/src/examples/ts/rangeMonthPicker.ts
@@ -0,0 +1,33 @@
+const rangeMonthPickerTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date("2014/02/08"));
+  const [endDate, setEndDate] = useState<Date | null>(new Date("2014/04/08"));
+
+  return (
+    <>
+      <DatePicker
+        selected={startDate}
+        onChange={(date: Date | null) => setStartDate(date)}
+        selectsStart
+        startDate={startDate}
+        endDate={endDate}
+        dateFormat="MM/yyyy"
+        showMonthYearPicker
+      />
+      <DatePicker
+        selected={endDate}
+        onChange={(date: Date | null) => setEndDate(date)}
+        selectsEnd
+        startDate={startDate}
+        endDate={endDate}
+        dateFormat="MM/yyyy"
+        showMonthYearPicker
+      />
+    </>
+  );
+};
+
+render(<Example />);
+`;
+
+export default rangeMonthPickerTS;
diff --git a/docs-site/src/examples/ts/rangeMonthPickerSelectsRange.ts b/docs-site/src/examples/ts/rangeMonthPickerSelectsRange.ts
new file mode 100644
index 0000000000..1a562b6cd5
--- /dev/null
+++ b/docs-site/src/examples/ts/rangeMonthPickerSelectsRange.ts
@@ -0,0 +1,27 @@
+const rangeMonthPickerSelectsRangeTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date("2014/02/08"));
+  const [endDate, setEndDate] = useState<Date | null>(null);
+
+  const handleChange = ([newStartDate, newEndDate]: [Date | null, Date | null]) => {
+    setStartDate(newStartDate);
+    setEndDate(newEndDate);
+  };
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={handleChange}
+      selectsRange
+      startDate={startDate}
+      endDate={endDate}
+      dateFormat="MM/yyyy"
+      showMonthYearPicker
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default rangeMonthPickerSelectsRangeTS;
diff --git a/docs-site/src/examples/ts/rangeQuarterPicker.ts b/docs-site/src/examples/ts/rangeQuarterPicker.ts
new file mode 100644
index 0000000000..59f5408ca1
--- /dev/null
+++ b/docs-site/src/examples/ts/rangeQuarterPicker.ts
@@ -0,0 +1,33 @@
+const rangeQuarterPickerTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date("2014/02/08"));
+  const [endDate, setEndDate] = useState<Date | null>(new Date("2014/07/08"));
+
+  return (
+    <>
+      <DatePicker
+        selected={startDate}
+        onChange={(date: Date | null) => setStartDate(date)}
+        selectsStart
+        startDate={startDate}
+        endDate={endDate}
+        dateFormat="yyyy, QQQ"
+        showQuarterYearPicker
+      />
+      <DatePicker
+        selected={endDate}
+        onChange={(date: Date | null) => setEndDate(date)}
+        selectsEnd
+        startDate={startDate}
+        endDate={endDate}
+        dateFormat="yyyy, QQQ"
+        showQuarterYearPicker
+      />
+    </>
+  );
+};
+
+render(<Example />);
+`;
+
+export default rangeQuarterPickerTS;
diff --git a/docs-site/src/examples/ts/rangeQuarterPickerSelectsRange.ts b/docs-site/src/examples/ts/rangeQuarterPickerSelectsRange.ts
new file mode 100644
index 0000000000..36f9adfcf9
--- /dev/null
+++ b/docs-site/src/examples/ts/rangeQuarterPickerSelectsRange.ts
@@ -0,0 +1,27 @@
+const rangeQuarterPickerSelectsRangeTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date("2014/02/08"));
+  const [endDate, setEndDate] = useState<Date | null>(null);
+
+  const handleChange = ([newStartDate, newEndDate]: [Date | null, Date | null]) => {
+    setStartDate(newStartDate);
+    setEndDate(newEndDate);
+  };
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={handleChange}
+      selectsRange
+      startDate={startDate}
+      endDate={endDate}
+      dateFormat="yyyy, QQQ"
+      showQuarterYearPicker
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default rangeQuarterPickerSelectsRangeTS;
diff --git a/docs-site/src/examples/ts/rangeSwapRange.ts b/docs-site/src/examples/ts/rangeSwapRange.ts
new file mode 100644
index 0000000000..207e2275b7
--- /dev/null
+++ b/docs-site/src/examples/ts/rangeSwapRange.ts
@@ -0,0 +1,37 @@
+const rangeSwapRangeTS = `
+type TExcludeDates = {
+  date: Date;
+  message?: string;
+}[] | Date[];
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [endDate, setEndDate] = useState<Date | null>(null);
+
+  const onChange = (dates: [Date | null, Date | null]) => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+  };
+
+  const excludeDates: TExcludeDates = [addDays(new Date(), 1), addDays(new Date(), 5)]
+
+  return (
+    <DatePicker
+      swapRange
+      selected={startDate}
+      onChange={onChange}
+      startDate={startDate}
+      endDate={endDate}
+      excludeDates={excludeDates}
+      selectsRange
+      selectsDisabledDaysInRange
+      inline
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default rangeSwapRangeTS;
diff --git a/docs-site/src/examples/ts/rangeYearPicker.ts b/docs-site/src/examples/ts/rangeYearPicker.ts
new file mode 100644
index 0000000000..b20ac57b48
--- /dev/null
+++ b/docs-site/src/examples/ts/rangeYearPicker.ts
@@ -0,0 +1,33 @@
+const rangeYearPickerTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date("2014/02/08"));
+  const [endDate, setEndDate] = useState<Date | null>(new Date("2024/04/08"));
+
+  return (
+    <>
+      <DatePicker
+        selected={startDate}
+        onChange={(date: Date | null) => setStartDate(date)}
+        selectsStart
+        startDate={startDate}
+        endDate={endDate}
+        dateFormat="yyyy"
+        showYearPicker
+      />
+      <DatePicker
+        selected={endDate}
+        onChange={(date: Date | null) => setEndDate(date)}
+        selectsEnd
+        startDate={startDate}
+        endDate={endDate}
+        dateFormat="yyyy"
+        showYearPicker
+      />
+    </>
+  );
+};
+
+render(<Example />);
+`;
+
+export default rangeYearPickerTS;
diff --git a/docs-site/src/examples/ts/rangeYearPickerSelectsRange.ts b/docs-site/src/examples/ts/rangeYearPickerSelectsRange.ts
new file mode 100644
index 0000000000..1294b1ad3e
--- /dev/null
+++ b/docs-site/src/examples/ts/rangeYearPickerSelectsRange.ts
@@ -0,0 +1,27 @@
+const rangeYearPickerSelectsRangeTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date("2014/02/08"));
+  const [endDate, setEndDate] = useState<Date | null>(null);
+
+  const handleChange = ([newStartDate, newEndDate]: [Date | null, Date | null]) => {
+    setStartDate(newStartDate);
+    setEndDate(newEndDate);
+  };
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={handleChange}
+      selectsRange
+      startDate={startDate}
+      endDate={endDate}
+      dateFormat="yyyy"
+      showYearPicker
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default rangeYearPickerSelectsRangeTS;
diff --git a/docs-site/src/examples/ts/rawChange.ts b/docs-site/src/examples/ts/rawChange.ts
new file mode 100644
index 0000000000..acca77166f
--- /dev/null
+++ b/docs-site/src/examples/ts/rawChange.ts
@@ -0,0 +1,24 @@
+const rawChangeTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  const handleChangeRaw = (value: string) => {
+    if (value === "tomorrow") {
+      setStartDate(addDays(new Date(), 1));
+    }
+  };
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      placeholderText='Enter "tomorrow"'
+      onChangeRaw={(event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => handleChangeRaw(event.target.value)}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default rawChangeTS;
diff --git a/docs-site/src/examples/ts/readOnly.ts b/docs-site/src/examples/ts/readOnly.ts
new file mode 100644
index 0000000000..ab91fe18fb
--- /dev/null
+++ b/docs-site/src/examples/ts/readOnly.ts
@@ -0,0 +1,18 @@
+const readOnlyTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      placeholderText="This is readOnly"
+      readOnly
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default readOnlyTS;
diff --git a/docs-site/src/examples/ts/renderCustomDay.ts b/docs-site/src/examples/ts/renderCustomDay.ts
new file mode 100644
index 0000000000..d916f92a05
--- /dev/null
+++ b/docs-site/src/examples/ts/renderCustomDay.ts
@@ -0,0 +1,23 @@
+const RenderCustomDayTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  const renderDayContents = (day: number, date: Date): React.ReactNode => {
+    const tooltipText = \`Tooltip for date: \${date}\`;
+
+    return <span title={tooltipText}>{getDate(date)}</span>;
+  };
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      renderDayContents={renderDayContents}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default RenderCustomDayTS;
diff --git a/docs-site/src/examples/ts/renderCustomHeader.ts b/docs-site/src/examples/ts/renderCustomHeader.ts
new file mode 100644
index 0000000000..2d00577f0e
--- /dev/null
+++ b/docs-site/src/examples/ts/renderCustomHeader.ts
@@ -0,0 +1,85 @@
+const renderCustomHeaderTS = `
+
+const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+] as const;
+
+const years = range(1990, getYear(new Date()) + 1, 1);
+
+const CustomHeader = ({
+  date,
+  changeYear,
+  changeMonth,
+  decreaseMonth,
+  increaseMonth,
+  prevMonthButtonDisabled,
+  nextMonthButtonDisabled,
+}: ReactDatePickerCustomHeaderProps) => (
+  <div
+    style={{
+      margin: 10,
+      display: "flex",
+      justifyContent: "center",
+    }}
+  >
+    <button onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
+      {"<"}
+    </button>
+    <select
+      value={getYear(date)}
+      onChange={({ target: { value } }) => changeYear(value)}
+    >
+      {years.map((option) => (
+        <option key={option} value={option}>
+          {option}
+        </option>
+      ))}
+    </select>
+
+    <select
+      value={MONTHS[getMonth(date)]}
+      onChange={({ target: { value } }) =>
+        changeMonth(MONTHS.indexOf(value))
+      }
+    >
+      {MONTHS.map((option) => (
+        <option key={option} value={option}>
+          {option}
+        </option>
+      ))}
+    </select>
+
+    <button onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
+      {">"}
+    </button>
+  </div>
+);
+
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      renderCustomHeader={CustomHeader}
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default renderCustomHeaderTS;
diff --git a/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.ts b/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.ts
new file mode 100644
index 0000000000..4790ea38f7
--- /dev/null
+++ b/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.ts
@@ -0,0 +1,67 @@
+const renderCustomHeaderTwoMonthsTS = `
+
+const CustomHeader = ({
+  monthDate,
+  customHeaderCount,
+  decreaseMonth,
+  increaseMonth,
+}: ReactDatePickerCustomHeaderProps) => (
+  <div>
+    <button
+      aria-label="Previous Month"
+      className={
+        "react-datepicker__navigation react-datepicker__navigation--previous"
+      }
+      style={customHeaderCount === 1 ? { visibility: "hidden" } : null}
+      onClick={decreaseMonth}
+    >
+      <span
+        className={
+          "react-datepicker__navigation-icon react-datepicker__navigation-icon--previous"
+        }
+      >
+        {"<"}
+      </span>
+    </button>
+    <span className="react-datepicker__current-month">
+      {monthDate.toLocaleString("en-US", {
+        month: "long",
+        year: "numeric",
+      })}
+    </span>
+    <button
+      aria-label="Next Month"
+      className={
+        "react-datepicker__navigation react-datepicker__navigation--next"
+      }
+      style={customHeaderCount === 0 ? { visibility: "hidden" } : null}
+      onClick={increaseMonth}
+    >
+      <span
+        className={
+          "react-datepicker__navigation-icon react-datepicker__navigation-icon--next"
+        }
+      >
+        {">"}
+      </span>
+    </button>
+  </div>
+);
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      renderCustomHeader={CustomHeader}
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      monthsShown={2}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default renderCustomHeaderTwoMonthsTS;
diff --git a/docs-site/src/examples/ts/renderCustomMonth.ts b/docs-site/src/examples/ts/renderCustomMonth.ts
new file mode 100644
index 0000000000..cc98f93f46
--- /dev/null
+++ b/docs-site/src/examples/ts/renderCustomMonth.ts
@@ -0,0 +1,23 @@
+const RenderCustomMonthTS = `
+const Example = () => {
+  const renderMonthContent = (month: number, shortMonth: string, longMonth: string, day: Date): React.ReactNode => {
+    const fullYear = new Date(day).getFullYear();
+    const tooltipText = \`Tooltip for month: \${longMonth} \${fullYear}\`;
+
+    return <span title={tooltipText}>{shortMonth}</span>;
+  };
+
+  return (
+    <DatePicker
+      selected={new Date()}
+      renderMonthContent={renderMonthContent}
+      showMonthYearPicker
+      dateFormat="MM/yyyy"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default RenderCustomMonthTS;
diff --git a/docs-site/src/examples/ts/renderCustomQuarter.ts b/docs-site/src/examples/ts/renderCustomQuarter.ts
new file mode 100644
index 0000000000..cf29164e39
--- /dev/null
+++ b/docs-site/src/examples/ts/renderCustomQuarter.ts
@@ -0,0 +1,22 @@
+const RenderCustomQuarterTS = `
+const Example = () => {
+  const renderQuarterContent = (quarter: number, shortQuarter: string): React.ReactNode => {
+    const tooltipText = \`Tooltip for quarter: \${quarter}\`;
+
+    return <span title={tooltipText}>{shortQuarter}</span>;
+  };
+
+  return (
+    <DatePicker
+      selected={new Date()}
+      renderQuarterContent={renderQuarterContent}
+      showQuarterYearPicker
+      dateFormat="yyyy, QQQ"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default RenderCustomQuarterTS;
diff --git a/docs-site/src/examples/ts/renderCustomYear.ts b/docs-site/src/examples/ts/renderCustomYear.ts
new file mode 100644
index 0000000000..90c13e2607
--- /dev/null
+++ b/docs-site/src/examples/ts/renderCustomYear.ts
@@ -0,0 +1,21 @@
+const RenderCustomYearTS = `
+const Example = () => {
+  const renderYearContent = (year: number): React.ReactNode => {
+    const tooltipText = \`Tooltip for year: \${year}\`;
+    return <span title={tooltipText}>{year}</span>;
+  };
+
+  return (
+    <DatePicker
+      selected={new Date()}
+      renderYearContent={renderYearContent}
+      showYearPicker
+      dateFormat="yyyy"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default RenderCustomYearTS;
diff --git a/docs-site/src/examples/ts/selectsMultiple.ts b/docs-site/src/examples/ts/selectsMultiple.ts
new file mode 100644
index 0000000000..70d228af44
--- /dev/null
+++ b/docs-site/src/examples/ts/selectsMultiple.ts
@@ -0,0 +1,23 @@
+const selectsMultipleTS = `
+const Example = () => {
+  const [selectedDates, setSelectedDates] = useState<Date[] | null>([new Date()]);
+
+  const onChange = (dates: Date[] | null) => {
+    setSelectedDates(dates);
+  };
+
+  return (
+    <DatePicker
+      selectedDates={selectedDates}
+      selectsMultiple
+      onChange={onChange}
+      shouldCloseOnSelect={false}
+      disabledKeyboardNavigation
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default selectsMultipleTS;
diff --git a/docs-site/src/examples/ts/selectsMultipleMonths.ts b/docs-site/src/examples/ts/selectsMultipleMonths.ts
new file mode 100644
index 0000000000..e9f2974b63
--- /dev/null
+++ b/docs-site/src/examples/ts/selectsMultipleMonths.ts
@@ -0,0 +1,25 @@
+const selectsMultipleMonthsTS = `
+const Example = () => {
+  const [selectedDates, setSelectedDates] = useState<Date[] | null>(null);
+
+  const onChange = (dates: Date[] | null) => {
+    setSelectedDates(dates);
+  };
+
+  return (
+    <DatePicker
+      selectedDates={selectedDates}
+      selectsMultiple
+      showMonthYearPicker
+      show
+      onChange={onChange}
+      shouldCloseOnSelect={false}
+      disabledKeyboardNavigation
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default selectsMultipleMonthsTS;
diff --git a/docs-site/src/examples/ts/selectsRange.ts b/docs-site/src/examples/ts/selectsRange.ts
new file mode 100644
index 0000000000..2297a0eb01
--- /dev/null
+++ b/docs-site/src/examples/ts/selectsRange.ts
@@ -0,0 +1,27 @@
+const SelectsRangeTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [endDate, setEndDate] = useState<Date | null>(null);
+
+  const onChange = (dates: [Date | null, Date | null]) => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+  };
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={onChange}
+      startDate={startDate}
+      endDate={endDate}
+      selectsRange
+      inline
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default SelectsRangeTS;
diff --git a/docs-site/src/examples/ts/selectsRangeWithDisabledDates.ts b/docs-site/src/examples/ts/selectsRangeWithDisabledDates.ts
new file mode 100644
index 0000000000..3cf6de92c4
--- /dev/null
+++ b/docs-site/src/examples/ts/selectsRangeWithDisabledDates.ts
@@ -0,0 +1,36 @@
+const SelectsRangeWithDisabledDatesTS = `
+type TExcludeDate = {
+  date: Date;
+  message?: string;
+}[] | Date[];
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [endDate, setEndDate] = useState<Date | null>(null);
+
+  const onChange = (dates: [Date | null, Date | null]) => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+  };
+
+  const excludeDates: TExcludeDate = [addDays(new Date(), 1), addDays(new Date(), 5)];
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={onChange}
+      startDate={startDate}
+      endDate={endDate}
+      excludeDates={excludeDates}
+      selectsRange
+      selectsDisabledDaysInRange
+      inline
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default SelectsRangeWithDisabledDatesTS;
diff --git a/docs-site/src/examples/ts/showTime.ts b/docs-site/src/examples/ts/showTime.ts
new file mode 100644
index 0000000000..ea86f0a7b6
--- /dev/null
+++ b/docs-site/src/examples/ts/showTime.ts
@@ -0,0 +1,21 @@
+const showTimeTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showTimeSelect
+      timeFormat="HH:mm"
+      timeIntervals={15}
+      timeCaption="time"
+      dateFormat="MMMM d, yyyy h:mm aa"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default showTimeTS;
diff --git a/docs-site/src/examples/ts/showTimeOnly.ts b/docs-site/src/examples/ts/showTimeOnly.ts
new file mode 100644
index 0000000000..4014d1a187
--- /dev/null
+++ b/docs-site/src/examples/ts/showTimeOnly.ts
@@ -0,0 +1,21 @@
+const showTimeReadonlyTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showTimeSelect
+      showTimeSelectOnly
+      timeIntervals={15}
+      timeCaption="Time"
+      dateFormat="h:mm aa"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default showTimeReadonlyTS;
diff --git a/docs-site/src/examples/ts/specificDateRange.ts b/docs-site/src/examples/ts/specificDateRange.ts
new file mode 100644
index 0000000000..91fef2b380
--- /dev/null
+++ b/docs-site/src/examples/ts/specificDateRange.ts
@@ -0,0 +1,19 @@
+const specificDateRangeTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      minDate={new Date()}
+      maxDate={addDays(new Date(), 5)}
+      placeholderText="Select a date between today and 5 days in the future"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default specificDateRangeTS;
diff --git a/docs-site/src/examples/ts/strictParsing.ts b/docs-site/src/examples/ts/strictParsing.ts
new file mode 100644
index 0000000000..196de886e0
--- /dev/null
+++ b/docs-site/src/examples/ts/strictParsing.ts
@@ -0,0 +1,17 @@
+const strictParsingTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      strictParsing
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default strictParsingTS;
diff --git a/docs-site/src/examples/ts/tabIndex.ts b/docs-site/src/examples/ts/tabIndex.ts
new file mode 100644
index 0000000000..336841df74
--- /dev/null
+++ b/docs-site/src/examples/ts/tabIndex.ts
@@ -0,0 +1,17 @@
+const tabIndexTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={setStartDate}
+      tabIndex={1}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default tabIndexTS;
diff --git a/docs-site/src/examples/ts/timeInput.ts b/docs-site/src/examples/ts/timeInput.ts
new file mode 100644
index 0000000000..ce5e55d07b
--- /dev/null
+++ b/docs-site/src/examples/ts/timeInput.ts
@@ -0,0 +1,19 @@
+const timeInputTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      timeInputLabel="Time:"
+      dateFormat="MM/dd/yyyy h:mm aa"
+      showTimeInput
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default timeInputTS;
diff --git a/docs-site/src/examples/ts/today.ts b/docs-site/src/examples/ts/today.ts
new file mode 100644
index 0000000000..a671e0e7fc
--- /dev/null
+++ b/docs-site/src/examples/ts/today.ts
@@ -0,0 +1,17 @@
+const todayTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      todayButton="Vandaag"
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default todayTS;
diff --git a/docs-site/src/examples/ts/toggleCalendarOnIconClick.ts b/docs-site/src/examples/ts/toggleCalendarOnIconClick.ts
new file mode 100644
index 0000000000..6e67c2d3f8
--- /dev/null
+++ b/docs-site/src/examples/ts/toggleCalendarOnIconClick.ts
@@ -0,0 +1,18 @@
+const toggleCalendarOnIconClickTS = `
+const Example = () => {
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      showIcon
+      toggleCalendarOnIconClick
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default toggleCalendarOnIconClickTS;
diff --git a/docs-site/src/examples/ts/weekNumbers.ts b/docs-site/src/examples/ts/weekNumbers.ts
new file mode 100644
index 0000000000..1abd11a4c8
--- /dev/null
+++ b/docs-site/src/examples/ts/weekNumbers.ts
@@ -0,0 +1,18 @@
+const WeekNumbersTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      locale="en-GB"
+      showWeekNumbers
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default WeekNumbersTS;
diff --git a/docs-site/src/examples/ts/weekPicker.ts b/docs-site/src/examples/ts/weekPicker.ts
new file mode 100644
index 0000000000..cb944bca36
--- /dev/null
+++ b/docs-site/src/examples/ts/weekPicker.ts
@@ -0,0 +1,20 @@
+const weekPickerTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date("2021/02/22"));
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      dateFormat="I/R"
+      locale="en-GB"
+      showWeekNumbers
+      showWeekPicker
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default weekPickerTS;
diff --git a/docs-site/src/examples/ts/withPortalById.ts b/docs-site/src/examples/ts/withPortalById.ts
new file mode 100644
index 0000000000..20486bb41b
--- /dev/null
+++ b/docs-site/src/examples/ts/withPortalById.ts
@@ -0,0 +1,18 @@
+const withPortalByIdTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      withPortal
+      portalId="root-portal"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default withPortalByIdTS;
diff --git a/docs-site/src/examples/ts/yearDropdown.ts b/docs-site/src/examples/ts/yearDropdown.ts
new file mode 100644
index 0000000000..e5d336abdf
--- /dev/null
+++ b/docs-site/src/examples/ts/yearDropdown.ts
@@ -0,0 +1,20 @@
+const yearDropdownTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showYearDropdown
+      dateFormatCalendar="MMMM"
+      yearDropdownItemNumber={15}
+      scrollableYearDropdown
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default yearDropdownTS;
diff --git a/docs-site/src/examples/ts/yearItemNumber.ts b/docs-site/src/examples/ts/yearItemNumber.ts
new file mode 100644
index 0000000000..b468b90dc7
--- /dev/null
+++ b/docs-site/src/examples/ts/yearItemNumber.ts
@@ -0,0 +1,19 @@
+const yearItemNumberTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showYearPicker
+      dateFormat="yyyy"
+      yearItemNumber={9}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default yearItemNumberTS;
diff --git a/docs-site/src/examples/ts/yearPicker.ts b/docs-site/src/examples/ts/yearPicker.ts
new file mode 100644
index 0000000000..caecdcb7a5
--- /dev/null
+++ b/docs-site/src/examples/ts/yearPicker.ts
@@ -0,0 +1,18 @@
+const yearPickerTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showYearPicker
+      dateFormat="yyyy"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default yearPickerTS;
diff --git a/docs-site/src/examples/ts/yearSelectDropdown.ts b/docs-site/src/examples/ts/yearSelectDropdown.ts
new file mode 100644
index 0000000000..8f140400b1
--- /dev/null
+++ b/docs-site/src/examples/ts/yearSelectDropdown.ts
@@ -0,0 +1,20 @@
+const yearSelectDropdownTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      peekNextMonth
+      showMonthDropdown
+      showYearDropdown
+      dropdownMode="select"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default yearSelectDropdownTS;
diff --git a/docs-site/src/index.jsx b/docs-site/src/index.tsx
similarity index 90%
rename from docs-site/src/index.jsx
rename to docs-site/src/index.tsx
index f50634d567..1275002e11 100644
--- a/docs-site/src/index.jsx
+++ b/docs-site/src/index.tsx
@@ -1,5 +1,5 @@
 import ReactDOM from "react-dom/client";
 import App from "./components/App";
 
-const root = ReactDOM.createRoot(document.getElementById("root"));
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 root.render(<App />);
diff --git a/docs-site/src/types/global.d.ts b/docs-site/src/types/global.d.ts
new file mode 100644
index 0000000000..c9de3efe9c
--- /dev/null
+++ b/docs-site/src/types/global.d.ts
@@ -0,0 +1,9 @@
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*?raw" {
+  const content: string;
+  export default content;
+}
diff --git a/docs-site/src/types/index.ts b/docs-site/src/types/index.ts
new file mode 100644
index 0000000000..0e2366c7c7
--- /dev/null
+++ b/docs-site/src/types/index.ts
@@ -0,0 +1,6 @@
+export interface IExampleConfig {
+  title: string;
+  component: string;
+  componentTS?: string;
+  description?: string | React.ReactElement;
+}
diff --git a/docs-site/tsconfig.json b/docs-site/tsconfig.json
new file mode 100644
index 0000000000..42a14a6e38
--- /dev/null
+++ b/docs-site/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "allowJs": true,
+    "esModuleInterop": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/docs-site/tsconfig.node.json b/docs-site/tsconfig.node.json
new file mode 100644
index 0000000000..42872c59f5
--- /dev/null
+++ b/docs-site/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/docs-site/vite.config.js b/docs-site/vite.config.ts
similarity index 100%
rename from docs-site/vite.config.js
rename to docs-site/vite.config.ts
diff --git a/docs-site/yarn.lock b/docs-site/yarn.lock
index 9147c6dad9..0ef27a7b91 100644
--- a/docs-site/yarn.lock
+++ b/docs-site/yarn.lock
@@ -464,7 +464,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint-community/regexpp@npm:^4.12.1":
+"@eslint-community/eslint-utils@npm:^4.4.0":
+  version: 4.6.1
+  resolution: "@eslint-community/eslint-utils@npm:4.6.1"
+  dependencies:
+    eslint-visitor-keys: "npm:^3.4.3"
+  peerDependencies:
+    eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+  checksum: 10c0/cdeb6f8fc33a83726357d7f736075cdbd6e79dc7ac4b00b15680f1111d0f33bda583e7fafa5937245a058cc66302dc47568bba57b251302dc74964d8e87f56d7
+  languageName: node
+  linkType: hard
+
+"@eslint-community/regexpp@npm:^4.10.0, @eslint-community/regexpp@npm:^4.12.1":
   version: 4.12.1
   resolution: "@eslint-community/regexpp@npm:4.12.1"
   checksum: 10c0/a03d98c246bcb9109aec2c08e4d10c8d010256538dcb3f56610191607214523d4fb1b00aa81df830b6dffb74c5fa0be03642513a289c567949d3e550ca11cdf6
@@ -741,6 +752,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@nodelib/fs.scandir@npm:2.1.5":
+  version: 2.1.5
+  resolution: "@nodelib/fs.scandir@npm:2.1.5"
+  dependencies:
+    "@nodelib/fs.stat": "npm:2.0.5"
+    run-parallel: "npm:^1.1.9"
+  checksum: 10c0/732c3b6d1b1e967440e65f284bd06e5821fedf10a1bea9ed2bb75956ea1f30e08c44d3def9d6a230666574edbaf136f8cfd319c14fd1f87c66e6a44449afb2eb
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2":
+  version: 2.0.5
+  resolution: "@nodelib/fs.stat@npm:2.0.5"
+  checksum: 10c0/88dafe5e3e29a388b07264680dc996c17f4bda48d163a9d4f5c1112979f0ce8ec72aa7116122c350b4e7976bc5566dc3ddb579be1ceaacc727872eb4ed93926d
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.walk@npm:^1.2.3":
+  version: 1.2.8
+  resolution: "@nodelib/fs.walk@npm:1.2.8"
+  dependencies:
+    "@nodelib/fs.scandir": "npm:2.1.5"
+    fastq: "npm:^1.6.0"
+  checksum: 10c0/db9de047c3bb9b51f9335a7bb46f4fcfb6829fb628318c12115fbaf7d369bfce71c15b103d1fc3b464812d936220ee9bc1c8f762d032c9f6be9acc99249095b1
+  languageName: node
+  linkType: hard
+
 "@npmcli/agent@npm:^2.0.0":
   version: 2.2.2
   resolution: "@npmcli/agent@npm:2.2.2"
@@ -1092,6 +1130,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash@npm:^4.17.11":
+  version: 4.17.16
+  resolution: "@types/lodash@npm:4.17.16"
+  checksum: 10c0/cf017901b8ab1d7aabc86d5189d9288f4f99f19a75caf020c0e2c77b8d4cead4db0d0b842d009b029339f92399f49f34377dd7c2721053388f251778b4c23534
+  languageName: node
+  linkType: hard
+
 "@types/prismjs@npm:^1.26.0":
   version: 1.26.3
   resolution: "@types/prismjs@npm:1.26.3"
@@ -1117,6 +1162,124 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/eslint-plugin@npm:^7.0.0":
+  version: 7.18.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:7.18.0"
+  dependencies:
+    "@eslint-community/regexpp": "npm:^4.10.0"
+    "@typescript-eslint/scope-manager": "npm:7.18.0"
+    "@typescript-eslint/type-utils": "npm:7.18.0"
+    "@typescript-eslint/utils": "npm:7.18.0"
+    "@typescript-eslint/visitor-keys": "npm:7.18.0"
+    graphemer: "npm:^1.4.0"
+    ignore: "npm:^5.3.1"
+    natural-compare: "npm:^1.4.0"
+    ts-api-utils: "npm:^1.3.0"
+  peerDependencies:
+    "@typescript-eslint/parser": ^7.0.0
+    eslint: ^8.56.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/2b37948fa1b0dab77138909dabef242a4d49ab93e4019d4ef930626f0a7d96b03e696cd027fa0087881c20e73be7be77c942606b4a76fa599e6b37f6985304c3
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/parser@npm:^7.0.0":
+  version: 7.18.0
+  resolution: "@typescript-eslint/parser@npm:7.18.0"
+  dependencies:
+    "@typescript-eslint/scope-manager": "npm:7.18.0"
+    "@typescript-eslint/types": "npm:7.18.0"
+    "@typescript-eslint/typescript-estree": "npm:7.18.0"
+    "@typescript-eslint/visitor-keys": "npm:7.18.0"
+    debug: "npm:^4.3.4"
+  peerDependencies:
+    eslint: ^8.56.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/370e73fca4278091bc1b657f85e7d74cd52b24257ea20c927a8e17546107ce04fbf313fec99aed0cc2a145ddbae1d3b12e9cc2c1320117636dc1281bcfd08059
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/scope-manager@npm:7.18.0":
+  version: 7.18.0
+  resolution: "@typescript-eslint/scope-manager@npm:7.18.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:7.18.0"
+    "@typescript-eslint/visitor-keys": "npm:7.18.0"
+  checksum: 10c0/038cd58c2271de146b3a594afe2c99290034033326d57ff1f902976022c8b0138ffd3cb893ae439ae41003b5e4bcc00cabf6b244ce40e8668f9412cc96d97b8e
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/type-utils@npm:7.18.0":
+  version: 7.18.0
+  resolution: "@typescript-eslint/type-utils@npm:7.18.0"
+  dependencies:
+    "@typescript-eslint/typescript-estree": "npm:7.18.0"
+    "@typescript-eslint/utils": "npm:7.18.0"
+    debug: "npm:^4.3.4"
+    ts-api-utils: "npm:^1.3.0"
+  peerDependencies:
+    eslint: ^8.56.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/ad92a38007be620f3f7036f10e234abdc2fdc518787b5a7227e55fd12896dacf56e8b34578723fbf9bea8128df2510ba8eb6739439a3879eda9519476d5783fd
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/types@npm:7.18.0":
+  version: 7.18.0
+  resolution: "@typescript-eslint/types@npm:7.18.0"
+  checksum: 10c0/eb7371ac55ca77db8e59ba0310b41a74523f17e06f485a0ef819491bc3dd8909bb930120ff7d30aaf54e888167e0005aa1337011f3663dc90fb19203ce478054
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/typescript-estree@npm:7.18.0":
+  version: 7.18.0
+  resolution: "@typescript-eslint/typescript-estree@npm:7.18.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:7.18.0"
+    "@typescript-eslint/visitor-keys": "npm:7.18.0"
+    debug: "npm:^4.3.4"
+    globby: "npm:^11.1.0"
+    is-glob: "npm:^4.0.3"
+    minimatch: "npm:^9.0.4"
+    semver: "npm:^7.6.0"
+    ts-api-utils: "npm:^1.3.0"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/0c7f109a2e460ec8a1524339479cf78ff17814d23c83aa5112c77fb345e87b3642616291908dcddea1e671da63686403dfb712e4a4435104f92abdfddf9aba81
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/utils@npm:7.18.0":
+  version: 7.18.0
+  resolution: "@typescript-eslint/utils@npm:7.18.0"
+  dependencies:
+    "@eslint-community/eslint-utils": "npm:^4.4.0"
+    "@typescript-eslint/scope-manager": "npm:7.18.0"
+    "@typescript-eslint/types": "npm:7.18.0"
+    "@typescript-eslint/typescript-estree": "npm:7.18.0"
+  peerDependencies:
+    eslint: ^8.56.0
+  checksum: 10c0/a25a6d50eb45c514469a01ff01f215115a4725fb18401055a847ddf20d1b681409c4027f349033a95c4ff7138d28c3b0a70253dfe8262eb732df4b87c547bd1e
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/visitor-keys@npm:7.18.0":
+  version: 7.18.0
+  resolution: "@typescript-eslint/visitor-keys@npm:7.18.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:7.18.0"
+    eslint-visitor-keys: "npm:^3.4.3"
+  checksum: 10c0/538b645f8ff1d9debf264865c69a317074eaff0255e63d7407046176b0f6a6beba34a6c51d511f12444bae12a98c69891eb6f403c9f54c6c2e2849d1c1cb73c0
+  languageName: node
+  linkType: hard
+
 "@vitejs/plugin-react@npm:^4.3.4":
   version: 4.3.4
   resolution: "@vitejs/plugin-react@npm:4.3.4"
@@ -1279,6 +1442,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"array-union@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "array-union@npm:2.1.0"
+  checksum: 10c0/429897e68110374f39b771ec47a7161fc6a8fc33e196857c0a396dc75df0b5f65e4d046674db764330b6bb66b39ef48dd7c53b6a2ee75cfb0681e0c1a7033962
+  languageName: node
+  linkType: hard
+
 "array.prototype.findlast@npm:^1.2.5":
   version: 1.2.5
   resolution: "array.prototype.findlast@npm:1.2.5"
@@ -1387,7 +1557,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"braces@npm:^3.0.2":
+"braces@npm:^3.0.2, braces@npm:^3.0.3":
   version: 3.0.3
   resolution: "braces@npm:3.0.3"
   dependencies:
@@ -1744,6 +1914,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dir-glob@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "dir-glob@npm:3.0.1"
+  dependencies:
+    path-type: "npm:^4.0.0"
+  checksum: 10c0/dcac00920a4d503e38bb64001acb19df4efc14536ada475725e12f52c16777afdee4db827f55f13a908ee7efc0cb282e2e3dbaeeb98c0993dd93d1802d3bf00c
+  languageName: node
+  linkType: hard
+
 "doctrine@npm:^2.1.0":
   version: 2.1.0
   resolution: "doctrine@npm:2.1.0"
@@ -2198,6 +2377,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-visitor-keys@npm:^3.4.3":
+  version: 3.4.3
+  resolution: "eslint-visitor-keys@npm:3.4.3"
+  checksum: 10c0/92708e882c0a5ffd88c23c0b404ac1628cf20104a108c745f240a13c332a11aac54f49a22d5762efbffc18ecbc9a580d1b7ad034bf5f3cc3307e5cbff2ec9820
+  languageName: node
+  linkType: hard
+
 "eslint-visitor-keys@npm:^4.2.0":
   version: 4.2.0
   resolution: "eslint-visitor-keys@npm:4.2.0"
@@ -2312,6 +2498,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-glob@npm:^3.2.9":
+  version: 3.3.3
+  resolution: "fast-glob@npm:3.3.3"
+  dependencies:
+    "@nodelib/fs.stat": "npm:^2.0.2"
+    "@nodelib/fs.walk": "npm:^1.2.3"
+    glob-parent: "npm:^5.1.2"
+    merge2: "npm:^1.3.0"
+    micromatch: "npm:^4.0.8"
+  checksum: 10c0/f6aaa141d0d3384cf73cbcdfc52f475ed293f6d5b65bfc5def368b09163a9f7e5ec2b3014d80f733c405f58e470ee0cc451c2937685045cddcdeaa24199c43fe
+  languageName: node
+  linkType: hard
+
 "fast-json-stable-stringify@npm:^2.0.0":
   version: 2.1.0
   resolution: "fast-json-stable-stringify@npm:2.1.0"
@@ -2326,6 +2525,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fastq@npm:^1.6.0":
+  version: 1.19.1
+  resolution: "fastq@npm:1.19.1"
+  dependencies:
+    reusify: "npm:^1.0.4"
+  checksum: 10c0/ebc6e50ac7048daaeb8e64522a1ea7a26e92b3cee5cd1c7f2316cdca81ba543aa40a136b53891446ea5c3a67ec215fbaca87ad405f102dd97012f62916905630
+  languageName: node
+  linkType: hard
+
 "file-entry-cache@npm:^8.0.0":
   version: 8.0.0
   resolution: "file-entry-cache@npm:8.0.0"
@@ -2592,6 +2800,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"glob-parent@npm:^5.1.2":
+  version: 5.1.2
+  resolution: "glob-parent@npm:5.1.2"
+  dependencies:
+    is-glob: "npm:^4.0.1"
+  checksum: 10c0/cab87638e2112bee3f839ef5f6e0765057163d39c66be8ec1602f3823da4692297ad4e972de876ea17c44d652978638d2fd583c6713d0eb6591706825020c9ee
+  languageName: node
+  linkType: hard
+
 "glob-parent@npm:^6.0.2":
   version: 6.0.2
   resolution: "glob-parent@npm:6.0.2"
@@ -2672,6 +2889,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globby@npm:^11.1.0":
+  version: 11.1.0
+  resolution: "globby@npm:11.1.0"
+  dependencies:
+    array-union: "npm:^2.1.0"
+    dir-glob: "npm:^3.0.1"
+    fast-glob: "npm:^3.2.9"
+    ignore: "npm:^5.2.0"
+    merge2: "npm:^1.4.1"
+    slash: "npm:^3.0.0"
+  checksum: 10c0/b39511b4afe4bd8a7aead3a27c4ade2b9968649abab0a6c28b1a90141b96ca68ca5db1302f7c7bd29eab66bf51e13916b8e0a3d0ac08f75e1e84a39b35691189
+  languageName: node
+  linkType: hard
+
 "gopd@npm:^1.0.1":
   version: 1.0.1
   resolution: "gopd@npm:1.0.1"
@@ -2695,6 +2926,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"graphemer@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "graphemer@npm:1.4.0"
+  checksum: 10c0/e951259d8cd2e0d196c72ec711add7115d42eb9a8146c8eeda5b8d3ac91e5dd816b9cd68920726d9fd4490368e7ed86e9c423f40db87e2d8dfafa00fa17c3a31
+  languageName: node
+  linkType: hard
+
 "has-bigints@npm:^1.0.1, has-bigints@npm:^1.0.2":
   version: 1.0.2
   resolution: "has-bigints@npm:1.0.2"
@@ -2843,6 +3081,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ignore@npm:^5.3.1":
+  version: 5.3.2
+  resolution: "ignore@npm:5.3.2"
+  checksum: 10c0/f9f652c957983634ded1e7f02da3b559a0d4cc210fca3792cb67f1b153623c9c42efdc1c4121af171e295444459fc4a9201101fb041b1104a3c000bccb188337
+  languageName: node
+  linkType: hard
+
 "immutable@npm:^5.0.2":
   version: 5.0.2
   resolution: "immutable@npm:5.0.2"
@@ -3059,7 +3304,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-glob@npm:^4.0.0, is-glob@npm:^4.0.3":
+"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3":
   version: 4.0.3
   resolution: "is-glob@npm:4.0.3"
   dependencies:
@@ -3514,6 +3759,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"merge2@npm:^1.3.0, merge2@npm:^1.4.1":
+  version: 1.4.1
+  resolution: "merge2@npm:1.4.1"
+  checksum: 10c0/254a8a4605b58f450308fc474c82ac9a094848081bf4c06778200207820e5193726dc563a0d2c16468810516a5c97d9d3ea0ca6585d23c58ccfff2403e8dbbeb
+  languageName: node
+  linkType: hard
+
 "micromatch@npm:^4.0.5":
   version: 4.0.5
   resolution: "micromatch@npm:4.0.5"
@@ -3524,6 +3776,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromatch@npm:^4.0.8":
+  version: 4.0.8
+  resolution: "micromatch@npm:4.0.8"
+  dependencies:
+    braces: "npm:^3.0.3"
+    picomatch: "npm:^2.3.1"
+  checksum: 10c0/166fa6eb926b9553f32ef81f5f531d27b4ce7da60e5baf8c021d043b27a388fb95e46a8038d5045877881e673f8134122b59624d5cecbd16eb50a42e7a6b5ca8
+  languageName: node
+  linkType: hard
+
 "minimatch@npm:^3.1.2":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"
@@ -3949,6 +4211,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-type@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "path-type@npm:4.0.0"
+  checksum: 10c0/666f6973f332f27581371efaf303fd6c272cc43c2057b37aa99e3643158c7e4b2626549555d88626e99ea9e046f82f32e41bbde5f1508547e9a11b149b52387c
+  languageName: node
+  linkType: hard
+
 "picocolors@npm:^1.0.0":
   version: 1.0.0
   resolution: "picocolors@npm:1.0.0"
@@ -4061,13 +4330,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"queue-microtask@npm:^1.2.2":
+  version: 1.2.3
+  resolution: "queue-microtask@npm:1.2.3"
+  checksum: 10c0/900a93d3cdae3acd7d16f642c29a642aea32c2026446151f0778c62ac089d4b8e6c986811076e1ae180a694cedf077d453a11b58ff0a865629a4f82ab558e102
+  languageName: node
+  linkType: hard
+
 "react-datepicker-docs@workspace:.":
   version: 0.0.0-use.local
   resolution: "react-datepicker-docs@workspace:."
   dependencies:
     "@eslint/js": "npm:^9.24.0"
+    "@types/lodash": "npm:^4.17.11"
     "@types/react": "npm:^19.1.0"
     "@types/react-dom": "npm:^19.1.2"
+    "@typescript-eslint/eslint-plugin": "npm:^7.0.0"
+    "@typescript-eslint/parser": "npm:^7.0.0"
     "@vitejs/plugin-react": "npm:^4.3.4"
     date-fns: "npm:^4.1.0"
     eslint: "npm:^9.23.0"
@@ -4084,6 +4363,7 @@ __metadata:
     react-live: "npm:^4.1.8"
     sass: "npm:^1.86.3"
     slugify: "npm:^1.6.6"
+    typescript: "npm:^5.3.3"
     vite: "npm:^6.2.5"
   languageName: unknown
   linkType: soft
@@ -4235,6 +4515,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"reusify@npm:^1.0.4":
+  version: 1.1.0
+  resolution: "reusify@npm:1.1.0"
+  checksum: 10c0/4eff0d4a5f9383566c7d7ec437b671cc51b25963bd61bf127c3f3d3f68e44a026d99b8d2f1ad344afff8d278a8fe70a8ea092650a716d22287e8bef7126bb2fa
+  languageName: node
+  linkType: hard
+
 "rollup@npm:^4.30.1":
   version: 4.34.6
   resolution: "rollup@npm:4.34.6"
@@ -4307,6 +4594,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"run-parallel@npm:^1.1.9":
+  version: 1.2.0
+  resolution: "run-parallel@npm:1.2.0"
+  dependencies:
+    queue-microtask: "npm:^1.2.2"
+  checksum: 10c0/200b5ab25b5b8b7113f9901bfe3afc347e19bb7475b267d55ad0eb86a62a46d77510cb0f232507c9e5d497ebda569a08a9867d0d14f57a82ad5564d991588b39
+  languageName: node
+  linkType: hard
+
 "safe-array-concat@npm:^1.1.3":
   version: 1.1.3
   resolution: "safe-array-concat@npm:1.1.3"
@@ -4403,6 +4699,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"semver@npm:^7.6.0":
+  version: 7.7.1
+  resolution: "semver@npm:7.7.1"
+  bin:
+    semver: bin/semver.js
+  checksum: 10c0/fd603a6fb9c399c6054015433051bdbe7b99a940a8fb44b85c2b524c4004b023d7928d47cb22154f8d054ea7ee8597f586605e05b52047f048278e4ac56ae958
+  languageName: node
+  linkType: hard
+
 "set-function-length@npm:^1.2.1, set-function-length@npm:^1.2.2":
   version: 1.2.2
   resolution: "set-function-length@npm:1.2.2"
@@ -4522,6 +4827,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"slash@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "slash@npm:3.0.0"
+  checksum: 10c0/e18488c6a42bdfd4ac5be85b2ced3ccd0224773baae6ad42cfbb9ec74fc07f9fa8396bd35ee638084ead7a2a0818eb5e7151111544d4731ce843019dab4be47b
+  languageName: node
+  linkType: hard
+
 "slugify@npm:^1.6.6":
   version: 1.6.6
   resolution: "slugify@npm:1.6.6"
@@ -4825,6 +5137,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-api-utils@npm:^1.3.0":
+  version: 1.4.3
+  resolution: "ts-api-utils@npm:1.4.3"
+  peerDependencies:
+    typescript: ">=4.2.0"
+  checksum: 10c0/e65dc6e7e8141140c23e1dc94984bf995d4f6801919c71d6dc27cf0cd51b100a91ffcfe5217626193e5bea9d46831e8586febdc7e172df3f1091a7384299e23a
+  languageName: node
+  linkType: hard
+
 "ts-interface-checker@npm:^0.1.9":
   version: 0.1.13
   resolution: "ts-interface-checker@npm:0.1.13"
@@ -4905,6 +5226,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@npm:^5.3.3":
+  version: 5.8.3
+  resolution: "typescript@npm:5.8.3"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10c0/5f8bb01196e542e64d44db3d16ee0e4063ce4f3e3966df6005f2588e86d91c03e1fb131c2581baf0fb65ee79669eea6e161cd448178986587e9f6844446dbb48
+  languageName: node
+  linkType: hard
+
+"typescript@patch:typescript@npm%3A^5.3.3#optional!builtin<compat/typescript>":
+  version: 5.8.3
+  resolution: "typescript@patch:typescript@npm%3A5.8.3#optional!builtin<compat/typescript>::version=5.8.3&hash=5786d5"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10c0/39117e346ff8ebd87ae1510b3a77d5d92dae5a89bde588c747d25da5c146603a99c8ee588c7ef80faaf123d89ed46f6dbd918d534d641083177d5fac38b8a1cb
+  languageName: node
+  linkType: hard
+
 "unbox-primitive@npm:^1.0.2":
   version: 1.0.2
   resolution: "unbox-primitive@npm:1.0.2"

From d1288643c21d047590d62b81e6ce1f690046d653 Mon Sep 17 00:00:00 2001
From: Sergey Kazarinov <kazarinov092@gmail.com>
Date: Sun, 4 May 2025 14:35:05 +0500
Subject: [PATCH 02/18] refactor: formatting code in docs-site

---
 docs-site/src/components/Examples/index.tsx | 6 ++++--
 docs-site/src/examples/ts/calendarIcon.ts   | 2 +-
 docs-site/src/index.tsx                     | 4 +++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/docs-site/src/components/Examples/index.tsx b/docs-site/src/components/Examples/index.tsx
index 792ee4afc3..68f15f97e1 100644
--- a/docs-site/src/components/Examples/index.tsx
+++ b/docs-site/src/components/Examples/index.tsx
@@ -6,7 +6,7 @@ import CodeExampleComponent from "../Example/index.jsx";
 
 import "./style.scss";
 import "react-datepicker/dist/react-datepicker.css";
-import { EXAMPLE_CONFIG } from './config.js';
+import { EXAMPLE_CONFIG } from "./config.js";
 
 export default class exampleComponents extends React.Component {
   componentDidMount() {
@@ -17,7 +17,9 @@ export default class exampleComponents extends React.Component {
   handleAnchorClick = (e: React.MouseEvent, id: string): void => {
     e.preventDefault();
     window.history.replaceState(null, document.title, `#${id}`);
-    document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
+    document
+      .getElementById(id)
+      ?.scrollIntoView({ behavior: "smooth", block: "start" });
   };
 
   render() {
diff --git a/docs-site/src/examples/ts/calendarIcon.ts b/docs-site/src/examples/ts/calendarIcon.ts
index b62434ab67..8fc1b37258 100644
--- a/docs-site/src/examples/ts/calendarIcon.ts
+++ b/docs-site/src/examples/ts/calendarIcon.ts
@@ -1,4 +1,4 @@
-const calendarIconTS  = `
+const calendarIconTS = `
 const Example = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
diff --git a/docs-site/src/index.tsx b/docs-site/src/index.tsx
index 1275002e11..3b2f90aac6 100644
--- a/docs-site/src/index.tsx
+++ b/docs-site/src/index.tsx
@@ -1,5 +1,7 @@
 import ReactDOM from "react-dom/client";
 import App from "./components/App";
 
-const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
+const root = ReactDOM.createRoot(
+  document.getElementById("root") as HTMLElement,
+);
 root.render(<App />);

From 09fa619e25c5cf3e5f3da5e303dad67e9acc060e Mon Sep 17 00:00:00 2001
From: balajis-qb <balaji.s@qburst.com>
Date: Wed, 10 Sep 2025 20:08:49 +0530
Subject: [PATCH 03/18] feat: Update TypeScript examples from string to actual
 components by skipping the type check for the files

- Added a custom tsconfig.json to skip the type checking inside examples/
- Made TypeScript tab is the default tab for documentation
---
 docs-site/src/components/Example/index.tsx    |  14 +-
 docs-site/src/components/Examples/config.tsx  | 442 +++++++++---------
 ...ndarContainer.ts => calendarContainer.tsx} |  18 +-
 .../ts/{calendarIcon.ts => calendarIcon.tsx}  |   8 +-
 ...onExternal.ts => calendarIconExternal.tsx} |   8 +-
 ...IconSvgIcon.ts => calendarIconSvgIcon.tsx} |   8 +-
 ...lendarStartDay.ts => calendarStartDay.tsx} |   8 +-
 docs-site/src/examples/ts/children.ts         |  15 -
 docs-site/src/examples/ts/children.tsx        |  14 +
 .../ts/{clearInput.ts => clearInput.tsx}      |   8 +-
 .../{closeOnScroll.ts => closeOnScroll.tsx}   |   8 +-
 ...lCallback.ts => closeOnScrollCallback.tsx} |   8 +-
 ...eFloatingUI.ts => configureFloatingUI.tsx} |   8 +-
 ...assName.ts => customCalendarClassName.tsx} |   8 +-
 ...customClassName.ts => customClassName.tsx} |   8 +-
 ...stomDateFormat.ts => customDateFormat.tsx} |   8 +-
 ...DayClassName.ts => customDayClassName.tsx} |   8 +-
 .../ts/{customInput.ts => customInput.tsx}    |  27 +-
 ...meClassName.ts => customTimeClassName.tsx} |   8 +-
 ...customTimeInput.ts => customTimeInput.tsx} |  14 +-
 .../ts/{dateRange.ts => dateRange.tsx}        |  12 +-
 ...n.ts => dateRangeInputWithClearButton.tsx} |  13 +-
 ...eWithPortal.ts => dateRangeWithPortal.tsx} |  13 +-
 ...> dateRangeWithShowDisabledNavigation.tsx} |   8 +-
 .../examples/ts/{default.ts => default.tsx}   |   8 +-
 .../examples/ts/{disabled.ts => disabled.tsx} |   8 +-
 ...tion.ts => disabledKeyboardNavigation.tsx} |   8 +-
 ...CloseOnSelect.ts => dontCloseOnSelect.tsx} |   8 +-
 ...eIntervals.ts => excludeDateIntervals.tsx} |  12 +-
 .../ts/{excludeDates.ts => excludeDates.tsx}  |  20 +-
 ...hPicker.ts => excludeDatesMonthPicker.tsx} |  24 +-
 ...er.ts => excludeDatesRangeMonthPicker.tsx} |  25 +-
 ...Message.ts => excludeDatesWithMessage.tsx} |  20 +-
 ...udeTimePeriod.ts => excludeTimePeriod.tsx} |   8 +-
 .../ts/{excludeTimes.ts => excludeTimes.tsx}  |  10 +-
 .../ts/{excludeWeeks.ts => excludeWeeks.tsx}  |  14 +-
 .../ts/{externalForm.ts => externalForm.tsx}  |   8 +-
 .../ts/{filterDates.ts => filterDates.tsx}    |   8 +-
 .../ts/{filterTimes.ts => filterTimes.tsx}    |   8 +-
 .../{fixedCalendar.ts => fixedCalendar.tsx}   |   8 +-
 ...hideTimeCaption.ts => hideTimeCaption.tsx} |   8 +-
 .../{highlightDates.ts => highlightDates.tsx} |  10 +-
 ...atesRanges.ts => highlightDatesRanges.tsx} |  10 +-
 .../ts/{holidayDates.ts => holidayDates.tsx}  |  10 +-
 ...eIntervals.ts => includeDateIntervals.tsx} |   8 +-
 .../ts/{includeDates.ts => includeDates.tsx}  |  14 +-
 ...hPicker.ts => includeDatesMonthPicker.tsx} |   8 +-
 .../ts/{includeTimes.ts => includeTimes.tsx}  |   8 +-
 docs-site/src/examples/ts/index.ts            | 106 -----
 .../ts/{injectTimes.ts => injectTimes.tsx}    |   8 +-
 .../src/examples/ts/{inline.ts => inline.tsx} |   8 +-
 .../{inlineVisible.ts => inlineVisible.tsx}   |   8 +-
 .../src/examples/ts/{locale.ts => locale.tsx} |   8 +-
 .../{localeWithTime.ts => localeWithTime.tsx} |   8 +-
 .../ts/localeWithoutGlobalVariable.ts         |  17 -
 .../ts/localeWithoutGlobalVariable.tsx        |  13 +
 .../examples/ts/{maxDate.ts => maxDate.tsx}   |   8 +-
 .../examples/ts/{minDate.ts => minDate.tsx}   |   8 +-
 .../{monthDropdown.ts => monthDropdown.tsx}   |   8 +-
 ...ropdownShort.ts => monthDropdownShort.tsx} |   8 +-
 .../ts/{monthPicker.ts => monthPicker.tsx}    |   8 +-
 ...rColumns.ts => monthPickerFourColumns.tsx} |   8 +-
 ...kerFullName.ts => monthPickerFullName.tsx} |   8 +-
 ...woColumns.ts => monthPickerTwoColumns.tsx} |   8 +-
 ...hYearDropdown.ts => monthYearDropdown.tsx} |   8 +-
 .../ts/{multiMonth.ts => multiMonth.tsx}      |   8 +-
 ...onthDropdown.ts => multiMonthDropdown.tsx} |   8 +-
 ...ltiMonthInline.ts => multiMonthInline.tsx} |   8 +-
 ...onthPrevious.ts => multiMonthPrevious.tsx} |   8 +-
 .../{noAnchorArrow.ts => noAnchorArrow.tsx}   |   8 +-
 ...onBlurCallbacks.ts => onBlurCallbacks.tsx} |  12 +-
 ...ks.ts => onCalendarOpenStateCallbacks.tsx} |   8 +-
 .../ts/{openToDate.ts => openToDate.tsx}      |   8 +-
 docs-site/src/examples/ts/placeholderText.ts  |   9 -
 docs-site/src/examples/ts/placeholderText.tsx |   5 +
 .../src/examples/ts/{portal.ts => portal.tsx} |   8 +-
 .../ts/{portalById.ts => portalById.tsx}      |   8 +-
 .../{quarterPicker.ts => quarterPicker.tsx}   |   8 +-
 ...ngeMonthPicker.ts => rangeMonthPicker.tsx} |  12 +-
 ...ge.ts => rangeMonthPickerSelectsRange.tsx} |  17 +-
 ...uarterPicker.ts => rangeQuarterPicker.tsx} |  12 +-
 ....ts => rangeQuarterPickerSelectsRange.tsx} |  17 +-
 .../{rangeSwapRange.ts => rangeSwapRange.tsx} |  23 +-
 ...rangeYearPicker.ts => rangeYearPicker.tsx} |  12 +-
 ...nge.ts => rangeYearPickerSelectsRange.tsx} |  17 +-
 .../ts/{rawChange.ts => rawChange.tsx}        |  12 +-
 .../examples/ts/{readOnly.ts => readOnly.tsx} |   8 +-
 ...renderCustomDay.ts => renderCustomDay.tsx} |  10 +-
 ...CustomHeader.ts => renderCustomHeader.tsx} |  14 +-
 ...ths.ts => renderCustomHeaderTwoMonths.tsx} |   9 +-
 .../src/examples/ts/renderCustomMonth.ts      |  23 -
 .../src/examples/ts/renderCustomMonth.tsx     |  24 +
 .../src/examples/ts/renderCustomQuarter.ts    |  22 -
 .../src/examples/ts/renderCustomQuarter.tsx   |  21 +
 ...nderCustomYear.ts => renderCustomYear.tsx} |  10 +-
 ...selectsMultiple.ts => selectsMultiple.tsx} |  12 +-
 ...pleMonths.ts => selectsMultipleMonths.tsx} |   8 +-
 .../ts/{selectsRange.ts => selectsRange.tsx}  |   8 +-
 ...s.ts => selectsRangeWithDisabledDates.tsx} |  23 +-
 .../examples/ts/{showTime.ts => showTime.tsx} |   8 +-
 .../ts/{showTimeOnly.ts => showTimeOnly.tsx}  |   8 +-
 ...ificDateRange.ts => specificDateRange.tsx} |   8 +-
 .../{strictParsing.ts => strictParsing.tsx}   |   8 +-
 docs-site/src/examples/ts/tabIndex.ts         |  17 -
 docs-site/src/examples/ts/tabIndex.tsx        |   9 +
 .../ts/{timeInput.ts => timeInput.tsx}        |   8 +-
 .../src/examples/ts/{today.ts => today.tsx}   |   8 +-
 ...Click.ts => toggleCalendarOnIconClick.tsx} |   8 +-
 .../ts/{weekNumbers.ts => weekNumbers.tsx}    |   8 +-
 .../ts/{weekPicker.ts => weekPicker.tsx}      |  12 +-
 .../{withPortalById.ts => withPortalById.tsx} |   8 +-
 .../ts/{yearDropdown.ts => yearDropdown.tsx}  |   8 +-
 .../{yearItemNumber.ts => yearItemNumber.tsx} |   8 +-
 .../ts/{yearPicker.ts => yearPicker.tsx}      |   8 +-
 ...lectDropdown.ts => yearSelectDropdown.tsx} |   8 +-
 docs-site/src/examples/tsconfig.json          |   6 +
 116 files changed, 665 insertions(+), 1118 deletions(-)
 rename docs-site/src/examples/ts/{calendarContainer.ts => calendarContainer.tsx} (73%)
 rename docs-site/src/examples/ts/{calendarIcon.ts => calendarIcon.tsx} (67%)
 rename docs-site/src/examples/ts/{calendarIconExternal.ts => calendarIconExternal.tsx} (66%)
 rename docs-site/src/examples/ts/{calendarIconSvgIcon.ts => calendarIconSvgIcon.tsx} (89%)
 rename docs-site/src/examples/ts/{calendarStartDay.ts => calendarStartDay.tsx} (66%)
 delete mode 100644 docs-site/src/examples/ts/children.ts
 create mode 100644 docs-site/src/examples/ts/children.tsx
 rename docs-site/src/examples/ts/{clearInput.ts => clearInput.tsx} (72%)
 rename docs-site/src/examples/ts/{closeOnScroll.ts => closeOnScroll.tsx} (67%)
 rename docs-site/src/examples/ts/{closeOnScrollCallback.ts => closeOnScrollCallback.tsx} (68%)
 rename docs-site/src/examples/ts/{configureFloatingUI.ts => configureFloatingUI.tsx} (80%)
 rename docs-site/src/examples/ts/{customCalendarClassName.ts => customCalendarClassName.tsx} (65%)
 rename docs-site/src/examples/ts/{customClassName.ts => customClassName.tsx} (67%)
 rename docs-site/src/examples/ts/{customDateFormat.ts => customDateFormat.tsx} (67%)
 rename docs-site/src/examples/ts/{customDayClassName.ts => customDayClassName.tsx} (72%)
 rename docs-site/src/examples/ts/{customInput.ts => customInput.tsx} (76%)
 rename docs-site/src/examples/ts/{customTimeClassName.ts => customTimeClassName.tsx} (75%)
 rename docs-site/src/examples/ts/{customTimeInput.ts => customTimeInput.tsx} (73%)
 rename docs-site/src/examples/ts/{dateRange.ts => dateRange.tsx} (74%)
 rename docs-site/src/examples/ts/{dateRangeInputWithClearButton.ts => dateRangeInputWithClearButton.tsx} (67%)
 rename docs-site/src/examples/ts/{dateRangeWithPortal.ts => dateRangeWithPortal.tsx} (70%)
 rename docs-site/src/examples/ts/{dateRangeWithShowDisabledNavigation.ts => dateRangeWithShowDisabledNavigation.tsx} (78%)
 rename docs-site/src/examples/ts/{default.ts => default.tsx} (64%)
 rename docs-site/src/examples/ts/{disabled.ts => disabled.tsx} (72%)
 rename docs-site/src/examples/ts/{disabledKeyboardNavigation.ts => disabledKeyboardNavigation.tsx} (68%)
 rename docs-site/src/examples/ts/{dontCloseOnSelect.ts => dontCloseOnSelect.tsx} (67%)
 rename docs-site/src/examples/ts/{excludeDateIntervals.ts => excludeDateIntervals.tsx} (76%)
 rename docs-site/src/examples/ts/{excludeDates.ts => excludeDates.tsx} (66%)
 rename docs-site/src/examples/ts/{excludeDatesMonthPicker.ts => excludeDatesMonthPicker.tsx} (52%)
 rename docs-site/src/examples/ts/{excludeDatesRangeMonthPicker.ts => excludeDatesRangeMonthPicker.tsx} (72%)
 rename docs-site/src/examples/ts/{excludeDatesWithMessage.ts => excludeDatesWithMessage.tsx} (70%)
 rename docs-site/src/examples/ts/{excludeTimePeriod.ts => excludeTimePeriod.tsx} (78%)
 rename docs-site/src/examples/ts/{excludeTimes.ts => excludeTimes.tsx} (84%)
 rename docs-site/src/examples/ts/{excludeWeeks.ts => excludeWeeks.tsx} (70%)
 rename docs-site/src/examples/ts/{externalForm.ts => externalForm.tsx} (77%)
 rename docs-site/src/examples/ts/{filterDates.ts => filterDates.tsx} (80%)
 rename docs-site/src/examples/ts/{filterTimes.ts => filterTimes.tsx} (84%)
 rename docs-site/src/examples/ts/{fixedCalendar.ts => fixedCalendar.tsx} (66%)
 rename docs-site/src/examples/ts/{hideTimeCaption.ts => hideTimeCaption.tsx} (74%)
 rename docs-site/src/examples/ts/{highlightDates.ts => highlightDates.tsx} (82%)
 rename docs-site/src/examples/ts/{highlightDatesRanges.ts => highlightDatesRanges.tsx} (87%)
 rename docs-site/src/examples/ts/{holidayDates.ts => holidayDates.tsx} (86%)
 rename docs-site/src/examples/ts/{includeDateIntervals.ts => includeDateIntervals.tsx} (81%)
 rename docs-site/src/examples/ts/{includeDates.ts => includeDates.tsx} (62%)
 rename docs-site/src/examples/ts/{includeDatesMonthPicker.ts => includeDatesMonthPicker.tsx} (75%)
 rename docs-site/src/examples/ts/{includeTimes.ts => includeTimes.tsx} (84%)
 delete mode 100644 docs-site/src/examples/ts/index.ts
 rename docs-site/src/examples/ts/{injectTimes.ts => injectTimes.tsx} (84%)
 rename docs-site/src/examples/ts/{inline.ts => inline.tsx} (69%)
 rename docs-site/src/examples/ts/{inlineVisible.ts => inlineVisible.tsx} (84%)
 rename docs-site/src/examples/ts/{locale.ts => locale.tsx} (74%)
 rename docs-site/src/examples/ts/{localeWithTime.ts => localeWithTime.tsx} (74%)
 delete mode 100644 docs-site/src/examples/ts/localeWithoutGlobalVariable.ts
 create mode 100644 docs-site/src/examples/ts/localeWithoutGlobalVariable.tsx
 rename docs-site/src/examples/ts/{maxDate.ts => maxDate.tsx} (76%)
 rename docs-site/src/examples/ts/{minDate.ts => minDate.tsx} (75%)
 rename docs-site/src/examples/ts/{monthDropdown.ts => monthDropdown.tsx} (67%)
 rename docs-site/src/examples/ts/{monthDropdownShort.ts => monthDropdownShort.tsx} (68%)
 rename docs-site/src/examples/ts/{monthPicker.ts => monthPicker.tsx} (71%)
 rename docs-site/src/examples/ts/{monthPickerFourColumns.ts => monthPickerFourColumns.tsx} (71%)
 rename docs-site/src/examples/ts/{monthPickerFullName.ts => monthPickerFullName.tsx} (70%)
 rename docs-site/src/examples/ts/{monthPickerTwoColumns.ts => monthPickerTwoColumns.tsx} (72%)
 rename docs-site/src/examples/ts/{monthYearDropdown.ts => monthYearDropdown.tsx} (75%)
 rename docs-site/src/examples/ts/{multiMonth.ts => multiMonth.tsx} (68%)
 rename docs-site/src/examples/ts/{multiMonthDropdown.ts => multiMonthDropdown.tsx} (67%)
 rename docs-site/src/examples/ts/{multiMonthInline.ts => multiMonthInline.tsx} (67%)
 rename docs-site/src/examples/ts/{multiMonthPrevious.ts => multiMonthPrevious.tsx} (67%)
 rename docs-site/src/examples/ts/{noAnchorArrow.ts => noAnchorArrow.tsx} (68%)
 rename docs-site/src/examples/ts/{onBlurCallbacks.ts => onBlurCallbacks.tsx} (71%)
 rename docs-site/src/examples/ts/{onCalendarOpenStateCallbacks.ts => onCalendarOpenStateCallbacks.tsx} (74%)
 rename docs-site/src/examples/ts/{openToDate.ts => openToDate.tsx} (70%)
 delete mode 100644 docs-site/src/examples/ts/placeholderText.ts
 create mode 100644 docs-site/src/examples/ts/placeholderText.tsx
 rename docs-site/src/examples/ts/{portal.ts => portal.tsx} (70%)
 rename docs-site/src/examples/ts/{portalById.ts => portalById.tsx} (69%)
 rename docs-site/src/examples/ts/{quarterPicker.ts => quarterPicker.tsx} (70%)
 rename docs-site/src/examples/ts/{rangeMonthPicker.ts => rangeMonthPicker.tsx} (75%)
 rename docs-site/src/examples/ts/{rangeMonthPickerSelectsRange.ts => rangeMonthPickerSelectsRange.tsx} (53%)
 rename docs-site/src/examples/ts/{rangeQuarterPicker.ts => rangeQuarterPicker.tsx} (75%)
 rename docs-site/src/examples/ts/{rangeQuarterPickerSelectsRange.ts => rangeQuarterPickerSelectsRange.tsx} (53%)
 rename docs-site/src/examples/ts/{rangeSwapRange.ts => rangeSwapRange.tsx} (66%)
 rename docs-site/src/examples/ts/{rangeYearPicker.ts => rangeYearPicker.tsx} (75%)
 rename docs-site/src/examples/ts/{rangeYearPickerSelectsRange.ts => rangeYearPickerSelectsRange.tsx} (53%)
 rename docs-site/src/examples/ts/{rawChange.ts => rawChange.tsx} (61%)
 rename docs-site/src/examples/ts/{readOnly.ts => readOnly.tsx} (72%)
 rename docs-site/src/examples/ts/{renderCustomDay.ts => renderCustomDay.tsx} (69%)
 rename docs-site/src/examples/ts/{renderCustomHeader.ts => renderCustomHeader.tsx} (86%)
 rename docs-site/src/examples/ts/{renderCustomHeaderTwoMonths.ts => renderCustomHeaderTwoMonths.tsx} (91%)
 delete mode 100644 docs-site/src/examples/ts/renderCustomMonth.ts
 create mode 100644 docs-site/src/examples/ts/renderCustomMonth.tsx
 delete mode 100644 docs-site/src/examples/ts/renderCustomQuarter.ts
 create mode 100644 docs-site/src/examples/ts/renderCustomQuarter.tsx
 rename docs-site/src/examples/ts/{renderCustomYear.ts => renderCustomYear.tsx} (62%)
 rename docs-site/src/examples/ts/{selectsMultiple.ts => selectsMultiple.tsx} (72%)
 rename docs-site/src/examples/ts/{selectsMultipleMonths.ts => selectsMultipleMonths.tsx} (75%)
 rename docs-site/src/examples/ts/{selectsRange.ts => selectsRange.tsx} (81%)
 rename docs-site/src/examples/ts/{selectsRangeWithDisabledDates.ts => selectsRangeWithDisabledDates.tsx} (63%)
 rename docs-site/src/examples/ts/{showTime.ts => showTime.tsx} (77%)
 rename docs-site/src/examples/ts/{showTimeOnly.ts => showTimeOnly.tsx} (74%)
 rename docs-site/src/examples/ts/{specificDateRange.ts => specificDateRange.tsx} (74%)
 rename docs-site/src/examples/ts/{strictParsing.ts => strictParsing.tsx} (67%)
 delete mode 100644 docs-site/src/examples/ts/tabIndex.ts
 create mode 100644 docs-site/src/examples/ts/tabIndex.tsx
 rename docs-site/src/examples/ts/{timeInput.ts => timeInput.tsx} (74%)
 rename docs-site/src/examples/ts/{today.ts => today.tsx} (71%)
 rename docs-site/src/examples/ts/{toggleCalendarOnIconClick.ts => toggleCalendarOnIconClick.tsx} (66%)
 rename docs-site/src/examples/ts/{weekNumbers.ts => weekNumbers.tsx} (70%)
 rename docs-site/src/examples/ts/{weekPicker.ts => weekPicker.tsx} (54%)
 rename docs-site/src/examples/ts/{withPortalById.ts => withPortalById.tsx} (69%)
 rename docs-site/src/examples/ts/{yearDropdown.ts => yearDropdown.tsx} (75%)
 rename docs-site/src/examples/ts/{yearItemNumber.ts => yearItemNumber.tsx} (71%)
 rename docs-site/src/examples/ts/{yearPicker.ts => yearPicker.tsx} (70%)
 rename docs-site/src/examples/ts/{yearSelectDropdown.ts => yearSelectDropdown.tsx} (71%)
 create mode 100644 docs-site/src/examples/tsconfig.json

diff --git a/docs-site/src/components/Example/index.tsx b/docs-site/src/components/Example/index.tsx
index 74529ff556..59bfb2a07f 100644
--- a/docs-site/src/components/Example/index.tsx
+++ b/docs-site/src/components/Example/index.tsx
@@ -27,7 +27,7 @@ export default class CodeExampleComponent extends React.Component<
   TState
 > {
   state: TState = {
-    activeTab: "js",
+    activeTab: "ts",
   };
 
   componentDidMount() {
@@ -58,12 +58,6 @@ export default class CodeExampleComponent extends React.Component<
         <h2 className="example__heading">{title}</h2>
         {description && <p>{description}</p>}
         <div className="example__tabs">
-          <button
-            className={`example__tab ${activeTab === "js" ? "active" : ""}`}
-            onClick={() => this.handleTabChange("js")}
-          >
-            JavaScript
-          </button>
           {tsCode && (
             <button
               className={`example__tab ${activeTab === "ts" ? "active" : ""}`}
@@ -72,6 +66,12 @@ export default class CodeExampleComponent extends React.Component<
               TypeScript
             </button>
           )}
+          <button
+            className={`example__tab ${activeTab === "js" ? "active" : ""}`}
+            onClick={() => this.handleTabChange("js")}
+          >
+            JavaScript
+          </button>
         </div>
         <div className="row">
           <LiveProvider
diff --git a/docs-site/src/components/Examples/config.tsx b/docs-site/src/components/Examples/config.tsx
index 95fa47e3ab..603d0a28c7 100644
--- a/docs-site/src/components/Examples/config.tsx
+++ b/docs-site/src/components/Examples/config.tsx
@@ -80,9 +80,9 @@ import StrictParsing from "../../examples/js/strictParsing?raw";
 import MonthPicker from "../../examples/js/monthPicker?raw";
 import WeekPicker from "../../examples/js/weekPicker?raw";
 import ExcludeWeeks from "../../examples/js/excludeWeeks?raw";
-import monthPickerFullName from "../../examples/js/monthPickerFullName?raw";
-import monthPickerTwoColumns from "../../examples/js/monthPickerTwoColumns?raw";
-import monthPickerFourColumns from "../../examples/js/monthPickerFourColumns?raw";
+import MonthPickerFullName from "../../examples/js/monthPickerFullName?raw";
+import MonthPickerTwoColumns from "../../examples/js/monthPickerTwoColumns?raw";
+import MonthPickerFourColumns from "../../examples/js/monthPickerFourColumns?raw";
 import RangeMonthPicker from "../../examples/js/rangeMonthPicker?raw";
 import RangeMonthPickerSelectsRange from "../../examples/js/rangeMonthPickerSelectsRange?raw";
 import QuarterPicker from "../../examples/js/quarterPicker?raw";
@@ -96,7 +96,7 @@ import CustomTimeInput from "../../examples/js/customTimeInput?raw";
 import CloseOnScroll from "../../examples/js/closeOnScroll?raw";
 import CloseOnScrollCallback from "../../examples/js/closeOnScrollCallback?raw";
 import SelectsRange from "../../examples/js/selectsRange?raw";
-import selectsRangeWithDisabledDates from "../../examples/js/selectsRangeWithDisabledDates?raw";
+import SelectsRangeWithDisabledDates from "../../examples/js/selectsRangeWithDisabledDates?raw";
 import CalendarStartDay from "../../examples/js/calendarStartDay?raw";
 import ExternalForm from "../../examples/js/externalForm?raw";
 import CalendarIcon from "../../examples/js/calendarIcon?raw";
@@ -108,170 +108,168 @@ import ToggleCalendarOnIconClick from "../../examples/js/toggleCalendarOnIconCli
 import RangeSwapRange from "../../examples/js/rangeSwapRange?raw";
 
 // TS Examples
-import {
-  defaultTS,
-  calendarContainerTS,
-  calendarIconTS,
-  calendarIconSvgIconTS,
-  calendarIconExternalTS,
-  calendarStartDayTS,
-  onCalendarOpenStateCallbacksTS,
-  toggleCalendarOnIconClickTS,
-  childrenTS,
-  clearInputTS,
-  closeOnScrollTS,
-  closeOnScrollCallbackTS,
-  configureFloatingUIS,
-  customInputTS,
-  renderCustomHeaderTS,
-  renderCustomHeaderTwoMonthsTS,
-  renderCustomDayTS,
-  renderCustomMonthTS,
-  renderCustomQuarterTS,
-  renderCustomYearTS,
-  customCalendarClassNameTS,
-  customClassNameTS,
-  customDayClassNameTS,
-  customDateFormatTS,
-  customTimeClassNameTS,
-  customTimeInputTS,
-  dateRangeTS,
-  selectsRangeTS,
-  selectsRangeWithDisabledDatesTS,
-  dateRangeWithShowDisabledNavigationTS,
-  dateRangeInputWithClearButtonTS,
-  dateRangeWithPortalTS,
-  disabledTS,
-  disabledKeyboardNavigationTS,
-  weekNumbersTS,
-  dontCloseOnSelectTS,
-  excludeDatesTS,
-  excludeDatesWithMessageTS,
-  excludeDateIntervalsTS,
-  excludeDatesMonthPickerTS,
-  excludeDatesRangeMonthPickerTS,
-  excludeTimesTS,
-  filterDatesTS,
-  filterTimesTS,
-  fixedCalendarTS,
-  rawChangeTS,
-  highlightDatesTS,
-  highlightDatesRangesTS,
-  holidayDatesTS,
-  includeDatesTS,
-  includeDateIntervalsTS,
-  includeDatesMonthPickerTS,
-  includeTimesTS,
-  injectTimesTS,
-  inlineTS,
-  inlineVisibleTS,
-  timeInputTS,
-  localeTS,
-  localeWithTimeTS,
-  localeWithoutGlobalVariableTS,
-  maxDateTS,
-  minDateTS,
-  monthPickerTS,
-  monthPickerFullNameTS,
-  monthPickerTwoColumnsTS,
-  monthPickerFourColumnsTS,
-  monthDropdownTS,
-  monthDropdownShortTS,
-  monthYearDropdownTS,
-  multiMonthTS,
-  multiMonthDropdownTS,
-  multiMonthInlineTS,
-  noAnchorArrowTS,
-  onBlurCallbacksTS,
-  openToDateTS,
-  placeholderTextTS,
-  portalTS,
-  portalByIdTS,
-  withPortalByIdTS,
-  quarterPickerTS,
-  rangeMonthPickerTS,
-  rangeMonthPickerSelectsRangeTS,
-  rangeQuarterPickerTS,
-  rangeQuarterPickerSelectsRangeTS,
-  rangeSwapRangeTS,
-  readOnlyTS,
-  showTimeTS,
-  showTimeOnlyTS,
-  hideTimeCaptionTS,
-  multiMonthPreviousTS,
-  specificDateRangeTS,
-  excludeTimePeriodTS,
-  selectsMultipleTS,
-  selectsMultipleMonthsTS,
-  strictParsingTS,
-  tabIndexTS,
-  todayTS,
-  yearPickerTS,
-  rangeYearPickerTS,
-  rangeYearPickerSelectsRangeTS,
-  yearDropdownTS,
-  yearSelectDropdownTS,
-  yearItemNumberTS,
-  weekPickerTS,
-  excludeWeeksTS,
-  externalFormTS,
-} from "../../examples/ts";
+import DefaultTS from "../../examples/ts/default?raw";
+import CalendarContainerTS from "../../examples/ts/calendarContainer?raw";
+import CalendarIconTS from "../../examples/ts/calendarIcon?raw";
+import CalendarIconSvgIconTS from "../../examples/ts/calendarIconSvgIcon?raw";
+import CalendarIconExternalTS from "../../examples/ts/calendarIconExternal?raw";
+import CalendarStartDayTS from "../../examples/ts/calendarStartDay?raw";
+import OnCalendarOpenStateCallbacksTS from "../../examples/ts/onCalendarOpenStateCallbacks?raw";
+import ToggleCalendarOnIconClickTS from "../../examples/ts/toggleCalendarOnIconClick?raw";
+import ChildrenTS from "../../examples/ts/children?raw";
+import ClearInputTS from "../../examples/ts/clearInput?raw";
+import CloseOnScrollTS from "../../examples/ts/closeOnScroll?raw";
+import CloseOnScrollCallbackTS from "../../examples/ts/closeOnScrollCallback?raw";
+import ConfigureFloatingUITS from "../../examples/ts/configureFloatingUI?raw";
+import CustomInputTS from "../../examples/ts/customInput?raw";
+import RenderCustomHeaderTS from "../../examples/ts/renderCustomHeader?raw";
+import RenderCustomHeaderTwoMonthsTS from "../../examples/ts/renderCustomHeaderTwoMonths?raw";
+import RenderCustomDayTS from "../../examples/ts/renderCustomDay?raw";
+import RenderCustomMonthTS from "../../examples/ts/renderCustomMonth?raw";
+import RenderCustomQuarterTS from "../../examples/ts/renderCustomQuarter?raw";
+import RenderCustomYearTS from "../../examples/ts/renderCustomYear?raw";
+import CustomCalendarClassNameTS from "../../examples/ts/customCalendarClassName?raw";
+import CustomClassNameTS from "../../examples/ts/customClassName?raw";
+import CustomDayClassNameTS from "../../examples/ts/customDayClassName?raw";
+import CustomDateFormatTS from "../../examples/ts/customDateFormat?raw";
+import CustomTimeClassNameTS from "../../examples/ts/customTimeClassName?raw";
+import CustomTimeInputTS from "../../examples/ts/customTimeInput?raw";
+import DateRangeTS from "../../examples/ts/dateRange?raw";
+import SelectsRangeTS from "../../examples/ts/selectsRange?raw";
+import SelectsRangeWithDisabledDatesTS from "../../examples/ts/selectsRangeWithDisabledDates?raw";
+import DateRangeWithShowDisabledNavigationTS from "../../examples/ts/dateRangeWithShowDisabledNavigation?raw";
+import DateRangeInputWithClearButtonTS from "../../examples/ts/dateRangeInputWithClearButton?raw";
+import DateRangeWithPortalTS from "../../examples/ts/dateRangeWithPortal?raw";
+import DisabledTS from "../../examples/ts/disabled?raw";
+import DisabledKeyboardNavigationTS from "../../examples/ts/disabledKeyboardNavigation?raw";
+import WeekNumbersTS from "../../examples/ts/weekNumbers?raw";
+import DontCloseOnSelectTS from "../../examples/ts/dontCloseOnSelect?raw";
+import ExcludeDatesTS from "../../examples/ts/excludeDates?raw";
+import ExcludeDatesWithMessageTS from "../../examples/ts/excludeDatesWithMessage?raw";
+import ExcludeDateIntervalsTS from "../../examples/ts/excludeDateIntervals?raw";
+import ExcludeDatesMonthPickerTS from "../../examples/ts/excludeDatesMonthPicker?raw";
+import ExcludeDatesRangeMonthPickerTS from "../../examples/ts/excludeDatesRangeMonthPicker?raw";
+import ExcludeTimesTS from "../../examples/ts/excludeTimes?raw";
+import FilterDatesTS from "../../examples/ts/filterDates?raw";
+import FilterTimesTS from "../../examples/ts/filterTimes?raw";
+import FixedCalendarTS from "../../examples/ts/fixedCalendar?raw";
+import RawChangeTS from "../../examples/ts/rawChange?raw";
+import HighlightDatesTS from "../../examples/ts/highlightDates?raw";
+import HighlightDatesRangesTS from "../../examples/ts/highlightDatesRanges?raw";
+import HolidayDatesTS from "../../examples/ts/holidayDates?raw";
+import IncludeDatesTS from "../../examples/ts/includeDates?raw";
+import IncludeDateIntervalsTS from "../../examples/ts/includeDateIntervals?raw";
+import IncludeDatesMonthPickerTS from "../../examples/ts/includeDatesMonthPicker?raw";
+import IncludeTimesTS from "../../examples/ts/includeTimes?raw";
+import InjectTimesTS from "../../examples/ts/injectTimes?raw";
+import InlineTS from "../../examples/ts/inline?raw";
+import InlineVisibleTS from "../../examples/ts/inlineVisible?raw";
+import TimeInputTS from "../../examples/ts/timeInput?raw";
+import LocaleTS from "../../examples/ts/locale?raw";
+import LocaleWithTimeTS from "../../examples/ts/localeWithTime?raw";
+import LocaleWithoutGlobalVariableTS from "../../examples/ts/localeWithoutGlobalVariable?raw";
+import MinDateTS from "../../examples/ts/minDate?raw";
+import MaxDateTS from "../../examples/ts/maxDate?raw";
+import MonthPickerTS from "../../examples/ts/monthPicker?raw";
+import MonthPickerFullNameTS from "../../examples/ts/monthPickerFullName?raw";
+import MonthPickerTwoColumnsTS from "../../examples/ts/monthPickerTwoColumns?raw";
+import MonthPickerFourColumnsTS from "../../examples/ts/monthPickerFourColumns?raw";
+import MonthDropdownTS from "../../examples/ts/monthDropdown?raw";
+import MonthDropdownShortTS from "../../examples/ts/monthDropdownShort?raw";
+import MonthYearDropdownTS from "../../examples/ts/monthYearDropdown?raw";
+import MultiMonthTS from "../../examples/ts/multiMonth?raw";
+import MultiMonthDropdownTS from "../../examples/ts/multiMonthDropdown?raw";
+import MultiMonthInlineTS from "../../examples/ts/multiMonthInline?raw";
+import NoAnchorArrowTS from "../../examples/ts/noAnchorArrow?raw";
+import OnBlurCallbacksTS from "../../examples/ts/onBlurCallbacks?raw";
+import OpenToDateTS from "../../examples/ts/openToDate?raw";
+import PlaceholderTextTS from "../../examples/ts/placeholderText?raw";
+import PortalTS from "../../examples/ts/portal?raw";
+import PortalByIdTS from "../../examples/ts/portalById?raw";
+import WithPortalByIdTS from "../../examples/ts/withPortalById?raw";
+import QuarterPickerTS from "../../examples/ts/quarterPicker?raw";
+import RangeMonthPickerTS from "../../examples/ts/rangeMonthPicker?raw";
+import RangeMonthPickerSelectsRangeTS from "../../examples/ts/rangeMonthPickerSelectsRange?raw";
+import RangeQuarterPickerTS from "../../examples/ts/rangeQuarterPicker?raw";
+import RangeQuarterPickerSelectsRangeTS from "../../examples/ts/rangeQuarterPickerSelectsRange?raw";
+import RangeSwapRangeTS from "../../examples/ts/rangeSwapRange?raw";
+import ReadOnlyTS from "../../examples/ts/readOnly?raw";
+import ShowTimeTS from "../../examples/ts/showTime?raw";
+import ShowTimeOnlyTS from "../../examples/ts/showTimeOnly?raw";
+import HideTimeCaptionTS from "../../examples/ts/hideTimeCaption?raw";
+import MultiMonthPreviousTS from "../../examples/ts/multiMonthPrevious?raw";
+import SpecificDateRangeTS from "../../examples/ts/specificDateRange?raw";
+import ExcludeTimePeriodTS from "../../examples/ts/excludeTimePeriod?raw";
+import SelectsMultipleTS from "../../examples/ts/selectsMultiple?raw";
+import SelectsMultipleMonthsTS from "../../examples/ts/selectsMultipleMonths?raw";
+import StrictParsingTS from "../../examples/ts/strictParsing?raw";
+import TabIndexTS from "../../examples/ts/tabIndex?raw";
+import TodayTS from "../../examples/ts/today?raw";
+import YearPickerTS from "../../examples/ts/yearPicker?raw";
+import RangeYearPickerTS from "../../examples/ts/rangeYearPicker?raw";
+import RangeYearPickerSelectsRangeTS from "../../examples/ts/rangeYearPickerSelectsRange?raw";
+import YearDropdownTS from "../../examples/ts/yearDropdown?raw";
+import YearSelectDropdownTS from "../../examples/ts/yearSelectDropdown?raw";
+import YearItemNumberTS from "../../examples/ts/yearItemNumber?raw";
+import WeekPickerTS from "../../examples/ts/weekPicker?raw";
+import ExcludeWeeksTS from "../../examples/ts/excludeWeeks?raw";
+import ExternalFormTS from "../../examples/ts/externalForm?raw";
 
 export const EXAMPLE_CONFIG: IExampleConfig[] = [
   {
     title: "Default",
     component: Default,
-    componentTS: defaultTS,
+    componentTS: DefaultTS,
   },
   {
     title: "Calendar Icon",
     component: CalendarIcon,
-    componentTS: calendarIconTS,
+    componentTS: CalendarIconTS,
   },
   {
     title: "Calendar Icon using React Svg Component",
     component: CalendarIconSvgIcon,
-    componentTS: calendarIconSvgIconTS,
+    componentTS: CalendarIconSvgIconTS,
   },
   {
     title: "Calendar Icon using External Lib",
     component: CalendarIconExternal,
-    componentTS: calendarIconExternalTS,
+    componentTS: CalendarIconExternalTS,
   },
   {
     title: "Toggle Calendar open status on click of the calendar icon",
     component: ToggleCalendarOnIconClick,
-    componentTS: toggleCalendarOnIconClickTS,
+    componentTS: ToggleCalendarOnIconClickTS,
   },
   {
     title: "Calendar container",
     component: CalendarContainer,
-    componentTS: calendarContainerTS,
+    componentTS: CalendarContainerTS,
   },
   {
     title: "Calendar open state callbacks",
     component: OnCalendarChangeStateCallbacks,
-    componentTS: onCalendarOpenStateCallbacksTS,
+    componentTS: OnCalendarOpenStateCallbacksTS,
   },
   {
     title: "Children",
     component: Children,
-    componentTS: childrenTS,
+    componentTS: ChildrenTS,
   },
   {
     title: "Clear datepicker input",
     component: ClearInput,
-    componentTS: clearInputTS,
+    componentTS: ClearInputTS,
   },
   {
     title: "Close on scroll",
     component: CloseOnScroll,
-    componentTS: closeOnScrollTS,
+    componentTS: CloseOnScrollTS,
   },
   {
     title: "Close on scroll callback",
     component: CloseOnScrollCallback,
-    componentTS: closeOnScrollCallbackTS,
+    componentTS: CloseOnScrollCallbackTS,
   },
   {
     title: "Configure Floating UI Properties",
@@ -289,484 +287,484 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [
         </a>
       </div>
     ),
-    componentTS: configureFloatingUIS,
+    componentTS: ConfigureFloatingUITS,
   },
   {
     title: "Custom input",
     component: CustomInput,
-    componentTS: customInputTS,
+    componentTS: CustomInputTS,
   },
   {
     title: "Custom header",
     component: RenderCustomHeader,
-    componentTS: renderCustomHeaderTS,
+    componentTS: RenderCustomHeaderTS,
   },
   {
     title: "Custom header with two months displayed",
     component: RenderCustomHeaderTwoMonths,
-    componentTS: renderCustomHeaderTwoMonthsTS,
+    componentTS: RenderCustomHeaderTwoMonthsTS,
   },
   {
     title: "Custom Day",
     component: RenderCustomDay,
-    componentTS: renderCustomDayTS,
+    componentTS: RenderCustomDayTS,
   },
   {
     title: "Custom Month",
     component: RenderCustomMonth,
-    componentTS: renderCustomMonthTS,
+    componentTS: RenderCustomMonthTS,
   },
   {
     title: "Custom Quarter",
     component: RenderCustomQuarter,
-    componentTS: renderCustomQuarterTS,
+    componentTS: RenderCustomQuarterTS,
   },
   {
     title: "Custom Year",
     component: RenderCustomYear,
-    componentTS: renderCustomYearTS,
+    componentTS: RenderCustomYearTS,
   },
   {
     title: "Custom calendar class name",
     component: CustomCalendarClassName,
-    componentTS: customCalendarClassNameTS,
+    componentTS: CustomCalendarClassNameTS,
   },
   {
     title: "Custom class name",
     component: CustomClassName,
-    componentTS: customClassNameTS,
+    componentTS: CustomClassNameTS,
   },
   {
     title: "Custom day class name",
     component: CustomDayClassName,
-    componentTS: customDayClassNameTS,
+    componentTS: CustomDayClassNameTS,
   },
   {
     title: "Custom date format",
     component: CustomDateFormat,
-    componentTS: customDateFormatTS,
+    componentTS: CustomDateFormatTS,
   },
   {
     title: "Custom time class name",
     component: CustomTimeClassName,
-    componentTS: customTimeClassNameTS,
+    componentTS: CustomTimeClassNameTS,
   },
   {
     title: "Custom time input",
     component: CustomTimeInput,
-    componentTS: customTimeInputTS,
+    componentTS: CustomTimeInputTS,
   },
   {
     title: "Date Range",
     component: DateRange,
-    componentTS: dateRangeTS,
+    componentTS: DateRangeTS,
   },
   {
     title: "Date range for one datepicker",
     component: SelectsRange,
-    componentTS: selectsRangeTS,
+    componentTS: SelectsRangeTS,
   },
   {
     title: "Date range for one datepicker with disabled dates highlighted",
-    component: selectsRangeWithDisabledDates,
-    componentTS: selectsRangeWithDisabledDatesTS,
+    component: SelectsRangeWithDisabledDates,
+    componentTS: SelectsRangeWithDisabledDatesTS,
   },
   {
     title: "Date Range with disabled navigation shown",
     component: DateRangeWithShowDisabledNavigation,
-    componentTS: dateRangeWithShowDisabledNavigationTS,
+    componentTS: DateRangeWithShowDisabledNavigationTS,
   },
   {
     title: "Date Range using input with clear button",
     component: DateRangeInputWithClearButton,
-    componentTS: dateRangeInputWithClearButtonTS,
+    componentTS: DateRangeInputWithClearButtonTS,
   },
   {
     title: "Date Range with Portal",
     component: DateRangeWithPortal,
-    componentTS: dateRangeWithPortalTS,
+    componentTS: DateRangeWithPortalTS,
   },
   {
     title: "Disable datepicker",
     component: Disabled,
-    componentTS: disabledTS,
+    componentTS: DisabledTS,
   },
   {
     title: "Disable keyboard navigation",
     component: DisabledKeyboardNavigation,
-    componentTS: disabledKeyboardNavigationTS,
+    componentTS: DisabledKeyboardNavigationTS,
   },
   {
     title: "Display Week Numbers",
     component: WeekNumbers,
-    componentTS: weekNumbersTS,
+    componentTS: WeekNumbersTS,
   },
   {
     title: "Don't hide calendar on date selection",
     component: DontCloseOnSelect,
-    componentTS: dontCloseOnSelectTS,
+    componentTS: DontCloseOnSelectTS,
   },
   {
     title: "Exclude dates",
     component: ExcludeDates,
-    componentTS: excludeDatesTS,
+    componentTS: ExcludeDatesTS,
   },
   {
     title: "Exclude dates with message",
     component: ExcludedWithMessage,
-    componentTS: excludeDatesWithMessageTS,
+    componentTS: ExcludeDatesWithMessageTS,
   },
   {
     title: "Exclude date intervals",
     component: ExcludeDateIntervals,
-    componentTS: excludeDateIntervalsTS,
+    componentTS: ExcludeDateIntervalsTS,
   },
   {
     title: "Exclude Months in Month Picker",
     component: ExcludeDatesMonthPicker,
-    componentTS: excludeDatesMonthPickerTS,
+    componentTS: ExcludeDatesMonthPickerTS,
   },
   {
     title: "Exclude Months in Range Month Picker",
     component: ExcludeDatesRangeMonthPicker,
-    componentTS: excludeDatesRangeMonthPickerTS,
+    componentTS: ExcludeDatesRangeMonthPickerTS,
   },
   {
     title: "Exclude Times",
     component: ExcludeTimes,
-    componentTS: excludeTimesTS,
+    componentTS: ExcludeTimesTS,
   },
   {
     title: "Filter dates",
     component: FilterDates,
-    componentTS: filterDatesTS,
+    componentTS: FilterDatesTS,
   },
   {
     title: "Filter times",
     component: FilterTimes,
-    componentTS: filterTimesTS,
+    componentTS: FilterTimesTS,
   },
   {
     title: "Fixed height of Calendar",
     component: FixedCalendar,
-    componentTS: fixedCalendarTS,
+    componentTS: FixedCalendarTS,
   },
   {
     title: "Get raw input value on change",
     component: RawChange,
-    componentTS: rawChangeTS,
+    componentTS: RawChangeTS,
   },
   {
     title: "Highlight dates",
     component: HighlightDates,
-    componentTS: highlightDatesTS,
+    componentTS: HighlightDatesTS,
   },
   {
     title: "Highlight dates with custom class names and ranges",
     component: HighlightDatesRanges,
-    componentTS: highlightDatesRangesTS,
+    componentTS: HighlightDatesRangesTS,
   },
   {
     title: "Holiday dates",
     component: HolidayDates,
-    componentTS: holidayDatesTS,
+    componentTS: HolidayDatesTS,
   },
   {
     title: "Include dates",
     component: IncludeDates,
-    componentTS: includeDatesTS,
+    componentTS: IncludeDatesTS,
   },
   {
     title: "Include date intervals",
     component: IncludeDateIntervals,
-    componentTS: includeDateIntervalsTS,
+    componentTS: IncludeDateIntervalsTS,
   },
   {
     title: "Include Months in Month Picker",
     component: IncludeDatesMonthPicker,
-    componentTS: includeDatesMonthPickerTS,
+    componentTS: IncludeDatesMonthPickerTS,
   },
   {
     title: "Include Times",
     component: IncludeTimes,
-    componentTS: includeTimesTS,
+    componentTS: IncludeTimesTS,
   },
   {
     title: "Inject Specific Times",
     component: InjectTimes,
-    componentTS: injectTimesTS,
+    componentTS: InjectTimesTS,
   },
   {
     title: "Inline version",
     component: Inline,
-    componentTS: inlineTS,
+    componentTS: InlineTS,
   },
   {
     title: "Button to show Inline version",
     component: InlineVisible,
-    componentTS: inlineVisibleTS,
+    componentTS: InlineVisibleTS,
   },
   {
     title: "Input time",
     component: TimeInput,
-    componentTS: timeInputTS,
+    componentTS: TimeInputTS,
   },
   {
     title: "Locale",
     component: Locale,
-    componentTS: localeTS,
+    componentTS: LocaleTS,
   },
   {
     title: "Locale with time",
     component: LocaleWithTime,
-    componentTS: localeWithTimeTS,
+    componentTS: LocaleWithTimeTS,
   },
   {
     title: "Locale without global variables",
     component: LocaleWithoutGlobalVariable,
-    componentTS: localeWithoutGlobalVariableTS,
+    componentTS: LocaleWithoutGlobalVariableTS,
   },
   {
     title: "Min date",
     component: MinDate,
-    componentTS: minDateTS,
+    componentTS: MinDateTS,
   },
   {
     title: "Max date",
     component: MaxDate,
-    componentTS: maxDateTS,
+    componentTS: MaxDateTS,
   },
   {
     title: "Month Picker",
     component: MonthPicker,
-    componentTS: monthPickerTS,
+    componentTS: MonthPickerTS,
   },
   {
     title: "Month Picker with Full Name",
-    component: monthPickerFullName,
-    componentTS: monthPickerFullNameTS,
+    component: MonthPickerFullName,
+    componentTS: MonthPickerFullNameTS,
   },
   {
     title: "Month Picker Two Columns Layout",
-    component: monthPickerTwoColumns,
-    componentTS: monthPickerTwoColumnsTS,
+    component: MonthPickerTwoColumns,
+    componentTS: MonthPickerTwoColumnsTS,
   },
   {
     title: "Month Picker Four Columns Layout",
-    component: monthPickerFourColumns,
-    componentTS: monthPickerFourColumnsTS,
+    component: MonthPickerFourColumns,
+    componentTS: MonthPickerFourColumnsTS,
   },
   {
     title: "Month dropdown",
     component: MonthDropdown,
-    componentTS: monthDropdownTS,
+    componentTS: MonthDropdownTS,
   },
   {
     title: "Month dropdown short month",
     component: MonthDropdownShort,
-    componentTS: monthDropdownShortTS,
+    componentTS: MonthDropdownShortTS,
   },
   {
     title: "MonthYear dropdown",
     component: MonthYearDropdown,
-    componentTS: monthYearDropdownTS,
+    componentTS: MonthYearDropdownTS,
   },
   {
     title: "Multiple months",
     component: MultiMonth,
-    componentTS: multiMonthTS,
+    componentTS: MultiMonthTS,
   },
   {
     title: "Multiple months with year dropdown",
     component: MultiMonthDropdown,
-    componentTS: multiMonthDropdownTS,
+    componentTS: MultiMonthDropdownTS,
   },
   {
     title: "Multiple months inline",
     component: MultiMonthInline,
-    componentTS: multiMonthInlineTS,
+    componentTS: MultiMonthInlineTS,
   },
   {
     title: "No Anchor Arrow",
     component: NoAnchorArrow,
-    componentTS: noAnchorArrowTS,
+    componentTS: NoAnchorArrowTS,
   },
   {
     title: "onBlur callbacks in console",
     component: OnBlurCallbacks,
-    componentTS: onBlurCallbacksTS,
+    componentTS: OnBlurCallbacksTS,
   },
   {
     title: "Open to date",
     component: OpenToDate,
-    componentTS: openToDateTS,
+    componentTS: OpenToDateTS,
   },
   {
     title: "Placeholder text",
     component: PlaceholderText,
-    componentTS: placeholderTextTS,
+    componentTS: PlaceholderTextTS,
   },
   {
     title: "Portal version",
     component: Portal,
-    componentTS: portalTS,
+    componentTS: PortalTS,
   },
   {
     title: "Portal by id",
     description:
       "If the provided portalId cannot be found in the dom, one will be created by default with that id.",
     component: PortalById,
-    componentTS: portalByIdTS,
+    componentTS: PortalByIdTS,
   },
   {
     title: "Portal version with portal by id",
     description:
       "If the provided portalId cannot be found in the dom, one will be created by default with that id.",
     component: WithPortalById,
-    componentTS: withPortalByIdTS,
+    componentTS: WithPortalByIdTS,
   },
   {
     title: "Quarter Picker",
     component: QuarterPicker,
-    componentTS: quarterPickerTS,
+    componentTS: QuarterPickerTS,
   },
   {
     title: "Range Month Picker",
     component: RangeMonthPicker,
-    componentTS: rangeMonthPickerTS,
+    componentTS: RangeMonthPickerTS,
   },
   {
     title: "Range Month Picker for one month picker",
     component: RangeMonthPickerSelectsRange,
-    componentTS: rangeMonthPickerSelectsRangeTS,
+    componentTS: RangeMonthPickerSelectsRangeTS,
   },
   {
     title: "Range Quarter Picker",
     component: RangeQuarterPicker,
-    componentTS: rangeQuarterPickerTS,
+    componentTS: RangeQuarterPickerTS,
   },
   {
     title: "Range Quarter Picker for one quarter picker",
     component: RangeQuarterPickerSelectsRange,
-    componentTS: rangeQuarterPickerSelectsRangeTS,
+    componentTS: RangeQuarterPickerSelectsRangeTS,
   },
   {
     title: "Range Swap Range",
     description:
       "Swap the start and end date if the end date is before the start date in a pick sequence.",
     component: RangeSwapRange,
-    componentTS: rangeSwapRangeTS,
+    componentTS: RangeSwapRangeTS,
   },
   {
     title: "Read only datepicker",
     component: ReadOnly,
-    componentTS: readOnlyTS,
+    componentTS: ReadOnlyTS,
   },
   {
     title: "Select Time",
     component: ShowTime,
-    componentTS: showTimeTS,
+    componentTS: ShowTimeTS,
   },
   {
     title: "Select Time Only",
     component: ShowTimeOnly,
-    componentTS: showTimeOnlyTS,
+    componentTS: ShowTimeOnlyTS,
   },
   {
     title: "Hide Time Caption",
     component: HideTimeCaption,
-    componentTS: hideTimeCaptionTS,
+    componentTS: HideTimeCaptionTS,
   },
   {
     title: "Show previous months",
     component: MultiMonthPrevious,
-    componentTS: multiMonthPreviousTS,
+    componentTS: MultiMonthPreviousTS,
   },
   {
     title: "Specific date range",
     component: SpecificDateRange,
-    componentTS: specificDateRangeTS,
+    componentTS: SpecificDateRangeTS,
   },
   {
     title: "Specific Time Range",
     component: ExcludeTimePeriod,
-    componentTS: excludeTimePeriodTS,
+    componentTS: ExcludeTimePeriodTS,
   },
   {
     title: "Select multiple dates",
     component: SelectsMultiple,
-    componentTS: selectsMultipleTS,
+    componentTS: SelectsMultipleTS,
   },
   {
     title: "Select multiple months",
     component: SelectsMultipleMonths,
-    componentTS: selectsMultipleMonthsTS,
+    componentTS: SelectsMultipleMonthsTS,
   },
   {
     title: "Strict parsing",
     description:
       "Enables strict format validation for manual date input. When this flag is activated, the component will only accept values that exactly match the specified date format (`dateFormat`).",
     component: StrictParsing,
-    componentTS: strictParsingTS,
+    componentTS: StrictParsingTS,
   },
   {
     title: "TabIndex",
     component: TabIndex,
-    componentTS: tabIndexTS,
+    componentTS: TabIndexTS,
   },
   {
     title: "Today button",
     component: Today,
-    componentTS: todayTS,
+    componentTS: TodayTS,
   },
   {
     title: "Year Picker",
     component: YearPicker,
-    componentTS: yearPickerTS,
+    componentTS: YearPickerTS,
   },
   {
     title: "Range Year Picker",
     component: RangeYearPicker,
-    componentTS: rangeYearPickerTS,
+    componentTS: RangeYearPickerTS,
   },
   {
     title: "Range Year Picker for one datepicker",
     component: RangeYearPickerSelectsRange,
-    componentTS: rangeYearPickerSelectsRangeTS,
+    componentTS: RangeYearPickerSelectsRangeTS,
   },
   {
     title: "Year dropdown",
     component: YearDropdown,
-    componentTS: yearDropdownTS,
+    componentTS: YearDropdownTS,
   },
   {
     title: "Year select dropdown",
     component: YearSelectDropdown,
-    componentTS: yearSelectDropdownTS,
+    componentTS: YearSelectDropdownTS,
   },
   {
     title: "Year item number",
     component: YearItemNumber,
-    componentTS: yearItemNumberTS,
+    componentTS: YearItemNumberTS,
   },
   {
     title: "Calendar Start day",
     component: CalendarStartDay,
-    componentTS: calendarStartDayTS,
+    componentTS: CalendarStartDayTS,
   },
   {
     title: "Week Picker",
     component: WeekPicker,
-    componentTS: weekPickerTS,
+    componentTS: WeekPickerTS,
   },
   {
     title: "Exclude Weeks",
     component: ExcludeWeeks,
-    componentTS: excludeWeeksTS,
+    componentTS: ExcludeWeeksTS,
   },
   {
     title: "External Form",
     component: ExternalForm,
-    componentTS: externalFormTS,
+    componentTS: ExternalFormTS,
   },
 ];
diff --git a/docs-site/src/examples/ts/calendarContainer.ts b/docs-site/src/examples/ts/calendarContainer.tsx
similarity index 73%
rename from docs-site/src/examples/ts/calendarContainer.ts
rename to docs-site/src/examples/ts/calendarContainer.tsx
index bdfe718090..d9ba2d5cf9 100644
--- a/docs-site/src/examples/ts/calendarContainer.ts
+++ b/docs-site/src/examples/ts/calendarContainer.tsx
@@ -1,8 +1,13 @@
-const calendarContainerTS = `
-const Example = () => {
+const CustomCalendarContainer = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
-  const MyContainer = ({ className, children }: {className: string, children: ReactNode}) => {
+  const MyContainer = ({
+    className,
+    children,
+  }: {
+    className: string;
+    children: ReactNode;
+  }) => {
     return (
       <div style={{ padding: "16px", background: "#216ba5", color: "#fff" }}>
         <CalendarContainer className={className}>
@@ -22,9 +27,6 @@ const Example = () => {
       calendarContainer={MyContainer}
     />
   );
-}
+};
 
-render(<Example />);
-`;
-
-export default calendarContainerTS;
+render(CustomCalendarContainer);
diff --git a/docs-site/src/examples/ts/calendarIcon.ts b/docs-site/src/examples/ts/calendarIcon.tsx
similarity index 67%
rename from docs-site/src/examples/ts/calendarIcon.ts
rename to docs-site/src/examples/ts/calendarIcon.tsx
index 8fc1b37258..db199dc8a4 100644
--- a/docs-site/src/examples/ts/calendarIcon.ts
+++ b/docs-site/src/examples/ts/calendarIcon.tsx
@@ -1,5 +1,4 @@
-const calendarIconTS = `
-const Example = () => {
+const CalendarIcon = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -11,7 +10,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default calendarIconTS;
+render(CalendarIcon);
diff --git a/docs-site/src/examples/ts/calendarIconExternal.ts b/docs-site/src/examples/ts/calendarIconExternal.tsx
similarity index 66%
rename from docs-site/src/examples/ts/calendarIconExternal.ts
rename to docs-site/src/examples/ts/calendarIconExternal.tsx
index d3675509dc..9f3c9eba70 100644
--- a/docs-site/src/examples/ts/calendarIconExternal.ts
+++ b/docs-site/src/examples/ts/calendarIconExternal.tsx
@@ -1,5 +1,4 @@
-const calendarIconExternalTS = `
-const Example = () => {
+const CalendarIconExternal = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -12,7 +11,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default calendarIconExternalTS;
+render(CalendarIconExternal);
diff --git a/docs-site/src/examples/ts/calendarIconSvgIcon.ts b/docs-site/src/examples/ts/calendarIconSvgIcon.tsx
similarity index 89%
rename from docs-site/src/examples/ts/calendarIconSvgIcon.ts
rename to docs-site/src/examples/ts/calendarIconSvgIcon.tsx
index 0da06a0c04..ac145395b1 100644
--- a/docs-site/src/examples/ts/calendarIconSvgIcon.ts
+++ b/docs-site/src/examples/ts/calendarIconSvgIcon.tsx
@@ -1,5 +1,4 @@
-const calendarIconSvgIconTS = `
-const Example = () => {
+const CalendarIconSvgIcon = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -34,7 +33,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default calendarIconSvgIconTS;
+render(CalendarIconSvgIcon);
diff --git a/docs-site/src/examples/ts/calendarStartDay.ts b/docs-site/src/examples/ts/calendarStartDay.tsx
similarity index 66%
rename from docs-site/src/examples/ts/calendarStartDay.ts
rename to docs-site/src/examples/ts/calendarStartDay.tsx
index b8d0d7fef2..624615db18 100644
--- a/docs-site/src/examples/ts/calendarStartDay.ts
+++ b/docs-site/src/examples/ts/calendarStartDay.tsx
@@ -1,5 +1,4 @@
-const calendarStartDayTS = `
-const Example = () => {
+const CalendarStartDay = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -11,7 +10,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default calendarStartDayTS;
+render(CalendarStartDay);
diff --git a/docs-site/src/examples/ts/children.ts b/docs-site/src/examples/ts/children.ts
deleted file mode 100644
index 6d75178277..0000000000
--- a/docs-site/src/examples/ts/children.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-const childrenTS = `
-const Example = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
-
-  return (
-    <DatePicker selected={startDate} onChange={(date: Date | null) => setStartDate(date)}>
-      <div style={{ color: "red" }}>Don't forget to check the weather!</div>
-    </DatePicker>
-  );
-};
-
-render(<Example />);
-`;
-
-export default childrenTS;
diff --git a/docs-site/src/examples/ts/children.tsx b/docs-site/src/examples/ts/children.tsx
new file mode 100644
index 0000000000..fe41af9720
--- /dev/null
+++ b/docs-site/src/examples/ts/children.tsx
@@ -0,0 +1,14 @@
+const Children = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+    >
+      <div style={{ color: "red" }}>Don't forget to check the weather!</div>
+    </DatePicker>
+  );
+};
+
+render(Children);
diff --git a/docs-site/src/examples/ts/clearInput.ts b/docs-site/src/examples/ts/clearInput.tsx
similarity index 72%
rename from docs-site/src/examples/ts/clearInput.ts
rename to docs-site/src/examples/ts/clearInput.tsx
index 856a097cdc..0fe2be87ae 100644
--- a/docs-site/src/examples/ts/clearInput.ts
+++ b/docs-site/src/examples/ts/clearInput.tsx
@@ -1,5 +1,4 @@
-const clearInputTS = `
-const Example = () => {
+const ClearInput = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -12,7 +11,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default clearInputTS;
+render(ClearInput);
diff --git a/docs-site/src/examples/ts/closeOnScroll.ts b/docs-site/src/examples/ts/closeOnScroll.tsx
similarity index 67%
rename from docs-site/src/examples/ts/closeOnScroll.ts
rename to docs-site/src/examples/ts/closeOnScroll.tsx
index 043b244031..3ad18c700a 100644
--- a/docs-site/src/examples/ts/closeOnScroll.ts
+++ b/docs-site/src/examples/ts/closeOnScroll.tsx
@@ -1,5 +1,4 @@
-const closeOnScrollTS = `
-const Example = () => {
+const CloseOnScroll = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -11,7 +10,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default closeOnScrollTS;
+render(CloseOnScroll);
diff --git a/docs-site/src/examples/ts/closeOnScrollCallback.ts b/docs-site/src/examples/ts/closeOnScrollCallback.tsx
similarity index 68%
rename from docs-site/src/examples/ts/closeOnScrollCallback.ts
rename to docs-site/src/examples/ts/closeOnScrollCallback.tsx
index 7d4ef9489e..41b6fd6297 100644
--- a/docs-site/src/examples/ts/closeOnScrollCallback.ts
+++ b/docs-site/src/examples/ts/closeOnScrollCallback.tsx
@@ -1,5 +1,4 @@
-const closeOnScrollCallbackTS = `
-const Example = () => {
+const CloseOnScrollCallback = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -11,7 +10,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default closeOnScrollCallbackTS;
+render(CloseOnScrollCallback);
diff --git a/docs-site/src/examples/ts/configureFloatingUI.ts b/docs-site/src/examples/ts/configureFloatingUI.tsx
similarity index 80%
rename from docs-site/src/examples/ts/configureFloatingUI.ts
rename to docs-site/src/examples/ts/configureFloatingUI.tsx
index c5afca7a29..8f097b56e8 100644
--- a/docs-site/src/examples/ts/configureFloatingUI.ts
+++ b/docs-site/src/examples/ts/configureFloatingUI.tsx
@@ -1,5 +1,4 @@
-const configureFloatingUIS = `
-const Example = () => {
+const ConfigureFloatingUI = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -21,7 +20,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default configureFloatingUIS;
+render(ConfigureFloatingUI);
diff --git a/docs-site/src/examples/ts/customCalendarClassName.ts b/docs-site/src/examples/ts/customCalendarClassName.tsx
similarity index 65%
rename from docs-site/src/examples/ts/customCalendarClassName.ts
rename to docs-site/src/examples/ts/customCalendarClassName.tsx
index e588c285ab..cc347ed9e6 100644
--- a/docs-site/src/examples/ts/customCalendarClassName.ts
+++ b/docs-site/src/examples/ts/customCalendarClassName.tsx
@@ -1,5 +1,4 @@
-const CustomCalendarClassNameTS = `
-const Example = () => {
+const CustomCalendarClassName = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -11,7 +10,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default CustomCalendarClassNameTS;
+render(CustomCalendarClassName);
diff --git a/docs-site/src/examples/ts/customClassName.ts b/docs-site/src/examples/ts/customClassName.tsx
similarity index 67%
rename from docs-site/src/examples/ts/customClassName.ts
rename to docs-site/src/examples/ts/customClassName.tsx
index ef6cf8e867..d9910bc80e 100644
--- a/docs-site/src/examples/ts/customClassName.ts
+++ b/docs-site/src/examples/ts/customClassName.tsx
@@ -1,5 +1,4 @@
-const CustomClassNameTS = `
-const Example = () => {
+const CustomClassName = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -11,7 +10,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default CustomClassNameTS;
+render(CustomClassName);
diff --git a/docs-site/src/examples/ts/customDateFormat.ts b/docs-site/src/examples/ts/customDateFormat.tsx
similarity index 67%
rename from docs-site/src/examples/ts/customDateFormat.ts
rename to docs-site/src/examples/ts/customDateFormat.tsx
index 1ebbe6cfb2..cc56053ca7 100644
--- a/docs-site/src/examples/ts/customDateFormat.ts
+++ b/docs-site/src/examples/ts/customDateFormat.tsx
@@ -1,5 +1,4 @@
-const CustomDateFormatTS = `
-const Example = () => {
+const CustomDateFormat = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -11,7 +10,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default CustomDateFormatTS;
+render(CustomDateFormat);
diff --git a/docs-site/src/examples/ts/customDayClassName.ts b/docs-site/src/examples/ts/customDayClassName.tsx
similarity index 72%
rename from docs-site/src/examples/ts/customDayClassName.ts
rename to docs-site/src/examples/ts/customDayClassName.tsx
index d4db65f670..d9468bffba 100644
--- a/docs-site/src/examples/ts/customDayClassName.ts
+++ b/docs-site/src/examples/ts/customDayClassName.tsx
@@ -1,5 +1,4 @@
-const CustomDayClassNameTS = `
-const Example = () => {
+const CustomDayClassName = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -13,7 +12,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default CustomDayClassNameTS;
+render(CustomDayClassName);
diff --git a/docs-site/src/examples/ts/customInput.ts b/docs-site/src/examples/ts/customInput.tsx
similarity index 76%
rename from docs-site/src/examples/ts/customInput.ts
rename to docs-site/src/examples/ts/customInput.tsx
index 2594f7e88b..08a4ca5894 100644
--- a/docs-site/src/examples/ts/customInput.ts
+++ b/docs-site/src/examples/ts/customInput.tsx
@@ -1,10 +1,11 @@
-const customInputTS = `
 type ExampleCustomInputProps = {
   className?: string;
   value?: string;
   onClick?: () => void;
   onBlur?: (event: React.FocusEvent<HTMLElement>) => void;
-  onChange?: (...args: Parameters<Required<DatePickerProps>["onChangeRaw"]>) => void;
+  onChange?: (
+    ...args: Parameters<Required<DatePickerProps>["onChangeRaw"]>
+  ) => void;
   onFocus?: (event: React.FocusEvent<HTMLElement>) => void;
   onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
   id?: ComponentProps<typeof DatePicker>["id"];
@@ -23,16 +24,17 @@ type ExampleCustomInputProps = {
   "aria-labelledby"?: ComponentProps<typeof DatePicker>["ariaLabelledBy"];
 };
 
-const Example = () => {
+const CustomInput = () => {
   const [startDate, setStartDate] = useState(new Date());
 
-  const ExampleCustomInput = forwardRef<HTMLButtonElement, ExampleCustomInputProps>(
-    ({ value, onClick, className }, ref) => (
-      <button className={className} onClick={onClick} ref={ref}>
-        {value}
-      </button>
-    ),
-  );
+  const ExampleCustomInput = forwardRef<
+    HTMLButtonElement,
+    ExampleCustomInputProps
+  >(({ value, onClick, className }, ref) => (
+    <button className={className} onClick={onClick} ref={ref}>
+      {value}
+    </button>
+  ));
 
   return (
     <DatePicker
@@ -43,7 +45,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default customInputTS;
+render(CustomInput);
diff --git a/docs-site/src/examples/ts/customTimeClassName.ts b/docs-site/src/examples/ts/customTimeClassName.tsx
similarity index 75%
rename from docs-site/src/examples/ts/customTimeClassName.ts
rename to docs-site/src/examples/ts/customTimeClassName.tsx
index f0027b52e0..eadf7ec918 100644
--- a/docs-site/src/examples/ts/customTimeClassName.ts
+++ b/docs-site/src/examples/ts/customTimeClassName.tsx
@@ -1,5 +1,4 @@
-const CustomTimeClassNameTS = `
-const Example = () => {
+const CustomTimeClassName = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   const handleColor = (time: Date): string => {
@@ -16,7 +15,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default CustomTimeClassNameTS;
+render(CustomTimeClassName);
diff --git a/docs-site/src/examples/ts/customTimeInput.ts b/docs-site/src/examples/ts/customTimeInput.tsx
similarity index 73%
rename from docs-site/src/examples/ts/customTimeInput.ts
rename to docs-site/src/examples/ts/customTimeInput.tsx
index b38d9a37ac..f14f42a2e6 100644
--- a/docs-site/src/examples/ts/customTimeInput.ts
+++ b/docs-site/src/examples/ts/customTimeInput.tsx
@@ -1,15 +1,16 @@
-const CustomTimeInputTS = `
-
 interface ExampleCustomTimeInputProps {
   date?: Date;
   value: string;
   onChange: (time: string) => void;
 }
 
-const Example = () => {
+const CustomTimeInput = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
-  const ExampleCustomTimeInput = ({ value, onChange }: ExampleCustomTimeInputProps) => (
+  const ExampleCustomTimeInput = ({
+    value,
+    onChange,
+  }: ExampleCustomTimeInputProps) => (
     <input
       value={value}
       onChange={(e) => onChange(e.target.value)}
@@ -28,7 +29,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default CustomTimeInputTS;
+render(CustomTimeInput);
diff --git a/docs-site/src/examples/ts/dateRange.ts b/docs-site/src/examples/ts/dateRange.tsx
similarity index 74%
rename from docs-site/src/examples/ts/dateRange.ts
rename to docs-site/src/examples/ts/dateRange.tsx
index e82cf91bd4..03eaf92629 100644
--- a/docs-site/src/examples/ts/dateRange.ts
+++ b/docs-site/src/examples/ts/dateRange.tsx
@@ -1,6 +1,7 @@
-const dateRangeTS = `
-const Example = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date("2014/02/08"));
+const DateRange = () => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    new Date("2014/02/08"),
+  );
   const [endDate, setEndDate] = useState<Date | null>(new Date("2014/02/10"));
 
   return (
@@ -24,7 +25,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default dateRangeTS;
+render(DateRange);
diff --git a/docs-site/src/examples/ts/dateRangeInputWithClearButton.ts b/docs-site/src/examples/ts/dateRangeInputWithClearButton.tsx
similarity index 67%
rename from docs-site/src/examples/ts/dateRangeInputWithClearButton.ts
rename to docs-site/src/examples/ts/dateRangeInputWithClearButton.tsx
index 72b3a3c6fe..766f15c70d 100644
--- a/docs-site/src/examples/ts/dateRangeInputWithClearButton.ts
+++ b/docs-site/src/examples/ts/dateRangeInputWithClearButton.tsx
@@ -1,6 +1,8 @@
-const DateRangeInputWithClearButtonTS = `
-const Example = () => {
-  const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([null, null]);
+const DateRangeInputWithClearButton = () => {
+  const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([
+    null,
+    null,
+  ]);
   const [startDate, endDate] = dateRange;
 
   return (
@@ -16,7 +18,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default DateRangeInputWithClearButtonTS;
+render(DateRangeInputWithClearButton);
diff --git a/docs-site/src/examples/ts/dateRangeWithPortal.ts b/docs-site/src/examples/ts/dateRangeWithPortal.tsx
similarity index 70%
rename from docs-site/src/examples/ts/dateRangeWithPortal.ts
rename to docs-site/src/examples/ts/dateRangeWithPortal.tsx
index 95d13c31dc..54da56e9de 100644
--- a/docs-site/src/examples/ts/dateRangeWithPortal.ts
+++ b/docs-site/src/examples/ts/dateRangeWithPortal.tsx
@@ -1,6 +1,8 @@
-const DateRangeWithPortalTS = `
-const Example = () => {
-  const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([null, null]);
+const DateRangeWithPortal = () => {
+  const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([
+    null,
+    null,
+  ]);
   const [startDate, endDate] = dateRange;
 
   return (
@@ -16,7 +18,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default DateRangeWithPortalTS;
+render(DateRangeWithPortal);
diff --git a/docs-site/src/examples/ts/dateRangeWithShowDisabledNavigation.ts b/docs-site/src/examples/ts/dateRangeWithShowDisabledNavigation.tsx
similarity index 78%
rename from docs-site/src/examples/ts/dateRangeWithShowDisabledNavigation.ts
rename to docs-site/src/examples/ts/dateRangeWithShowDisabledNavigation.tsx
index a38423bff9..b70c4dde5c 100644
--- a/docs-site/src/examples/ts/dateRangeWithShowDisabledNavigation.ts
+++ b/docs-site/src/examples/ts/dateRangeWithShowDisabledNavigation.tsx
@@ -1,5 +1,4 @@
-const dateRangeWithShowDisabledNavigationTS = `
-const Example = () => {
+const DateRangeWithShowDisabledNavigation = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
   const [endDate, setEndDate] = useState<Date | null>(null);
 
@@ -24,7 +23,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default dateRangeWithShowDisabledNavigationTS;
+render(DateRangeWithShowDisabledNavigation);
diff --git a/docs-site/src/examples/ts/default.ts b/docs-site/src/examples/ts/default.tsx
similarity index 64%
rename from docs-site/src/examples/ts/default.ts
rename to docs-site/src/examples/ts/default.tsx
index 5cbb5e8af0..06e6768cd2 100644
--- a/docs-site/src/examples/ts/default.ts
+++ b/docs-site/src/examples/ts/default.tsx
@@ -1,5 +1,4 @@
-const defaultTS = `
-const Example = () => {
+const Default = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -7,7 +6,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default defaultTS;
+render(Default);
diff --git a/docs-site/src/examples/ts/disabled.ts b/docs-site/src/examples/ts/disabled.tsx
similarity index 72%
rename from docs-site/src/examples/ts/disabled.ts
rename to docs-site/src/examples/ts/disabled.tsx
index 0488676599..9c8e2a8326 100644
--- a/docs-site/src/examples/ts/disabled.ts
+++ b/docs-site/src/examples/ts/disabled.tsx
@@ -1,5 +1,4 @@
-const DisabledTS = `
-const Example = () => {
+const Disabled = () => {
   const [startDate, setStartDate] = useState<Date | null>(null);
 
   return (
@@ -12,7 +11,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default DisabledTS;
+render(Disabled);
diff --git a/docs-site/src/examples/ts/disabledKeyboardNavigation.ts b/docs-site/src/examples/ts/disabledKeyboardNavigation.tsx
similarity index 68%
rename from docs-site/src/examples/ts/disabledKeyboardNavigation.ts
rename to docs-site/src/examples/ts/disabledKeyboardNavigation.tsx
index ee8733cbdc..4460dbce72 100644
--- a/docs-site/src/examples/ts/disabledKeyboardNavigation.ts
+++ b/docs-site/src/examples/ts/disabledKeyboardNavigation.tsx
@@ -1,5 +1,4 @@
-const DisabledKeyboardNavigationTS = `
-const Example = () => {
+const DisabledKeyboardNavigation = () => {
   const [startDate, setStartDate] = useState<Date | null>(null);
 
   return (
@@ -12,7 +11,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default DisabledKeyboardNavigationTS;
+render(DisabledKeyboardNavigation);
diff --git a/docs-site/src/examples/ts/dontCloseOnSelect.ts b/docs-site/src/examples/ts/dontCloseOnSelect.tsx
similarity index 67%
rename from docs-site/src/examples/ts/dontCloseOnSelect.ts
rename to docs-site/src/examples/ts/dontCloseOnSelect.tsx
index f3d144a988..54966a1f28 100644
--- a/docs-site/src/examples/ts/dontCloseOnSelect.ts
+++ b/docs-site/src/examples/ts/dontCloseOnSelect.tsx
@@ -1,5 +1,4 @@
-const DontCloseOnSelectTS = `
-const Example = () => {
+const DontCloseOnSelect = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -11,7 +10,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default DontCloseOnSelectTS;
+render(DontCloseOnSelect);
diff --git a/docs-site/src/examples/ts/excludeDateIntervals.ts b/docs-site/src/examples/ts/excludeDateIntervals.tsx
similarity index 76%
rename from docs-site/src/examples/ts/excludeDateIntervals.ts
rename to docs-site/src/examples/ts/excludeDateIntervals.tsx
index 9d7648139d..04f874d971 100644
--- a/docs-site/src/examples/ts/excludeDateIntervals.ts
+++ b/docs-site/src/examples/ts/excludeDateIntervals.tsx
@@ -1,18 +1,17 @@
-const excludeDateIntervalsTS = `
 type TExcludeDateIntervals = {
   start: Date;
   end: Date;
 }[];
 
-const Example = () => {
+const ExcludeDateIntervals = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   const excludeDateIntervals: TExcludeDateIntervals = [
     {
       start: subDays(new Date(), 5),
-      end: addDays(new Date(), 5)
+      end: addDays(new Date(), 5),
     },
-  ]
+  ];
 
   return (
     <DatePicker
@@ -24,7 +23,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default excludeDateIntervalsTS;
+render(ExcludeDateIntervals);
diff --git a/docs-site/src/examples/ts/excludeDates.ts b/docs-site/src/examples/ts/excludeDates.tsx
similarity index 66%
rename from docs-site/src/examples/ts/excludeDates.ts
rename to docs-site/src/examples/ts/excludeDates.tsx
index cfebc66bf1..cd18a6d74a 100644
--- a/docs-site/src/examples/ts/excludeDates.ts
+++ b/docs-site/src/examples/ts/excludeDates.tsx
@@ -1,13 +1,14 @@
-const excludeDatesTS = `
-type TExcludeDates = {
-  date: Date;
-  message?: string;
-}[] | Date[];
+type TExcludeDates =
+  | {
+      date: Date;
+      message?: string;
+    }[]
+  | Date[];
 
-const Example = () => {
+const ExcludeDates = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
-  const excludeDates: TExcludeDates = [new Date(), subDays(new Date(), 1)]
+  const excludeDates: TExcludeDates = [new Date(), subDays(new Date(), 1)];
 
   return (
     <DatePicker
@@ -19,7 +20,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default excludeDatesTS;
+render(ExcludeDates);
diff --git a/docs-site/src/examples/ts/excludeDatesMonthPicker.ts b/docs-site/src/examples/ts/excludeDatesMonthPicker.tsx
similarity index 52%
rename from docs-site/src/examples/ts/excludeDatesMonthPicker.ts
rename to docs-site/src/examples/ts/excludeDatesMonthPicker.tsx
index 093cbc0945..7567120dc8 100644
--- a/docs-site/src/examples/ts/excludeDatesMonthPicker.ts
+++ b/docs-site/src/examples/ts/excludeDatesMonthPicker.tsx
@@ -1,16 +1,19 @@
-const excludeDatesMonthPickerTS = `
-type TExcludeDates = {
-  date: Date;
-  message?: string;
-}[] | Date[];
+type TExcludeDates =
+  | {
+      date: Date;
+      message?: string;
+    }[]
+  | Date[];
 
-const Example = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date("2024-08-01"));
+const ExcludeDatesMonthPicker = () => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    new Date("2024-08-01"),
+  );
 
   const excludeDates: TExcludeDates = [
     new Date("2024-05-01"),
     new Date("2024-06-01"),
-  ]
+  ];
 
   return (
     <DatePicker
@@ -23,7 +26,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default excludeDatesMonthPickerTS;
+render(ExcludeDatesMonthPicker);
diff --git a/docs-site/src/examples/ts/excludeDatesRangeMonthPicker.ts b/docs-site/src/examples/ts/excludeDatesRangeMonthPicker.tsx
similarity index 72%
rename from docs-site/src/examples/ts/excludeDatesRangeMonthPicker.ts
rename to docs-site/src/examples/ts/excludeDatesRangeMonthPicker.tsx
index 7e340e1151..5732fd1931 100644
--- a/docs-site/src/examples/ts/excludeDatesRangeMonthPicker.ts
+++ b/docs-site/src/examples/ts/excludeDatesRangeMonthPicker.tsx
@@ -1,16 +1,20 @@
-const excludeDatesRangeMonthPickerTS = `
-type TExcludeDates = {
-  date: Date;
-  message?: string;
-}[] | Date[];
+type TExcludeDates =
+  | {
+      date: Date;
+      message?: string;
+    }[]
+  | Date[];
 
-const Example = () => {
+const ExcludeDatesRangeMonthPicker = () => {
   const defaultStartDate = new Date("2024-08-01");
   const defaultEndDate = new Date("2024-10-01");
   const [startDate, setStartDate] = useState<Date | null>(defaultStartDate);
   const [endDate, setEndDate] = useState<Date | null>(defaultEndDate);
 
-  const handleChange = ([newStartDate, newEndDate]: [Date | null, Date | null]) => {
+  const handleChange = ([newStartDate, newEndDate]: [
+    Date | null,
+    Date | null,
+  ]) => {
     setStartDate(newStartDate);
     setEndDate(newEndDate);
   };
@@ -20,7 +24,7 @@ const Example = () => {
     new Date("2024-02-01"),
     new Date("2024-01-01"),
     new Date("2024-11-01"),
-  ]
+  ];
 
   return (
     <DatePicker
@@ -37,7 +41,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default excludeDatesRangeMonthPickerTS;
+render(ExcludeDatesRangeMonthPicker);
diff --git a/docs-site/src/examples/ts/excludeDatesWithMessage.ts b/docs-site/src/examples/ts/excludeDatesWithMessage.tsx
similarity index 70%
rename from docs-site/src/examples/ts/excludeDatesWithMessage.ts
rename to docs-site/src/examples/ts/excludeDatesWithMessage.tsx
index e520e74ab4..44b1f25d6c 100644
--- a/docs-site/src/examples/ts/excludeDatesWithMessage.ts
+++ b/docs-site/src/examples/ts/excludeDatesWithMessage.tsx
@@ -1,16 +1,17 @@
-const excludeDatesWithMessageTS = `
-type TExcludeDates = {
-  date: Date;
-  message?: string;
-}[] | Date[];
+type TExcludeDates =
+  | {
+      date: Date;
+      message?: string;
+    }[]
+  | Date[];
 
-const Example = () => {
+const ExcludeDatesWithMessage = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   const excludeDates: TExcludeDates = [
     { date: new Date(), message: "Today is excluded" },
     { date: subDays(new Date(), 1), message: "This day is excluded" },
-  ]
+  ];
 
   return (
     <DatePicker
@@ -22,7 +23,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default excludeDatesWithMessageTS;
+render(ExcludeDatesWithMessage);
diff --git a/docs-site/src/examples/ts/excludeTimePeriod.ts b/docs-site/src/examples/ts/excludeTimePeriod.tsx
similarity index 78%
rename from docs-site/src/examples/ts/excludeTimePeriod.ts
rename to docs-site/src/examples/ts/excludeTimePeriod.tsx
index 2aa804f9c7..5d0527338a 100644
--- a/docs-site/src/examples/ts/excludeTimePeriod.ts
+++ b/docs-site/src/examples/ts/excludeTimePeriod.tsx
@@ -1,5 +1,4 @@
-const excludeTimePeriodTS = `
-const Example = () => {
+const ExcludeTimePeriod = () => {
   const [startDate, setStartDate] = useState<Date | null>(
     setHours(setMinutes(new Date(), 30), 17),
   );
@@ -16,7 +15,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default excludeTimePeriodTS;
+render(ExcludeTimePeriod);
diff --git a/docs-site/src/examples/ts/excludeTimes.ts b/docs-site/src/examples/ts/excludeTimes.tsx
similarity index 84%
rename from docs-site/src/examples/ts/excludeTimes.ts
rename to docs-site/src/examples/ts/excludeTimes.tsx
index 2d9aae610d..d2a45b10f5 100644
--- a/docs-site/src/examples/ts/excludeTimes.ts
+++ b/docs-site/src/examples/ts/excludeTimes.tsx
@@ -1,7 +1,6 @@
-const excludeTimesTS = `
 type TExcludeTimes = Date[];
 
-const Example = () => {
+const ExcludeTimes = () => {
   const [startDate, setStartDate] = useState<Date | null>(
     setHours(setMinutes(new Date(), 30), 16),
   );
@@ -11,7 +10,7 @@ const Example = () => {
     setHours(setMinutes(new Date(), 30), 18),
     setHours(setMinutes(new Date(), 30), 19),
     setHours(setMinutes(new Date(), 30), 17),
-  ]
+  ];
 
   return (
     <DatePicker
@@ -24,7 +23,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default excludeTimesTS;
+render(ExcludeTimes);
diff --git a/docs-site/src/examples/ts/excludeWeeks.ts b/docs-site/src/examples/ts/excludeWeeks.tsx
similarity index 70%
rename from docs-site/src/examples/ts/excludeWeeks.ts
rename to docs-site/src/examples/ts/excludeWeeks.tsx
index 05e1453bfb..b061e81960 100644
--- a/docs-site/src/examples/ts/excludeWeeks.ts
+++ b/docs-site/src/examples/ts/excludeWeeks.tsx
@@ -1,16 +1,17 @@
-const excludeWeeksTS = `
 type TExcludeDateIntervals = {
   start: Date;
   end: Date;
 }[];
 
-const Example = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date("2021/02/22"));
+const ExcludeWeeks = () => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    new Date("2021/02/22"),
+  );
 
   const excludeWeeks: TExcludeDateIntervals = [
     { start: "2021/02/08", end: "2021/02/14" },
     { start: "2021/01/18", end: "2021/01/24" },
-  ]
+  ];
 
   return (
     <DatePicker
@@ -25,7 +26,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default excludeWeeksTS;
+render(ExcludeWeeks);
diff --git a/docs-site/src/examples/ts/externalForm.ts b/docs-site/src/examples/ts/externalForm.tsx
similarity index 77%
rename from docs-site/src/examples/ts/externalForm.ts
rename to docs-site/src/examples/ts/externalForm.tsx
index ef43f561e0..3b60f97140 100644
--- a/docs-site/src/examples/ts/externalForm.ts
+++ b/docs-site/src/examples/ts/externalForm.tsx
@@ -1,5 +1,4 @@
-const externalFormTS = `
-const Example = () => {
+const ExternalForm = () => {
   const [startDate, setStartDate] = useState<Date | null>(null);
 
   return (
@@ -17,7 +16,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default externalFormTS;
+render(ExternalForm);
diff --git a/docs-site/src/examples/ts/filterDates.ts b/docs-site/src/examples/ts/filterDates.tsx
similarity index 80%
rename from docs-site/src/examples/ts/filterDates.ts
rename to docs-site/src/examples/ts/filterDates.tsx
index 980504607e..fb88ebe413 100644
--- a/docs-site/src/examples/ts/filterDates.ts
+++ b/docs-site/src/examples/ts/filterDates.tsx
@@ -1,7 +1,6 @@
-const filterDatesTS = `
 type TFilterDate = (date: Date) => boolean;
 
-const Example = () => {
+const FilterDates = () => {
   const [startDate, setStartDate] = useState<Date | null>(null);
 
   const isWeekday: TFilterDate = (date) => {
@@ -19,7 +18,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default filterDatesTS;
+render(FilterDates);
diff --git a/docs-site/src/examples/ts/filterTimes.ts b/docs-site/src/examples/ts/filterTimes.tsx
similarity index 84%
rename from docs-site/src/examples/ts/filterTimes.ts
rename to docs-site/src/examples/ts/filterTimes.tsx
index 165f4c3803..828123c311 100644
--- a/docs-site/src/examples/ts/filterTimes.ts
+++ b/docs-site/src/examples/ts/filterTimes.tsx
@@ -1,7 +1,6 @@
-const filterTimesTS = `
 type TFilterTime = (time: Date) => boolean;
 
-const Example = () => {
+const FilterTimes = () => {
   const [startDate, setStartDate] = useState<Date | null>(
     setHours(setMinutes(new Date(), 0), 9),
   );
@@ -24,7 +23,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default filterTimesTS;
+render(FilterTimes);
diff --git a/docs-site/src/examples/ts/fixedCalendar.ts b/docs-site/src/examples/ts/fixedCalendar.tsx
similarity index 66%
rename from docs-site/src/examples/ts/fixedCalendar.ts
rename to docs-site/src/examples/ts/fixedCalendar.tsx
index a732a7e81b..e9f49d5950 100644
--- a/docs-site/src/examples/ts/fixedCalendar.ts
+++ b/docs-site/src/examples/ts/fixedCalendar.tsx
@@ -1,5 +1,4 @@
-const fixedCalendarTS = `
-const Example = () => {
+const FixedCalendar = () => {
   const [startDate, setStartDate] = useState<Date | null>(null);
 
   return (
@@ -11,7 +10,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default fixedCalendarTS;
+render(FixedCalendar);
diff --git a/docs-site/src/examples/ts/hideTimeCaption.ts b/docs-site/src/examples/ts/hideTimeCaption.tsx
similarity index 74%
rename from docs-site/src/examples/ts/hideTimeCaption.ts
rename to docs-site/src/examples/ts/hideTimeCaption.tsx
index a496d0a7c8..c2469739b9 100644
--- a/docs-site/src/examples/ts/hideTimeCaption.ts
+++ b/docs-site/src/examples/ts/hideTimeCaption.tsx
@@ -1,5 +1,4 @@
-const hideTimeCaptionTS = `
-const Example = () => {
+const HideTimeCaption = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -15,7 +14,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default hideTimeCaptionTS;
+render(HideTimeCaption);
diff --git a/docs-site/src/examples/ts/highlightDates.ts b/docs-site/src/examples/ts/highlightDates.tsx
similarity index 82%
rename from docs-site/src/examples/ts/highlightDates.ts
rename to docs-site/src/examples/ts/highlightDates.tsx
index bec63ab7dd..1b7b97ab59 100644
--- a/docs-site/src/examples/ts/highlightDates.ts
+++ b/docs-site/src/examples/ts/highlightDates.tsx
@@ -1,11 +1,10 @@
-const highlightDatesTS = `
 type HighlightDate = {
   [className: string]: Date[];
-}
+};
 
 type THighlightDates = (Date | HighlightDate)[];
 
-const Example = () => {
+const HighlightDates = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   const highlightDates: THighlightDates = [
@@ -23,7 +22,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default highlightDatesTS;
+render(HighlightDates);
diff --git a/docs-site/src/examples/ts/highlightDatesRanges.ts b/docs-site/src/examples/ts/highlightDatesRanges.tsx
similarity index 87%
rename from docs-site/src/examples/ts/highlightDatesRanges.ts
rename to docs-site/src/examples/ts/highlightDatesRanges.tsx
index 591588f90e..c020e2af31 100644
--- a/docs-site/src/examples/ts/highlightDatesRanges.ts
+++ b/docs-site/src/examples/ts/highlightDatesRanges.tsx
@@ -1,11 +1,10 @@
-const highlightDatesRangesTS = `
 type HighlightDate = {
   [className: string]: Date[];
-}
+};
 
 type THighlightDates = (Date | HighlightDate)[];
 
-const Example = () => {
+const HighlightDatesRanges = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   const highlightWithRanges: THighlightDates = [
@@ -37,7 +36,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default highlightDatesRangesTS;
+render(HighlightDatesRanges);
diff --git a/docs-site/src/examples/ts/holidayDates.ts b/docs-site/src/examples/ts/holidayDates.tsx
similarity index 86%
rename from docs-site/src/examples/ts/holidayDates.ts
rename to docs-site/src/examples/ts/holidayDates.tsx
index 5ed02e1959..ae4e1dc0fc 100644
--- a/docs-site/src/examples/ts/holidayDates.ts
+++ b/docs-site/src/examples/ts/holidayDates.tsx
@@ -1,10 +1,9 @@
-const holidayDatesTS = `
 type Holiday = {
   date: string;
   holidayName: string;
-}
+};
 
-const Example = () => {
+const HolidayDates = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   const holidays: Holiday[] = [
@@ -25,7 +24,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default holidayDatesTS;
+render(HolidayDates);
diff --git a/docs-site/src/examples/ts/includeDateIntervals.ts b/docs-site/src/examples/ts/includeDateIntervals.tsx
similarity index 81%
rename from docs-site/src/examples/ts/includeDateIntervals.ts
rename to docs-site/src/examples/ts/includeDateIntervals.tsx
index 78496d9964..1250f6291f 100644
--- a/docs-site/src/examples/ts/includeDateIntervals.ts
+++ b/docs-site/src/examples/ts/includeDateIntervals.tsx
@@ -1,10 +1,9 @@
-const includeDateIntervalsTS = `
 type TIncludeDateIntervals = {
   start: Date;
   end: Date;
 }[];
 
-const Example = () => {
+const IncludeDateIntervals = () => {
   const [startDate, setStartDate] = useState<Date | null>(null);
 
   const includeDateIntervals: TIncludeDateIntervals = [
@@ -21,7 +20,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default includeDateIntervalsTS;
+render(IncludeDateIntervals);
diff --git a/docs-site/src/examples/ts/includeDates.ts b/docs-site/src/examples/ts/includeDates.tsx
similarity index 62%
rename from docs-site/src/examples/ts/includeDates.ts
rename to docs-site/src/examples/ts/includeDates.tsx
index 4636ecb28d..e5ccbdc914 100644
--- a/docs-site/src/examples/ts/includeDates.ts
+++ b/docs-site/src/examples/ts/includeDates.tsx
@@ -1,12 +1,9 @@
-const includeDatesTS = `
 type TIncludeDates = Date[];
-const Example = () => {
+
+const IncludeDates = () => {
   const [startDate, setStartDate] = useState<Date | null>(null);
 
-  const includeDates: TIncludeDates = [
-    new Date(),
-    addDays(new Date(), 1),
-  ];
+  const includeDates: TIncludeDates = [new Date(), addDays(new Date(), 1)];
 
   return (
     <DatePicker
@@ -18,7 +15,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default includeDatesTS;
+render(IncludeDates);
diff --git a/docs-site/src/examples/ts/includeDatesMonthPicker.ts b/docs-site/src/examples/ts/includeDatesMonthPicker.tsx
similarity index 75%
rename from docs-site/src/examples/ts/includeDatesMonthPicker.ts
rename to docs-site/src/examples/ts/includeDatesMonthPicker.tsx
index 94352c904e..99ced37fa2 100644
--- a/docs-site/src/examples/ts/includeDatesMonthPicker.ts
+++ b/docs-site/src/examples/ts/includeDatesMonthPicker.tsx
@@ -1,5 +1,4 @@
-const includeDatesMonthPickerTS = `
-const Example = () => {
+const IncludeDatesMonthPicker = () => {
   const [startDate, setStartDate] = useState<Date | null>(null);
 
   const includeDates: Date[] = [
@@ -17,7 +16,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default includeDatesMonthPickerTS;
+render(IncludeDatesMonthPicker);
diff --git a/docs-site/src/examples/ts/includeTimes.ts b/docs-site/src/examples/ts/includeTimes.tsx
similarity index 84%
rename from docs-site/src/examples/ts/includeTimes.ts
rename to docs-site/src/examples/ts/includeTimes.tsx
index 00b114625c..62fab0c438 100644
--- a/docs-site/src/examples/ts/includeTimes.ts
+++ b/docs-site/src/examples/ts/includeTimes.tsx
@@ -1,5 +1,4 @@
-const includeTimesTs = `
-const Example = () => {
+const IncludeTimes = () => {
   const [startDate, setStartDate] = useState<Date | null>(
     setHours(setMinutes(new Date(), 30), 16),
   );
@@ -22,7 +21,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default includeTimesTs;
+render(IncludeTimes);
diff --git a/docs-site/src/examples/ts/index.ts b/docs-site/src/examples/ts/index.ts
deleted file mode 100644
index ca32a16025..0000000000
--- a/docs-site/src/examples/ts/index.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-export { default as calendarContainerTS } from "./calendarContainer";
-export { default as calendarIconTS } from "./calendarIcon";
-export { default as defaultTS } from "./default";
-export { default as calendarIconSvgIconTS } from "./calendarIconSvgIcon";
-export { default as calendarIconExternalTS } from "./calendarIconExternal";
-export { default as calendarStartDayTS } from "./calendarStartDay";
-export { default as onCalendarOpenStateCallbacksTS } from "./onCalendarOpenStateCallbacks";
-export { default as toggleCalendarOnIconClickTS } from "./toggleCalendarOnIconClick";
-export { default as childrenTS } from "./children";
-export { default as clearInputTS } from "./clearInput";
-export { default as closeOnScrollTS } from "./closeOnScroll";
-export { default as closeOnScrollCallbackTS } from "./closeOnScrollCallback";
-export { default as configureFloatingUIS } from "./configureFloatingUI";
-export { default as customInputTS } from "./customInput";
-export { default as renderCustomHeaderTS } from "./renderCustomHeader";
-export { default as renderCustomHeaderTwoMonthsTS } from "./renderCustomHeaderTwoMonths";
-export { default as renderCustomDayTS } from "./renderCustomDay";
-export { default as renderCustomMonthTS } from "./renderCustomMonth";
-export { default as renderCustomQuarterTS } from "./renderCustomQuarter";
-export { default as renderCustomYearTS } from "./renderCustomYear";
-export { default as customCalendarClassNameTS } from "./customCalendarClassName";
-export { default as customClassNameTS } from "./customClassName";
-export { default as customDayClassNameTS } from "./customDayClassName";
-export { default as customDateFormatTS } from "./customDateFormat";
-export { default as customTimeClassNameTS } from "./customTimeClassName";
-export { default as customTimeInputTS } from "./customTimeInput";
-export { default as dateRangeTS } from "./dateRange";
-export { default as selectsRangeTS } from "./selectsRange";
-export { default as selectsRangeWithDisabledDatesTS } from "./selectsRangeWithDisabledDates";
-export { default as dateRangeWithShowDisabledNavigationTS } from "./dateRangeWithShowDisabledNavigation";
-export { default as dateRangeInputWithClearButtonTS } from "./dateRangeInputWithClearButton";
-export { default as dateRangeWithPortalTS } from "./dateRangeWithPortal";
-export { default as disabledTS } from "./disabled";
-export { default as disabledKeyboardNavigationTS } from "./disabledKeyboardNavigation";
-export { default as weekNumbersTS } from "./weekNumbers";
-export { default as dontCloseOnSelectTS } from "./dontCloseOnSelect";
-export { default as excludeDatesTS } from "./excludeDates";
-export { default as excludeDatesWithMessageTS } from "./excludeDatesWithMessage";
-export { default as excludeDateIntervalsTS } from "./excludeDateIntervals";
-export { default as excludeDatesMonthPickerTS } from "./excludeDatesMonthPicker";
-export { default as excludeDatesRangeMonthPickerTS } from "./excludeDatesRangeMonthPicker";
-export { default as excludeTimesTS } from "./excludeTimes";
-export { default as filterDatesTS } from "./filterDates";
-export { default as filterTimesTS } from "./filterTimes";
-export { default as fixedCalendarTS } from "./fixedCalendar";
-export { default as rawChangeTS } from "./rawChange";
-export { default as highlightDatesTS } from "./highlightDates";
-export { default as highlightDatesRangesTS } from "./highlightDatesRanges";
-export { default as holidayDatesTS } from "./holidayDates";
-export { default as includeDatesTS } from "./includeDates";
-export { default as includeDateIntervalsTS } from "./includeDateIntervals";
-export { default as includeDatesMonthPickerTS } from "./includeDatesMonthPicker";
-export { default as includeTimesTS } from "./includeTimes";
-export { default as injectTimesTS } from "./injectTimes";
-export { default as inlineTS } from "./inline";
-export { default as inlineVisibleTS } from "./inlineVisible";
-export { default as timeInputTS } from "./timeInput";
-export { default as localeTS } from "./locale";
-export { default as localeWithTimeTS } from "./localeWithTime";
-export { default as localeWithoutGlobalVariableTS } from "./localeWithoutGlobalVariable";
-export { default as minDateTS } from "./minDate";
-export { default as maxDateTS } from "./maxDate";
-export { default as monthPickerTS } from "./monthPicker";
-export { default as monthPickerFullNameTS } from "./monthPickerFullName";
-export { default as monthPickerTwoColumnsTS } from "./monthPickerTwoColumns";
-export { default as monthPickerFourColumnsTS } from "./monthPickerFourColumns";
-export { default as monthDropdownTS } from "./monthDropdown";
-export { default as monthDropdownShortTS } from "./monthDropdownShort";
-export { default as monthYearDropdownTS } from "./monthYearDropdown";
-export { default as multiMonthTS } from "./multiMonth";
-export { default as multiMonthDropdownTS } from "./multiMonthDropdown";
-export { default as multiMonthInlineTS } from "./multiMonthInline";
-export { default as noAnchorArrowTS } from "./noAnchorArrow";
-export { default as onBlurCallbacksTS } from "./onBlurCallbacks";
-export { default as openToDateTS } from "./openToDate";
-export { default as placeholderTextTS } from "./placeholderText";
-export { default as portalTS } from "./portal";
-export { default as portalByIdTS } from "./portalById";
-export { default as withPortalByIdTS } from "./withPortalById";
-export { default as quarterPickerTS } from "./quarterPicker";
-export { default as rangeMonthPickerTS } from "./rangeMonthPicker";
-export { default as rangeMonthPickerSelectsRangeTS } from "./rangeMonthPickerSelectsRange";
-export { default as rangeQuarterPickerTS } from "./rangeQuarterPicker";
-export { default as rangeQuarterPickerSelectsRangeTS } from "./rangeQuarterPickerSelectsRange";
-export { default as rangeSwapRangeTS } from "./rangeSwapRange";
-export { default as readOnlyTS } from "./readOnly";
-export { default as showTimeTS } from "./showTime";
-export { default as showTimeOnlyTS } from "./showTimeOnly";
-export { default as hideTimeCaptionTS } from "./hideTimeCaption";
-export { default as multiMonthPreviousTS } from "./multiMonthPrevious";
-export { default as specificDateRangeTS } from "./specificDateRange";
-export { default as excludeTimePeriodTS } from "./excludeTimePeriod";
-export { default as selectsMultipleTS } from "./selectsMultiple";
-export { default as selectsMultipleMonthsTS } from "./selectsMultipleMonths";
-export { default as strictParsingTS } from "./strictParsing";
-export { default as tabIndexTS } from "./tabIndex";
-export { default as todayTS } from "./today";
-export { default as yearPickerTS } from "./yearPicker";
-export { default as rangeYearPickerTS } from "./rangeYearPicker";
-export { default as rangeYearPickerSelectsRangeTS } from "./rangeYearPickerSelectsRange";
-export { default as yearDropdownTS } from "./yearDropdown";
-export { default as yearSelectDropdownTS } from "./yearSelectDropdown";
-export { default as yearItemNumberTS } from "./yearItemNumber";
-export { default as weekPickerTS } from "./weekPicker";
-export { default as excludeWeeksTS } from "./excludeWeeks";
-export { default as externalFormTS } from "./externalForm";
diff --git a/docs-site/src/examples/ts/injectTimes.ts b/docs-site/src/examples/ts/injectTimes.tsx
similarity index 84%
rename from docs-site/src/examples/ts/injectTimes.ts
rename to docs-site/src/examples/ts/injectTimes.tsx
index 9fc3e8606c..6ef27fa6f9 100644
--- a/docs-site/src/examples/ts/injectTimes.ts
+++ b/docs-site/src/examples/ts/injectTimes.tsx
@@ -1,5 +1,4 @@
-const injectTimesTS = `
-const Example = () => {
+const InjectTimes = () => {
   const [startDate, setStartDate] = useState<Date | null>(
     setHours(setMinutes(new Date(), 30), 16),
   );
@@ -22,7 +21,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default injectTimesTS;
+render(InjectTimes);
diff --git a/docs-site/src/examples/ts/inline.ts b/docs-site/src/examples/ts/inline.tsx
similarity index 69%
rename from docs-site/src/examples/ts/inline.ts
rename to docs-site/src/examples/ts/inline.tsx
index fffdff62e7..2c421ad91d 100644
--- a/docs-site/src/examples/ts/inline.ts
+++ b/docs-site/src/examples/ts/inline.tsx
@@ -1,5 +1,4 @@
-const inlineTS = `
-const Example = () => {
+const Inline = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -11,7 +10,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default inlineTS;
+render(Inline);
diff --git a/docs-site/src/examples/ts/inlineVisible.ts b/docs-site/src/examples/ts/inlineVisible.tsx
similarity index 84%
rename from docs-site/src/examples/ts/inlineVisible.ts
rename to docs-site/src/examples/ts/inlineVisible.tsx
index 7f46d2e499..f14aa177e7 100644
--- a/docs-site/src/examples/ts/inlineVisible.ts
+++ b/docs-site/src/examples/ts/inlineVisible.tsx
@@ -1,5 +1,4 @@
-const inlineVisibleTS = `
-const Example = () => {
+const InlineVisible = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
   const [isOpen, setIsOpen] = useState(false);
 
@@ -25,7 +24,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default inlineVisibleTS;
+render(InlineVisible);
diff --git a/docs-site/src/examples/ts/locale.ts b/docs-site/src/examples/ts/locale.tsx
similarity index 74%
rename from docs-site/src/examples/ts/locale.ts
rename to docs-site/src/examples/ts/locale.tsx
index 919133db99..859653fb1f 100644
--- a/docs-site/src/examples/ts/locale.ts
+++ b/docs-site/src/examples/ts/locale.tsx
@@ -1,5 +1,4 @@
-const localeTS = `
-const Example = () => {
+const Locale = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -12,7 +11,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default localeTS;
+render(Locale);
diff --git a/docs-site/src/examples/ts/localeWithTime.ts b/docs-site/src/examples/ts/localeWithTime.tsx
similarity index 74%
rename from docs-site/src/examples/ts/localeWithTime.ts
rename to docs-site/src/examples/ts/localeWithTime.tsx
index a9816fe5b6..2e84f03943 100644
--- a/docs-site/src/examples/ts/localeWithTime.ts
+++ b/docs-site/src/examples/ts/localeWithTime.tsx
@@ -1,5 +1,4 @@
-const localeWithTimeTS = `
-const Example = () => {
+const LocaleWithTime = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -15,7 +14,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default localeWithTimeTS;
+render(LocaleWithTime);
diff --git a/docs-site/src/examples/ts/localeWithoutGlobalVariable.ts b/docs-site/src/examples/ts/localeWithoutGlobalVariable.ts
deleted file mode 100644
index 4f4aa06b5e..0000000000
--- a/docs-site/src/examples/ts/localeWithoutGlobalVariable.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-const localeWithoutGlobalVariableTS = `
-const Example = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
-      locale={fi}
-    />
-  );
-};
-
-render(<Example />);
-`;
-
-export default localeWithoutGlobalVariableTS;
diff --git a/docs-site/src/examples/ts/localeWithoutGlobalVariable.tsx b/docs-site/src/examples/ts/localeWithoutGlobalVariable.tsx
new file mode 100644
index 0000000000..5551e72684
--- /dev/null
+++ b/docs-site/src/examples/ts/localeWithoutGlobalVariable.tsx
@@ -0,0 +1,13 @@
+const LocaleWithoutGlobalVariable = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      locale={fi}
+    />
+  );
+};
+
+render(LocaleWithoutGlobalVariable);
diff --git a/docs-site/src/examples/ts/maxDate.ts b/docs-site/src/examples/ts/maxDate.tsx
similarity index 76%
rename from docs-site/src/examples/ts/maxDate.ts
rename to docs-site/src/examples/ts/maxDate.tsx
index 31a03fddc8..a994a10fd6 100644
--- a/docs-site/src/examples/ts/maxDate.ts
+++ b/docs-site/src/examples/ts/maxDate.tsx
@@ -1,5 +1,4 @@
-const maxDateTS = `
-const Example = () => {
+const MaxDate = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -12,7 +11,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default maxDateTS;
+render(MaxDate);
diff --git a/docs-site/src/examples/ts/minDate.ts b/docs-site/src/examples/ts/minDate.tsx
similarity index 75%
rename from docs-site/src/examples/ts/minDate.ts
rename to docs-site/src/examples/ts/minDate.tsx
index cc58b8b7c1..48c7efeb30 100644
--- a/docs-site/src/examples/ts/minDate.ts
+++ b/docs-site/src/examples/ts/minDate.tsx
@@ -1,5 +1,4 @@
-const minDateTS = `
-const Example = () => {
+const MinDate = () => {
   const [startDate, setStartDate] = useState<Date | null>(null);
 
   return (
@@ -12,7 +11,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default minDateTS;
+render(MinDate);
diff --git a/docs-site/src/examples/ts/monthDropdown.ts b/docs-site/src/examples/ts/monthDropdown.tsx
similarity index 67%
rename from docs-site/src/examples/ts/monthDropdown.ts
rename to docs-site/src/examples/ts/monthDropdown.tsx
index e2d898613f..e6394d8139 100644
--- a/docs-site/src/examples/ts/monthDropdown.ts
+++ b/docs-site/src/examples/ts/monthDropdown.tsx
@@ -1,5 +1,4 @@
-const monthDropdownTS = `
-const Example = () => {
+const MonthDropdown = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -11,7 +10,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default monthDropdownTS;
+render(MonthDropdown);
diff --git a/docs-site/src/examples/ts/monthDropdownShort.ts b/docs-site/src/examples/ts/monthDropdownShort.tsx
similarity index 68%
rename from docs-site/src/examples/ts/monthDropdownShort.ts
rename to docs-site/src/examples/ts/monthDropdownShort.tsx
index eb3317bcaf..3b172bba77 100644
--- a/docs-site/src/examples/ts/monthDropdownShort.ts
+++ b/docs-site/src/examples/ts/monthDropdownShort.tsx
@@ -1,5 +1,4 @@
-const monthDropdownShortTS = `
-const Example = () => {
+const MonthDropdownShort = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -12,7 +11,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default monthDropdownShortTS;
+render(MonthDropdownShort);
diff --git a/docs-site/src/examples/ts/monthPicker.ts b/docs-site/src/examples/ts/monthPicker.tsx
similarity index 71%
rename from docs-site/src/examples/ts/monthPicker.ts
rename to docs-site/src/examples/ts/monthPicker.tsx
index 87432655b3..7163698433 100644
--- a/docs-site/src/examples/ts/monthPicker.ts
+++ b/docs-site/src/examples/ts/monthPicker.tsx
@@ -1,5 +1,4 @@
-const monthPickerTS = `
-const Example = () => {
+const MonthPicker = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -12,7 +11,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default monthPickerTS;
+render(MonthPicker);
diff --git a/docs-site/src/examples/ts/monthPickerFourColumns.ts b/docs-site/src/examples/ts/monthPickerFourColumns.tsx
similarity index 71%
rename from docs-site/src/examples/ts/monthPickerFourColumns.ts
rename to docs-site/src/examples/ts/monthPickerFourColumns.tsx
index 2f12abe8b7..f10f041265 100644
--- a/docs-site/src/examples/ts/monthPickerFourColumns.ts
+++ b/docs-site/src/examples/ts/monthPickerFourColumns.tsx
@@ -1,5 +1,4 @@
-const monthPickerFourColumnsTS = `
-const Example = () => {
+const MonthPickerFourColumns = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -14,7 +13,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default monthPickerFourColumnsTS;
+render(MonthPickerFourColumns);
diff --git a/docs-site/src/examples/ts/monthPickerFullName.ts b/docs-site/src/examples/ts/monthPickerFullName.tsx
similarity index 70%
rename from docs-site/src/examples/ts/monthPickerFullName.ts
rename to docs-site/src/examples/ts/monthPickerFullName.tsx
index f37533316d..51a0dbeb86 100644
--- a/docs-site/src/examples/ts/monthPickerFullName.ts
+++ b/docs-site/src/examples/ts/monthPickerFullName.tsx
@@ -1,5 +1,4 @@
-const monthPickerFullNameTS = `
-const Example = () => {
+const MonthPickerFullName = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -13,7 +12,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default monthPickerFullNameTS;
+render(MonthPickerFullName);
diff --git a/docs-site/src/examples/ts/monthPickerTwoColumns.ts b/docs-site/src/examples/ts/monthPickerTwoColumns.tsx
similarity index 72%
rename from docs-site/src/examples/ts/monthPickerTwoColumns.ts
rename to docs-site/src/examples/ts/monthPickerTwoColumns.tsx
index 498948c673..e452b9cebf 100644
--- a/docs-site/src/examples/ts/monthPickerTwoColumns.ts
+++ b/docs-site/src/examples/ts/monthPickerTwoColumns.tsx
@@ -1,5 +1,4 @@
-const monthPickerTwoColumnsTS = `
-const Example = () => {
+const MonthPickerTwoColumns = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -14,7 +13,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default monthPickerTwoColumnsTS;
+render(MonthPickerTwoColumns);
diff --git a/docs-site/src/examples/ts/monthYearDropdown.ts b/docs-site/src/examples/ts/monthYearDropdown.tsx
similarity index 75%
rename from docs-site/src/examples/ts/monthYearDropdown.ts
rename to docs-site/src/examples/ts/monthYearDropdown.tsx
index 907117474e..64bdbff6db 100644
--- a/docs-site/src/examples/ts/monthYearDropdown.ts
+++ b/docs-site/src/examples/ts/monthYearDropdown.tsx
@@ -1,5 +1,4 @@
-const monthYearDropdownTS = `
-const Example = () => {
+const MonthYearDropdown = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -14,7 +13,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default monthYearDropdownTS;
+render(MonthYearDropdown);
diff --git a/docs-site/src/examples/ts/multiMonth.ts b/docs-site/src/examples/ts/multiMonth.tsx
similarity index 68%
rename from docs-site/src/examples/ts/multiMonth.ts
rename to docs-site/src/examples/ts/multiMonth.tsx
index 3c39daa295..91f707e30d 100644
--- a/docs-site/src/examples/ts/multiMonth.ts
+++ b/docs-site/src/examples/ts/multiMonth.tsx
@@ -1,5 +1,4 @@
-const multiMonthTS = `
-const Example = () => {
+const MultiMonth = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -11,7 +10,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default multiMonthTS;
+render(MultiMonth);
diff --git a/docs-site/src/examples/ts/multiMonthDropdown.ts b/docs-site/src/examples/ts/multiMonthDropdown.tsx
similarity index 67%
rename from docs-site/src/examples/ts/multiMonthDropdown.ts
rename to docs-site/src/examples/ts/multiMonthDropdown.tsx
index 697090ea90..e937675ec8 100644
--- a/docs-site/src/examples/ts/multiMonthDropdown.ts
+++ b/docs-site/src/examples/ts/multiMonthDropdown.tsx
@@ -1,5 +1,4 @@
-const multiMonthDropdownTS = `
-const Example = () => {
+const MultiMonthDropdown = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -12,7 +11,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default multiMonthDropdownTS;
+render(MultiMonthDropdown);
diff --git a/docs-site/src/examples/ts/multiMonthInline.ts b/docs-site/src/examples/ts/multiMonthInline.tsx
similarity index 67%
rename from docs-site/src/examples/ts/multiMonthInline.ts
rename to docs-site/src/examples/ts/multiMonthInline.tsx
index 55752c34ed..be22f4cd9e 100644
--- a/docs-site/src/examples/ts/multiMonthInline.ts
+++ b/docs-site/src/examples/ts/multiMonthInline.tsx
@@ -1,5 +1,4 @@
-const multiMonthInlineTS = `
-const Example = () => {
+const MultiMonthInline = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -12,7 +11,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default multiMonthInlineTS;
+render(MultiMonthInline);
diff --git a/docs-site/src/examples/ts/multiMonthPrevious.ts b/docs-site/src/examples/ts/multiMonthPrevious.tsx
similarity index 67%
rename from docs-site/src/examples/ts/multiMonthPrevious.ts
rename to docs-site/src/examples/ts/multiMonthPrevious.tsx
index 12627cecdb..01057b9cfb 100644
--- a/docs-site/src/examples/ts/multiMonthPrevious.ts
+++ b/docs-site/src/examples/ts/multiMonthPrevious.tsx
@@ -1,5 +1,4 @@
-const multiMonthPreviousTS = `
-const Example = () => {
+const MultiMonthPrevious = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -12,7 +11,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default multiMonthPreviousTS;
+render(MultiMonthPrevious);
diff --git a/docs-site/src/examples/ts/noAnchorArrow.ts b/docs-site/src/examples/ts/noAnchorArrow.tsx
similarity index 68%
rename from docs-site/src/examples/ts/noAnchorArrow.ts
rename to docs-site/src/examples/ts/noAnchorArrow.tsx
index 17dde3a775..115576afca 100644
--- a/docs-site/src/examples/ts/noAnchorArrow.ts
+++ b/docs-site/src/examples/ts/noAnchorArrow.tsx
@@ -1,5 +1,4 @@
-const noAnchorArrowTS = `
-const Example = () => {
+const NoAnchorArrow = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -11,7 +10,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default noAnchorArrowTS;
+render(NoAnchorArrow);
diff --git a/docs-site/src/examples/ts/onBlurCallbacks.ts b/docs-site/src/examples/ts/onBlurCallbacks.tsx
similarity index 71%
rename from docs-site/src/examples/ts/onBlurCallbacks.ts
rename to docs-site/src/examples/ts/onBlurCallbacks.tsx
index 1059dfc767..8fbae44333 100644
--- a/docs-site/src/examples/ts/onBlurCallbacks.ts
+++ b/docs-site/src/examples/ts/onBlurCallbacks.tsx
@@ -1,8 +1,9 @@
-const onBlurCallbacksTS = `
-const Example = () => {
+const OnBlurCallbacks = () => {
   const [startDate, setStartDate] = useState<Date | null>(null);
 
-  const handleOnBlur = ({ target: { value } }: React.FocusEvent<HTMLElement>) => {
+  const handleOnBlur = ({
+    target: { value },
+  }: React.FocusEvent<HTMLElement>) => {
     const date = new Date(value);
     if (isValid(date)) {
       console.log("date: %s", format(date, "dd/MM/yyyy"));
@@ -22,7 +23,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default onBlurCallbacksTS;
+render(OnBlurCallbacks);
diff --git a/docs-site/src/examples/ts/onCalendarOpenStateCallbacks.ts b/docs-site/src/examples/ts/onCalendarOpenStateCallbacks.tsx
similarity index 74%
rename from docs-site/src/examples/ts/onCalendarOpenStateCallbacks.ts
rename to docs-site/src/examples/ts/onCalendarOpenStateCallbacks.tsx
index 5b90d15fe8..034a01bbc3 100644
--- a/docs-site/src/examples/ts/onCalendarOpenStateCallbacks.ts
+++ b/docs-site/src/examples/ts/onCalendarOpenStateCallbacks.tsx
@@ -1,5 +1,4 @@
-const onCalendarOpenStateCallbacksTS = `
-const Example = () => {
+const OnCalendarOpenStateCallbacks = () => {
   const [date, setDate] = useState<Date | null>(new Date());
 
   const handleCalendarClose = () => console.log("Calendar closed");
@@ -15,7 +14,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default onCalendarOpenStateCallbacksTS;
+render(OnCalendarOpenStateCallbacks);
diff --git a/docs-site/src/examples/ts/openToDate.ts b/docs-site/src/examples/ts/openToDate.tsx
similarity index 70%
rename from docs-site/src/examples/ts/openToDate.ts
rename to docs-site/src/examples/ts/openToDate.tsx
index 730ffa3083..88af076b2e 100644
--- a/docs-site/src/examples/ts/openToDate.ts
+++ b/docs-site/src/examples/ts/openToDate.tsx
@@ -1,5 +1,4 @@
-const openToDateTS = `
-const Example = () => {
+const OpenToDate = () => {
   const [startDate, setStartDate] = useState<Date | null>(null);
 
   return (
@@ -11,7 +10,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default openToDateTS;
+render(OpenToDate);
diff --git a/docs-site/src/examples/ts/placeholderText.ts b/docs-site/src/examples/ts/placeholderText.ts
deleted file mode 100644
index 7ac0df4400..0000000000
--- a/docs-site/src/examples/ts/placeholderText.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-const placeholderTextTS = `
-const Example = () => {
-  return <DatePicker placeholderText="Click to select a date" />;
-};
-
-render(<Example />);
-`;
-
-export default placeholderTextTS;
diff --git a/docs-site/src/examples/ts/placeholderText.tsx b/docs-site/src/examples/ts/placeholderText.tsx
new file mode 100644
index 0000000000..6bb807b6ea
--- /dev/null
+++ b/docs-site/src/examples/ts/placeholderText.tsx
@@ -0,0 +1,5 @@
+const PlaceholderText = () => {
+  return <DatePicker placeholderText="Click to select a date" />;
+};
+
+render(PlaceholderText);
diff --git a/docs-site/src/examples/ts/portal.ts b/docs-site/src/examples/ts/portal.tsx
similarity index 70%
rename from docs-site/src/examples/ts/portal.ts
rename to docs-site/src/examples/ts/portal.tsx
index 98763c3300..bb153d7be2 100644
--- a/docs-site/src/examples/ts/portal.ts
+++ b/docs-site/src/examples/ts/portal.tsx
@@ -1,5 +1,4 @@
-const portalTS = `
-const Example = () => {
+const Portal = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -11,7 +10,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default portalTS;
+render(Portal);
diff --git a/docs-site/src/examples/ts/portalById.ts b/docs-site/src/examples/ts/portalById.tsx
similarity index 69%
rename from docs-site/src/examples/ts/portalById.ts
rename to docs-site/src/examples/ts/portalById.tsx
index 9e1463df3b..725f581d7f 100644
--- a/docs-site/src/examples/ts/portalById.ts
+++ b/docs-site/src/examples/ts/portalById.tsx
@@ -1,5 +1,4 @@
-const portalByIdTS = `
-const Example = () => {
+const PortalById = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -11,7 +10,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default portalByIdTS;
+render(PortalById);
diff --git a/docs-site/src/examples/ts/quarterPicker.ts b/docs-site/src/examples/ts/quarterPicker.tsx
similarity index 70%
rename from docs-site/src/examples/ts/quarterPicker.ts
rename to docs-site/src/examples/ts/quarterPicker.tsx
index a5de662e8a..ba6bcd3f17 100644
--- a/docs-site/src/examples/ts/quarterPicker.ts
+++ b/docs-site/src/examples/ts/quarterPicker.tsx
@@ -1,5 +1,4 @@
-const quarterPickerTS = `
-const Example = () => {
+const QuarterPicker = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -12,7 +11,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default quarterPickerTS;
+render(QuarterPicker);
diff --git a/docs-site/src/examples/ts/rangeMonthPicker.ts b/docs-site/src/examples/ts/rangeMonthPicker.tsx
similarity index 75%
rename from docs-site/src/examples/ts/rangeMonthPicker.ts
rename to docs-site/src/examples/ts/rangeMonthPicker.tsx
index 71f589bfd5..dbdefd5f46 100644
--- a/docs-site/src/examples/ts/rangeMonthPicker.ts
+++ b/docs-site/src/examples/ts/rangeMonthPicker.tsx
@@ -1,6 +1,7 @@
-const rangeMonthPickerTS = `
-const Example = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date("2014/02/08"));
+const RangeMonthPicker = () => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    new Date("2014/02/08"),
+  );
   const [endDate, setEndDate] = useState<Date | null>(new Date("2014/04/08"));
 
   return (
@@ -27,7 +28,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default rangeMonthPickerTS;
+render(RangeMonthPicker);
diff --git a/docs-site/src/examples/ts/rangeMonthPickerSelectsRange.ts b/docs-site/src/examples/ts/rangeMonthPickerSelectsRange.tsx
similarity index 53%
rename from docs-site/src/examples/ts/rangeMonthPickerSelectsRange.ts
rename to docs-site/src/examples/ts/rangeMonthPickerSelectsRange.tsx
index 1a562b6cd5..4ddbd8a241 100644
--- a/docs-site/src/examples/ts/rangeMonthPickerSelectsRange.ts
+++ b/docs-site/src/examples/ts/rangeMonthPickerSelectsRange.tsx
@@ -1,9 +1,13 @@
-const rangeMonthPickerSelectsRangeTS = `
-const Example = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date("2014/02/08"));
+const RangeMonthPickerSelectsRange = () => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    new Date("2014/02/08"),
+  );
   const [endDate, setEndDate] = useState<Date | null>(null);
 
-  const handleChange = ([newStartDate, newEndDate]: [Date | null, Date | null]) => {
+  const handleChange = ([newStartDate, newEndDate]: [
+    Date | null,
+    Date | null,
+  ]) => {
     setStartDate(newStartDate);
     setEndDate(newEndDate);
   };
@@ -21,7 +25,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default rangeMonthPickerSelectsRangeTS;
+render(RangeMonthPickerSelectsRange);
diff --git a/docs-site/src/examples/ts/rangeQuarterPicker.ts b/docs-site/src/examples/ts/rangeQuarterPicker.tsx
similarity index 75%
rename from docs-site/src/examples/ts/rangeQuarterPicker.ts
rename to docs-site/src/examples/ts/rangeQuarterPicker.tsx
index 59f5408ca1..91b169784b 100644
--- a/docs-site/src/examples/ts/rangeQuarterPicker.ts
+++ b/docs-site/src/examples/ts/rangeQuarterPicker.tsx
@@ -1,6 +1,7 @@
-const rangeQuarterPickerTS = `
-const Example = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date("2014/02/08"));
+const RangeQuarterPicker = () => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    new Date("2014/02/08"),
+  );
   const [endDate, setEndDate] = useState<Date | null>(new Date("2014/07/08"));
 
   return (
@@ -27,7 +28,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default rangeQuarterPickerTS;
+render(RangeQuarterPicker);
diff --git a/docs-site/src/examples/ts/rangeQuarterPickerSelectsRange.ts b/docs-site/src/examples/ts/rangeQuarterPickerSelectsRange.tsx
similarity index 53%
rename from docs-site/src/examples/ts/rangeQuarterPickerSelectsRange.ts
rename to docs-site/src/examples/ts/rangeQuarterPickerSelectsRange.tsx
index 36f9adfcf9..7db4798e6f 100644
--- a/docs-site/src/examples/ts/rangeQuarterPickerSelectsRange.ts
+++ b/docs-site/src/examples/ts/rangeQuarterPickerSelectsRange.tsx
@@ -1,9 +1,13 @@
-const rangeQuarterPickerSelectsRangeTS = `
-const Example = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date("2014/02/08"));
+const RangeQuarterPickerSelectsRange = () => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    new Date("2014/02/08"),
+  );
   const [endDate, setEndDate] = useState<Date | null>(null);
 
-  const handleChange = ([newStartDate, newEndDate]: [Date | null, Date | null]) => {
+  const handleChange = ([newStartDate, newEndDate]: [
+    Date | null,
+    Date | null,
+  ]) => {
     setStartDate(newStartDate);
     setEndDate(newEndDate);
   };
@@ -21,7 +25,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default rangeQuarterPickerSelectsRangeTS;
+render(RangeQuarterPickerSelectsRange);
diff --git a/docs-site/src/examples/ts/rangeSwapRange.ts b/docs-site/src/examples/ts/rangeSwapRange.tsx
similarity index 66%
rename from docs-site/src/examples/ts/rangeSwapRange.ts
rename to docs-site/src/examples/ts/rangeSwapRange.tsx
index 207e2275b7..79c2f36b05 100644
--- a/docs-site/src/examples/ts/rangeSwapRange.ts
+++ b/docs-site/src/examples/ts/rangeSwapRange.tsx
@@ -1,10 +1,11 @@
-const rangeSwapRangeTS = `
-type TExcludeDates = {
-  date: Date;
-  message?: string;
-}[] | Date[];
+type TExcludeDates =
+  | {
+      date: Date;
+      message?: string;
+    }[]
+  | Date[];
 
-const Example = () => {
+const RangeSwapRange = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
   const [endDate, setEndDate] = useState<Date | null>(null);
 
@@ -14,7 +15,10 @@ const Example = () => {
     setEndDate(end);
   };
 
-  const excludeDates: TExcludeDates = [addDays(new Date(), 1), addDays(new Date(), 5)]
+  const excludeDates: TExcludeDates = [
+    addDays(new Date(), 1),
+    addDays(new Date(), 5),
+  ];
 
   return (
     <DatePicker
@@ -31,7 +35,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default rangeSwapRangeTS;
+render(RangeSwapRange);
diff --git a/docs-site/src/examples/ts/rangeYearPicker.ts b/docs-site/src/examples/ts/rangeYearPicker.tsx
similarity index 75%
rename from docs-site/src/examples/ts/rangeYearPicker.ts
rename to docs-site/src/examples/ts/rangeYearPicker.tsx
index b20ac57b48..fd52a4a2df 100644
--- a/docs-site/src/examples/ts/rangeYearPicker.ts
+++ b/docs-site/src/examples/ts/rangeYearPicker.tsx
@@ -1,6 +1,7 @@
-const rangeYearPickerTS = `
-const Example = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date("2014/02/08"));
+const RangeYearPicker = () => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    new Date("2014/02/08"),
+  );
   const [endDate, setEndDate] = useState<Date | null>(new Date("2024/04/08"));
 
   return (
@@ -27,7 +28,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default rangeYearPickerTS;
+render(RangeYearPicker);
diff --git a/docs-site/src/examples/ts/rangeYearPickerSelectsRange.ts b/docs-site/src/examples/ts/rangeYearPickerSelectsRange.tsx
similarity index 53%
rename from docs-site/src/examples/ts/rangeYearPickerSelectsRange.ts
rename to docs-site/src/examples/ts/rangeYearPickerSelectsRange.tsx
index 1294b1ad3e..d446d39271 100644
--- a/docs-site/src/examples/ts/rangeYearPickerSelectsRange.ts
+++ b/docs-site/src/examples/ts/rangeYearPickerSelectsRange.tsx
@@ -1,9 +1,13 @@
-const rangeYearPickerSelectsRangeTS = `
-const Example = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date("2014/02/08"));
+const RangeYearPickerSelectsRange = () => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    new Date("2014/02/08"),
+  );
   const [endDate, setEndDate] = useState<Date | null>(null);
 
-  const handleChange = ([newStartDate, newEndDate]: [Date | null, Date | null]) => {
+  const handleChange = ([newStartDate, newEndDate]: [
+    Date | null,
+    Date | null,
+  ]) => {
     setStartDate(newStartDate);
     setEndDate(newEndDate);
   };
@@ -21,7 +25,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default rangeYearPickerSelectsRangeTS;
+render(RangeYearPickerSelectsRange);
diff --git a/docs-site/src/examples/ts/rawChange.ts b/docs-site/src/examples/ts/rawChange.tsx
similarity index 61%
rename from docs-site/src/examples/ts/rawChange.ts
rename to docs-site/src/examples/ts/rawChange.tsx
index acca77166f..9a5d0b533d 100644
--- a/docs-site/src/examples/ts/rawChange.ts
+++ b/docs-site/src/examples/ts/rawChange.tsx
@@ -1,5 +1,4 @@
-const rawChangeTS = `
-const Example = () => {
+const RawChange = () => {
   const [startDate, setStartDate] = useState<Date | null>(null);
 
   const handleChangeRaw = (value: string) => {
@@ -13,12 +12,11 @@ const Example = () => {
       selected={startDate}
       onChange={(date: Date | null) => setStartDate(date)}
       placeholderText='Enter "tomorrow"'
-      onChangeRaw={(event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => handleChangeRaw(event.target.value)}
+      onChangeRaw={(
+        event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
+      ) => handleChangeRaw(event.target.value)}
     />
   );
 };
 
-render(<Example />);
-`;
-
-export default rawChangeTS;
+render(RawChange);
diff --git a/docs-site/src/examples/ts/readOnly.ts b/docs-site/src/examples/ts/readOnly.tsx
similarity index 72%
rename from docs-site/src/examples/ts/readOnly.ts
rename to docs-site/src/examples/ts/readOnly.tsx
index ab91fe18fb..d2299957b0 100644
--- a/docs-site/src/examples/ts/readOnly.ts
+++ b/docs-site/src/examples/ts/readOnly.tsx
@@ -1,5 +1,4 @@
-const readOnlyTS = `
-const Example = () => {
+const ReadOnly = () => {
   const [startDate, setStartDate] = useState<Date | null>(null);
 
   return (
@@ -12,7 +11,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default readOnlyTS;
+render(ReadOnly);
diff --git a/docs-site/src/examples/ts/renderCustomDay.ts b/docs-site/src/examples/ts/renderCustomDay.tsx
similarity index 69%
rename from docs-site/src/examples/ts/renderCustomDay.ts
rename to docs-site/src/examples/ts/renderCustomDay.tsx
index d916f92a05..dae80f4796 100644
--- a/docs-site/src/examples/ts/renderCustomDay.ts
+++ b/docs-site/src/examples/ts/renderCustomDay.tsx
@@ -1,9 +1,8 @@
-const RenderCustomDayTS = `
-const Example = () => {
+const RenderCustomDay = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   const renderDayContents = (day: number, date: Date): React.ReactNode => {
-    const tooltipText = \`Tooltip for date: \${date}\`;
+    const tooltipText = `Tooltip for date: ${date}`;
 
     return <span title={tooltipText}>{getDate(date)}</span>;
   };
@@ -17,7 +16,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default RenderCustomDayTS;
+render(RenderCustomDay);
diff --git a/docs-site/src/examples/ts/renderCustomHeader.ts b/docs-site/src/examples/ts/renderCustomHeader.tsx
similarity index 86%
rename from docs-site/src/examples/ts/renderCustomHeader.ts
rename to docs-site/src/examples/ts/renderCustomHeader.tsx
index 2d00577f0e..2bf30b4678 100644
--- a/docs-site/src/examples/ts/renderCustomHeader.ts
+++ b/docs-site/src/examples/ts/renderCustomHeader.tsx
@@ -1,5 +1,3 @@
-const renderCustomHeaderTS = `
-
 const MONTHS = [
   "January",
   "February",
@@ -49,9 +47,7 @@ const CustomHeader = ({
 
     <select
       value={MONTHS[getMonth(date)]}
-      onChange={({ target: { value } }) =>
-        changeMonth(MONTHS.indexOf(value))
-      }
+      onChange={({ target: { value } }) => changeMonth(MONTHS.indexOf(value))}
     >
       {MONTHS.map((option) => (
         <option key={option} value={option}>
@@ -66,8 +62,7 @@ const CustomHeader = ({
   </div>
 );
 
-
-const Example = () => {
+const RenderCustomHeader = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -79,7 +74,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default renderCustomHeaderTS;
+render(RenderCustomHeader);
diff --git a/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.ts b/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx
similarity index 91%
rename from docs-site/src/examples/ts/renderCustomHeaderTwoMonths.ts
rename to docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx
index 4790ea38f7..e1877840bf 100644
--- a/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.ts
+++ b/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx
@@ -1,5 +1,3 @@
-const renderCustomHeaderTwoMonthsTS = `
-
 const CustomHeader = ({
   monthDate,
   customHeaderCount,
@@ -48,7 +46,7 @@ const CustomHeader = ({
   </div>
 );
 
-const Example = () => {
+const RenderCustomHeaderTwoMonths = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -61,7 +59,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default renderCustomHeaderTwoMonthsTS;
+render(RenderCustomHeaderTwoMonths);
diff --git a/docs-site/src/examples/ts/renderCustomMonth.ts b/docs-site/src/examples/ts/renderCustomMonth.ts
deleted file mode 100644
index cc98f93f46..0000000000
--- a/docs-site/src/examples/ts/renderCustomMonth.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-const RenderCustomMonthTS = `
-const Example = () => {
-  const renderMonthContent = (month: number, shortMonth: string, longMonth: string, day: Date): React.ReactNode => {
-    const fullYear = new Date(day).getFullYear();
-    const tooltipText = \`Tooltip for month: \${longMonth} \${fullYear}\`;
-
-    return <span title={tooltipText}>{shortMonth}</span>;
-  };
-
-  return (
-    <DatePicker
-      selected={new Date()}
-      renderMonthContent={renderMonthContent}
-      showMonthYearPicker
-      dateFormat="MM/yyyy"
-    />
-  );
-};
-
-render(<Example />);
-`;
-
-export default RenderCustomMonthTS;
diff --git a/docs-site/src/examples/ts/renderCustomMonth.tsx b/docs-site/src/examples/ts/renderCustomMonth.tsx
new file mode 100644
index 0000000000..ff4173407f
--- /dev/null
+++ b/docs-site/src/examples/ts/renderCustomMonth.tsx
@@ -0,0 +1,24 @@
+const RenderCustomMonth = () => {
+  const renderMonthContent = (
+    month: number,
+    shortMonth: string,
+    longMonth: string,
+    day: Date,
+  ): React.ReactNode => {
+    const fullYear = new Date(day).getFullYear();
+    const tooltipText = `Tooltip for month: ${longMonth} ${fullYear}`;
+
+    return <span title={tooltipText}>{shortMonth}</span>;
+  };
+
+  return (
+    <DatePicker
+      selected={new Date()}
+      renderMonthContent={renderMonthContent}
+      showMonthYearPicker
+      dateFormat="MM/yyyy"
+    />
+  );
+};
+
+render(RenderCustomMonth);
diff --git a/docs-site/src/examples/ts/renderCustomQuarter.ts b/docs-site/src/examples/ts/renderCustomQuarter.ts
deleted file mode 100644
index cf29164e39..0000000000
--- a/docs-site/src/examples/ts/renderCustomQuarter.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-const RenderCustomQuarterTS = `
-const Example = () => {
-  const renderQuarterContent = (quarter: number, shortQuarter: string): React.ReactNode => {
-    const tooltipText = \`Tooltip for quarter: \${quarter}\`;
-
-    return <span title={tooltipText}>{shortQuarter}</span>;
-  };
-
-  return (
-    <DatePicker
-      selected={new Date()}
-      renderQuarterContent={renderQuarterContent}
-      showQuarterYearPicker
-      dateFormat="yyyy, QQQ"
-    />
-  );
-};
-
-render(<Example />);
-`;
-
-export default RenderCustomQuarterTS;
diff --git a/docs-site/src/examples/ts/renderCustomQuarter.tsx b/docs-site/src/examples/ts/renderCustomQuarter.tsx
new file mode 100644
index 0000000000..eec2d00dcf
--- /dev/null
+++ b/docs-site/src/examples/ts/renderCustomQuarter.tsx
@@ -0,0 +1,21 @@
+const RenderCustomQuarter = () => {
+  const renderQuarterContent = (
+    quarter: number,
+    shortQuarter: string,
+  ): React.ReactNode => {
+    const tooltipText = `Tooltip for quarter: ${quarter}`;
+
+    return <span title={tooltipText}>{shortQuarter}</span>;
+  };
+
+  return (
+    <DatePicker
+      selected={new Date()}
+      renderQuarterContent={renderQuarterContent}
+      showQuarterYearPicker
+      dateFormat="yyyy, QQQ"
+    />
+  );
+};
+
+render(RenderCustomQuarter);
diff --git a/docs-site/src/examples/ts/renderCustomYear.ts b/docs-site/src/examples/ts/renderCustomYear.tsx
similarity index 62%
rename from docs-site/src/examples/ts/renderCustomYear.ts
rename to docs-site/src/examples/ts/renderCustomYear.tsx
index 90c13e2607..c9f3b9bd6e 100644
--- a/docs-site/src/examples/ts/renderCustomYear.ts
+++ b/docs-site/src/examples/ts/renderCustomYear.tsx
@@ -1,7 +1,6 @@
-const RenderCustomYearTS = `
-const Example = () => {
+const RenderCustomYear = () => {
   const renderYearContent = (year: number): React.ReactNode => {
-    const tooltipText = \`Tooltip for year: \${year}\`;
+    const tooltipText = `Tooltip for year: ${year}`;
     return <span title={tooltipText}>{year}</span>;
   };
 
@@ -15,7 +14,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default RenderCustomYearTS;
+render(RenderCustomYear);
diff --git a/docs-site/src/examples/ts/selectsMultiple.ts b/docs-site/src/examples/ts/selectsMultiple.tsx
similarity index 72%
rename from docs-site/src/examples/ts/selectsMultiple.ts
rename to docs-site/src/examples/ts/selectsMultiple.tsx
index 70d228af44..f83f307ecd 100644
--- a/docs-site/src/examples/ts/selectsMultiple.ts
+++ b/docs-site/src/examples/ts/selectsMultiple.tsx
@@ -1,6 +1,7 @@
-const selectsMultipleTS = `
-const Example = () => {
-  const [selectedDates, setSelectedDates] = useState<Date[] | null>([new Date()]);
+const SelectsMultiple = () => {
+  const [selectedDates, setSelectedDates] = useState<Date[] | null>([
+    new Date(),
+  ]);
 
   const onChange = (dates: Date[] | null) => {
     setSelectedDates(dates);
@@ -17,7 +18,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default selectsMultipleTS;
+render(SelectsMultiple);
diff --git a/docs-site/src/examples/ts/selectsMultipleMonths.ts b/docs-site/src/examples/ts/selectsMultipleMonths.tsx
similarity index 75%
rename from docs-site/src/examples/ts/selectsMultipleMonths.ts
rename to docs-site/src/examples/ts/selectsMultipleMonths.tsx
index e9f2974b63..acbbc6c81b 100644
--- a/docs-site/src/examples/ts/selectsMultipleMonths.ts
+++ b/docs-site/src/examples/ts/selectsMultipleMonths.tsx
@@ -1,5 +1,4 @@
-const selectsMultipleMonthsTS = `
-const Example = () => {
+const SelectsMultipleMonths = () => {
   const [selectedDates, setSelectedDates] = useState<Date[] | null>(null);
 
   const onChange = (dates: Date[] | null) => {
@@ -19,7 +18,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default selectsMultipleMonthsTS;
+render(SelectsMultipleMonths);
diff --git a/docs-site/src/examples/ts/selectsRange.ts b/docs-site/src/examples/ts/selectsRange.tsx
similarity index 81%
rename from docs-site/src/examples/ts/selectsRange.ts
rename to docs-site/src/examples/ts/selectsRange.tsx
index 2297a0eb01..9372ea8ae6 100644
--- a/docs-site/src/examples/ts/selectsRange.ts
+++ b/docs-site/src/examples/ts/selectsRange.tsx
@@ -1,5 +1,4 @@
-const SelectsRangeTS = `
-const Example = () => {
+const SelectsRange = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
   const [endDate, setEndDate] = useState<Date | null>(null);
 
@@ -21,7 +20,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default SelectsRangeTS;
+render(SelectsRange);
diff --git a/docs-site/src/examples/ts/selectsRangeWithDisabledDates.ts b/docs-site/src/examples/ts/selectsRangeWithDisabledDates.tsx
similarity index 63%
rename from docs-site/src/examples/ts/selectsRangeWithDisabledDates.ts
rename to docs-site/src/examples/ts/selectsRangeWithDisabledDates.tsx
index 3cf6de92c4..b21cead13f 100644
--- a/docs-site/src/examples/ts/selectsRangeWithDisabledDates.ts
+++ b/docs-site/src/examples/ts/selectsRangeWithDisabledDates.tsx
@@ -1,10 +1,11 @@
-const SelectsRangeWithDisabledDatesTS = `
-type TExcludeDate = {
-  date: Date;
-  message?: string;
-}[] | Date[];
+type TExcludeDate =
+  | {
+      date: Date;
+      message?: string;
+    }[]
+  | Date[];
 
-const Example = () => {
+const SelectsRangeWithDisabledDates = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
   const [endDate, setEndDate] = useState<Date | null>(null);
 
@@ -14,7 +15,10 @@ const Example = () => {
     setEndDate(end);
   };
 
-  const excludeDates: TExcludeDate = [addDays(new Date(), 1), addDays(new Date(), 5)];
+  const excludeDates: TExcludeDate = [
+    addDays(new Date(), 1),
+    addDays(new Date(), 5),
+  ];
 
   return (
     <DatePicker
@@ -30,7 +34,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default SelectsRangeWithDisabledDatesTS;
+render(SelectsRangeWithDisabledDates);
diff --git a/docs-site/src/examples/ts/showTime.ts b/docs-site/src/examples/ts/showTime.tsx
similarity index 77%
rename from docs-site/src/examples/ts/showTime.ts
rename to docs-site/src/examples/ts/showTime.tsx
index ea86f0a7b6..41011dad75 100644
--- a/docs-site/src/examples/ts/showTime.ts
+++ b/docs-site/src/examples/ts/showTime.tsx
@@ -1,5 +1,4 @@
-const showTimeTS = `
-const Example = () => {
+const ShowTime = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -15,7 +14,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default showTimeTS;
+render(ShowTime);
diff --git a/docs-site/src/examples/ts/showTimeOnly.ts b/docs-site/src/examples/ts/showTimeOnly.tsx
similarity index 74%
rename from docs-site/src/examples/ts/showTimeOnly.ts
rename to docs-site/src/examples/ts/showTimeOnly.tsx
index 4014d1a187..a76fa490af 100644
--- a/docs-site/src/examples/ts/showTimeOnly.ts
+++ b/docs-site/src/examples/ts/showTimeOnly.tsx
@@ -1,5 +1,4 @@
-const showTimeReadonlyTS = `
-const Example = () => {
+const ShowTimeOnly = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -15,7 +14,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default showTimeReadonlyTS;
+render(ShowTimeOnly);
diff --git a/docs-site/src/examples/ts/specificDateRange.ts b/docs-site/src/examples/ts/specificDateRange.tsx
similarity index 74%
rename from docs-site/src/examples/ts/specificDateRange.ts
rename to docs-site/src/examples/ts/specificDateRange.tsx
index 91fef2b380..e24c14e1a7 100644
--- a/docs-site/src/examples/ts/specificDateRange.ts
+++ b/docs-site/src/examples/ts/specificDateRange.tsx
@@ -1,5 +1,4 @@
-const specificDateRangeTS = `
-const Example = () => {
+const SpecificDateRange = () => {
   const [startDate, setStartDate] = useState<Date | null>(null);
 
   return (
@@ -13,7 +12,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default specificDateRangeTS;
+render(SpecificDateRange);
diff --git a/docs-site/src/examples/ts/strictParsing.ts b/docs-site/src/examples/ts/strictParsing.tsx
similarity index 67%
rename from docs-site/src/examples/ts/strictParsing.ts
rename to docs-site/src/examples/ts/strictParsing.tsx
index 196de886e0..c594c5377d 100644
--- a/docs-site/src/examples/ts/strictParsing.ts
+++ b/docs-site/src/examples/ts/strictParsing.tsx
@@ -1,5 +1,4 @@
-const strictParsingTS = `
-const Example = () => {
+const StrictParsing = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -11,7 +10,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default strictParsingTS;
+render(StrictParsing);
diff --git a/docs-site/src/examples/ts/tabIndex.ts b/docs-site/src/examples/ts/tabIndex.ts
deleted file mode 100644
index 336841df74..0000000000
--- a/docs-site/src/examples/ts/tabIndex.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-const tabIndexTS = `
-const Example = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={setStartDate}
-      tabIndex={1}
-    />
-  );
-};
-
-render(<Example />);
-`;
-
-export default tabIndexTS;
diff --git a/docs-site/src/examples/ts/tabIndex.tsx b/docs-site/src/examples/ts/tabIndex.tsx
new file mode 100644
index 0000000000..b7a0aadd1f
--- /dev/null
+++ b/docs-site/src/examples/ts/tabIndex.tsx
@@ -0,0 +1,9 @@
+const TabIndex = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker selected={startDate} onChange={setStartDate} tabIndex={1} />
+  );
+};
+
+render(TabIndex);
diff --git a/docs-site/src/examples/ts/timeInput.ts b/docs-site/src/examples/ts/timeInput.tsx
similarity index 74%
rename from docs-site/src/examples/ts/timeInput.ts
rename to docs-site/src/examples/ts/timeInput.tsx
index ce5e55d07b..22f8daa241 100644
--- a/docs-site/src/examples/ts/timeInput.ts
+++ b/docs-site/src/examples/ts/timeInput.tsx
@@ -1,5 +1,4 @@
-const timeInputTS = `
-const Example = () => {
+const TimeInput = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -13,7 +12,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default timeInputTS;
+render(TimeInput);
diff --git a/docs-site/src/examples/ts/today.ts b/docs-site/src/examples/ts/today.tsx
similarity index 71%
rename from docs-site/src/examples/ts/today.ts
rename to docs-site/src/examples/ts/today.tsx
index a671e0e7fc..a1d99a6776 100644
--- a/docs-site/src/examples/ts/today.ts
+++ b/docs-site/src/examples/ts/today.tsx
@@ -1,5 +1,4 @@
-const todayTS = `
-const Example = () => {
+const Today = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -11,7 +10,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default todayTS;
+render(Today);
diff --git a/docs-site/src/examples/ts/toggleCalendarOnIconClick.ts b/docs-site/src/examples/ts/toggleCalendarOnIconClick.tsx
similarity index 66%
rename from docs-site/src/examples/ts/toggleCalendarOnIconClick.ts
rename to docs-site/src/examples/ts/toggleCalendarOnIconClick.tsx
index 6e67c2d3f8..8ecb580ce1 100644
--- a/docs-site/src/examples/ts/toggleCalendarOnIconClick.ts
+++ b/docs-site/src/examples/ts/toggleCalendarOnIconClick.tsx
@@ -1,5 +1,4 @@
-const toggleCalendarOnIconClickTS = `
-const Example = () => {
+const ToggleCalendarOnIconClick = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
@@ -12,7 +11,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default toggleCalendarOnIconClickTS;
+render(ToggleCalendarOnIconClick);
diff --git a/docs-site/src/examples/ts/weekNumbers.ts b/docs-site/src/examples/ts/weekNumbers.tsx
similarity index 70%
rename from docs-site/src/examples/ts/weekNumbers.ts
rename to docs-site/src/examples/ts/weekNumbers.tsx
index 1abd11a4c8..707fd90c87 100644
--- a/docs-site/src/examples/ts/weekNumbers.ts
+++ b/docs-site/src/examples/ts/weekNumbers.tsx
@@ -1,5 +1,4 @@
-const WeekNumbersTS = `
-const Example = () => {
+const WeekNumbers = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -12,7 +11,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default WeekNumbersTS;
+render(WeekNumbers);
diff --git a/docs-site/src/examples/ts/weekPicker.ts b/docs-site/src/examples/ts/weekPicker.tsx
similarity index 54%
rename from docs-site/src/examples/ts/weekPicker.ts
rename to docs-site/src/examples/ts/weekPicker.tsx
index cb944bca36..e34dce669b 100644
--- a/docs-site/src/examples/ts/weekPicker.ts
+++ b/docs-site/src/examples/ts/weekPicker.tsx
@@ -1,6 +1,7 @@
-const weekPickerTS = `
-const Example = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date("2021/02/22"));
+const WeekPicker = () => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    new Date("2021/02/22"),
+  );
 
   return (
     <DatePicker
@@ -14,7 +15,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default weekPickerTS;
+render(WeekPicker);
diff --git a/docs-site/src/examples/ts/withPortalById.ts b/docs-site/src/examples/ts/withPortalById.tsx
similarity index 69%
rename from docs-site/src/examples/ts/withPortalById.ts
rename to docs-site/src/examples/ts/withPortalById.tsx
index 20486bb41b..6228f2c308 100644
--- a/docs-site/src/examples/ts/withPortalById.ts
+++ b/docs-site/src/examples/ts/withPortalById.tsx
@@ -1,5 +1,4 @@
-const withPortalByIdTS = `
-const Example = () => {
+const WithPortalById = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -12,7 +11,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default withPortalByIdTS;
+render(WithPortalById);
diff --git a/docs-site/src/examples/ts/yearDropdown.ts b/docs-site/src/examples/ts/yearDropdown.tsx
similarity index 75%
rename from docs-site/src/examples/ts/yearDropdown.ts
rename to docs-site/src/examples/ts/yearDropdown.tsx
index e5d336abdf..c04062be77 100644
--- a/docs-site/src/examples/ts/yearDropdown.ts
+++ b/docs-site/src/examples/ts/yearDropdown.tsx
@@ -1,5 +1,4 @@
-const yearDropdownTS = `
-const Example = () => {
+const YearDropdown = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -14,7 +13,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default yearDropdownTS;
+render(YearDropdown);
diff --git a/docs-site/src/examples/ts/yearItemNumber.ts b/docs-site/src/examples/ts/yearItemNumber.tsx
similarity index 71%
rename from docs-site/src/examples/ts/yearItemNumber.ts
rename to docs-site/src/examples/ts/yearItemNumber.tsx
index b468b90dc7..344a0a0c5b 100644
--- a/docs-site/src/examples/ts/yearItemNumber.ts
+++ b/docs-site/src/examples/ts/yearItemNumber.tsx
@@ -1,5 +1,4 @@
-const yearItemNumberTS = `
-const Example = () => {
+const YearItemNumber = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -13,7 +12,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default yearItemNumberTS;
+render(YearItemNumber);
diff --git a/docs-site/src/examples/ts/yearPicker.ts b/docs-site/src/examples/ts/yearPicker.tsx
similarity index 70%
rename from docs-site/src/examples/ts/yearPicker.ts
rename to docs-site/src/examples/ts/yearPicker.tsx
index caecdcb7a5..25bbc13334 100644
--- a/docs-site/src/examples/ts/yearPicker.ts
+++ b/docs-site/src/examples/ts/yearPicker.tsx
@@ -1,5 +1,4 @@
-const yearPickerTS = `
-const Example = () => {
+const YearPicker = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -12,7 +11,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default yearPickerTS;
+render(YearPicker);
diff --git a/docs-site/src/examples/ts/yearSelectDropdown.ts b/docs-site/src/examples/ts/yearSelectDropdown.tsx
similarity index 71%
rename from docs-site/src/examples/ts/yearSelectDropdown.ts
rename to docs-site/src/examples/ts/yearSelectDropdown.tsx
index 8f140400b1..2c35d91edc 100644
--- a/docs-site/src/examples/ts/yearSelectDropdown.ts
+++ b/docs-site/src/examples/ts/yearSelectDropdown.tsx
@@ -1,5 +1,4 @@
-const yearSelectDropdownTS = `
-const Example = () => {
+const YearSelectDropdown = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
@@ -14,7 +13,4 @@ const Example = () => {
   );
 };
 
-render(<Example />);
-`;
-
-export default yearSelectDropdownTS;
+render(YearSelectDropdown);
diff --git a/docs-site/src/examples/tsconfig.json b/docs-site/src/examples/tsconfig.json
new file mode 100644
index 0000000000..09e9c5514e
--- /dev/null
+++ b/docs-site/src/examples/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noCheck": true
+  }
+}

From a69680c15da4a9f40658a32621b6362cc978c932 Mon Sep 17 00:00:00 2001
From: balajis-qb <balaji.s@qburst.com>
Date: Thu, 11 Sep 2025 17:05:20 +0530
Subject: [PATCH 04/18] feat: integrate esbuild-wasm for TypeScript
 transpilation in examples

- Added `esbuild-wasm` as a dependency to enable TypeScript transpilation.
- Implemented `tsxTransformer` for transforming TSX code to JSX.
- Updated `CodeExampleComponent` to handle TSX code and display transpiled output.
- Enhanced example configuration to support new TSX examples.
- Removed the duplicate javascript code base examples from examples/js/*.js
- Styled loading state for transpilation in examples.
---
 docs-site/package.json                        |   1 +
 docs-site/src/components/App/index.jsx        |   3 +
 docs-site/src/components/Example/index.tsx    | 159 +++++--
 docs-site/src/components/Examples/config.tsx  | 427 +++++-------------
 .../src/components/Examples/examples.scss     |   7 +
 docs-site/src/components/tsxTransformer.ts    |  46 ++
 .../src/examples/js/calendarContainer.js      |  24 -
 docs-site/src/examples/js/calendarIcon.js     |  11 -
 .../src/examples/js/calendarIconExternal.js   |  12 -
 .../src/examples/js/calendarIconSvgIcon.js    |  34 --
 docs-site/src/examples/js/calendarStartDay.js |  11 -
 docs-site/src/examples/js/children.js         |   9 -
 docs-site/src/examples/js/clearInput.js       |  12 -
 docs-site/src/examples/js/closeOnScroll.js    |  11 -
 .../src/examples/js/closeOnScrollCallback.js  |  11 -
 .../src/examples/js/configureFloatingUI.js    |  21 -
 .../examples/js/customCalendarClassName.js    |  11 -
 docs-site/src/examples/js/customClassName.js  |  11 -
 docs-site/src/examples/js/customDateFormat.js |  11 -
 .../src/examples/js/customDayClassName.js     |  13 -
 docs-site/src/examples/js/customInput.js      |  19 -
 .../src/examples/js/customTimeClassName.js    |  16 -
 docs-site/src/examples/js/customTimeInput.js  |  21 -
 docs-site/src/examples/js/dateRange.js        |  24 -
 .../js/dateRangeInputWithClearButton.js       |  16 -
 .../src/examples/js/dateRangeWithPortal.js    |  16 -
 .../js/dateRangeWithShowDisabledNavigation.js |  24 -
 docs-site/src/examples/js/default.js          |   7 -
 docs-site/src/examples/js/disabled.js         |  12 -
 .../examples/js/disabledKeyboardNavigation.js |  12 -
 .../src/examples/js/dontCloseOnSelect.js      |  11 -
 .../src/examples/js/excludeDateIntervals.js   |  14 -
 docs-site/src/examples/js/excludeDates.js     |  12 -
 .../examples/js/excludeDatesMonthPicker.js    |  13 -
 .../js/excludeDatesRangeMonthPicker.js        |  30 --
 .../examples/js/excludeDatesWithMessage.js    |  15 -
 .../src/examples/js/excludeTimePeriod.js      |  16 -
 docs-site/src/examples/js/excludeTimes.js     |  20 -
 docs-site/src/examples/js/excludeWeeks.js     |  18 -
 docs-site/src/examples/js/externalForm.js     |  17 -
 docs-site/src/examples/js/filterDates.js      |  17 -
 docs-site/src/examples/js/filterTimes.js      |  22 -
 docs-site/src/examples/js/fixedCalendar.js    |  11 -
 docs-site/src/examples/js/hideTimeCaption.js  |  15 -
 docs-site/src/examples/js/highlightDates.js   |  12 -
 .../src/examples/js/highlightDatesRanges.js   |  31 --
 docs-site/src/examples/js/holidayDates.js     |  19 -
 .../src/examples/js/includeDateIntervals.js   |  14 -
 docs-site/src/examples/js/includeDates.js     |  12 -
 .../examples/js/includeDatesMonthPicker.js    |  15 -
 docs-site/src/examples/js/includeTimes.js     |  20 -
 docs-site/src/examples/js/injectTimes.js      |  20 -
 docs-site/src/examples/js/inline.js           |  11 -
 docs-site/src/examples/js/inlineVisible.js    |  25 -
 docs-site/src/examples/js/locale.js           |  12 -
 docs-site/src/examples/js/localeWithTime.js   |  15 -
 .../js/localeWithoutGlobalVariable.js         |  11 -
 docs-site/src/examples/js/maxDate.js          |  12 -
 docs-site/src/examples/js/minDate.js          |  12 -
 docs-site/src/examples/js/monthDropdown.js    |  11 -
 .../src/examples/js/monthDropdownShort.js     |  12 -
 docs-site/src/examples/js/monthPicker.js      |  12 -
 .../src/examples/js/monthPickerFourColumns.js |  14 -
 .../src/examples/js/monthPickerFullName.js    |  13 -
 .../src/examples/js/monthPickerTwoColumns.js  |  14 -
 .../src/examples/js/monthYearDropdown.js      |  14 -
 docs-site/src/examples/js/multiMonth.js       |  11 -
 .../src/examples/js/multiMonthDropdown.js     |  12 -
 docs-site/src/examples/js/multiMonthInline.js |  12 -
 .../src/examples/js/multiMonthPrevious.js     |  12 -
 docs-site/src/examples/js/noAnchorArrow.js    |  11 -
 docs-site/src/examples/js/onBlurCallbacks.js  |  22 -
 .../js/onCalendarOpenStateCallbacks.js        |  15 -
 docs-site/src/examples/js/openToDate.js       |  11 -
 docs-site/src/examples/js/placeholderText.js  |   1 -
 docs-site/src/examples/js/portal.js           |  11 -
 docs-site/src/examples/js/portalById.js       |  11 -
 docs-site/src/examples/js/quarterPicker.js    |  12 -
 docs-site/src/examples/js/rangeMonthPicker.js |  27 --
 .../js/rangeMonthPickerSelectsRange.js        |  21 -
 .../src/examples/js/rangeQuarterPicker.js     |  27 --
 .../js/rangeQuarterPickerSelectsRange.js      |  21 -
 docs-site/src/examples/js/rangeSwapRange.js   |  24 -
 docs-site/src/examples/js/rangeYearPicker.js  |  27 --
 .../js/rangeYearPickerSelectsRange.js         |  21 -
 docs-site/src/examples/js/rawChange.js        |  18 -
 docs-site/src/examples/js/readOnly.js         |  12 -
 docs-site/src/examples/js/renderCustomDay.js  |  16 -
 .../src/examples/js/renderCustomHeader.js     |  75 ---
 .../js/renderCustomHeaderTwoMonths.js         |  58 ---
 .../src/examples/js/renderCustomMonth.js      |  17 -
 .../src/examples/js/renderCustomQuarter.js    |  15 -
 docs-site/src/examples/js/renderCustomYear.js |  15 -
 docs-site/src/examples/js/selectsMultiple.js  |  17 -
 .../src/examples/js/selectsMultipleMonths.js  |  19 -
 docs-site/src/examples/js/selectsRange.js     |  21 -
 .../js/selectsRangeWithDisabledDates.js       |  23 -
 docs-site/src/examples/js/showTime.js         |  15 -
 docs-site/src/examples/js/showTimeOnly.js     |  15 -
 .../src/examples/js/specificDateRange.js      |  13 -
 docs-site/src/examples/js/strictParsing.js    |  11 -
 docs-site/src/examples/js/tabIndex.js         |  11 -
 docs-site/src/examples/js/timeInput.js        |  13 -
 docs-site/src/examples/js/today.js            |  11 -
 .../examples/js/toggleCalendarOnIconClick.js  |  12 -
 docs-site/src/examples/js/weekNumbers.js      |  12 -
 docs-site/src/examples/js/weekPicker.js       |  14 -
 docs-site/src/examples/js/withPortalById.js   |  12 -
 docs-site/src/examples/js/yearDropdown.js     |  14 -
 docs-site/src/examples/js/yearItemNumber.js   |  13 -
 docs-site/src/examples/js/yearPicker.js       |  12 -
 .../src/examples/js/yearSelectDropdown.js     |  14 -
 docs-site/yarn.lock                           |  10 +
 113 files changed, 289 insertions(+), 2102 deletions(-)
 create mode 100644 docs-site/src/components/tsxTransformer.ts
 delete mode 100644 docs-site/src/examples/js/calendarContainer.js
 delete mode 100644 docs-site/src/examples/js/calendarIcon.js
 delete mode 100644 docs-site/src/examples/js/calendarIconExternal.js
 delete mode 100644 docs-site/src/examples/js/calendarIconSvgIcon.js
 delete mode 100644 docs-site/src/examples/js/calendarStartDay.js
 delete mode 100644 docs-site/src/examples/js/children.js
 delete mode 100644 docs-site/src/examples/js/clearInput.js
 delete mode 100644 docs-site/src/examples/js/closeOnScroll.js
 delete mode 100644 docs-site/src/examples/js/closeOnScrollCallback.js
 delete mode 100644 docs-site/src/examples/js/configureFloatingUI.js
 delete mode 100644 docs-site/src/examples/js/customCalendarClassName.js
 delete mode 100644 docs-site/src/examples/js/customClassName.js
 delete mode 100644 docs-site/src/examples/js/customDateFormat.js
 delete mode 100644 docs-site/src/examples/js/customDayClassName.js
 delete mode 100644 docs-site/src/examples/js/customInput.js
 delete mode 100644 docs-site/src/examples/js/customTimeClassName.js
 delete mode 100644 docs-site/src/examples/js/customTimeInput.js
 delete mode 100644 docs-site/src/examples/js/dateRange.js
 delete mode 100644 docs-site/src/examples/js/dateRangeInputWithClearButton.js
 delete mode 100644 docs-site/src/examples/js/dateRangeWithPortal.js
 delete mode 100644 docs-site/src/examples/js/dateRangeWithShowDisabledNavigation.js
 delete mode 100644 docs-site/src/examples/js/default.js
 delete mode 100644 docs-site/src/examples/js/disabled.js
 delete mode 100644 docs-site/src/examples/js/disabledKeyboardNavigation.js
 delete mode 100644 docs-site/src/examples/js/dontCloseOnSelect.js
 delete mode 100644 docs-site/src/examples/js/excludeDateIntervals.js
 delete mode 100644 docs-site/src/examples/js/excludeDates.js
 delete mode 100644 docs-site/src/examples/js/excludeDatesMonthPicker.js
 delete mode 100644 docs-site/src/examples/js/excludeDatesRangeMonthPicker.js
 delete mode 100644 docs-site/src/examples/js/excludeDatesWithMessage.js
 delete mode 100644 docs-site/src/examples/js/excludeTimePeriod.js
 delete mode 100644 docs-site/src/examples/js/excludeTimes.js
 delete mode 100644 docs-site/src/examples/js/excludeWeeks.js
 delete mode 100644 docs-site/src/examples/js/externalForm.js
 delete mode 100644 docs-site/src/examples/js/filterDates.js
 delete mode 100644 docs-site/src/examples/js/filterTimes.js
 delete mode 100644 docs-site/src/examples/js/fixedCalendar.js
 delete mode 100644 docs-site/src/examples/js/hideTimeCaption.js
 delete mode 100644 docs-site/src/examples/js/highlightDates.js
 delete mode 100644 docs-site/src/examples/js/highlightDatesRanges.js
 delete mode 100644 docs-site/src/examples/js/holidayDates.js
 delete mode 100644 docs-site/src/examples/js/includeDateIntervals.js
 delete mode 100644 docs-site/src/examples/js/includeDates.js
 delete mode 100644 docs-site/src/examples/js/includeDatesMonthPicker.js
 delete mode 100644 docs-site/src/examples/js/includeTimes.js
 delete mode 100644 docs-site/src/examples/js/injectTimes.js
 delete mode 100644 docs-site/src/examples/js/inline.js
 delete mode 100644 docs-site/src/examples/js/inlineVisible.js
 delete mode 100644 docs-site/src/examples/js/locale.js
 delete mode 100644 docs-site/src/examples/js/localeWithTime.js
 delete mode 100644 docs-site/src/examples/js/localeWithoutGlobalVariable.js
 delete mode 100644 docs-site/src/examples/js/maxDate.js
 delete mode 100644 docs-site/src/examples/js/minDate.js
 delete mode 100644 docs-site/src/examples/js/monthDropdown.js
 delete mode 100644 docs-site/src/examples/js/monthDropdownShort.js
 delete mode 100644 docs-site/src/examples/js/monthPicker.js
 delete mode 100644 docs-site/src/examples/js/monthPickerFourColumns.js
 delete mode 100644 docs-site/src/examples/js/monthPickerFullName.js
 delete mode 100644 docs-site/src/examples/js/monthPickerTwoColumns.js
 delete mode 100644 docs-site/src/examples/js/monthYearDropdown.js
 delete mode 100644 docs-site/src/examples/js/multiMonth.js
 delete mode 100644 docs-site/src/examples/js/multiMonthDropdown.js
 delete mode 100644 docs-site/src/examples/js/multiMonthInline.js
 delete mode 100644 docs-site/src/examples/js/multiMonthPrevious.js
 delete mode 100644 docs-site/src/examples/js/noAnchorArrow.js
 delete mode 100644 docs-site/src/examples/js/onBlurCallbacks.js
 delete mode 100644 docs-site/src/examples/js/onCalendarOpenStateCallbacks.js
 delete mode 100644 docs-site/src/examples/js/openToDate.js
 delete mode 100644 docs-site/src/examples/js/placeholderText.js
 delete mode 100644 docs-site/src/examples/js/portal.js
 delete mode 100644 docs-site/src/examples/js/portalById.js
 delete mode 100644 docs-site/src/examples/js/quarterPicker.js
 delete mode 100644 docs-site/src/examples/js/rangeMonthPicker.js
 delete mode 100644 docs-site/src/examples/js/rangeMonthPickerSelectsRange.js
 delete mode 100644 docs-site/src/examples/js/rangeQuarterPicker.js
 delete mode 100644 docs-site/src/examples/js/rangeQuarterPickerSelectsRange.js
 delete mode 100644 docs-site/src/examples/js/rangeSwapRange.js
 delete mode 100644 docs-site/src/examples/js/rangeYearPicker.js
 delete mode 100644 docs-site/src/examples/js/rangeYearPickerSelectsRange.js
 delete mode 100644 docs-site/src/examples/js/rawChange.js
 delete mode 100644 docs-site/src/examples/js/readOnly.js
 delete mode 100644 docs-site/src/examples/js/renderCustomDay.js
 delete mode 100644 docs-site/src/examples/js/renderCustomHeader.js
 delete mode 100644 docs-site/src/examples/js/renderCustomHeaderTwoMonths.js
 delete mode 100644 docs-site/src/examples/js/renderCustomMonth.js
 delete mode 100644 docs-site/src/examples/js/renderCustomQuarter.js
 delete mode 100644 docs-site/src/examples/js/renderCustomYear.js
 delete mode 100644 docs-site/src/examples/js/selectsMultiple.js
 delete mode 100644 docs-site/src/examples/js/selectsMultipleMonths.js
 delete mode 100644 docs-site/src/examples/js/selectsRange.js
 delete mode 100644 docs-site/src/examples/js/selectsRangeWithDisabledDates.js
 delete mode 100644 docs-site/src/examples/js/showTime.js
 delete mode 100644 docs-site/src/examples/js/showTimeOnly.js
 delete mode 100644 docs-site/src/examples/js/specificDateRange.js
 delete mode 100644 docs-site/src/examples/js/strictParsing.js
 delete mode 100644 docs-site/src/examples/js/tabIndex.js
 delete mode 100644 docs-site/src/examples/js/timeInput.js
 delete mode 100644 docs-site/src/examples/js/today.js
 delete mode 100644 docs-site/src/examples/js/toggleCalendarOnIconClick.js
 delete mode 100644 docs-site/src/examples/js/weekNumbers.js
 delete mode 100644 docs-site/src/examples/js/weekPicker.js
 delete mode 100644 docs-site/src/examples/js/withPortalById.js
 delete mode 100644 docs-site/src/examples/js/yearDropdown.js
 delete mode 100644 docs-site/src/examples/js/yearItemNumber.js
 delete mode 100644 docs-site/src/examples/js/yearPicker.js
 delete mode 100644 docs-site/src/examples/js/yearSelectDropdown.js

diff --git a/docs-site/package.json b/docs-site/package.json
index a8e2b65af2..45d4fbb161 100644
--- a/docs-site/package.json
+++ b/docs-site/package.json
@@ -5,6 +5,7 @@
   "type": "module",
   "dependencies": {
     "date-fns": "^4.1.0",
+    "esbuild-wasm": "^0.25.9",
     "highlight.js": "^11.11.1",
     "lodash": "^4.17.21",
     "prism-react-renderer": "^2.4.1",
diff --git a/docs-site/src/components/App/index.jsx b/docs-site/src/components/App/index.jsx
index 4ce3c01eae..7dc163d1b7 100644
--- a/docs-site/src/components/App/index.jsx
+++ b/docs-site/src/components/App/index.jsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import DatePicker from "react-datepicker";
 import ExampleComponents from "../Examples";
+import { initializeTsxTransformer } from "../tsxTransformer";
 import logo from "./logo.png";
 import ribbon from "./ribbon.png";
 
@@ -13,6 +14,8 @@ const Example = () => {
     const handleScroll = () => setIsScrolled(window.scrollY < 400);
     document.addEventListener("scroll", handleScroll);
 
+    initializeTsxTransformer();
+
     return () => {
       document.removeEventListener("scroll", handleScroll);
     };
diff --git a/docs-site/src/components/Example/index.tsx b/docs-site/src/components/Example/index.tsx
index 59bfb2a07f..fa9f424b82 100644
--- a/docs-site/src/components/Example/index.tsx
+++ b/docs-site/src/components/Example/index.tsx
@@ -4,10 +4,12 @@ import DatePicker, {
   registerLocale,
   CalendarContainer,
 } from "react-datepicker";
+import { transformTsx } from "../tsxTransformer";
 import * as DateFNS from "date-fns";
 import { fi } from "date-fns/locale/fi";
 import { ptBR } from "date-fns/locale/pt-BR";
 import { enGB } from "date-fns/locale/en-GB";
+import { debounce } from "lodash";
 import slugify from "slugify";
 import range from "lodash/range";
 import { themes } from "prism-react-renderer";
@@ -16,6 +18,9 @@ import { IExampleConfig } from "../../types";
 
 type TState = {
   activeTab: "js" | "ts";
+  isTranspiling: boolean;
+  tsxCode: string;
+  jsxCode: string;
 };
 
 type TProps = {
@@ -28,26 +33,88 @@ export default class CodeExampleComponent extends React.Component<
 > {
   state: TState = {
     activeTab: "ts",
+    isTranspiling: false,
+    tsxCode: "",
+    jsxCode: "",
   };
 
+  tsCodeRef = React.createRef<string>();
+  lastTranspiledTsCodeRef = React.createRef<string>();
+
+  constructor(props: TProps) {
+    super(props);
+
+    const { component } = props.example;
+    this.state = {
+      activeTab: "ts",
+      isTranspiling: false,
+      tsxCode: component.trim(),
+      jsxCode: "",
+    };
+  }
+
   componentDidMount() {
     registerLocale("fi", fi);
     registerLocale("pt-BR", ptBR);
     registerLocale("en-GB", enGB);
   }
 
-  handleTabChange = (tab: TState["activeTab"]) => {
-    this.setState({ activeTab: tab });
+  transpileTsCode = async () => {
+    const tsCode = this.state.tsxCode;
+
+    let stateUpdates = {
+      jsxCode: "",
+      isTranspiling: true,
+    };
+
+    try {
+      const transpiledCode = await transformTsx(tsCode);
+
+      this.lastTranspiledTsCodeRef.current = tsCode;
+      stateUpdates = {
+        jsxCode: transpiledCode,
+        isTranspiling: false,
+      };
+    } catch (err) {
+      stateUpdates = {
+        jsxCode: "// Transpilation failed! Error: " + (err as Error).message,
+        isTranspiling: false,
+      };
+    }
+
+    this.setState((state) => ({
+      ...state,
+      ...stateUpdates,
+    }));
   };
 
-  render() {
-    const { title, description, component, componentTS } = this.props.example;
+  handleCodeChange = debounce((code: string) => {
     const { activeTab } = this.state;
+    const codeProp = activeTab === "ts" ? "tsxCode" : "jsxCode";
+
+    this.setState((state) => ({
+      ...state,
+      [codeProp]: code,
+    }));
+  }, 500);
+
+  handleTabChange = async (tab: TState["activeTab"]) => {
+    const { tsxCode } = this.state;
+    this.setState((state) => ({
+      ...state,
+      activeTab: tab,
+    }));
 
-    const jsCode = component.trim();
-    const tsCode = componentTS?.trim();
+    if (tab === "js" && tsxCode !== this.lastTranspiledTsCodeRef.current) {
+      await this.transpileTsCode();
+    }
+  };
+
+  render() {
+    const { title, description } = this.props.example;
+    const { activeTab, isTranspiling, jsxCode, tsxCode } = this.state;
 
-    const code = activeTab === "js" ? jsCode : tsCode;
+    const code = activeTab === "js" ? jsxCode : tsxCode;
     const isTS = activeTab === "ts";
 
     return (
@@ -58,14 +125,12 @@ export default class CodeExampleComponent extends React.Component<
         <h2 className="example__heading">{title}</h2>
         {description && <p>{description}</p>}
         <div className="example__tabs">
-          {tsCode && (
-            <button
-              className={`example__tab ${activeTab === "ts" ? "active" : ""}`}
-              onClick={() => this.handleTabChange("ts")}
-            >
-              TypeScript
-            </button>
-          )}
+          <button
+            className={`example__tab ${activeTab === "ts" ? "active" : ""}`}
+            onClick={() => this.handleTabChange("ts")}
+          >
+            TypeScript
+          </button>
           <button
             className={`example__tab ${activeTab === "js" ? "active" : ""}`}
             onClick={() => this.handleTabChange("js")}
@@ -74,36 +139,42 @@ export default class CodeExampleComponent extends React.Component<
           </button>
         </div>
         <div className="row">
-          <LiveProvider
-            code={code}
-            scope={{
-              // NB any globals added here should also be referenced in ../../examples/.eslintrc
-              useState,
-              DatePicker,
-              CalendarContainer,
-              ...DateFNS,
-              range,
-              fi,
-              forwardRef,
-            }}
-            theme={themes.github}
-            noInline={isTS}
-            language={isTS ? "tsx" : "jsx"}
-          >
-            <pre className="example__code">
-              <img
-                src={editIcon}
-                className="example__code__edit_icon"
-                alt="edit icon"
-                title="Edit the code directly on the left side and and see the output on the right"
-              />
-              <LiveEditor />
+          {activeTab === "js" && isTranspiling ? (
+            <pre className="example__code example__transpiling">
+              Transpiling...
             </pre>
-            <div className="example__preview">
-              <LiveError />
-              <LivePreview />
-            </div>
-          </LiveProvider>
+          ) : (
+            <LiveProvider
+              code={code}
+              scope={{
+                // NB any globals added here should also be referenced in ../../examples/.eslintrc
+                useState,
+                DatePicker,
+                CalendarContainer,
+                ...DateFNS,
+                range,
+                fi,
+                forwardRef,
+              }}
+              theme={themes.github}
+              noInline
+              language={isTS ? "tsx" : "jsx"}
+            >
+              <pre className="example__code">
+                <img
+                  src={editIcon}
+                  className="example__code__edit_icon"
+                  alt="edit icon"
+                  title="Edit the code directly on the left side and and see the output on the right"
+                />
+                <LiveEditor onChange={this.handleCodeChange} />
+              </pre>
+              <div className="example__preview">
+                <LiveError />
+                <LivePreview />
+              </div>
+            </LiveProvider>
+          )}
         </div>
       </div>
     );
diff --git a/docs-site/src/components/Examples/config.tsx b/docs-site/src/components/Examples/config.tsx
index 603d0a28c7..b1ab79704d 100644
--- a/docs-site/src/components/Examples/config.tsx
+++ b/docs-site/src/components/Examples/config.tsx
@@ -1,275 +1,157 @@
 import { IExampleConfig } from "../../types";
 
-import Default from "../../examples/js/default?raw";
-import NoAnchorArrow from "../../examples/js/noAnchorArrow?raw";
-import ShowTime from "../../examples/js/showTime?raw";
-import ShowTimeOnly from "../../examples/js/showTimeOnly?raw";
-import HideTimeCaption from "../../examples/js/hideTimeCaption?raw";
-import ExcludeTimes from "../../examples/js/excludeTimes?raw";
-import IncludeTimes from "../../examples/js/includeTimes?raw";
-import InjectTimes from "../../examples/js/injectTimes?raw";
-import FilterTimes from "../../examples/js/filterTimes?raw";
-import ExcludeTimePeriod from "../../examples/js/excludeTimePeriod?raw";
-import CustomDateFormat from "../../examples/js/customDateFormat?raw";
-import CustomClassName from "../../examples/js/customClassName?raw";
-import CustomCalendarClassName from "../../examples/js/customCalendarClassName?raw";
-import CustomDayClassName from "../../examples/js/customDayClassName?raw";
-import CustomTimeClassName from "../../examples/js/customTimeClassName?raw";
-import Today from "../../examples/js/today?raw";
-import PlaceholderText from "../../examples/js/placeholderText?raw";
-import SpecificDateRange from "../../examples/js/specificDateRange?raw";
-import MinDate from "../../examples/js/minDate?raw";
-import MaxDate from "../../examples/js/maxDate?raw";
-import DateRangeWithShowDisabledNavigation from "../../examples/js/dateRangeWithShowDisabledNavigation?raw";
-import Locale from "../../examples/js/locale?raw";
-import LocaleWithTime from "../../examples/js/localeWithTime?raw";
-import LocaleWithoutGlobalVariable from "../../examples/js/localeWithoutGlobalVariable?raw";
-import ExcludeDates from "../../examples/js/excludeDates?raw";
-import ExcludedWithMessage from "../../examples/js/excludeDatesWithMessage?raw";
-import ExcludeDateIntervals from "../../examples/js/excludeDateIntervals?raw";
-import ExcludeDatesMonthPicker from "../../examples/js/excludeDatesMonthPicker?raw";
-import ExcludeDatesRangeMonthPicker from "../../examples/js/excludeDatesRangeMonthPicker?raw";
-import HighlightDates from "../../examples/js/highlightDates?raw";
-import HolidayDates from "../../examples/js/holidayDates?raw";
-import HighlightDatesRanges from "../../examples/js/highlightDatesRanges?raw";
-import IncludeDates from "../../examples/js/includeDates?raw";
-import IncludeDateIntervals from "../../examples/js/includeDateIntervals?raw";
-import IncludeDatesMonthPicker from "../../examples/js/includeDatesMonthPicker?raw";
-import FilterDates from "../../examples/js/filterDates?raw";
-import DateRange from "../../examples/js/dateRange?raw";
-import DateRangeInputWithClearButton from "../../examples/js/dateRangeInputWithClearButton?raw";
-import DateRangeWithPortal from "../../examples/js/dateRangeWithPortal?raw";
-import Disabled from "../../examples/js/disabled?raw";
-import DisabledKeyboardNavigation from "../../examples/js/disabledKeyboardNavigation?raw";
-import ReadOnly from "../../examples/js/readOnly?raw";
-import ClearInput from "../../examples/js/clearInput?raw";
-import OnBlurCallbacks from "../../examples/js/onBlurCallbacks?raw";
-import ConfigureFloatingUI from "../../examples/js/configureFloatingUI?raw";
-import Portal from "../../examples/js/portal?raw";
-import PortalById from "../../examples/js/portalById?raw";
-import WithPortalById from "../../examples/js/withPortalById?raw";
-import TabIndex from "../../examples/js/tabIndex?raw";
-import YearDropdown from "../../examples/js/yearDropdown?raw";
-import YearItemNumber from "../../examples/js/yearItemNumber?raw";
-import MonthDropdown from "../../examples/js/monthDropdown?raw";
-import MonthDropdownShort from "../../examples/js/monthDropdownShort?raw";
-import MonthYearDropdown from "../../examples/js/monthYearDropdown?raw";
-import YearSelectDropdown from "../../examples/js/yearSelectDropdown?raw";
-import Inline from "../../examples/js/inline?raw";
-import InlineVisible from "../../examples/js/inlineVisible?raw";
-import OpenToDate from "../../examples/js/openToDate?raw";
-import FixedCalendar from "../../examples/js/fixedCalendar?raw";
-import WeekNumbers from "../../examples/js/weekNumbers?raw";
-import CustomInput from "../../examples/js/customInput?raw";
-import MultiMonth from "../../examples/js/multiMonth?raw";
-import MultiMonthPrevious from "../../examples/js/multiMonthPrevious?raw";
-import MultiMonthDropdown from "../../examples/js/multiMonthDropdown?raw";
-import MultiMonthInline from "../../examples/js/multiMonthInline?raw";
-import Children from "../../examples/js/children?raw";
-import CalendarContainer from "../../examples/js/calendarContainer?raw";
-import RawChange from "../../examples/js/rawChange?raw";
-import DontCloseOnSelect from "../../examples/js/dontCloseOnSelect?raw";
-import RenderCustomHeader from "../../examples/js/renderCustomHeader?raw";
-import RenderCustomHeaderTwoMonths from "../../examples/js/renderCustomHeaderTwoMonths?raw";
-import RenderCustomDay from "../../examples/js/renderCustomDay?raw";
-import RenderCustomMonth from "../../examples/js/renderCustomMonth?raw";
-import RenderCustomQuarter from "../../examples/js/renderCustomQuarter?raw";
-import RenderCustomYear from "../../examples/js/renderCustomYear?raw";
-import TimeInput from "../../examples/js/timeInput?raw";
-import StrictParsing from "../../examples/js/strictParsing?raw";
-import MonthPicker from "../../examples/js/monthPicker?raw";
-import WeekPicker from "../../examples/js/weekPicker?raw";
-import ExcludeWeeks from "../../examples/js/excludeWeeks?raw";
-import MonthPickerFullName from "../../examples/js/monthPickerFullName?raw";
-import MonthPickerTwoColumns from "../../examples/js/monthPickerTwoColumns?raw";
-import MonthPickerFourColumns from "../../examples/js/monthPickerFourColumns?raw";
-import RangeMonthPicker from "../../examples/js/rangeMonthPicker?raw";
-import RangeMonthPickerSelectsRange from "../../examples/js/rangeMonthPickerSelectsRange?raw";
-import QuarterPicker from "../../examples/js/quarterPicker?raw";
-import RangeQuarterPicker from "../../examples/js/rangeQuarterPicker?raw";
-import RangeQuarterPickerSelectsRange from "../../examples/js/rangeQuarterPickerSelectsRange?raw";
-import YearPicker from "../../examples/js/yearPicker?raw";
-import RangeYearPicker from "../../examples/js/rangeYearPicker?raw";
-import RangeYearPickerSelectsRange from "../../examples/js/rangeYearPickerSelectsRange?raw";
-import OnCalendarChangeStateCallbacks from "../../examples/js/onCalendarOpenStateCallbacks?raw";
-import CustomTimeInput from "../../examples/js/customTimeInput?raw";
-import CloseOnScroll from "../../examples/js/closeOnScroll?raw";
-import CloseOnScrollCallback from "../../examples/js/closeOnScrollCallback?raw";
-import SelectsRange from "../../examples/js/selectsRange?raw";
-import SelectsRangeWithDisabledDates from "../../examples/js/selectsRangeWithDisabledDates?raw";
-import CalendarStartDay from "../../examples/js/calendarStartDay?raw";
-import ExternalForm from "../../examples/js/externalForm?raw";
-import CalendarIcon from "../../examples/js/calendarIcon?raw";
-import SelectsMultiple from "../../examples/js/selectsMultiple?raw";
-import SelectsMultipleMonths from "../../examples/js/selectsMultipleMonths?raw";
-import CalendarIconExternal from "../../examples/js/calendarIconExternal?raw";
-import CalendarIconSvgIcon from "../../examples/js/calendarIconSvgIcon?raw";
-import ToggleCalendarOnIconClick from "../../examples/js/toggleCalendarOnIconClick?raw";
-import RangeSwapRange from "../../examples/js/rangeSwapRange?raw";
-
-// TS Examples
-import DefaultTS from "../../examples/ts/default?raw";
-import CalendarContainerTS from "../../examples/ts/calendarContainer?raw";
-import CalendarIconTS from "../../examples/ts/calendarIcon?raw";
-import CalendarIconSvgIconTS from "../../examples/ts/calendarIconSvgIcon?raw";
-import CalendarIconExternalTS from "../../examples/ts/calendarIconExternal?raw";
-import CalendarStartDayTS from "../../examples/ts/calendarStartDay?raw";
-import OnCalendarOpenStateCallbacksTS from "../../examples/ts/onCalendarOpenStateCallbacks?raw";
-import ToggleCalendarOnIconClickTS from "../../examples/ts/toggleCalendarOnIconClick?raw";
-import ChildrenTS from "../../examples/ts/children?raw";
-import ClearInputTS from "../../examples/ts/clearInput?raw";
-import CloseOnScrollTS from "../../examples/ts/closeOnScroll?raw";
-import CloseOnScrollCallbackTS from "../../examples/ts/closeOnScrollCallback?raw";
-import ConfigureFloatingUITS from "../../examples/ts/configureFloatingUI?raw";
-import CustomInputTS from "../../examples/ts/customInput?raw";
-import RenderCustomHeaderTS from "../../examples/ts/renderCustomHeader?raw";
-import RenderCustomHeaderTwoMonthsTS from "../../examples/ts/renderCustomHeaderTwoMonths?raw";
-import RenderCustomDayTS from "../../examples/ts/renderCustomDay?raw";
-import RenderCustomMonthTS from "../../examples/ts/renderCustomMonth?raw";
-import RenderCustomQuarterTS from "../../examples/ts/renderCustomQuarter?raw";
-import RenderCustomYearTS from "../../examples/ts/renderCustomYear?raw";
-import CustomCalendarClassNameTS from "../../examples/ts/customCalendarClassName?raw";
-import CustomClassNameTS from "../../examples/ts/customClassName?raw";
-import CustomDayClassNameTS from "../../examples/ts/customDayClassName?raw";
-import CustomDateFormatTS from "../../examples/ts/customDateFormat?raw";
-import CustomTimeClassNameTS from "../../examples/ts/customTimeClassName?raw";
-import CustomTimeInputTS from "../../examples/ts/customTimeInput?raw";
-import DateRangeTS from "../../examples/ts/dateRange?raw";
-import SelectsRangeTS from "../../examples/ts/selectsRange?raw";
-import SelectsRangeWithDisabledDatesTS from "../../examples/ts/selectsRangeWithDisabledDates?raw";
-import DateRangeWithShowDisabledNavigationTS from "../../examples/ts/dateRangeWithShowDisabledNavigation?raw";
-import DateRangeInputWithClearButtonTS from "../../examples/ts/dateRangeInputWithClearButton?raw";
-import DateRangeWithPortalTS from "../../examples/ts/dateRangeWithPortal?raw";
-import DisabledTS from "../../examples/ts/disabled?raw";
-import DisabledKeyboardNavigationTS from "../../examples/ts/disabledKeyboardNavigation?raw";
-import WeekNumbersTS from "../../examples/ts/weekNumbers?raw";
-import DontCloseOnSelectTS from "../../examples/ts/dontCloseOnSelect?raw";
-import ExcludeDatesTS from "../../examples/ts/excludeDates?raw";
-import ExcludeDatesWithMessageTS from "../../examples/ts/excludeDatesWithMessage?raw";
-import ExcludeDateIntervalsTS from "../../examples/ts/excludeDateIntervals?raw";
-import ExcludeDatesMonthPickerTS from "../../examples/ts/excludeDatesMonthPicker?raw";
-import ExcludeDatesRangeMonthPickerTS from "../../examples/ts/excludeDatesRangeMonthPicker?raw";
-import ExcludeTimesTS from "../../examples/ts/excludeTimes?raw";
-import FilterDatesTS from "../../examples/ts/filterDates?raw";
-import FilterTimesTS from "../../examples/ts/filterTimes?raw";
-import FixedCalendarTS from "../../examples/ts/fixedCalendar?raw";
-import RawChangeTS from "../../examples/ts/rawChange?raw";
-import HighlightDatesTS from "../../examples/ts/highlightDates?raw";
-import HighlightDatesRangesTS from "../../examples/ts/highlightDatesRanges?raw";
-import HolidayDatesTS from "../../examples/ts/holidayDates?raw";
-import IncludeDatesTS from "../../examples/ts/includeDates?raw";
-import IncludeDateIntervalsTS from "../../examples/ts/includeDateIntervals?raw";
-import IncludeDatesMonthPickerTS from "../../examples/ts/includeDatesMonthPicker?raw";
-import IncludeTimesTS from "../../examples/ts/includeTimes?raw";
-import InjectTimesTS from "../../examples/ts/injectTimes?raw";
-import InlineTS from "../../examples/ts/inline?raw";
-import InlineVisibleTS from "../../examples/ts/inlineVisible?raw";
-import TimeInputTS from "../../examples/ts/timeInput?raw";
-import LocaleTS from "../../examples/ts/locale?raw";
-import LocaleWithTimeTS from "../../examples/ts/localeWithTime?raw";
-import LocaleWithoutGlobalVariableTS from "../../examples/ts/localeWithoutGlobalVariable?raw";
-import MinDateTS from "../../examples/ts/minDate?raw";
-import MaxDateTS from "../../examples/ts/maxDate?raw";
-import MonthPickerTS from "../../examples/ts/monthPicker?raw";
-import MonthPickerFullNameTS from "../../examples/ts/monthPickerFullName?raw";
-import MonthPickerTwoColumnsTS from "../../examples/ts/monthPickerTwoColumns?raw";
-import MonthPickerFourColumnsTS from "../../examples/ts/monthPickerFourColumns?raw";
-import MonthDropdownTS from "../../examples/ts/monthDropdown?raw";
-import MonthDropdownShortTS from "../../examples/ts/monthDropdownShort?raw";
-import MonthYearDropdownTS from "../../examples/ts/monthYearDropdown?raw";
-import MultiMonthTS from "../../examples/ts/multiMonth?raw";
-import MultiMonthDropdownTS from "../../examples/ts/multiMonthDropdown?raw";
-import MultiMonthInlineTS from "../../examples/ts/multiMonthInline?raw";
-import NoAnchorArrowTS from "../../examples/ts/noAnchorArrow?raw";
-import OnBlurCallbacksTS from "../../examples/ts/onBlurCallbacks?raw";
-import OpenToDateTS from "../../examples/ts/openToDate?raw";
-import PlaceholderTextTS from "../../examples/ts/placeholderText?raw";
-import PortalTS from "../../examples/ts/portal?raw";
-import PortalByIdTS from "../../examples/ts/portalById?raw";
-import WithPortalByIdTS from "../../examples/ts/withPortalById?raw";
-import QuarterPickerTS from "../../examples/ts/quarterPicker?raw";
-import RangeMonthPickerTS from "../../examples/ts/rangeMonthPicker?raw";
-import RangeMonthPickerSelectsRangeTS from "../../examples/ts/rangeMonthPickerSelectsRange?raw";
-import RangeQuarterPickerTS from "../../examples/ts/rangeQuarterPicker?raw";
-import RangeQuarterPickerSelectsRangeTS from "../../examples/ts/rangeQuarterPickerSelectsRange?raw";
-import RangeSwapRangeTS from "../../examples/ts/rangeSwapRange?raw";
-import ReadOnlyTS from "../../examples/ts/readOnly?raw";
-import ShowTimeTS from "../../examples/ts/showTime?raw";
-import ShowTimeOnlyTS from "../../examples/ts/showTimeOnly?raw";
-import HideTimeCaptionTS from "../../examples/ts/hideTimeCaption?raw";
-import MultiMonthPreviousTS from "../../examples/ts/multiMonthPrevious?raw";
-import SpecificDateRangeTS from "../../examples/ts/specificDateRange?raw";
-import ExcludeTimePeriodTS from "../../examples/ts/excludeTimePeriod?raw";
-import SelectsMultipleTS from "../../examples/ts/selectsMultiple?raw";
-import SelectsMultipleMonthsTS from "../../examples/ts/selectsMultipleMonths?raw";
-import StrictParsingTS from "../../examples/ts/strictParsing?raw";
-import TabIndexTS from "../../examples/ts/tabIndex?raw";
-import TodayTS from "../../examples/ts/today?raw";
-import YearPickerTS from "../../examples/ts/yearPicker?raw";
-import RangeYearPickerTS from "../../examples/ts/rangeYearPicker?raw";
-import RangeYearPickerSelectsRangeTS from "../../examples/ts/rangeYearPickerSelectsRange?raw";
-import YearDropdownTS from "../../examples/ts/yearDropdown?raw";
-import YearSelectDropdownTS from "../../examples/ts/yearSelectDropdown?raw";
-import YearItemNumberTS from "../../examples/ts/yearItemNumber?raw";
-import WeekPickerTS from "../../examples/ts/weekPicker?raw";
-import ExcludeWeeksTS from "../../examples/ts/excludeWeeks?raw";
-import ExternalFormTS from "../../examples/ts/externalForm?raw";
+// Examples
+import Default from "../../examples/ts/default?raw";
+import CalendarContainer from "../../examples/ts/calendarContainer?raw";
+import CalendarIcon from "../../examples/ts/calendarIcon?raw";
+import CalendarIconSvgIcon from "../../examples/ts/calendarIconSvgIcon?raw";
+import CalendarIconExternal from "../../examples/ts/calendarIconExternal?raw";
+import CalendarStartDay from "../../examples/ts/calendarStartDay?raw";
+import OnCalendarChangeStateCallbacks from "../../examples/ts/onCalendarOpenStateCallbacks?raw";
+import ToggleCalendarOnIconClick from "../../examples/ts/toggleCalendarOnIconClick?raw";
+import Children from "../../examples/ts/children?raw";
+import ClearInput from "../../examples/ts/clearInput?raw";
+import CloseOnScroll from "../../examples/ts/closeOnScroll?raw";
+import CloseOnScrollCallback from "../../examples/ts/closeOnScrollCallback?raw";
+import ConfigureFloatingUI from "../../examples/ts/configureFloatingUI?raw";
+import CustomInput from "../../examples/ts/customInput?raw";
+import RenderCustomHeader from "../../examples/ts/renderCustomHeader?raw";
+import RenderCustomHeaderTwoMonths from "../../examples/ts/renderCustomHeaderTwoMonths?raw";
+import RenderCustomDay from "../../examples/ts/renderCustomDay?raw";
+import RenderCustomMonth from "../../examples/ts/renderCustomMonth?raw";
+import RenderCustomQuarter from "../../examples/ts/renderCustomQuarter?raw";
+import RenderCustomYear from "../../examples/ts/renderCustomYear?raw";
+import CustomCalendarClassName from "../../examples/ts/customCalendarClassName?raw";
+import CustomClassName from "../../examples/ts/customClassName?raw";
+import CustomDayClassName from "../../examples/ts/customDayClassName?raw";
+import CustomDateFormat from "../../examples/ts/customDateFormat?raw";
+import CustomTimeClassName from "../../examples/ts/customTimeClassName?raw";
+import CustomTimeInput from "../../examples/ts/customTimeInput?raw";
+import DateRange from "../../examples/ts/dateRange?raw";
+import SelectsRange from "../../examples/ts/selectsRange?raw";
+import SelectsRangeWithDisabledDates from "../../examples/ts/selectsRangeWithDisabledDates?raw";
+import DateRangeWithShowDisabledNavigation from "../../examples/ts/dateRangeWithShowDisabledNavigation?raw";
+import DateRangeInputWithClearButton from "../../examples/ts/dateRangeInputWithClearButton?raw";
+import DateRangeWithPortal from "../../examples/ts/dateRangeWithPortal?raw";
+import Disabled from "../../examples/ts/disabled?raw";
+import DisabledKeyboardNavigation from "../../examples/ts/disabledKeyboardNavigation?raw";
+import WeekNumbers from "../../examples/ts/weekNumbers?raw";
+import DontCloseOnSelect from "../../examples/ts/dontCloseOnSelect?raw";
+import ExcludeDates from "../../examples/ts/excludeDates?raw";
+import ExcludedWithMessage from "../../examples/ts/excludeDatesWithMessage?raw";
+import ExcludeDateIntervals from "../../examples/ts/excludeDateIntervals?raw";
+import ExcludeDatesMonthPicker from "../../examples/ts/excludeDatesMonthPicker?raw";
+import ExcludeDatesRangeMonthPicker from "../../examples/ts/excludeDatesRangeMonthPicker?raw";
+import ExcludeTimes from "../../examples/ts/excludeTimes?raw";
+import FilterDates from "../../examples/ts/filterDates?raw";
+import FilterTimes from "../../examples/ts/filterTimes?raw";
+import FixedCalendar from "../../examples/ts/fixedCalendar?raw";
+import RawChange from "../../examples/ts/rawChange?raw";
+import HighlightDates from "../../examples/ts/highlightDates?raw";
+import HighlightDatesRanges from "../../examples/ts/highlightDatesRanges?raw";
+import HolidayDates from "../../examples/ts/holidayDates?raw";
+import IncludeDates from "../../examples/ts/includeDates?raw";
+import IncludeDateIntervals from "../../examples/ts/includeDateIntervals?raw";
+import IncludeDatesMonthPicker from "../../examples/ts/includeDatesMonthPicker?raw";
+import IncludeTimes from "../../examples/ts/includeTimes?raw";
+import InjectTimes from "../../examples/ts/injectTimes?raw";
+import Inline from "../../examples/ts/inline?raw";
+import InlineVisible from "../../examples/ts/inlineVisible?raw";
+import TimeInput from "../../examples/ts/timeInput?raw";
+import Locale from "../../examples/ts/locale?raw";
+import LocaleWithTime from "../../examples/ts/localeWithTime?raw";
+import LocaleWithoutGlobalVariable from "../../examples/ts/localeWithoutGlobalVariable?raw";
+import MinDate from "../../examples/ts/minDate?raw";
+import MaxDate from "../../examples/ts/maxDate?raw";
+import MonthPicker from "../../examples/ts/monthPicker?raw";
+import MonthPickerFullName from "../../examples/ts/monthPickerFullName?raw";
+import MonthPickerTwoColumns from "../../examples/ts/monthPickerTwoColumns?raw";
+import MonthPickerFourColumns from "../../examples/ts/monthPickerFourColumns?raw";
+import MonthDropdown from "../../examples/ts/monthDropdown?raw";
+import MonthDropdownShort from "../../examples/ts/monthDropdownShort?raw";
+import MonthYearDropdown from "../../examples/ts/monthYearDropdown?raw";
+import MultiMonth from "../../examples/ts/multiMonth?raw";
+import MultiMonthDropdown from "../../examples/ts/multiMonthDropdown?raw";
+import MultiMonthInline from "../../examples/ts/multiMonthInline?raw";
+import NoAnchorArrow from "../../examples/ts/noAnchorArrow?raw";
+import OnBlurCallbacks from "../../examples/ts/onBlurCallbacks?raw";
+import OpenToDate from "../../examples/ts/openToDate?raw";
+import PlaceholderText from "../../examples/ts/placeholderText?raw";
+import Portal from "../../examples/ts/portal?raw";
+import PortalById from "../../examples/ts/portalById?raw";
+import WithPortalById from "../../examples/ts/withPortalById?raw";
+import QuarterPicker from "../../examples/ts/quarterPicker?raw";
+import RangeMonthPicker from "../../examples/ts/rangeMonthPicker?raw";
+import RangeMonthPickerSelectsRange from "../../examples/ts/rangeMonthPickerSelectsRange?raw";
+import RangeQuarterPicker from "../../examples/ts/rangeQuarterPicker?raw";
+import RangeQuarterPickerSelectsRange from "../../examples/ts/rangeQuarterPickerSelectsRange?raw";
+import RangeSwapRange from "../../examples/ts/rangeSwapRange?raw";
+import ReadOnly from "../../examples/ts/readOnly?raw";
+import ShowTime from "../../examples/ts/showTime?raw";
+import ShowTimeOnly from "../../examples/ts/showTimeOnly?raw";
+import HideTimeCaption from "../../examples/ts/hideTimeCaption?raw";
+import MultiMonthPrevious from "../../examples/ts/multiMonthPrevious?raw";
+import SpecificDateRange from "../../examples/ts/specificDateRange?raw";
+import ExcludeTimePeriod from "../../examples/ts/excludeTimePeriod?raw";
+import SelectsMultiple from "../../examples/ts/selectsMultiple?raw";
+import SelectsMultipleMonths from "../../examples/ts/selectsMultipleMonths?raw";
+import StrictParsing from "../../examples/ts/strictParsing?raw";
+import TabIndex from "../../examples/ts/tabIndex?raw";
+import Today from "../../examples/ts/today?raw";
+import YearPicker from "../../examples/ts/yearPicker?raw";
+import RangeYearPicker from "../../examples/ts/rangeYearPicker?raw";
+import RangeYearPickerSelectsRange from "../../examples/ts/rangeYearPickerSelectsRange?raw";
+import YearDropdown from "../../examples/ts/yearDropdown?raw";
+import YearSelectDropdown from "../../examples/ts/yearSelectDropdown?raw";
+import YearItemNumber from "../../examples/ts/yearItemNumber?raw";
+import WeekPicker from "../../examples/ts/weekPicker?raw";
+import ExcludeWeeks from "../../examples/ts/excludeWeeks?raw";
+import ExternalForm from "../../examples/ts/externalForm?raw";
 
 export const EXAMPLE_CONFIG: IExampleConfig[] = [
   {
     title: "Default",
     component: Default,
-    componentTS: DefaultTS,
   },
   {
     title: "Calendar Icon",
     component: CalendarIcon,
-    componentTS: CalendarIconTS,
   },
   {
     title: "Calendar Icon using React Svg Component",
     component: CalendarIconSvgIcon,
-    componentTS: CalendarIconSvgIconTS,
   },
   {
     title: "Calendar Icon using External Lib",
     component: CalendarIconExternal,
-    componentTS: CalendarIconExternalTS,
   },
   {
     title: "Toggle Calendar open status on click of the calendar icon",
     component: ToggleCalendarOnIconClick,
-    componentTS: ToggleCalendarOnIconClickTS,
   },
   {
     title: "Calendar container",
     component: CalendarContainer,
-    componentTS: CalendarContainerTS,
   },
   {
     title: "Calendar open state callbacks",
     component: OnCalendarChangeStateCallbacks,
-    componentTS: OnCalendarOpenStateCallbacksTS,
   },
   {
     title: "Children",
     component: Children,
-    componentTS: ChildrenTS,
   },
   {
     title: "Clear datepicker input",
     component: ClearInput,
-    componentTS: ClearInputTS,
   },
   {
     title: "Close on scroll",
     component: CloseOnScroll,
-    componentTS: CloseOnScrollTS,
   },
   {
     title: "Close on scroll callback",
     component: CloseOnScrollCallback,
-    componentTS: CloseOnScrollCallbackTS,
   },
   {
     title: "Configure Floating UI Properties",
@@ -287,484 +169,389 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [
         </a>
       </div>
     ),
-    componentTS: ConfigureFloatingUITS,
   },
   {
     title: "Custom input",
     component: CustomInput,
-    componentTS: CustomInputTS,
   },
   {
     title: "Custom header",
     component: RenderCustomHeader,
-    componentTS: RenderCustomHeaderTS,
   },
   {
     title: "Custom header with two months displayed",
     component: RenderCustomHeaderTwoMonths,
-    componentTS: RenderCustomHeaderTwoMonthsTS,
   },
   {
     title: "Custom Day",
     component: RenderCustomDay,
-    componentTS: RenderCustomDayTS,
   },
   {
     title: "Custom Month",
     component: RenderCustomMonth,
-    componentTS: RenderCustomMonthTS,
   },
   {
     title: "Custom Quarter",
     component: RenderCustomQuarter,
-    componentTS: RenderCustomQuarterTS,
   },
   {
     title: "Custom Year",
     component: RenderCustomYear,
-    componentTS: RenderCustomYearTS,
   },
   {
     title: "Custom calendar class name",
     component: CustomCalendarClassName,
-    componentTS: CustomCalendarClassNameTS,
   },
   {
     title: "Custom class name",
     component: CustomClassName,
-    componentTS: CustomClassNameTS,
   },
   {
     title: "Custom day class name",
     component: CustomDayClassName,
-    componentTS: CustomDayClassNameTS,
   },
   {
     title: "Custom date format",
     component: CustomDateFormat,
-    componentTS: CustomDateFormatTS,
   },
   {
     title: "Custom time class name",
     component: CustomTimeClassName,
-    componentTS: CustomTimeClassNameTS,
   },
   {
     title: "Custom time input",
     component: CustomTimeInput,
-    componentTS: CustomTimeInputTS,
   },
   {
     title: "Date Range",
     component: DateRange,
-    componentTS: DateRangeTS,
   },
   {
     title: "Date range for one datepicker",
     component: SelectsRange,
-    componentTS: SelectsRangeTS,
   },
   {
     title: "Date range for one datepicker with disabled dates highlighted",
     component: SelectsRangeWithDisabledDates,
-    componentTS: SelectsRangeWithDisabledDatesTS,
   },
   {
     title: "Date Range with disabled navigation shown",
     component: DateRangeWithShowDisabledNavigation,
-    componentTS: DateRangeWithShowDisabledNavigationTS,
   },
   {
     title: "Date Range using input with clear button",
     component: DateRangeInputWithClearButton,
-    componentTS: DateRangeInputWithClearButtonTS,
   },
   {
     title: "Date Range with Portal",
     component: DateRangeWithPortal,
-    componentTS: DateRangeWithPortalTS,
   },
   {
     title: "Disable datepicker",
     component: Disabled,
-    componentTS: DisabledTS,
   },
   {
     title: "Disable keyboard navigation",
     component: DisabledKeyboardNavigation,
-    componentTS: DisabledKeyboardNavigationTS,
   },
   {
     title: "Display Week Numbers",
     component: WeekNumbers,
-    componentTS: WeekNumbersTS,
   },
   {
     title: "Don't hide calendar on date selection",
     component: DontCloseOnSelect,
-    componentTS: DontCloseOnSelectTS,
   },
   {
     title: "Exclude dates",
     component: ExcludeDates,
-    componentTS: ExcludeDatesTS,
   },
   {
     title: "Exclude dates with message",
     component: ExcludedWithMessage,
-    componentTS: ExcludeDatesWithMessageTS,
   },
   {
     title: "Exclude date intervals",
     component: ExcludeDateIntervals,
-    componentTS: ExcludeDateIntervalsTS,
   },
   {
     title: "Exclude Months in Month Picker",
     component: ExcludeDatesMonthPicker,
-    componentTS: ExcludeDatesMonthPickerTS,
   },
   {
     title: "Exclude Months in Range Month Picker",
     component: ExcludeDatesRangeMonthPicker,
-    componentTS: ExcludeDatesRangeMonthPickerTS,
   },
   {
     title: "Exclude Times",
     component: ExcludeTimes,
-    componentTS: ExcludeTimesTS,
   },
   {
     title: "Filter dates",
     component: FilterDates,
-    componentTS: FilterDatesTS,
   },
   {
     title: "Filter times",
     component: FilterTimes,
-    componentTS: FilterTimesTS,
   },
   {
     title: "Fixed height of Calendar",
     component: FixedCalendar,
-    componentTS: FixedCalendarTS,
   },
   {
     title: "Get raw input value on change",
     component: RawChange,
-    componentTS: RawChangeTS,
   },
   {
     title: "Highlight dates",
     component: HighlightDates,
-    componentTS: HighlightDatesTS,
   },
   {
     title: "Highlight dates with custom class names and ranges",
     component: HighlightDatesRanges,
-    componentTS: HighlightDatesRangesTS,
   },
   {
     title: "Holiday dates",
     component: HolidayDates,
-    componentTS: HolidayDatesTS,
   },
   {
     title: "Include dates",
     component: IncludeDates,
-    componentTS: IncludeDatesTS,
   },
   {
     title: "Include date intervals",
     component: IncludeDateIntervals,
-    componentTS: IncludeDateIntervalsTS,
   },
   {
     title: "Include Months in Month Picker",
     component: IncludeDatesMonthPicker,
-    componentTS: IncludeDatesMonthPickerTS,
   },
   {
     title: "Include Times",
     component: IncludeTimes,
-    componentTS: IncludeTimesTS,
   },
   {
     title: "Inject Specific Times",
     component: InjectTimes,
-    componentTS: InjectTimesTS,
   },
   {
     title: "Inline version",
     component: Inline,
-    componentTS: InlineTS,
   },
   {
     title: "Button to show Inline version",
     component: InlineVisible,
-    componentTS: InlineVisibleTS,
   },
   {
     title: "Input time",
     component: TimeInput,
-    componentTS: TimeInputTS,
   },
   {
     title: "Locale",
     component: Locale,
-    componentTS: LocaleTS,
   },
   {
     title: "Locale with time",
     component: LocaleWithTime,
-    componentTS: LocaleWithTimeTS,
   },
   {
     title: "Locale without global variables",
     component: LocaleWithoutGlobalVariable,
-    componentTS: LocaleWithoutGlobalVariableTS,
   },
   {
     title: "Min date",
     component: MinDate,
-    componentTS: MinDateTS,
   },
   {
     title: "Max date",
     component: MaxDate,
-    componentTS: MaxDateTS,
   },
   {
     title: "Month Picker",
     component: MonthPicker,
-    componentTS: MonthPickerTS,
   },
   {
     title: "Month Picker with Full Name",
     component: MonthPickerFullName,
-    componentTS: MonthPickerFullNameTS,
   },
   {
     title: "Month Picker Two Columns Layout",
     component: MonthPickerTwoColumns,
-    componentTS: MonthPickerTwoColumnsTS,
   },
   {
     title: "Month Picker Four Columns Layout",
     component: MonthPickerFourColumns,
-    componentTS: MonthPickerFourColumnsTS,
   },
   {
     title: "Month dropdown",
     component: MonthDropdown,
-    componentTS: MonthDropdownTS,
   },
   {
     title: "Month dropdown short month",
     component: MonthDropdownShort,
-    componentTS: MonthDropdownShortTS,
   },
   {
     title: "MonthYear dropdown",
     component: MonthYearDropdown,
-    componentTS: MonthYearDropdownTS,
   },
   {
     title: "Multiple months",
     component: MultiMonth,
-    componentTS: MultiMonthTS,
   },
   {
     title: "Multiple months with year dropdown",
     component: MultiMonthDropdown,
-    componentTS: MultiMonthDropdownTS,
   },
   {
     title: "Multiple months inline",
     component: MultiMonthInline,
-    componentTS: MultiMonthInlineTS,
   },
   {
     title: "No Anchor Arrow",
     component: NoAnchorArrow,
-    componentTS: NoAnchorArrowTS,
   },
   {
     title: "onBlur callbacks in console",
     component: OnBlurCallbacks,
-    componentTS: OnBlurCallbacksTS,
   },
   {
     title: "Open to date",
     component: OpenToDate,
-    componentTS: OpenToDateTS,
   },
   {
     title: "Placeholder text",
     component: PlaceholderText,
-    componentTS: PlaceholderTextTS,
   },
   {
     title: "Portal version",
     component: Portal,
-    componentTS: PortalTS,
   },
   {
     title: "Portal by id",
     description:
       "If the provided portalId cannot be found in the dom, one will be created by default with that id.",
     component: PortalById,
-    componentTS: PortalByIdTS,
   },
   {
     title: "Portal version with portal by id",
     description:
       "If the provided portalId cannot be found in the dom, one will be created by default with that id.",
     component: WithPortalById,
-    componentTS: WithPortalByIdTS,
   },
   {
     title: "Quarter Picker",
     component: QuarterPicker,
-    componentTS: QuarterPickerTS,
   },
   {
     title: "Range Month Picker",
     component: RangeMonthPicker,
-    componentTS: RangeMonthPickerTS,
   },
   {
     title: "Range Month Picker for one month picker",
     component: RangeMonthPickerSelectsRange,
-    componentTS: RangeMonthPickerSelectsRangeTS,
   },
   {
     title: "Range Quarter Picker",
     component: RangeQuarterPicker,
-    componentTS: RangeQuarterPickerTS,
   },
   {
     title: "Range Quarter Picker for one quarter picker",
     component: RangeQuarterPickerSelectsRange,
-    componentTS: RangeQuarterPickerSelectsRangeTS,
   },
   {
     title: "Range Swap Range",
     description:
       "Swap the start and end date if the end date is before the start date in a pick sequence.",
     component: RangeSwapRange,
-    componentTS: RangeSwapRangeTS,
   },
   {
     title: "Read only datepicker",
     component: ReadOnly,
-    componentTS: ReadOnlyTS,
   },
   {
     title: "Select Time",
     component: ShowTime,
-    componentTS: ShowTimeTS,
   },
   {
     title: "Select Time Only",
     component: ShowTimeOnly,
-    componentTS: ShowTimeOnlyTS,
   },
   {
     title: "Hide Time Caption",
     component: HideTimeCaption,
-    componentTS: HideTimeCaptionTS,
   },
   {
     title: "Show previous months",
     component: MultiMonthPrevious,
-    componentTS: MultiMonthPreviousTS,
   },
   {
     title: "Specific date range",
     component: SpecificDateRange,
-    componentTS: SpecificDateRangeTS,
   },
   {
     title: "Specific Time Range",
     component: ExcludeTimePeriod,
-    componentTS: ExcludeTimePeriodTS,
   },
   {
     title: "Select multiple dates",
     component: SelectsMultiple,
-    componentTS: SelectsMultipleTS,
   },
   {
     title: "Select multiple months",
     component: SelectsMultipleMonths,
-    componentTS: SelectsMultipleMonthsTS,
   },
   {
     title: "Strict parsing",
     description:
       "Enables strict format validation for manual date input. When this flag is activated, the component will only accept values that exactly match the specified date format (`dateFormat`).",
     component: StrictParsing,
-    componentTS: StrictParsingTS,
   },
   {
     title: "TabIndex",
     component: TabIndex,
-    componentTS: TabIndexTS,
   },
   {
     title: "Today button",
     component: Today,
-    componentTS: TodayTS,
   },
   {
     title: "Year Picker",
     component: YearPicker,
-    componentTS: YearPickerTS,
   },
   {
     title: "Range Year Picker",
     component: RangeYearPicker,
-    componentTS: RangeYearPickerTS,
   },
   {
     title: "Range Year Picker for one datepicker",
     component: RangeYearPickerSelectsRange,
-    componentTS: RangeYearPickerSelectsRangeTS,
   },
   {
     title: "Year dropdown",
     component: YearDropdown,
-    componentTS: YearDropdownTS,
   },
   {
     title: "Year select dropdown",
     component: YearSelectDropdown,
-    componentTS: YearSelectDropdownTS,
   },
   {
     title: "Year item number",
     component: YearItemNumber,
-    componentTS: YearItemNumberTS,
   },
   {
     title: "Calendar Start day",
     component: CalendarStartDay,
-    componentTS: CalendarStartDayTS,
   },
   {
     title: "Week Picker",
     component: WeekPicker,
-    componentTS: WeekPickerTS,
   },
   {
     title: "Exclude Weeks",
     component: ExcludeWeeks,
-    componentTS: ExcludeWeeksTS,
   },
   {
     title: "External Form",
     component: ExternalForm,
-    componentTS: ExternalFormTS,
   },
 ];
diff --git a/docs-site/src/components/Examples/examples.scss b/docs-site/src/components/Examples/examples.scss
index 34f7081944..3750dd715f 100644
--- a/docs-site/src/components/Examples/examples.scss
+++ b/docs-site/src/components/Examples/examples.scss
@@ -122,6 +122,13 @@
     }
   }
 
+  &__transpiling {
+    padding: 0.8rem;
+    font-size: 14px;
+    color: #666;
+    font-family: "Open Sans", sans-serif;
+  }
+
   &__preview {
     padding: 20px;
 
diff --git a/docs-site/src/components/tsxTransformer.ts b/docs-site/src/components/tsxTransformer.ts
new file mode 100644
index 0000000000..c4259744c3
--- /dev/null
+++ b/docs-site/src/components/tsxTransformer.ts
@@ -0,0 +1,46 @@
+import { initialize, transform } from "esbuild-wasm";
+
+let initializeEsBuild: Promise<void> | null = null;
+
+const cleanTranspiledCode = (code: string) => {
+  return code
+    .replace(/\/\*\s*@__PURE__\s*\*\/\s*/g, "")
+    .replace(/\/\*\s*@__INLINE__\s*\*\/\s*/g, "")
+    .replace(/\/\*\s*@__NOINLINE__\s*\*\/\s*/g, "")
+    .replace(/\/\*\s*@__SIDE_EFFECTS__\s*\*\/\s*/g, "")
+    .replace(/\/\*\s*\*\/\s*/g, "")
+    .replace(/\n\s*\n\s*\n/g, "\n\n");
+};
+
+export const initializeTsxTransformer = async () => {
+  if (!initializeEsBuild) {
+    try {
+      initializeEsBuild = initialize({
+        wasmURL: "https://unpkg.com/esbuild-wasm/esbuild.wasm",
+      });
+    } catch (error) {
+      console.error(`Initializing tsx transformer failed:`, error);
+      initializeEsBuild = null;
+
+      throw error;
+    }
+  }
+
+  return initializeEsBuild;
+};
+
+export const transformTsx = async (code: string) => {
+  await initializeTsxTransformer();
+
+  const result = await transform(code, {
+    loader: "tsx",
+    target: "es2020",
+    jsx: "preserve",
+    minify: false,
+    // Remove special comments
+    legalComments: "none",
+    // Additional options to clean up output
+    treeShaking: true,
+  });
+  return cleanTranspiledCode(result.code);
+};
diff --git a/docs-site/src/examples/js/calendarContainer.js b/docs-site/src/examples/js/calendarContainer.js
deleted file mode 100644
index 813d2fbc34..0000000000
--- a/docs-site/src/examples/js/calendarContainer.js
+++ /dev/null
@@ -1,24 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  const MyContainer = ({ className, children }) => {
-    return (
-      <div style={{ padding: "16px", background: "#216ba5", color: "#fff" }}>
-        <CalendarContainer className={className}>
-          <div style={{ background: "#f0f0f0" }}>
-            What is your favorite day?
-          </div>
-          <div style={{ position: "relative" }}>{children}</div>
-        </CalendarContainer>
-      </div>
-    );
-  };
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      calendarContainer={MyContainer}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/calendarIcon.js b/docs-site/src/examples/js/calendarIcon.js
deleted file mode 100644
index 8b88b36655..0000000000
--- a/docs-site/src/examples/js/calendarIcon.js
+++ /dev/null
@@ -1,11 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      showIcon
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/calendarIconExternal.js b/docs-site/src/examples/js/calendarIconExternal.js
deleted file mode 100644
index f037967d08..0000000000
--- a/docs-site/src/examples/js/calendarIconExternal.js
+++ /dev/null
@@ -1,12 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      showIcon
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      icon="fa fa-calendar"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/calendarIconSvgIcon.js b/docs-site/src/examples/js/calendarIconSvgIcon.js
deleted file mode 100644
index f9eefbfa03..0000000000
--- a/docs-site/src/examples/js/calendarIconSvgIcon.js
+++ /dev/null
@@ -1,34 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      showIcon
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      icon={
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="1em"
-          height="1em"
-          viewBox="0 0 48 48"
-        >
-          <mask id="ipSApplication0">
-            <g fill="none" stroke="#fff" strokeLinejoin="round" strokeWidth="4">
-              <path strokeLinecap="round" d="M40.04 22v20h-32V22"></path>
-              <path
-                fill="#fff"
-                d="M5.842 13.777C4.312 17.737 7.263 22 11.51 22c3.314 0 6.019-2.686 6.019-6a6 6 0 0 0 6 6h1.018a6 6 0 0 0 6-6c0 3.314 2.706 6 6.02 6c4.248 0 7.201-4.265 5.67-8.228L39.234 6H8.845l-3.003 7.777Z"
-              ></path>
-            </g>
-          </mask>
-          <path
-            fill="currentColor"
-            d="M0 0h48v48H0z"
-            mask="url(#ipSApplication0)"
-          ></path>
-        </svg>
-      }
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/calendarStartDay.js b/docs-site/src/examples/js/calendarStartDay.js
deleted file mode 100644
index 15c2f30113..0000000000
--- a/docs-site/src/examples/js/calendarStartDay.js
+++ /dev/null
@@ -1,11 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      calendarStartDay={3}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/children.js b/docs-site/src/examples/js/children.js
deleted file mode 100644
index 330230b1e6..0000000000
--- a/docs-site/src/examples/js/children.js
+++ /dev/null
@@ -1,9 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)}>
-      <div style={{ color: "red" }}>Don't forget to check the weather!</div>
-    </DatePicker>
-  );
-};
diff --git a/docs-site/src/examples/js/clearInput.js b/docs-site/src/examples/js/clearInput.js
deleted file mode 100644
index 3cd1393e3f..0000000000
--- a/docs-site/src/examples/js/clearInput.js
+++ /dev/null
@@ -1,12 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      isClearable
-      placeholderText="I have been cleared!"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/closeOnScroll.js b/docs-site/src/examples/js/closeOnScroll.js
deleted file mode 100644
index 8f010ea572..0000000000
--- a/docs-site/src/examples/js/closeOnScroll.js
+++ /dev/null
@@ -1,11 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      closeOnScroll
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/closeOnScrollCallback.js b/docs-site/src/examples/js/closeOnScrollCallback.js
deleted file mode 100644
index fd740a1ba5..0000000000
--- a/docs-site/src/examples/js/closeOnScrollCallback.js
+++ /dev/null
@@ -1,11 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      closeOnScroll={(e) => e.target === document}
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/configureFloatingUI.js b/docs-site/src/examples/js/configureFloatingUI.js
deleted file mode 100644
index b6e57b369e..0000000000
--- a/docs-site/src/examples/js/configureFloatingUI.js
+++ /dev/null
@@ -1,21 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      popperClassName="some-custom-class"
-      popperPlacement="top-end"
-      popperModifiers={[
-        {
-          name: "myModifier",
-          fn(state) {
-            // Do something with the state
-            return state;
-          },
-        },
-      ]}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/customCalendarClassName.js b/docs-site/src/examples/js/customCalendarClassName.js
deleted file mode 100644
index d1d1c5590c..0000000000
--- a/docs-site/src/examples/js/customCalendarClassName.js
+++ /dev/null
@@ -1,11 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      calendarClassName="rasta-stripes"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/customClassName.js b/docs-site/src/examples/js/customClassName.js
deleted file mode 100644
index d18a9a7128..0000000000
--- a/docs-site/src/examples/js/customClassName.js
+++ /dev/null
@@ -1,11 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      className="red-border"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/customDateFormat.js b/docs-site/src/examples/js/customDateFormat.js
deleted file mode 100644
index a5110ac583..0000000000
--- a/docs-site/src/examples/js/customDateFormat.js
+++ /dev/null
@@ -1,11 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      dateFormat="yyyy/MM/dd"
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/customDayClassName.js b/docs-site/src/examples/js/customDayClassName.js
deleted file mode 100644
index 2c0178843e..0000000000
--- a/docs-site/src/examples/js/customDayClassName.js
+++ /dev/null
@@ -1,13 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      dayClassName={(date) =>
-        getDate(date) < Math.random() * 31 ? "random" : undefined
-      }
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/customInput.js b/docs-site/src/examples/js/customInput.js
deleted file mode 100644
index 2327699d18..0000000000
--- a/docs-site/src/examples/js/customInput.js
+++ /dev/null
@@ -1,19 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  const ExampleCustomInput = forwardRef(
-    ({ value, onClick, className }, ref) => (
-      <button className={className} onClick={onClick} ref={ref}>
-        {value}
-      </button>
-    ),
-  );
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      customInput={<ExampleCustomInput className="example-custom-input" />}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/customTimeClassName.js b/docs-site/src/examples/js/customTimeClassName.js
deleted file mode 100644
index 253f019215..0000000000
--- a/docs-site/src/examples/js/customTimeClassName.js
+++ /dev/null
@@ -1,16 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  const handleColor = (time) => {
-    return time.getHours() > 12 ? "text-success" : "text-error";
-  };
-
-  return (
-    <DatePicker
-      showTimeSelect
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      timeClassName={handleColor}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/customTimeInput.js b/docs-site/src/examples/js/customTimeInput.js
deleted file mode 100644
index 8288b5f3aa..0000000000
--- a/docs-site/src/examples/js/customTimeInput.js
+++ /dev/null
@@ -1,21 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  const ExampleCustomTimeInput = ({ value, onChange }) => (
-    <input
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-      onClick={(e) => e.target?.focus()}
-      style={{ border: "solid 1px pink" }}
-    />
-  );
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      showTimeInput
-      customTimeInput={<ExampleCustomTimeInput />}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/dateRange.js b/docs-site/src/examples/js/dateRange.js
deleted file mode 100644
index 110fe222ea..0000000000
--- a/docs-site/src/examples/js/dateRange.js
+++ /dev/null
@@ -1,24 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date("2014/02/08"));
-  const [endDate, setEndDate] = useState(new Date("2014/02/10"));
-
-  return (
-    <>
-      <DatePicker
-        selected={startDate}
-        onChange={(date) => setStartDate(date)}
-        selectsStart
-        startDate={startDate}
-        endDate={endDate}
-      />
-      <DatePicker
-        selected={endDate}
-        onChange={(date) => setEndDate(date)}
-        selectsEnd
-        startDate={startDate}
-        endDate={endDate}
-        minDate={startDate}
-      />
-    </>
-  );
-};
diff --git a/docs-site/src/examples/js/dateRangeInputWithClearButton.js b/docs-site/src/examples/js/dateRangeInputWithClearButton.js
deleted file mode 100644
index b17d9f4170..0000000000
--- a/docs-site/src/examples/js/dateRangeInputWithClearButton.js
+++ /dev/null
@@ -1,16 +0,0 @@
-() => {
-  const [dateRange, setDateRange] = useState([null, null]);
-  const [startDate, endDate] = dateRange;
-
-  return (
-    <DatePicker
-      startDate={startDate}
-      endDate={endDate}
-      onChange={(update) => {
-        setDateRange(update);
-      }}
-      selectsRange
-      isClearable={true}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/dateRangeWithPortal.js b/docs-site/src/examples/js/dateRangeWithPortal.js
deleted file mode 100644
index 22af3c5628..0000000000
--- a/docs-site/src/examples/js/dateRangeWithPortal.js
+++ /dev/null
@@ -1,16 +0,0 @@
-() => {
-  const [dateRange, setDateRange] = useState([null, null]);
-  const [startDate, endDate] = dateRange;
-
-  return (
-    <DatePicker
-      startDate={startDate}
-      endDate={endDate}
-      onChange={(update) => {
-        setDateRange(update);
-      }}
-      selectsRange
-      withPortal
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/dateRangeWithShowDisabledNavigation.js b/docs-site/src/examples/js/dateRangeWithShowDisabledNavigation.js
deleted file mode 100644
index f2cb355f45..0000000000
--- a/docs-site/src/examples/js/dateRangeWithShowDisabledNavigation.js
+++ /dev/null
@@ -1,24 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-  const [endDate, setEndDate] = useState(null);
-
-  const onChange = (dates) => {
-    const [start, end] = dates;
-    setStartDate(start);
-    setEndDate(end);
-  };
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={onChange}
-      minDate={new Date()}
-      maxDate={addMonths(new Date(), 5)}
-      startDate={startDate}
-      endDate={endDate}
-      selectsRange
-      inline
-      showDisabledMonthNavigation
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/default.js b/docs-site/src/examples/js/default.js
deleted file mode 100644
index 89a44d0e49..0000000000
--- a/docs-site/src/examples/js/default.js
+++ /dev/null
@@ -1,7 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
-  );
-};
diff --git a/docs-site/src/examples/js/disabled.js b/docs-site/src/examples/js/disabled.js
deleted file mode 100644
index 91e23654d5..0000000000
--- a/docs-site/src/examples/js/disabled.js
+++ /dev/null
@@ -1,12 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(null);
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      disabled
-      placeholderText="This is disabled"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/disabledKeyboardNavigation.js b/docs-site/src/examples/js/disabledKeyboardNavigation.js
deleted file mode 100644
index a598aa5dcc..0000000000
--- a/docs-site/src/examples/js/disabledKeyboardNavigation.js
+++ /dev/null
@@ -1,12 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(null);
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      disabledKeyboardNavigation
-      placeholderText="This has disabled keyboard navigation"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/dontCloseOnSelect.js b/docs-site/src/examples/js/dontCloseOnSelect.js
deleted file mode 100644
index 94ec19d402..0000000000
--- a/docs-site/src/examples/js/dontCloseOnSelect.js
+++ /dev/null
@@ -1,11 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      shouldCloseOnSelect={false}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/excludeDateIntervals.js b/docs-site/src/examples/js/excludeDateIntervals.js
deleted file mode 100644
index ee2f932589..0000000000
--- a/docs-site/src/examples/js/excludeDateIntervals.js
+++ /dev/null
@@ -1,14 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      excludeDateIntervals={[
-        { start: subDays(new Date(), 5), end: addDays(new Date(), 5) },
-      ]}
-      placeholderText="Select a date other than the interval from 5 days ago to 5 days in the future"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/excludeDates.js b/docs-site/src/examples/js/excludeDates.js
deleted file mode 100644
index 31fa33274a..0000000000
--- a/docs-site/src/examples/js/excludeDates.js
+++ /dev/null
@@ -1,12 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      excludeDates={[new Date(), subDays(new Date(), 1)]}
-      placeholderText="Select a date other than today or yesterday"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/excludeDatesMonthPicker.js b/docs-site/src/examples/js/excludeDatesMonthPicker.js
deleted file mode 100644
index 3c409863a9..0000000000
--- a/docs-site/src/examples/js/excludeDatesMonthPicker.js
+++ /dev/null
@@ -1,13 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date("2024-08-01"));
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      dateFormat="MM/yyyy"
-      excludeDates={[new Date("2024-05-01"), new Date("2024-06-01")]}
-      showMonthYearPicker
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/excludeDatesRangeMonthPicker.js b/docs-site/src/examples/js/excludeDatesRangeMonthPicker.js
deleted file mode 100644
index c923944600..0000000000
--- a/docs-site/src/examples/js/excludeDatesRangeMonthPicker.js
+++ /dev/null
@@ -1,30 +0,0 @@
-() => {
-  const defaultStartDate = new Date("2024-08-01");
-  const defaultEndDate = new Date("2024-10-01");
-  const [startDate, setStartDate] = useState(defaultStartDate);
-  const [endDate, setEndDate] = useState(defaultEndDate);
-
-  const handleChange = ([newStartDate, newEndDate]) => {
-    setStartDate(newStartDate);
-    setEndDate(newEndDate);
-  };
-
-  return (
-    <DatePicker
-      selected={startDate}
-      startDate={startDate}
-      endDate={endDate}
-      onChange={handleChange}
-      excludeDates={[
-        new Date("2024-05-01"),
-        new Date("2024-02-01"),
-        new Date("2024-01-01"),
-        new Date("2024-11-01"),
-      ]}
-      dateFormat="MM/yyyy"
-      placeholderText="Select a month other than the disabled months"
-      showMonthYearPicker
-      selectsRange
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/excludeDatesWithMessage.js b/docs-site/src/examples/js/excludeDatesWithMessage.js
deleted file mode 100644
index 5879d0caa8..0000000000
--- a/docs-site/src/examples/js/excludeDatesWithMessage.js
+++ /dev/null
@@ -1,15 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      excludeDates={[
-        { date: new Date(), message: "Today is excluded" },
-        { date: subDays(new Date(), 1), message: "This day is excluded" },
-      ]}
-      placeholderText="Select a date other than today or yesterday"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/excludeTimePeriod.js b/docs-site/src/examples/js/excludeTimePeriod.js
deleted file mode 100644
index 9cce5c97b4..0000000000
--- a/docs-site/src/examples/js/excludeTimePeriod.js
+++ /dev/null
@@ -1,16 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(
-    setHours(setMinutes(new Date(), 30), 17),
-  );
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      showTimeSelect
-      minTime={setHours(setMinutes(new Date(), 0), 17)}
-      maxTime={setHours(setMinutes(new Date(), 30), 20)}
-      dateFormat="MMMM d, yyyy h:mm aa"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/excludeTimes.js b/docs-site/src/examples/js/excludeTimes.js
deleted file mode 100644
index f288f28069..0000000000
--- a/docs-site/src/examples/js/excludeTimes.js
+++ /dev/null
@@ -1,20 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(
-    setHours(setMinutes(new Date(), 30), 16),
-  );
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      showTimeSelect
-      excludeTimes={[
-        setHours(setMinutes(new Date(), 0), 17),
-        setHours(setMinutes(new Date(), 30), 18),
-        setHours(setMinutes(new Date(), 30), 19),
-        setHours(setMinutes(new Date(), 30), 17),
-      ]}
-      dateFormat="MMMM d, yyyy h:mm aa"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/excludeWeeks.js b/docs-site/src/examples/js/excludeWeeks.js
deleted file mode 100644
index f28fef537f..0000000000
--- a/docs-site/src/examples/js/excludeWeeks.js
+++ /dev/null
@@ -1,18 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date("2021/02/22"));
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      dateFormat="I/R"
-      locale="en-GB"
-      excludeDateIntervals={[
-        { start: "2021/02/08", end: "2021/02/14" },
-        { start: "2021/01/18", end: "2021/01/24" },
-      ]}
-      showWeekNumbers
-      showWeekPicker
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/externalForm.js b/docs-site/src/examples/js/externalForm.js
deleted file mode 100644
index 2f981bb92b..0000000000
--- a/docs-site/src/examples/js/externalForm.js
+++ /dev/null
@@ -1,17 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(null);
-
-  return (
-    <>
-      <DatePicker
-        selected={startDate}
-        onChange={(date) => setStartDate(date)}
-        required
-        form="external-form"
-      />
-      <form id="external-form">
-        <button type="submit">Submit</button>
-      </form>
-    </>
-  );
-};
diff --git a/docs-site/src/examples/js/filterDates.js b/docs-site/src/examples/js/filterDates.js
deleted file mode 100644
index 89cbba8316..0000000000
--- a/docs-site/src/examples/js/filterDates.js
+++ /dev/null
@@ -1,17 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(null);
-
-  const isWeekday = (date) => {
-    const day = getDay(date);
-    return day !== 0 && day !== 6;
-  };
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      filterDate={isWeekday}
-      placeholderText="Select a weekday"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/filterTimes.js b/docs-site/src/examples/js/filterTimes.js
deleted file mode 100644
index a90ab49bdd..0000000000
--- a/docs-site/src/examples/js/filterTimes.js
+++ /dev/null
@@ -1,22 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(
-    setHours(setMinutes(new Date(), 0), 9),
-  );
-
-  const filterPassedTime = (time) => {
-    const currentDate = new Date();
-    const selectedDate = new Date(time);
-
-    return currentDate.getTime() < selectedDate.getTime();
-  };
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      showTimeSelect
-      filterTime={filterPassedTime}
-      dateFormat="MMMM d, yyyy h:mm aa"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/fixedCalendar.js b/docs-site/src/examples/js/fixedCalendar.js
deleted file mode 100644
index dfc34516cc..0000000000
--- a/docs-site/src/examples/js/fixedCalendar.js
+++ /dev/null
@@ -1,11 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(null);
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      fixedHeight
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/hideTimeCaption.js b/docs-site/src/examples/js/hideTimeCaption.js
deleted file mode 100644
index 37537f7854..0000000000
--- a/docs-site/src/examples/js/hideTimeCaption.js
+++ /dev/null
@@ -1,15 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      showTimeSelect
-      showTimeSelectOnly
-      timeIntervals={15}
-      dateFormat="h:mm aa"
-      showTimeCaption={false}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/highlightDates.js b/docs-site/src/examples/js/highlightDates.js
deleted file mode 100644
index 9299eaf0c5..0000000000
--- a/docs-site/src/examples/js/highlightDates.js
+++ /dev/null
@@ -1,12 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      highlightDates={[subDays(new Date(), 7), addDays(new Date(), 7)]}
-      placeholderText="This highlights a week ago and a week from today"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/highlightDatesRanges.js b/docs-site/src/examples/js/highlightDatesRanges.js
deleted file mode 100644
index 780aa57fa6..0000000000
--- a/docs-site/src/examples/js/highlightDatesRanges.js
+++ /dev/null
@@ -1,31 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  const highlightWithRanges = [
-    {
-      "react-datepicker__day--highlighted-custom-1": [
-        subDays(new Date(), 4),
-        subDays(new Date(), 3),
-        subDays(new Date(), 2),
-        subDays(new Date(), 1),
-      ],
-    },
-    {
-      "react-datepicker__day--highlighted-custom-2": [
-        addDays(new Date(), 1),
-        addDays(new Date(), 2),
-        addDays(new Date(), 3),
-        addDays(new Date(), 4),
-      ],
-    },
-  ];
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      highlightDates={highlightWithRanges}
-      placeholderText="This highlight two ranges with custom classes"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/holidayDates.js b/docs-site/src/examples/js/holidayDates.js
deleted file mode 100644
index 64a0f18e8d..0000000000
--- a/docs-site/src/examples/js/holidayDates.js
+++ /dev/null
@@ -1,19 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      holidays={[
-        { date: "2023-08-15", holidayName: "India's Independence Day" },
-        { date: "2023-12-31", holidayName: "New Year's Eve" },
-        { date: "2023-12-25", holidayName: "Christmas" },
-        { date: "2024-01-01", holidayName: "New Year's Day" },
-        { date: "2023-11-23", holidayName: "Thanksgiving Day" },
-        { date: "2023-12-25", holidayName: "Fake holiday" },
-      ]}
-      placeholderText="This display holidays"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/includeDateIntervals.js b/docs-site/src/examples/js/includeDateIntervals.js
deleted file mode 100644
index 095ba8ad3e..0000000000
--- a/docs-site/src/examples/js/includeDateIntervals.js
+++ /dev/null
@@ -1,14 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(null);
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      includeDateIntervals={[
-        { start: subDays(new Date(), 5), end: addDays(new Date(), 5) },
-      ]}
-      placeholderText="This only includes dates from 5 days ago to 5 days in the future"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/includeDates.js b/docs-site/src/examples/js/includeDates.js
deleted file mode 100644
index 0a8d009227..0000000000
--- a/docs-site/src/examples/js/includeDates.js
+++ /dev/null
@@ -1,12 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(null);
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      includeDates={[new Date(), addDays(new Date(), 1)]}
-      placeholderText="This only includes today and tomorrow"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/includeDatesMonthPicker.js b/docs-site/src/examples/js/includeDatesMonthPicker.js
deleted file mode 100644
index 6606df85d8..0000000000
--- a/docs-site/src/examples/js/includeDatesMonthPicker.js
+++ /dev/null
@@ -1,15 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(1661990400000);
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      dateFormat="MM/yyyy"
-      includeDates={[
-        1661990400000, 1664582400000, 1667260800000, 1672531200000,
-      ]}
-      showMonthYearPicker
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/includeTimes.js b/docs-site/src/examples/js/includeTimes.js
deleted file mode 100644
index af3c2cae4a..0000000000
--- a/docs-site/src/examples/js/includeTimes.js
+++ /dev/null
@@ -1,20 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(
-    setHours(setMinutes(new Date(), 30), 16),
-  );
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      showTimeSelect
-      includeTimes={[
-        setHours(setMinutes(new Date(), 0), 17),
-        setHours(setMinutes(new Date(), 30), 18),
-        setHours(setMinutes(new Date(), 30), 19),
-        setHours(setMinutes(new Date(), 30), 17),
-      ]}
-      dateFormat="MMMM d, yyyy h:mm aa"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/injectTimes.js b/docs-site/src/examples/js/injectTimes.js
deleted file mode 100644
index ef74376920..0000000000
--- a/docs-site/src/examples/js/injectTimes.js
+++ /dev/null
@@ -1,20 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(
-    setHours(setMinutes(new Date(), 30), 16),
-  );
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      showTimeSelect
-      timeFormat="HH:mm:ss"
-      injectTimes={[
-        setHours(setMinutes(setSeconds(new Date(), 10), 1), 0),
-        setHours(setMinutes(new Date(), 5), 12),
-        setHours(setMinutes(new Date(), 59), 23),
-      ]}
-      dateFormat="MMMM d, yyyy h:mm aa"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/inline.js b/docs-site/src/examples/js/inline.js
deleted file mode 100644
index a568491571..0000000000
--- a/docs-site/src/examples/js/inline.js
+++ /dev/null
@@ -1,11 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      inline
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/inlineVisible.js b/docs-site/src/examples/js/inlineVisible.js
deleted file mode 100644
index cd5e9786ef..0000000000
--- a/docs-site/src/examples/js/inlineVisible.js
+++ /dev/null
@@ -1,25 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleChange = (e) => {
-    setIsOpen(!isOpen);
-    setStartDate(e);
-  };
-
-  const handleClick = (e) => {
-    e.preventDefault();
-    setIsOpen(!isOpen);
-  };
-
-  return (
-    <>
-      <button className="example-custom-input" onClick={handleClick}>
-        {format(startDate, "dd-MM-yyyy")}
-      </button>
-      {isOpen && (
-        <DatePicker selected={startDate} onChange={handleChange} inline />
-      )}
-    </>
-  );
-};
diff --git a/docs-site/src/examples/js/locale.js b/docs-site/src/examples/js/locale.js
deleted file mode 100644
index e12b700df6..0000000000
--- a/docs-site/src/examples/js/locale.js
+++ /dev/null
@@ -1,12 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      locale="en-GB"
-      placeholderText="Weeks start on Monday"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/localeWithTime.js b/docs-site/src/examples/js/localeWithTime.js
deleted file mode 100644
index 6c8b0d928d..0000000000
--- a/docs-site/src/examples/js/localeWithTime.js
+++ /dev/null
@@ -1,15 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      locale="pt-BR"
-      showTimeSelect
-      timeFormat="p"
-      timeIntervals={15}
-      dateFormat="Pp"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/localeWithoutGlobalVariable.js b/docs-site/src/examples/js/localeWithoutGlobalVariable.js
deleted file mode 100644
index 1ea3591443..0000000000
--- a/docs-site/src/examples/js/localeWithoutGlobalVariable.js
+++ /dev/null
@@ -1,11 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      locale={fi}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/maxDate.js b/docs-site/src/examples/js/maxDate.js
deleted file mode 100644
index f9b9a0ae99..0000000000
--- a/docs-site/src/examples/js/maxDate.js
+++ /dev/null
@@ -1,12 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      maxDate={addDays(new Date(), 5)}
-      placeholderText="Select a date before 5 days in the future"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/minDate.js b/docs-site/src/examples/js/minDate.js
deleted file mode 100644
index b1be62f3f9..0000000000
--- a/docs-site/src/examples/js/minDate.js
+++ /dev/null
@@ -1,12 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(null);
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      minDate={subDays(new Date(), 5)}
-      placeholderText="Select a date after 5 days ago"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/monthDropdown.js b/docs-site/src/examples/js/monthDropdown.js
deleted file mode 100644
index 12eaab2444..0000000000
--- a/docs-site/src/examples/js/monthDropdown.js
+++ /dev/null
@@ -1,11 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      showMonthDropdown
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/monthDropdownShort.js b/docs-site/src/examples/js/monthDropdownShort.js
deleted file mode 100644
index e073b74e81..0000000000
--- a/docs-site/src/examples/js/monthDropdownShort.js
+++ /dev/null
@@ -1,12 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      showMonthDropdown
-      useShortMonthInDropdown
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/monthPicker.js b/docs-site/src/examples/js/monthPicker.js
deleted file mode 100644
index e72910dec7..0000000000
--- a/docs-site/src/examples/js/monthPicker.js
+++ /dev/null
@@ -1,12 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      dateFormat="MM/yyyy"
-      showMonthYearPicker
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/monthPickerFourColumns.js b/docs-site/src/examples/js/monthPickerFourColumns.js
deleted file mode 100644
index 9ad3c67749..0000000000
--- a/docs-site/src/examples/js/monthPickerFourColumns.js
+++ /dev/null
@@ -1,14 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      dateFormat="MM/yyyy"
-      showMonthYearPicker
-      showFullMonthYearPicker
-      showFourColumnMonthYearPicker
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/monthPickerFullName.js b/docs-site/src/examples/js/monthPickerFullName.js
deleted file mode 100644
index 244701efba..0000000000
--- a/docs-site/src/examples/js/monthPickerFullName.js
+++ /dev/null
@@ -1,13 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      dateFormat="MM/yyyy"
-      showMonthYearPicker
-      showFullMonthYearPicker
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/monthPickerTwoColumns.js b/docs-site/src/examples/js/monthPickerTwoColumns.js
deleted file mode 100644
index 0aeee4cf0f..0000000000
--- a/docs-site/src/examples/js/monthPickerTwoColumns.js
+++ /dev/null
@@ -1,14 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      dateFormat="MM/yyyy"
-      showMonthYearPicker
-      showFullMonthYearPicker
-      showTwoColumnMonthYearPicker
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/monthYearDropdown.js b/docs-site/src/examples/js/monthYearDropdown.js
deleted file mode 100644
index 87ea8d62b6..0000000000
--- a/docs-site/src/examples/js/monthYearDropdown.js
+++ /dev/null
@@ -1,14 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      dateFormatCalendar={"MMM yyyy"}
-      minDate={subMonths(new Date(), 6)}
-      maxDate={addMonths(new Date(), 6)}
-      showMonthYearDropdown
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/multiMonth.js b/docs-site/src/examples/js/multiMonth.js
deleted file mode 100644
index ee339a764e..0000000000
--- a/docs-site/src/examples/js/multiMonth.js
+++ /dev/null
@@ -1,11 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      monthsShown={2}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/multiMonthDropdown.js b/docs-site/src/examples/js/multiMonthDropdown.js
deleted file mode 100644
index 7bfdef31ab..0000000000
--- a/docs-site/src/examples/js/multiMonthDropdown.js
+++ /dev/null
@@ -1,12 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      monthsShown={2}
-      showYearDropdown
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/multiMonthInline.js b/docs-site/src/examples/js/multiMonthInline.js
deleted file mode 100644
index eece68b1ad..0000000000
--- a/docs-site/src/examples/js/multiMonthInline.js
+++ /dev/null
@@ -1,12 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      monthsShown={2}
-      inline
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/multiMonthPrevious.js b/docs-site/src/examples/js/multiMonthPrevious.js
deleted file mode 100644
index b6b01e5fa4..0000000000
--- a/docs-site/src/examples/js/multiMonthPrevious.js
+++ /dev/null
@@ -1,12 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      showPreviousMonths
-      onChange={(date) => setStartDate(date)}
-      monthsShown={2}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/noAnchorArrow.js b/docs-site/src/examples/js/noAnchorArrow.js
deleted file mode 100644
index 6a8fa78baf..0000000000
--- a/docs-site/src/examples/js/noAnchorArrow.js
+++ /dev/null
@@ -1,11 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      showPopperArrow={false}
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/onBlurCallbacks.js b/docs-site/src/examples/js/onBlurCallbacks.js
deleted file mode 100644
index 3a6c5d445b..0000000000
--- a/docs-site/src/examples/js/onBlurCallbacks.js
+++ /dev/null
@@ -1,22 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(null);
-
-  const handleOnBlur = ({ target: { value } }) => {
-    const date = new Date(value);
-    if (isValid(date)) {
-      console.log("date: %s", format(date, "dd/MM/yyyy"));
-    } else {
-      console.log("value: %s", date);
-    }
-  };
-
-  return (
-    <DatePicker
-      key="example9"
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      onBlur={handleOnBlur}
-      placeholderText="View blur callbacks in console"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/onCalendarOpenStateCallbacks.js b/docs-site/src/examples/js/onCalendarOpenStateCallbacks.js
deleted file mode 100644
index 6b108db8bd..0000000000
--- a/docs-site/src/examples/js/onCalendarOpenStateCallbacks.js
+++ /dev/null
@@ -1,15 +0,0 @@
-() => {
-  const [date, setDate] = useState(new Date());
-
-  const handleCalendarClose = () => console.log("Calendar closed");
-  const handleCalendarOpen = () => console.log("Calendar opened");
-
-  return (
-    <DatePicker
-      selected={date}
-      onChange={(date) => setDate(date)}
-      onCalendarClose={handleCalendarClose}
-      onCalendarOpen={handleCalendarOpen}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/openToDate.js b/docs-site/src/examples/js/openToDate.js
deleted file mode 100644
index ae843c1cf3..0000000000
--- a/docs-site/src/examples/js/openToDate.js
+++ /dev/null
@@ -1,11 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(null);
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      openToDate={new Date("1993/09/28")}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/placeholderText.js b/docs-site/src/examples/js/placeholderText.js
deleted file mode 100644
index d427ff41dc..0000000000
--- a/docs-site/src/examples/js/placeholderText.js
+++ /dev/null
@@ -1 +0,0 @@
-<DatePicker placeholderText="Click to select a date" />;
diff --git a/docs-site/src/examples/js/portal.js b/docs-site/src/examples/js/portal.js
deleted file mode 100644
index 7488d78bf3..0000000000
--- a/docs-site/src/examples/js/portal.js
+++ /dev/null
@@ -1,11 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      withPortal
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/portalById.js b/docs-site/src/examples/js/portalById.js
deleted file mode 100644
index 3bcf13cf7e..0000000000
--- a/docs-site/src/examples/js/portalById.js
+++ /dev/null
@@ -1,11 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      portalId="root-portal"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/quarterPicker.js b/docs-site/src/examples/js/quarterPicker.js
deleted file mode 100644
index 15b597855c..0000000000
--- a/docs-site/src/examples/js/quarterPicker.js
+++ /dev/null
@@ -1,12 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      dateFormat="yyyy, QQQ"
-      showQuarterYearPicker
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/rangeMonthPicker.js b/docs-site/src/examples/js/rangeMonthPicker.js
deleted file mode 100644
index 7138ca40e1..0000000000
--- a/docs-site/src/examples/js/rangeMonthPicker.js
+++ /dev/null
@@ -1,27 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date("2014/02/08"));
-  const [endDate, setEndDate] = useState(new Date("2014/04/08"));
-
-  return (
-    <>
-      <DatePicker
-        selected={startDate}
-        onChange={(date) => setStartDate(date)}
-        selectsStart
-        startDate={startDate}
-        endDate={endDate}
-        dateFormat="MM/yyyy"
-        showMonthYearPicker
-      />
-      <DatePicker
-        selected={endDate}
-        onChange={(date) => setEndDate(date)}
-        selectsEnd
-        startDate={startDate}
-        endDate={endDate}
-        dateFormat="MM/yyyy"
-        showMonthYearPicker
-      />
-    </>
-  );
-};
diff --git a/docs-site/src/examples/js/rangeMonthPickerSelectsRange.js b/docs-site/src/examples/js/rangeMonthPickerSelectsRange.js
deleted file mode 100644
index 0074116d4b..0000000000
--- a/docs-site/src/examples/js/rangeMonthPickerSelectsRange.js
+++ /dev/null
@@ -1,21 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date("2014/02/08"));
-  const [endDate, setEndDate] = useState(null);
-
-  const handleChange = ([newStartDate, newEndDate]) => {
-    setStartDate(newStartDate);
-    setEndDate(newEndDate);
-  };
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={handleChange}
-      selectsRange
-      startDate={startDate}
-      endDate={endDate}
-      dateFormat="MM/yyyy"
-      showMonthYearPicker
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/rangeQuarterPicker.js b/docs-site/src/examples/js/rangeQuarterPicker.js
deleted file mode 100644
index 8f55f2c5d5..0000000000
--- a/docs-site/src/examples/js/rangeQuarterPicker.js
+++ /dev/null
@@ -1,27 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date("2014/02/08"));
-  const [endDate, setEndDate] = useState(new Date("2014/07/08"));
-
-  return (
-    <>
-      <DatePicker
-        selected={startDate}
-        onChange={(date) => setStartDate(date)}
-        selectsStart
-        startDate={startDate}
-        endDate={endDate}
-        dateFormat="yyyy, QQQ"
-        showQuarterYearPicker
-      />
-      <DatePicker
-        selected={endDate}
-        onChange={(date) => setEndDate(date)}
-        selectsEnd
-        startDate={startDate}
-        endDate={endDate}
-        dateFormat="yyyy, QQQ"
-        showQuarterYearPicker
-      />
-    </>
-  );
-};
diff --git a/docs-site/src/examples/js/rangeQuarterPickerSelectsRange.js b/docs-site/src/examples/js/rangeQuarterPickerSelectsRange.js
deleted file mode 100644
index 981f0eb490..0000000000
--- a/docs-site/src/examples/js/rangeQuarterPickerSelectsRange.js
+++ /dev/null
@@ -1,21 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date("2014/02/08"));
-  const [endDate, setEndDate] = useState(null);
-
-  const handleChange = ([newStartDate, newEndDate]) => {
-    setStartDate(newStartDate);
-    setEndDate(newEndDate);
-  };
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={handleChange}
-      selectsRange
-      startDate={startDate}
-      endDate={endDate}
-      dateFormat="yyyy, QQQ"
-      showQuarterYearPicker
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/rangeSwapRange.js b/docs-site/src/examples/js/rangeSwapRange.js
deleted file mode 100644
index 8fe5e3f8d7..0000000000
--- a/docs-site/src/examples/js/rangeSwapRange.js
+++ /dev/null
@@ -1,24 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-  const [endDate, setEndDate] = useState(null);
-
-  const onChange = (dates) => {
-    const [start, end] = dates;
-    setStartDate(start);
-    setEndDate(end);
-  };
-
-  return (
-    <DatePicker
-      swapRange
-      selected={startDate}
-      onChange={onChange}
-      startDate={startDate}
-      endDate={endDate}
-      excludeDates={[addDays(new Date(), 1), addDays(new Date(), 5)]}
-      selectsRange
-      selectsDisabledDaysInRange
-      inline
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/rangeYearPicker.js b/docs-site/src/examples/js/rangeYearPicker.js
deleted file mode 100644
index 7eff1e879d..0000000000
--- a/docs-site/src/examples/js/rangeYearPicker.js
+++ /dev/null
@@ -1,27 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date("2014/02/08"));
-  const [endDate, setEndDate] = useState(new Date("2024/04/08"));
-
-  return (
-    <>
-      <DatePicker
-        selected={startDate}
-        onChange={(date) => setStartDate(date)}
-        selectsStart
-        startDate={startDate}
-        endDate={endDate}
-        dateFormat="yyyy"
-        showYearPicker
-      />
-      <DatePicker
-        selected={endDate}
-        onChange={(date) => setEndDate(date)}
-        selectsEnd
-        startDate={startDate}
-        endDate={endDate}
-        dateFormat="yyyy"
-        showYearPicker
-      />
-    </>
-  );
-};
diff --git a/docs-site/src/examples/js/rangeYearPickerSelectsRange.js b/docs-site/src/examples/js/rangeYearPickerSelectsRange.js
deleted file mode 100644
index 2a56c3ab18..0000000000
--- a/docs-site/src/examples/js/rangeYearPickerSelectsRange.js
+++ /dev/null
@@ -1,21 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date("2014/02/08"));
-  const [endDate, setEndDate] = useState(null);
-
-  const handleChange = ([newStartDate, newEndDate]) => {
-    setStartDate(newStartDate);
-    setEndDate(newEndDate);
-  };
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={handleChange}
-      selectsRange
-      startDate={startDate}
-      endDate={endDate}
-      dateFormat="yyyy"
-      showYearPicker
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/rawChange.js b/docs-site/src/examples/js/rawChange.js
deleted file mode 100644
index f72ae853c3..0000000000
--- a/docs-site/src/examples/js/rawChange.js
+++ /dev/null
@@ -1,18 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(null);
-
-  const handleChangeRaw = (value) => {
-    if (value === "tomorrow") {
-      setStartDate(addDays(new Date(), 1));
-    }
-  };
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      placeholderText='Enter "tomorrow"'
-      onChangeRaw={(event) => handleChangeRaw(event.target.value)}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/readOnly.js b/docs-site/src/examples/js/readOnly.js
deleted file mode 100644
index 44bb59dc66..0000000000
--- a/docs-site/src/examples/js/readOnly.js
+++ /dev/null
@@ -1,12 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(null);
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      placeholderText="This is readOnly"
-      readOnly
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/renderCustomDay.js b/docs-site/src/examples/js/renderCustomDay.js
deleted file mode 100644
index bf0e69f0dd..0000000000
--- a/docs-site/src/examples/js/renderCustomDay.js
+++ /dev/null
@@ -1,16 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  const renderDayContents = (day, date) => {
-    const tooltipText = `Tooltip for date: ${date}`;
-    return <span title={tooltipText}>{getDate(date)}</span>;
-  };
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      renderDayContents={renderDayContents}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/renderCustomHeader.js b/docs-site/src/examples/js/renderCustomHeader.js
deleted file mode 100644
index 9aa0a239fc..0000000000
--- a/docs-site/src/examples/js/renderCustomHeader.js
+++ /dev/null
@@ -1,75 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  const years = range(1990, getYear(new Date()) + 1, 1);
-
-  const MONTHS = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
-
-  return (
-    <DatePicker
-      renderCustomHeader={({
-        date,
-        changeYear,
-        changeMonth,
-        decreaseMonth,
-        increaseMonth,
-        prevMonthButtonDisabled,
-        nextMonthButtonDisabled,
-      }) => (
-        <div
-          style={{
-            margin: 10,
-            display: "flex",
-            justifyContent: "center",
-          }}
-        >
-          <button onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
-            {"<"}
-          </button>
-          <select
-            value={getYear(date)}
-            onChange={({ target: { value } }) => changeYear(value)}
-          >
-            {years.map((option) => (
-              <option key={option} value={option}>
-                {option}
-              </option>
-            ))}
-          </select>
-
-          <select
-            value={MONTHS[getMonth(date)]}
-            onChange={({ target: { value } }) =>
-              changeMonth(MONTHS.indexOf(value))
-            }
-          >
-            {MONTHS.map((option) => (
-              <option key={option} value={option}>
-                {option}
-              </option>
-            ))}
-          </select>
-
-          <button onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
-            {">"}
-          </button>
-        </div>
-      )}
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/renderCustomHeaderTwoMonths.js b/docs-site/src/examples/js/renderCustomHeaderTwoMonths.js
deleted file mode 100644
index f5a06e6596..0000000000
--- a/docs-site/src/examples/js/renderCustomHeaderTwoMonths.js
+++ /dev/null
@@ -1,58 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      renderCustomHeader={({
-        monthDate,
-        customHeaderCount,
-        decreaseMonth,
-        increaseMonth,
-      }) => (
-        <div>
-          <button
-            aria-label="Previous Month"
-            className={
-              "react-datepicker__navigation react-datepicker__navigation--previous"
-            }
-            style={customHeaderCount === 1 ? { visibility: "hidden" } : null}
-            onClick={decreaseMonth}
-          >
-            <span
-              className={
-                "react-datepicker__navigation-icon react-datepicker__navigation-icon--previous"
-              }
-            >
-              {"<"}
-            </span>
-          </button>
-          <span className="react-datepicker__current-month">
-            {monthDate.toLocaleString("en-US", {
-              month: "long",
-              year: "numeric",
-            })}
-          </span>
-          <button
-            aria-label="Next Month"
-            className={
-              "react-datepicker__navigation react-datepicker__navigation--next"
-            }
-            style={customHeaderCount === 0 ? { visibility: "hidden" } : null}
-            onClick={increaseMonth}
-          >
-            <span
-              className={
-                "react-datepicker__navigation-icon react-datepicker__navigation-icon--next"
-              }
-            >
-              {">"}
-            </span>
-          </button>
-        </div>
-      )}
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      monthsShown={2}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/renderCustomMonth.js b/docs-site/src/examples/js/renderCustomMonth.js
deleted file mode 100644
index 1406314e9c..0000000000
--- a/docs-site/src/examples/js/renderCustomMonth.js
+++ /dev/null
@@ -1,17 +0,0 @@
-() => {
-  const renderMonthContent = (month, shortMonth, longMonth, day) => {
-    const fullYear = new Date(day).getFullYear();
-    const tooltipText = `Tooltip for month: ${longMonth} ${fullYear}`;
-
-    return <span title={tooltipText}>{shortMonth}</span>;
-  };
-
-  return (
-    <DatePicker
-      selected={new Date()}
-      renderMonthContent={renderMonthContent}
-      showMonthYearPicker
-      dateFormat="MM/yyyy"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/renderCustomQuarter.js b/docs-site/src/examples/js/renderCustomQuarter.js
deleted file mode 100644
index ed16201e56..0000000000
--- a/docs-site/src/examples/js/renderCustomQuarter.js
+++ /dev/null
@@ -1,15 +0,0 @@
-() => {
-  const renderQuarterContent = (quarter, shortQuarter) => {
-    const tooltipText = `Tooltip for quarter: ${quarter}`;
-    return <span title={tooltipText}>{shortQuarter}</span>;
-  };
-
-  return (
-    <DatePicker
-      selected={new Date()}
-      renderQuarterContent={renderQuarterContent}
-      showQuarterYearPicker
-      dateFormat="yyyy, QQQ"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/renderCustomYear.js b/docs-site/src/examples/js/renderCustomYear.js
deleted file mode 100644
index 694f46f918..0000000000
--- a/docs-site/src/examples/js/renderCustomYear.js
+++ /dev/null
@@ -1,15 +0,0 @@
-() => {
-  const renderYearContent = (year) => {
-    const tooltipText = `Tooltip for year: ${year}`;
-    return <span title={tooltipText}>{year}</span>;
-  };
-
-  return (
-    <DatePicker
-      selected={new Date()}
-      renderYearContent={renderYearContent}
-      showYearPicker
-      dateFormat="yyyy"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/selectsMultiple.js b/docs-site/src/examples/js/selectsMultiple.js
deleted file mode 100644
index e9d9873814..0000000000
--- a/docs-site/src/examples/js/selectsMultiple.js
+++ /dev/null
@@ -1,17 +0,0 @@
-() => {
-  const [selectedDates, setSelectedDates] = useState([new Date()]);
-
-  const onChange = (dates) => {
-    setSelectedDates(dates);
-  };
-
-  return (
-    <DatePicker
-      selectedDates={selectedDates}
-      selectsMultiple
-      onChange={onChange}
-      shouldCloseOnSelect={false}
-      disabledKeyboardNavigation
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/selectsMultipleMonths.js b/docs-site/src/examples/js/selectsMultipleMonths.js
deleted file mode 100644
index 796362d69d..0000000000
--- a/docs-site/src/examples/js/selectsMultipleMonths.js
+++ /dev/null
@@ -1,19 +0,0 @@
-() => {
-  const [selectedDates, setSelectedDates] = useState([new Date()]);
-
-  const onChange = (dates) => {
-    setSelectedDates(dates);
-  };
-
-  return (
-    <DatePicker
-      selectedDates={selectedDates}
-      selectsMultiple
-      showMonthYearPicker
-      show
-      onChange={onChange}
-      shouldCloseOnSelect={false}
-      disabledKeyboardNavigation
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/selectsRange.js b/docs-site/src/examples/js/selectsRange.js
deleted file mode 100644
index c8b0083a08..0000000000
--- a/docs-site/src/examples/js/selectsRange.js
+++ /dev/null
@@ -1,21 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-  const [endDate, setEndDate] = useState(null);
-
-  const onChange = (dates) => {
-    const [start, end] = dates;
-    setStartDate(start);
-    setEndDate(end);
-  };
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={onChange}
-      startDate={startDate}
-      endDate={endDate}
-      selectsRange
-      inline
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/selectsRangeWithDisabledDates.js b/docs-site/src/examples/js/selectsRangeWithDisabledDates.js
deleted file mode 100644
index a87c86ac02..0000000000
--- a/docs-site/src/examples/js/selectsRangeWithDisabledDates.js
+++ /dev/null
@@ -1,23 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-  const [endDate, setEndDate] = useState(null);
-
-  const onChange = (dates) => {
-    const [start, end] = dates;
-    setStartDate(start);
-    setEndDate(end);
-  };
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={onChange}
-      startDate={startDate}
-      endDate={endDate}
-      excludeDates={[addDays(new Date(), 1), addDays(new Date(), 5)]}
-      selectsRange
-      selectsDisabledDaysInRange
-      inline
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/showTime.js b/docs-site/src/examples/js/showTime.js
deleted file mode 100644
index 5ba20dc646..0000000000
--- a/docs-site/src/examples/js/showTime.js
+++ /dev/null
@@ -1,15 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      showTimeSelect
-      timeFormat="HH:mm"
-      timeIntervals={15}
-      timeCaption="time"
-      dateFormat="MMMM d, yyyy h:mm aa"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/showTimeOnly.js b/docs-site/src/examples/js/showTimeOnly.js
deleted file mode 100644
index 3932e90dd3..0000000000
--- a/docs-site/src/examples/js/showTimeOnly.js
+++ /dev/null
@@ -1,15 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      showTimeSelect
-      showTimeSelectOnly
-      timeIntervals={15}
-      timeCaption="Time"
-      dateFormat="h:mm aa"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/specificDateRange.js b/docs-site/src/examples/js/specificDateRange.js
deleted file mode 100644
index 88a15f6369..0000000000
--- a/docs-site/src/examples/js/specificDateRange.js
+++ /dev/null
@@ -1,13 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(null);
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      minDate={new Date()}
-      maxDate={addDays(new Date(), 5)}
-      placeholderText="Select a date between today and 5 days in the future"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/strictParsing.js b/docs-site/src/examples/js/strictParsing.js
deleted file mode 100644
index 4866bab787..0000000000
--- a/docs-site/src/examples/js/strictParsing.js
+++ /dev/null
@@ -1,11 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      strictParsing
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/tabIndex.js b/docs-site/src/examples/js/tabIndex.js
deleted file mode 100644
index 670fd74467..0000000000
--- a/docs-site/src/examples/js/tabIndex.js
+++ /dev/null
@@ -1,11 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      tabIndex={1}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/timeInput.js b/docs-site/src/examples/js/timeInput.js
deleted file mode 100644
index d43a0ccad0..0000000000
--- a/docs-site/src/examples/js/timeInput.js
+++ /dev/null
@@ -1,13 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      timeInputLabel="Time:"
-      dateFormat="MM/dd/yyyy h:mm aa"
-      showTimeInput
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/today.js b/docs-site/src/examples/js/today.js
deleted file mode 100644
index 33867f6d2c..0000000000
--- a/docs-site/src/examples/js/today.js
+++ /dev/null
@@ -1,11 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      todayButton="Vandaag"
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/toggleCalendarOnIconClick.js b/docs-site/src/examples/js/toggleCalendarOnIconClick.js
deleted file mode 100644
index b422aef3a6..0000000000
--- a/docs-site/src/examples/js/toggleCalendarOnIconClick.js
+++ /dev/null
@@ -1,12 +0,0 @@
-() => {
-  const [selectedDate, setSelectedDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      showIcon
-      toggleCalendarOnIconClick
-      selected={selectedDate}
-      onChange={(date) => setSelectedDate(date)}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/weekNumbers.js b/docs-site/src/examples/js/weekNumbers.js
deleted file mode 100644
index a8038ad9a0..0000000000
--- a/docs-site/src/examples/js/weekNumbers.js
+++ /dev/null
@@ -1,12 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      locale="en-GB"
-      showWeekNumbers
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/weekPicker.js b/docs-site/src/examples/js/weekPicker.js
deleted file mode 100644
index 18ca5b69f6..0000000000
--- a/docs-site/src/examples/js/weekPicker.js
+++ /dev/null
@@ -1,14 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date("2021/02/22"));
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      dateFormat="I/R"
-      locale="en-GB"
-      showWeekNumbers
-      showWeekPicker
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/withPortalById.js b/docs-site/src/examples/js/withPortalById.js
deleted file mode 100644
index 21f93951e0..0000000000
--- a/docs-site/src/examples/js/withPortalById.js
+++ /dev/null
@@ -1,12 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      withPortal
-      portalId="root-portal"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/yearDropdown.js b/docs-site/src/examples/js/yearDropdown.js
deleted file mode 100644
index 64eb474da3..0000000000
--- a/docs-site/src/examples/js/yearDropdown.js
+++ /dev/null
@@ -1,14 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      showYearDropdown
-      dateFormatCalendar="MMMM"
-      yearDropdownItemNumber={15}
-      scrollableYearDropdown
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/yearItemNumber.js b/docs-site/src/examples/js/yearItemNumber.js
deleted file mode 100644
index 8cf5c82340..0000000000
--- a/docs-site/src/examples/js/yearItemNumber.js
+++ /dev/null
@@ -1,13 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      showYearPicker
-      dateFormat="yyyy"
-      yearItemNumber={9}
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/yearPicker.js b/docs-site/src/examples/js/yearPicker.js
deleted file mode 100644
index 0c3016f465..0000000000
--- a/docs-site/src/examples/js/yearPicker.js
+++ /dev/null
@@ -1,12 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      showYearPicker
-      dateFormat="yyyy"
-    />
-  );
-};
diff --git a/docs-site/src/examples/js/yearSelectDropdown.js b/docs-site/src/examples/js/yearSelectDropdown.js
deleted file mode 100644
index fa6e9873aa..0000000000
--- a/docs-site/src/examples/js/yearSelectDropdown.js
+++ /dev/null
@@ -1,14 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
-      peekNextMonth
-      showMonthDropdown
-      showYearDropdown
-      dropdownMode="select"
-    />
-  );
-};
diff --git a/docs-site/yarn.lock b/docs-site/yarn.lock
index d94e6e5672..ea74beb5ec 100644
--- a/docs-site/yarn.lock
+++ b/docs-site/yarn.lock
@@ -2281,6 +2281,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-wasm@npm:^0.25.9":
+  version: 0.25.9
+  resolution: "esbuild-wasm@npm:0.25.9"
+  bin:
+    esbuild: bin/esbuild
+  checksum: 10c0/8c4865d061c94303939549ba67930dfdd51ced9a46ef1b09f63b15696de5075690c4680f616a1932cb0296eed615eb1fa0670337104c4c83d95fac1c2217cf00
+  languageName: node
+  linkType: hard
+
 "esbuild@npm:^0.25.0":
   version: 0.25.0
   resolution: "esbuild@npm:0.25.0"
@@ -4435,6 +4444,7 @@ __metadata:
     "@typescript-eslint/parser": "npm:^7.0.0"
     "@vitejs/plugin-react": "npm:^4.4.1"
     date-fns: "npm:^4.1.0"
+    esbuild-wasm: "npm:^0.25.9"
     eslint: "npm:^9.25.0"
     eslint-plugin-react: "npm:^7.37.5"
     eslint-plugin-react-hooks: "npm:^5.2.0"

From e585449496cff72b0868253ed3fc759a57001e54 Mon Sep 17 00:00:00 2001
From: balajis-qb <balaji.s@qburst.com>
Date: Thu, 11 Sep 2025 22:35:28 +0530
Subject: [PATCH 05/18] feat: add copy-to-clipboard functionality to code
 examples

- Integrated `copy-to-clipboard` library to enable copying code snippets.
- Added a copy icon button in the code example component for user interaction.
- Styled action buttons for better user experience in the examples section.
- Introduced a new SVG icon for the copy action.
---
 docs-site/package.json                        |  1 +
 docs-site/src/components/Example/copy.svg     |  3 ++
 docs-site/src/components/Example/index.tsx    | 27 ++++++++++---
 .../src/components/Examples/examples.scss     | 38 ++++++++++++++++---
 docs-site/yarn.lock                           | 17 +++++++++
 5 files changed, 75 insertions(+), 11 deletions(-)
 create mode 100644 docs-site/src/components/Example/copy.svg

diff --git a/docs-site/package.json b/docs-site/package.json
index 45d4fbb161..20ad812e72 100644
--- a/docs-site/package.json
+++ b/docs-site/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "type": "module",
   "dependencies": {
+    "copy-to-clipboard": "^3.3.3",
     "date-fns": "^4.1.0",
     "esbuild-wasm": "^0.25.9",
     "highlight.js": "^11.11.1",
diff --git a/docs-site/src/components/Example/copy.svg b/docs-site/src/components/Example/copy.svg
new file mode 100644
index 0000000000..f07ad9ecd4
--- /dev/null
+++ b/docs-site/src/components/Example/copy.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 111.07 122.88" style="enable-background:new 0 0 111.07 122.88" xml:space="preserve"><style type="text/css"><![CDATA[
+	.st0{fill-rule:evenodd;clip-rule:evenodd;}
+]]></style><g><path class="st0" d="M97.67,20.81L97.67,20.81l0.01,0.02c3.7,0.01,7.04,1.51,9.46,3.93c2.4,2.41,3.9,5.74,3.9,9.42h0.02v0.02v75.28 v0.01h-0.02c-0.01,3.68-1.51,7.03-3.93,9.46c-2.41,2.4-5.74,3.9-9.42,3.9v0.02h-0.02H38.48h-0.01v-0.02 c-3.69-0.01-7.04-1.5-9.46-3.93c-2.4-2.41-3.9-5.74-3.91-9.42H25.1c0-25.96,0-49.34,0-75.3v-0.01h0.02 c0.01-3.69,1.52-7.04,3.94-9.46c2.41-2.4,5.73-3.9,9.42-3.91v-0.02h0.02C58.22,20.81,77.95,20.81,97.67,20.81L97.67,20.81z M0.02,75.38L0,13.39v-0.01h0.02c0.01-3.69,1.52-7.04,3.93-9.46c2.41-2.4,5.74-3.9,9.42-3.91V0h0.02h59.19 c7.69,0,8.9,9.96,0.01,10.16H13.4h-0.02v-0.02c-0.88,0-1.68,0.37-2.27,0.97c-0.59,0.58-0.96,1.4-0.96,2.27h0.02v0.01v3.17 c0,19.61,0,39.21,0,58.81C10.17,83.63,0.02,84.09,0.02,75.38L0.02,75.38z M100.91,109.49V34.2v-0.02h0.02 c0-0.87-0.37-1.68-0.97-2.27c-0.59-0.58-1.4-0.96-2.28-0.96v0.02h-0.01H38.48h-0.02v-0.02c-0.88,0-1.68,0.38-2.27,0.97 c-0.59,0.58-0.96,1.4-0.96,2.27h0.02v0.01v75.28v0.02h-0.02c0,0.88,0.38,1.68,0.97,2.27c0.59,0.59,1.4,0.96,2.27,0.96v-0.02h0.01 h59.19h0.02v0.02c0.87,0,1.68-0.38,2.27-0.97c0.59-0.58,0.96-1.4,0.96-2.27L100.91,109.49L100.91,109.49L100.91,109.49 L100.91,109.49z"/></g></svg>
\ No newline at end of file
diff --git a/docs-site/src/components/Example/index.tsx b/docs-site/src/components/Example/index.tsx
index fa9f424b82..29fbc77f0e 100644
--- a/docs-site/src/components/Example/index.tsx
+++ b/docs-site/src/components/Example/index.tsx
@@ -9,10 +9,12 @@ import * as DateFNS from "date-fns";
 import { fi } from "date-fns/locale/fi";
 import { ptBR } from "date-fns/locale/pt-BR";
 import { enGB } from "date-fns/locale/en-GB";
+import copy from "copy-to-clipboard";
 import { debounce } from "lodash";
 import slugify from "slugify";
 import range from "lodash/range";
 import { themes } from "prism-react-renderer";
+import copyIcon from "./copy.svg";
 import editIcon from "./edit-regular.svg";
 import { IExampleConfig } from "../../types";
 
@@ -161,12 +163,25 @@ export default class CodeExampleComponent extends React.Component<
               language={isTS ? "tsx" : "jsx"}
             >
               <pre className="example__code">
-                <img
-                  src={editIcon}
-                  className="example__code__edit_icon"
-                  alt="edit icon"
-                  title="Edit the code directly on the left side and and see the output on the right"
-                />
+                <div className="example__actions">
+                  <button
+                    className="example__actions__button"
+                    onClick={() => copy(code)}
+                  >
+                    <img
+                      src={copyIcon}
+                      className="example__actions__copy_icon"
+                      alt="copy icon"
+                      title="Copy snippet"
+                    />
+                  </button>
+                  <img
+                    src={editIcon}
+                    className="example__actions__edit_icon"
+                    alt="edit icon"
+                    title="Edit the code directly on the left side and and see the output on the right"
+                  />
+                </div>
                 <LiveEditor onChange={this.handleCodeChange} />
               </pre>
               <div className="example__preview">
diff --git a/docs-site/src/components/Examples/examples.scss b/docs-site/src/components/Examples/examples.scss
index 3750dd715f..d000adfaef 100644
--- a/docs-site/src/components/Examples/examples.scss
+++ b/docs-site/src/components/Examples/examples.scss
@@ -112,13 +112,41 @@
     textarea:focus {
       outline: 0;
     }
+  }
+
+  &__actions {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    z-index: 10;
 
-    &__edit_icon {
-      position: absolute;
-      top: 0;
-      right: 0;
+    & > * {
       width: 20px;
-      z-index: 10;
+      margin-right: 10px;
+      vertical-align: middle;
+    }
+
+    &__button {
+      width: 38px;
+      border-radius: 50%;
+      height: 38px;
+      border: none;
+      background-color: transparent;
+      cursor: pointer;
+
+      transition: background 0.2s ease;
+
+      &:hover {
+        background: rgba(172, 172, 172, 0.2);
+      }
+
+      &:focus {
+        background: rgba(172, 172, 172, 0.4);
+      }
+
+      & > img {
+        width: 18px;
+      }
     }
   }
 
diff --git a/docs-site/yarn.lock b/docs-site/yarn.lock
index ea74beb5ec..6c6da0a8f8 100644
--- a/docs-site/yarn.lock
+++ b/docs-site/yarn.lock
@@ -1840,6 +1840,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"copy-to-clipboard@npm:^3.3.3":
+  version: 3.3.3
+  resolution: "copy-to-clipboard@npm:3.3.3"
+  dependencies:
+    toggle-selection: "npm:^1.0.6"
+  checksum: 10c0/3ebf5e8ee00601f8c440b83ec08d838e8eabb068c1fae94a9cda6b42f288f7e1b552f3463635f419af44bf7675afc8d0390d30876cf5c2d5d35f86d9c56a3e5f
+  languageName: node
+  linkType: hard
+
 "cross-spawn@npm:^7.0.0":
   version: 7.0.5
   resolution: "cross-spawn@npm:7.0.5"
@@ -4443,6 +4452,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": "npm:^7.0.0"
     "@typescript-eslint/parser": "npm:^7.0.0"
     "@vitejs/plugin-react": "npm:^4.4.1"
+    copy-to-clipboard: "npm:^3.3.3"
     date-fns: "npm:^4.1.0"
     esbuild-wasm: "npm:^0.25.9"
     eslint: "npm:^9.25.0"
@@ -5246,6 +5256,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"toggle-selection@npm:^1.0.6":
+  version: 1.0.6
+  resolution: "toggle-selection@npm:1.0.6"
+  checksum: 10c0/f2cf1f2c70f374fd87b0cdc8007453ba9e981c4305a8bf4eac10a30e62ecdfd28bca7d18f8f15b15a506bf8a7bfb20dbe3539f0fcf2a2c8396c1a78d53e1f179
+  languageName: node
+  linkType: hard
+
 "ts-api-utils@npm:^1.3.0":
   version: 1.4.3
   resolution: "ts-api-utils@npm:1.4.3"

From fc984d12b043c32c051022d06c59bf5a0dc868f1 Mon Sep 17 00:00:00 2001
From: balajis-qb <balaji.s@qburst.com>
Date: Fri, 12 Sep 2025 12:38:03 +0530
Subject: [PATCH 06/18] feat: add Toast component for code copy and
 transpile-error notifications

- Introduced a new Toast component to display success and error messages.
- Integrated Toast notifications in the CodeExampleComponent for user feedback on actions like code copying and transpilation errors.
- Added corresponding styles for the Toast component in a new SCSS file.
---
 docs-site/src/components/App/Toast.tsx     | 61 ++++++++++++++++++++++
 docs-site/src/components/App/index.jsx     |  3 ++
 docs-site/src/components/App/toast.scss    | 27 ++++++++++
 docs-site/src/components/Example/index.tsx | 14 ++++-
 4 files changed, 104 insertions(+), 1 deletion(-)
 create mode 100644 docs-site/src/components/App/Toast.tsx
 create mode 100644 docs-site/src/components/App/toast.scss

diff --git a/docs-site/src/components/App/Toast.tsx b/docs-site/src/components/App/Toast.tsx
new file mode 100644
index 0000000000..bfffb96dc9
--- /dev/null
+++ b/docs-site/src/components/App/Toast.tsx
@@ -0,0 +1,61 @@
+import React, { useState, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+
+import "./toast.scss";
+
+type ToastType = "success" | "error";
+
+let showToastFn: ((message: string, type: ToastType) => void) | null;
+
+export const toast = {
+  show: (message: string, type: ToastType) => {
+    if (showToastFn) {
+      showToastFn(message, type);
+    }
+  },
+};
+
+const Toast = (): React.ReactPortal | null => {
+  const [toastMeta, setToastMeta] = useState<{
+    message: string;
+    type?: ToastType;
+  }>({
+    message: "",
+  });
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearTimer = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+  };
+
+  const scheduleToastReset = () => {
+    clearTimer();
+    timerRef.current = setTimeout(() => {
+      setToastMeta({ message: "" });
+    }, 3000);
+  };
+
+  useEffect(() => {
+    showToastFn = (message: string, type: ToastType) => {
+      setToastMeta({ message, type });
+      scheduleToastReset();
+    };
+
+    return () => {
+      clearTimer();
+      showToastFn = null;
+    };
+  }, []);
+
+  const { message, type } = toastMeta;
+  if (!message?.trim()) return null;
+
+  return createPortal(
+    <div className={`toast toast--${type}`}>{message}</div>,
+    document.body,
+  );
+};
+
+export default Toast;
diff --git a/docs-site/src/components/App/index.jsx b/docs-site/src/components/App/index.jsx
index 7dc163d1b7..6b0286e8d3 100644
--- a/docs-site/src/components/App/index.jsx
+++ b/docs-site/src/components/App/index.jsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import DatePicker from "react-datepicker";
 import ExampleComponents from "../Examples";
+import Toast from "./Toast";
 import { initializeTsxTransformer } from "../tsxTransformer";
 import logo from "./logo.png";
 import ribbon from "./ribbon.png";
@@ -110,6 +111,8 @@ const Root = () => (
     <a href="https://github.com/Hacker0x01/react-datepicker/">
       <img className="github-ribbon" src={ribbon} alt="Fork me on GitHub" />
     </a>
+
+    <Toast />
   </div>
 );
 
diff --git a/docs-site/src/components/App/toast.scss b/docs-site/src/components/App/toast.scss
new file mode 100644
index 0000000000..138fbe3185
--- /dev/null
+++ b/docs-site/src/components/App/toast.scss
@@ -0,0 +1,27 @@
+$toast-success-color: #009688;
+$toast-error-color: #ef5350;
+
+.toast {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+
+  display: inline-block;
+  color: #fff;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
+  border-radius: 5px;
+  padding: 10px 20px;
+  font-size: 14px;
+  font-weight: 600;
+  text-align: center;
+  z-index: 1000;
+
+  &--success {
+    background-color: $toast-success-color;
+  }
+
+  &--error {
+    background-color: $toast-error-color;
+  }
+}
diff --git a/docs-site/src/components/Example/index.tsx b/docs-site/src/components/Example/index.tsx
index 29fbc77f0e..5def70a8da 100644
--- a/docs-site/src/components/Example/index.tsx
+++ b/docs-site/src/components/Example/index.tsx
@@ -4,6 +4,7 @@ import DatePicker, {
   registerLocale,
   CalendarContainer,
 } from "react-datepicker";
+import { toast } from "../App/Toast";
 import { transformTsx } from "../tsxTransformer";
 import * as DateFNS from "date-fns";
 import { fi } from "date-fns/locale/fi";
@@ -82,6 +83,8 @@ export default class CodeExampleComponent extends React.Component<
         jsxCode: "// Transpilation failed! Error: " + (err as Error).message,
         isTranspiling: false,
       };
+
+      toast.show("Transpilation failed!", "error");
     }
 
     this.setState((state) => ({
@@ -112,6 +115,15 @@ export default class CodeExampleComponent extends React.Component<
     }
   };
 
+  handleCopy = (code: string) => {
+    if (code.trim().length) {
+      copy(code);
+      toast.show("Copied to clipboard", "success");
+    } else {
+      toast.show("No code to copy", "error");
+    }
+  };
+
   render() {
     const { title, description } = this.props.example;
     const { activeTab, isTranspiling, jsxCode, tsxCode } = this.state;
@@ -166,7 +178,7 @@ export default class CodeExampleComponent extends React.Component<
                 <div className="example__actions">
                   <button
                     className="example__actions__button"
-                    onClick={() => copy(code)}
+                    onClick={() => this.handleCopy(code)}
                   >
                     <img
                       src={copyIcon}

From ca8c4f6ce97767f4c22d19adb8d91c4ee1079d62 Mon Sep 17 00:00:00 2001
From: balajis-qb <balaji.s@qburst.com>
Date: Fri, 12 Sep 2025 12:43:41 +0530
Subject: [PATCH 07/18] refactor: simplify ExampleCustomInputProps by removing
 unused props

- Removed unnecessary props from ExampleCustomInputProps to streamline the component's interface.
- Improved code clarity and maintainability by focusing on essential properties.
---
 docs-site/src/examples/ts/customInput.tsx | 20 --------------------
 1 file changed, 20 deletions(-)

diff --git a/docs-site/src/examples/ts/customInput.tsx b/docs-site/src/examples/ts/customInput.tsx
index 08a4ca5894..95c23fd571 100644
--- a/docs-site/src/examples/ts/customInput.tsx
+++ b/docs-site/src/examples/ts/customInput.tsx
@@ -2,26 +2,6 @@ type ExampleCustomInputProps = {
   className?: string;
   value?: string;
   onClick?: () => void;
-  onBlur?: (event: React.FocusEvent<HTMLElement>) => void;
-  onChange?: (
-    ...args: Parameters<Required<DatePickerProps>["onChangeRaw"]>
-  ) => void;
-  onFocus?: (event: React.FocusEvent<HTMLElement>) => void;
-  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
-  id?: ComponentProps<typeof DatePicker>["id"];
-  name?: ComponentProps<typeof DatePicker>["name"];
-  form?: ComponentProps<typeof DatePicker>["form"];
-  autoFocus?: ComponentProps<typeof DatePicker>["autoFocus"];
-  placeholder?: ComponentProps<typeof DatePicker>["placeholderText"];
-  disabled?: ComponentProps<typeof DatePicker>["disabled"];
-  autoComplete?: ComponentProps<typeof DatePicker>["autoComplete"];
-  title?: ComponentProps<typeof DatePicker>["title"];
-  readOnly?: ComponentProps<typeof DatePicker>["readOnly"];
-  required?: ComponentProps<typeof DatePicker>["required"];
-  tabIndex?: ComponentProps<typeof DatePicker>["tabIndex"];
-  "aria-describedby"?: ComponentProps<typeof DatePicker>["ariaDescribedBy"];
-  "aria-invalid"?: ComponentProps<typeof DatePicker>["ariaInvalid"];
-  "aria-labelledby"?: ComponentProps<typeof DatePicker>["ariaLabelledBy"];
 };
 
 const CustomInput = () => {

From 54bb930e64fe24c7566b63fbf493bca3a53f201c Mon Sep 17 00:00:00 2001
From: balajis-qb <balaji.s@qburst.com>
Date: Fri, 12 Sep 2025 15:47:15 +0530
Subject: [PATCH 08/18] migrate: Change index.jsx to tsx

---
 .../src/components/App/{index.jsx => index.tsx}    | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)
 rename docs-site/src/components/App/{index.jsx => index.tsx} (89%)

diff --git a/docs-site/src/components/App/index.jsx b/docs-site/src/components/App/index.tsx
similarity index 89%
rename from docs-site/src/components/App/index.jsx
rename to docs-site/src/components/App/index.tsx
index 6b0286e8d3..1abdf97b8a 100644
--- a/docs-site/src/components/App/index.jsx
+++ b/docs-site/src/components/App/index.tsx
@@ -6,13 +6,13 @@ import { initializeTsxTransformer } from "../tsxTransformer";
 import logo from "./logo.png";
 import ribbon from "./ribbon.png";
 
-const Example = () => {
-  const [isOpen, setIsOpen] = useState(true);
-  const [startDate, setStartDate] = useState(new Date());
-  const [isScrolled, setIsScrolled] = useState(true);
+const Example: React.FC = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(true);
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [isScrolled, setIsScrolled] = useState<boolean>(true);
 
   useEffect(() => {
-    const handleScroll = () => setIsScrolled(window.scrollY < 400);
+    const handleScroll = (): void => setIsScrolled(window.scrollY < 400);
     document.addEventListener("scroll", handleScroll);
 
     initializeTsxTransformer();
@@ -26,7 +26,7 @@ const Example = () => {
     <DatePicker
       open={isOpen && isScrolled}
       selected={startDate}
-      onChange={(date) => {
+      onChange={(date: Date | null) => {
         setStartDate(date);
         setIsOpen(false);
       }}
@@ -35,7 +35,7 @@ const Example = () => {
   );
 };
 
-const Root = () => (
+const Root: React.FC = () => (
   <div>
     <div className="hero">
       <div className="hero__content">

From db57608b09975111c50cfa9b46f201f19e83d0c3 Mon Sep 17 00:00:00 2001
From: balajis-qb <balaji.s@qburst.com>
Date: Fri, 12 Sep 2025 15:47:48 +0530
Subject: [PATCH 09/18] feat: add TypeScript declaration for PNG images

- Introduced a new TypeScript declaration file to support importing PNG images in the project.
- This addition enhances type safety and improves the development experience when working with image assets.
---
 docs-site/src/images.d.ts | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 docs-site/src/images.d.ts

diff --git a/docs-site/src/images.d.ts b/docs-site/src/images.d.ts
new file mode 100644
index 0000000000..49977505d3
--- /dev/null
+++ b/docs-site/src/images.d.ts
@@ -0,0 +1 @@
+declare module "*.png";

From bde4eacfa326131e35f20e624573d1cc705ba827 Mon Sep 17 00:00:00 2001
From: balajis-qb <balaji.s@qburst.com>
Date: Fri, 12 Sep 2025 15:48:20 +0530
Subject: [PATCH 10/18] fix: update script source in index.html from index.jsx
 to index.tsx

---
 docs-site/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs-site/index.html b/docs-site/index.html
index e551428cc7..b70a3b16aa 100644
--- a/docs-site/index.html
+++ b/docs-site/index.html
@@ -27,6 +27,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/index.jsx"></script>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

From d06541e696f2d04da86677ce63481c8b809d2848 Mon Sep 17 00:00:00 2001
From: balajis-qb <balaji.s@qburst.com>
Date: Fri, 12 Sep 2025 18:29:16 +0530
Subject: [PATCH 11/18] feat: enhance TypeScript support in examples

- Updated tsconfig.json for examples to include new compiler options and exclude specific files.
- Introduced a new live-provider-globals.d.ts file to declare global variables and types that we configured for react-live.
- Refactored examples to use globally declared DateFNS methods.
- Add the DATEFNS directly to the react-live scope instead of destructuring it, as it avoid declaring all utilities of date-fns
- Fixed the type related issues in the examples.
---
 docs-site/src/components/Example/index.tsx    |  2 +-
 .../src/examples/live-provider-globals.d.ts   | 23 +++++++++++++++++++
 .../src/examples/ts/customDayClassName.tsx    |  2 +-
 docs-site/src/examples/ts/customInput.tsx     |  4 ++--
 docs-site/src/examples/ts/customTimeInput.tsx | 10 ++++----
 .../dateRangeWithShowDisabledNavigation.tsx   |  2 +-
 docs-site/src/examples/ts/default.tsx         |  5 +++-
 .../src/examples/ts/excludeDateIntervals.tsx  |  4 ++--
 docs-site/src/examples/ts/excludeDates.tsx    |  5 +++-
 .../examples/ts/excludeDatesWithMessage.tsx   |  2 +-
 .../src/examples/ts/excludeTimePeriod.tsx     |  2 ++
 docs-site/src/examples/ts/excludeTimes.tsx    |  1 +
 docs-site/src/examples/ts/excludeWeeks.tsx    |  4 ++--
 docs-site/src/examples/ts/filterDates.tsx     |  2 +-
 docs-site/src/examples/ts/filterTimes.tsx     |  1 +
 docs-site/src/examples/ts/highlightDates.tsx  |  4 ++--
 .../src/examples/ts/highlightDatesRanges.tsx  |  1 +
 .../src/examples/ts/includeDateIntervals.tsx  |  1 +
 docs-site/src/examples/ts/includeDates.tsx    |  1 +
 .../examples/ts/includeDatesMonthPicker.tsx   |  4 +++-
 docs-site/src/examples/ts/includeTimes.tsx    |  2 ++
 docs-site/src/examples/ts/injectTimes.tsx     |  2 ++
 docs-site/src/examples/ts/inlineVisible.tsx   |  2 +-
 docs-site/src/examples/ts/maxDate.tsx         |  2 +-
 docs-site/src/examples/ts/minDate.tsx         |  2 +-
 .../src/examples/ts/monthYearDropdown.tsx     |  2 ++
 docs-site/src/examples/ts/onBlurCallbacks.tsx |  4 +++-
 docs-site/src/examples/ts/rangeSwapRange.tsx  |  2 ++
 docs-site/src/examples/ts/rawChange.tsx       | 13 ++++++++---
 docs-site/src/examples/ts/renderCustomDay.tsx |  2 +-
 .../src/examples/ts/renderCustomHeader.tsx    |  9 +++++---
 .../ts/renderCustomHeaderTwoMonths.tsx        |  4 ++--
 .../ts/selectsRangeWithDisabledDates.tsx      |  1 +
 .../src/examples/ts/specificDateRange.tsx     |  2 +-
 docs-site/src/examples/tsconfig.json          | 18 ++++++++++++---
 docs-site/tsconfig.json                       |  1 +
 36 files changed, 111 insertions(+), 37 deletions(-)
 create mode 100644 docs-site/src/examples/live-provider-globals.d.ts

diff --git a/docs-site/src/components/Example/index.tsx b/docs-site/src/components/Example/index.tsx
index 5def70a8da..5e78d58860 100644
--- a/docs-site/src/components/Example/index.tsx
+++ b/docs-site/src/components/Example/index.tsx
@@ -165,7 +165,7 @@ export default class CodeExampleComponent extends React.Component<
                 useState,
                 DatePicker,
                 CalendarContainer,
-                ...DateFNS,
+                DateFNS,
                 range,
                 fi,
                 forwardRef,
diff --git a/docs-site/src/examples/live-provider-globals.d.ts b/docs-site/src/examples/live-provider-globals.d.ts
new file mode 100644
index 0000000000..740a746954
--- /dev/null
+++ b/docs-site/src/examples/live-provider-globals.d.ts
@@ -0,0 +1,23 @@
+import React from "react";
+import * as DateFNS from "date-fns";
+import type { ReactDatePickerCustomHeaderProps as ReactDatePickerCustomHeaderPropsType } from "react-datepicker";
+import type { MiddlewareState as MiddlewareStateType } from "@floating-ui/react";
+declare global {
+  const useState: typeof React.useState;
+  const DatePicker: any;
+  const CalendarContainer: any;
+  const range: any;
+  const fi: any;
+  const forwardRef: typeof React.forwardRef;
+  const render: (component: React.ComponentType) => void;
+
+  // DateFNS object is available globally
+  const DateFNS: typeof DateFNS;
+
+  // Declare types
+  type ReactNode = React.ReactNode;
+  type ReactDatePickerCustomHeaderProps = ReactDatePickerCustomHeaderPropsType;
+  type MiddlewareState = MiddlewareStateType;
+}
+
+export {};
diff --git a/docs-site/src/examples/ts/customDayClassName.tsx b/docs-site/src/examples/ts/customDayClassName.tsx
index d9468bffba..c84969b929 100644
--- a/docs-site/src/examples/ts/customDayClassName.tsx
+++ b/docs-site/src/examples/ts/customDayClassName.tsx
@@ -6,7 +6,7 @@ const CustomDayClassName = () => {
       selected={startDate}
       onChange={(date: Date | null) => setStartDate(date)}
       dayClassName={(date: Date) =>
-        getDate(date) < Math.random() * 31 ? "random" : undefined
+        DateFNS.getDate(date) < Math.random() * 31 ? "random" : undefined
       }
     />
   );
diff --git a/docs-site/src/examples/ts/customInput.tsx b/docs-site/src/examples/ts/customInput.tsx
index 95c23fd571..27a412445a 100644
--- a/docs-site/src/examples/ts/customInput.tsx
+++ b/docs-site/src/examples/ts/customInput.tsx
@@ -5,7 +5,7 @@ type ExampleCustomInputProps = {
 };
 
 const CustomInput = () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   const ExampleCustomInput = forwardRef<
     HTMLButtonElement,
@@ -19,7 +19,7 @@ const CustomInput = () => {
   return (
     <DatePicker
       selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      onChange={(date: Date | null) => setStartDate(date)}
       customInput={<ExampleCustomInput className="example-custom-input" />}
     />
   );
diff --git a/docs-site/src/examples/ts/customTimeInput.tsx b/docs-site/src/examples/ts/customTimeInput.tsx
index f14f42a2e6..2fed4edf25 100644
--- a/docs-site/src/examples/ts/customTimeInput.tsx
+++ b/docs-site/src/examples/ts/customTimeInput.tsx
@@ -1,7 +1,7 @@
 interface ExampleCustomTimeInputProps {
   date?: Date;
-  value: string;
-  onChange: (time: string) => void;
+  value?: string;
+  onChange?: (time: string) => void;
 }
 
 const CustomTimeInput = () => {
@@ -13,8 +13,10 @@ const CustomTimeInput = () => {
   }: ExampleCustomTimeInputProps) => (
     <input
       value={value}
-      onChange={(e) => onChange(e.target.value)}
-      onClick={(e) => e.target?.focus()}
+      onChange={(e) => onChange?.(e.target.value)}
+      onClick={(e: React.MouseEvent<HTMLInputElement>) =>
+        (e.target as HTMLInputElement).focus()
+      }
       style={{ border: "solid 1px pink" }}
     />
   );
diff --git a/docs-site/src/examples/ts/dateRangeWithShowDisabledNavigation.tsx b/docs-site/src/examples/ts/dateRangeWithShowDisabledNavigation.tsx
index b70c4dde5c..29a27b6905 100644
--- a/docs-site/src/examples/ts/dateRangeWithShowDisabledNavigation.tsx
+++ b/docs-site/src/examples/ts/dateRangeWithShowDisabledNavigation.tsx
@@ -13,7 +13,7 @@ const DateRangeWithShowDisabledNavigation = () => {
       selected={startDate}
       onChange={onChange}
       minDate={new Date()}
-      maxDate={addMonths(new Date(), 5)}
+      maxDate={DateFNS.addMonths(new Date(), 5)}
       startDate={startDate}
       endDate={endDate}
       selectsRange
diff --git a/docs-site/src/examples/ts/default.tsx b/docs-site/src/examples/ts/default.tsx
index 06e6768cd2..e85e82fda9 100644
--- a/docs-site/src/examples/ts/default.tsx
+++ b/docs-site/src/examples/ts/default.tsx
@@ -2,7 +2,10 @@ const Default = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
-    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+    />
   );
 };
 
diff --git a/docs-site/src/examples/ts/excludeDateIntervals.tsx b/docs-site/src/examples/ts/excludeDateIntervals.tsx
index 04f874d971..f5de2d04af 100644
--- a/docs-site/src/examples/ts/excludeDateIntervals.tsx
+++ b/docs-site/src/examples/ts/excludeDateIntervals.tsx
@@ -8,8 +8,8 @@ const ExcludeDateIntervals = () => {
 
   const excludeDateIntervals: TExcludeDateIntervals = [
     {
-      start: subDays(new Date(), 5),
-      end: addDays(new Date(), 5),
+      start: DateFNS.subDays(new Date(), 5),
+      end: DateFNS.addDays(new Date(), 5),
     },
   ];
 
diff --git a/docs-site/src/examples/ts/excludeDates.tsx b/docs-site/src/examples/ts/excludeDates.tsx
index cd18a6d74a..722adcecd7 100644
--- a/docs-site/src/examples/ts/excludeDates.tsx
+++ b/docs-site/src/examples/ts/excludeDates.tsx
@@ -8,7 +8,10 @@ type TExcludeDates =
 const ExcludeDates = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
-  const excludeDates: TExcludeDates = [new Date(), subDays(new Date(), 1)];
+  const excludeDates: TExcludeDates = [
+    new Date(),
+    DateFNS.subDays(new Date(), 1),
+  ];
 
   return (
     <DatePicker
diff --git a/docs-site/src/examples/ts/excludeDatesWithMessage.tsx b/docs-site/src/examples/ts/excludeDatesWithMessage.tsx
index 44b1f25d6c..05a0019457 100644
--- a/docs-site/src/examples/ts/excludeDatesWithMessage.tsx
+++ b/docs-site/src/examples/ts/excludeDatesWithMessage.tsx
@@ -10,7 +10,7 @@ const ExcludeDatesWithMessage = () => {
 
   const excludeDates: TExcludeDates = [
     { date: new Date(), message: "Today is excluded" },
-    { date: subDays(new Date(), 1), message: "This day is excluded" },
+    { date: DateFNS.subDays(new Date(), 1), message: "This day is excluded" },
   ];
 
   return (
diff --git a/docs-site/src/examples/ts/excludeTimePeriod.tsx b/docs-site/src/examples/ts/excludeTimePeriod.tsx
index 5d0527338a..262e6770f8 100644
--- a/docs-site/src/examples/ts/excludeTimePeriod.tsx
+++ b/docs-site/src/examples/ts/excludeTimePeriod.tsx
@@ -1,3 +1,5 @@
+const { setHours, setMinutes } = DateFNS;
+
 const ExcludeTimePeriod = () => {
   const [startDate, setStartDate] = useState<Date | null>(
     setHours(setMinutes(new Date(), 30), 17),
diff --git a/docs-site/src/examples/ts/excludeTimes.tsx b/docs-site/src/examples/ts/excludeTimes.tsx
index d2a45b10f5..8d96ae345b 100644
--- a/docs-site/src/examples/ts/excludeTimes.tsx
+++ b/docs-site/src/examples/ts/excludeTimes.tsx
@@ -1,3 +1,4 @@
+const { setHours, setMinutes } = DateFNS;
 type TExcludeTimes = Date[];
 
 const ExcludeTimes = () => {
diff --git a/docs-site/src/examples/ts/excludeWeeks.tsx b/docs-site/src/examples/ts/excludeWeeks.tsx
index b061e81960..818a858244 100644
--- a/docs-site/src/examples/ts/excludeWeeks.tsx
+++ b/docs-site/src/examples/ts/excludeWeeks.tsx
@@ -1,6 +1,6 @@
 type TExcludeDateIntervals = {
-  start: Date;
-  end: Date;
+  start: Date | string;
+  end: Date | string;
 }[];
 
 const ExcludeWeeks = () => {
diff --git a/docs-site/src/examples/ts/filterDates.tsx b/docs-site/src/examples/ts/filterDates.tsx
index fb88ebe413..2e3d95cb4e 100644
--- a/docs-site/src/examples/ts/filterDates.tsx
+++ b/docs-site/src/examples/ts/filterDates.tsx
@@ -4,7 +4,7 @@ const FilterDates = () => {
   const [startDate, setStartDate] = useState<Date | null>(null);
 
   const isWeekday: TFilterDate = (date) => {
-    const day = getDay(date);
+    const day = DateFNS.getDay(date);
     return day !== 0 && day !== 6;
   };
 
diff --git a/docs-site/src/examples/ts/filterTimes.tsx b/docs-site/src/examples/ts/filterTimes.tsx
index 828123c311..191bd3561d 100644
--- a/docs-site/src/examples/ts/filterTimes.tsx
+++ b/docs-site/src/examples/ts/filterTimes.tsx
@@ -1,3 +1,4 @@
+const { setHours, setMinutes } = DateFNS;
 type TFilterTime = (time: Date) => boolean;
 
 const FilterTimes = () => {
diff --git a/docs-site/src/examples/ts/highlightDates.tsx b/docs-site/src/examples/ts/highlightDates.tsx
index 1b7b97ab59..91ee873aa3 100644
--- a/docs-site/src/examples/ts/highlightDates.tsx
+++ b/docs-site/src/examples/ts/highlightDates.tsx
@@ -8,8 +8,8 @@ const HighlightDates = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   const highlightDates: THighlightDates = [
-    subDays(new Date(), 7),
-    addDays(new Date(), 7),
+    DateFNS.subDays(new Date(), 7),
+    DateFNS.addDays(new Date(), 7),
   ];
 
   return (
diff --git a/docs-site/src/examples/ts/highlightDatesRanges.tsx b/docs-site/src/examples/ts/highlightDatesRanges.tsx
index c020e2af31..29d4d24113 100644
--- a/docs-site/src/examples/ts/highlightDatesRanges.tsx
+++ b/docs-site/src/examples/ts/highlightDatesRanges.tsx
@@ -1,3 +1,4 @@
+const { subDays, addDays } = DateFNS;
 type HighlightDate = {
   [className: string]: Date[];
 };
diff --git a/docs-site/src/examples/ts/includeDateIntervals.tsx b/docs-site/src/examples/ts/includeDateIntervals.tsx
index 1250f6291f..ef4b0526bf 100644
--- a/docs-site/src/examples/ts/includeDateIntervals.tsx
+++ b/docs-site/src/examples/ts/includeDateIntervals.tsx
@@ -1,3 +1,4 @@
+const { subDays, addDays } = DateFNS;
 type TIncludeDateIntervals = {
   start: Date;
   end: Date;
diff --git a/docs-site/src/examples/ts/includeDates.tsx b/docs-site/src/examples/ts/includeDates.tsx
index e5ccbdc914..8663e0810e 100644
--- a/docs-site/src/examples/ts/includeDates.tsx
+++ b/docs-site/src/examples/ts/includeDates.tsx
@@ -1,3 +1,4 @@
+const { addDays } = DateFNS;
 type TIncludeDates = Date[];
 
 const IncludeDates = () => {
diff --git a/docs-site/src/examples/ts/includeDatesMonthPicker.tsx b/docs-site/src/examples/ts/includeDatesMonthPicker.tsx
index 99ced37fa2..f241a7b036 100644
--- a/docs-site/src/examples/ts/includeDatesMonthPicker.tsx
+++ b/docs-site/src/examples/ts/includeDatesMonthPicker.tsx
@@ -1,7 +1,9 @@
+type Timestamp = number; // milliseconds since Unix epoch
+
 const IncludeDatesMonthPicker = () => {
   const [startDate, setStartDate] = useState<Date | null>(null);
 
-  const includeDates: Date[] = [
+  const includeDates: Timestamp[] = [
     1661990400000, 1664582400000, 1667260800000, 1672531200000,
   ];
 
diff --git a/docs-site/src/examples/ts/includeTimes.tsx b/docs-site/src/examples/ts/includeTimes.tsx
index 62fab0c438..fe2372c9a6 100644
--- a/docs-site/src/examples/ts/includeTimes.tsx
+++ b/docs-site/src/examples/ts/includeTimes.tsx
@@ -1,3 +1,5 @@
+const { setHours, setMinutes } = DateFNS;
+
 const IncludeTimes = () => {
   const [startDate, setStartDate] = useState<Date | null>(
     setHours(setMinutes(new Date(), 30), 16),
diff --git a/docs-site/src/examples/ts/injectTimes.tsx b/docs-site/src/examples/ts/injectTimes.tsx
index 6ef27fa6f9..75df704cc0 100644
--- a/docs-site/src/examples/ts/injectTimes.tsx
+++ b/docs-site/src/examples/ts/injectTimes.tsx
@@ -1,3 +1,5 @@
+const { setHours, setMinutes, setSeconds } = DateFNS;
+
 const InjectTimes = () => {
   const [startDate, setStartDate] = useState<Date | null>(
     setHours(setMinutes(new Date(), 30), 16),
diff --git a/docs-site/src/examples/ts/inlineVisible.tsx b/docs-site/src/examples/ts/inlineVisible.tsx
index f14aa177e7..bb5604ebc7 100644
--- a/docs-site/src/examples/ts/inlineVisible.tsx
+++ b/docs-site/src/examples/ts/inlineVisible.tsx
@@ -15,7 +15,7 @@ const InlineVisible = () => {
   return (
     <>
       <button className="example-custom-input" onClick={handleClick}>
-        {format(startDate, "dd-MM-yyyy")}
+        {DateFNS.format(startDate, "dd-MM-yyyy")}
       </button>
       {isOpen && (
         <DatePicker selected={startDate} onChange={handleChange} inline />
diff --git a/docs-site/src/examples/ts/maxDate.tsx b/docs-site/src/examples/ts/maxDate.tsx
index a994a10fd6..f1e74c90ae 100644
--- a/docs-site/src/examples/ts/maxDate.tsx
+++ b/docs-site/src/examples/ts/maxDate.tsx
@@ -5,7 +5,7 @@ const MaxDate = () => {
     <DatePicker
       selected={startDate}
       onChange={(date: Date | null) => setStartDate(date)}
-      maxDate={addDays(new Date(), 5)}
+      maxDate={DateFNS.addDays(new Date(), 5)}
       placeholderText="Select a date before 5 days in the future"
     />
   );
diff --git a/docs-site/src/examples/ts/minDate.tsx b/docs-site/src/examples/ts/minDate.tsx
index 48c7efeb30..9ba98aa6da 100644
--- a/docs-site/src/examples/ts/minDate.tsx
+++ b/docs-site/src/examples/ts/minDate.tsx
@@ -5,7 +5,7 @@ const MinDate = () => {
     <DatePicker
       selected={startDate}
       onChange={(date: Date | null) => setStartDate(date)}
-      minDate={subDays(new Date(), 5)}
+      minDate={DateFNS.subDays(new Date(), 5)}
       placeholderText="Select a date after 5 days ago"
     />
   );
diff --git a/docs-site/src/examples/ts/monthYearDropdown.tsx b/docs-site/src/examples/ts/monthYearDropdown.tsx
index 64bdbff6db..4dd720b26c 100644
--- a/docs-site/src/examples/ts/monthYearDropdown.tsx
+++ b/docs-site/src/examples/ts/monthYearDropdown.tsx
@@ -1,3 +1,5 @@
+const { subMonths, addMonths } = DateFNS;
+
 const MonthYearDropdown = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
diff --git a/docs-site/src/examples/ts/onBlurCallbacks.tsx b/docs-site/src/examples/ts/onBlurCallbacks.tsx
index 8fbae44333..6ed147bf2c 100644
--- a/docs-site/src/examples/ts/onBlurCallbacks.tsx
+++ b/docs-site/src/examples/ts/onBlurCallbacks.tsx
@@ -1,9 +1,11 @@
+const { isValid, format } = DateFNS;
+
 const OnBlurCallbacks = () => {
   const [startDate, setStartDate] = useState<Date | null>(null);
 
   const handleOnBlur = ({
     target: { value },
-  }: React.FocusEvent<HTMLElement>) => {
+  }: React.FocusEvent<HTMLInputElement>) => {
     const date = new Date(value);
     if (isValid(date)) {
       console.log("date: %s", format(date, "dd/MM/yyyy"));
diff --git a/docs-site/src/examples/ts/rangeSwapRange.tsx b/docs-site/src/examples/ts/rangeSwapRange.tsx
index 79c2f36b05..b5d7127fdd 100644
--- a/docs-site/src/examples/ts/rangeSwapRange.tsx
+++ b/docs-site/src/examples/ts/rangeSwapRange.tsx
@@ -1,3 +1,5 @@
+const { addDays } = DateFNS;
+
 type TExcludeDates =
   | {
       date: Date;
diff --git a/docs-site/src/examples/ts/rawChange.tsx b/docs-site/src/examples/ts/rawChange.tsx
index 9a5d0b533d..47dda61ac5 100644
--- a/docs-site/src/examples/ts/rawChange.tsx
+++ b/docs-site/src/examples/ts/rawChange.tsx
@@ -3,7 +3,7 @@ const RawChange = () => {
 
   const handleChangeRaw = (value: string) => {
     if (value === "tomorrow") {
-      setStartDate(addDays(new Date(), 1));
+      setStartDate(DateFNS.addDays(new Date(), 1));
     }
   };
 
@@ -13,8 +13,15 @@ const RawChange = () => {
       onChange={(date: Date | null) => setStartDate(date)}
       placeholderText='Enter "tomorrow"'
       onChangeRaw={(
-        event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
-      ) => handleChangeRaw(event.target.value)}
+        event:
+          | React.MouseEvent<HTMLElement>
+          | React.KeyboardEvent<HTMLElement>
+          | React.ChangeEvent<HTMLInputElement>,
+      ) => {
+        if (event.target instanceof HTMLInputElement) {
+          handleChangeRaw(event.target.value);
+        }
+      }}
     />
   );
 };
diff --git a/docs-site/src/examples/ts/renderCustomDay.tsx b/docs-site/src/examples/ts/renderCustomDay.tsx
index dae80f4796..fd7c5e9c61 100644
--- a/docs-site/src/examples/ts/renderCustomDay.tsx
+++ b/docs-site/src/examples/ts/renderCustomDay.tsx
@@ -4,7 +4,7 @@ const RenderCustomDay = () => {
   const renderDayContents = (day: number, date: Date): React.ReactNode => {
     const tooltipText = `Tooltip for date: ${date}`;
 
-    return <span title={tooltipText}>{getDate(date)}</span>;
+    return <span title={tooltipText}>{DateFNS.getDate(date)}</span>;
   };
 
   return (
diff --git a/docs-site/src/examples/ts/renderCustomHeader.tsx b/docs-site/src/examples/ts/renderCustomHeader.tsx
index 2bf30b4678..fadff0c442 100644
--- a/docs-site/src/examples/ts/renderCustomHeader.tsx
+++ b/docs-site/src/examples/ts/renderCustomHeader.tsx
@@ -1,3 +1,4 @@
+const { getYear, getMonth, range } = DateFNS;
 const MONTHS = [
   "January",
   "February",
@@ -13,7 +14,7 @@ const MONTHS = [
   "December",
 ] as const;
 
-const years = range(1990, getYear(new Date()) + 1, 1);
+const years = range(1990, getYear(new Date()) + 1, 1) as number[];
 
 const CustomHeader = ({
   date,
@@ -36,7 +37,7 @@ const CustomHeader = ({
     </button>
     <select
       value={getYear(date)}
-      onChange={({ target: { value } }) => changeYear(value)}
+      onChange={({ target: { value } }) => changeYear(+value)}
     >
       {years.map((option) => (
         <option key={option} value={option}>
@@ -47,7 +48,9 @@ const CustomHeader = ({
 
     <select
       value={MONTHS[getMonth(date)]}
-      onChange={({ target: { value } }) => changeMonth(MONTHS.indexOf(value))}
+      onChange={({ target: { value } }) =>
+        changeMonth(MONTHS.indexOf(value as (typeof MONTHS)[number]))
+      }
     >
       {MONTHS.map((option) => (
         <option key={option} value={option}>
diff --git a/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx b/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx
index e1877840bf..ab8ab80562 100644
--- a/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx
+++ b/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx
@@ -10,7 +10,7 @@ const CustomHeader = ({
       className={
         "react-datepicker__navigation react-datepicker__navigation--previous"
       }
-      style={customHeaderCount === 1 ? { visibility: "hidden" } : null}
+      style={customHeaderCount === 1 ? { visibility: "hidden" } : undefined}
       onClick={decreaseMonth}
     >
       <span
@@ -32,7 +32,7 @@ const CustomHeader = ({
       className={
         "react-datepicker__navigation react-datepicker__navigation--next"
       }
-      style={customHeaderCount === 0 ? { visibility: "hidden" } : null}
+      style={customHeaderCount === 0 ? { visibility: "hidden" } : undefined}
       onClick={increaseMonth}
     >
       <span
diff --git a/docs-site/src/examples/ts/selectsRangeWithDisabledDates.tsx b/docs-site/src/examples/ts/selectsRangeWithDisabledDates.tsx
index b21cead13f..56a4dc2914 100644
--- a/docs-site/src/examples/ts/selectsRangeWithDisabledDates.tsx
+++ b/docs-site/src/examples/ts/selectsRangeWithDisabledDates.tsx
@@ -1,3 +1,4 @@
+const { addDays } = DateFNS;
 type TExcludeDate =
   | {
       date: Date;
diff --git a/docs-site/src/examples/ts/specificDateRange.tsx b/docs-site/src/examples/ts/specificDateRange.tsx
index e24c14e1a7..73ffa22b8a 100644
--- a/docs-site/src/examples/ts/specificDateRange.tsx
+++ b/docs-site/src/examples/ts/specificDateRange.tsx
@@ -6,7 +6,7 @@ const SpecificDateRange = () => {
       selected={startDate}
       onChange={(date: Date | null) => setStartDate(date)}
       minDate={new Date()}
-      maxDate={addDays(new Date(), 5)}
+      maxDate={DateFNS.addDays(new Date(), 5)}
       placeholderText="Select a date between today and 5 days in the future"
     />
   );
diff --git a/docs-site/src/examples/tsconfig.json b/docs-site/src/examples/tsconfig.json
index 09e9c5514e..e03d8318fd 100644
--- a/docs-site/src/examples/tsconfig.json
+++ b/docs-site/src/examples/tsconfig.json
@@ -1,6 +1,18 @@
 {
-  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "noCheck": true
-  }
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "allowJs": true,
+    "esModuleInterop": true
+  },
+  "include": ["./**/*.tsx", "./**/*.ts", "./live-provider-globals.d.ts"]
 }
diff --git a/docs-site/tsconfig.json b/docs-site/tsconfig.json
index 42a14a6e38..bbd4125f17 100644
--- a/docs-site/tsconfig.json
+++ b/docs-site/tsconfig.json
@@ -19,5 +19,6 @@
     "esModuleInterop": true
   },
   "include": ["src"],
+  "exclude": ["src/examples/**/*.tsx", "src/examples/**/*.ts", "dist"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

From c9a3504494f565c235a323976cb02b15ae848709 Mon Sep 17 00:00:00 2001
From: balajis-qb <balaji.s@qburst.com>
Date: Mon, 15 Sep 2025 16:10:37 +0530
Subject: [PATCH 12/18] refactor: rename state variables in date picker
 examples for clarity

- Updated state variable names from `startDate` and `setStartDate` to `selectedDate` and `setSelectedDate` across multiple date picker examples.
- This change enhances code readability and consistency in the examples.
- Clone of the commit 5aa5985
---
 docs-site/src/examples/ts/calendarContainer.tsx        |  6 +++---
 docs-site/src/examples/ts/calendarIcon.tsx             |  6 +++---
 docs-site/src/examples/ts/calendarIconExternal.tsx     |  6 +++---
 docs-site/src/examples/ts/calendarIconSvgIcon.tsx      |  6 +++---
 docs-site/src/examples/ts/calendarStartDay.tsx         |  6 +++---
 docs-site/src/examples/ts/children.tsx                 |  6 +++---
 docs-site/src/examples/ts/clearInput.tsx               |  6 +++---
 docs-site/src/examples/ts/closeOnScroll.tsx            |  6 +++---
 docs-site/src/examples/ts/closeOnScrollCallback.tsx    |  6 +++---
 docs-site/src/examples/ts/configureFloatingUI.tsx      |  6 +++---
 docs-site/src/examples/ts/customCalendarClassName.tsx  |  6 +++---
 docs-site/src/examples/ts/customClassName.tsx          |  6 +++---
 docs-site/src/examples/ts/customDateFormat.tsx         |  6 +++---
 docs-site/src/examples/ts/customDayClassName.tsx       |  6 +++---
 docs-site/src/examples/ts/customInput.tsx              |  6 +++---
 docs-site/src/examples/ts/customTimeClassName.tsx      |  8 +++++---
 docs-site/src/examples/ts/customTimeInput.tsx          |  6 +++---
 docs-site/src/examples/ts/dateRange.tsx                | 10 +++++-----
 docs-site/src/examples/ts/default.tsx                  |  6 +++---
 docs-site/src/examples/ts/disabled.tsx                 |  6 +++---
 .../src/examples/ts/disabledKeyboardNavigation.tsx     |  6 +++---
 docs-site/src/examples/ts/dontCloseOnSelect.tsx        |  6 +++---
 docs-site/src/examples/ts/excludeDateIntervals.tsx     |  6 +++---
 docs-site/src/examples/ts/excludeDates.tsx             |  6 +++---
 docs-site/src/examples/ts/excludeDatesMonthPicker.tsx  |  6 +++---
 docs-site/src/examples/ts/excludeDatesWithMessage.tsx  |  6 +++---
 docs-site/src/examples/ts/excludeTimePeriod.tsx        |  6 +++---
 docs-site/src/examples/ts/excludeTimes.tsx             |  6 +++---
 docs-site/src/examples/ts/excludeWeeks.tsx             |  6 +++---
 docs-site/src/examples/ts/externalForm.tsx             |  6 +++---
 docs-site/src/examples/ts/filterDates.tsx              |  6 +++---
 docs-site/src/examples/ts/filterTimes.tsx              |  6 +++---
 docs-site/src/examples/ts/fixedCalendar.tsx            |  6 +++---
 docs-site/src/examples/ts/hideTimeCaption.tsx          |  6 +++---
 docs-site/src/examples/ts/highlightDates.tsx           |  6 +++---
 docs-site/src/examples/ts/highlightDatesRanges.tsx     |  6 +++---
 docs-site/src/examples/ts/holidayDates.tsx             |  6 +++---
 docs-site/src/examples/ts/includeDateIntervals.tsx     |  6 +++---
 docs-site/src/examples/ts/includeDates.tsx             |  6 +++---
 docs-site/src/examples/ts/includeDatesMonthPicker.tsx  |  6 +++---
 docs-site/src/examples/ts/includeTimes.tsx             |  6 +++---
 docs-site/src/examples/ts/injectTimes.tsx              |  6 +++---
 docs-site/src/examples/ts/inline.tsx                   |  6 +++---
 docs-site/src/examples/ts/inlineVisible.tsx            |  8 ++++----
 docs-site/src/examples/ts/locale.tsx                   |  6 +++---
 docs-site/src/examples/ts/localeWithTime.tsx           |  6 +++---
 .../src/examples/ts/localeWithoutGlobalVariable.tsx    |  6 +++---
 docs-site/src/examples/ts/maxDate.tsx                  |  6 +++---
 docs-site/src/examples/ts/minDate.tsx                  |  6 +++---
 docs-site/src/examples/ts/monthDropdown.tsx            |  6 +++---
 docs-site/src/examples/ts/monthDropdownShort.tsx       |  6 +++---
 docs-site/src/examples/ts/monthPicker.tsx              |  6 +++---
 docs-site/src/examples/ts/monthPickerFourColumns.tsx   |  6 +++---
 docs-site/src/examples/ts/monthPickerFullName.tsx      |  6 +++---
 docs-site/src/examples/ts/monthPickerTwoColumns.tsx    |  6 +++---
 docs-site/src/examples/ts/monthYearDropdown.tsx        |  6 +++---
 docs-site/src/examples/ts/multiMonth.tsx               |  6 +++---
 docs-site/src/examples/ts/multiMonthDropdown.tsx       |  6 +++---
 docs-site/src/examples/ts/multiMonthInline.tsx         |  6 +++---
 docs-site/src/examples/ts/multiMonthPrevious.tsx       |  6 +++---
 docs-site/src/examples/ts/noAnchorArrow.tsx            |  6 +++---
 docs-site/src/examples/ts/onBlurCallbacks.tsx          |  6 +++---
 docs-site/src/examples/ts/openToDate.tsx               |  6 +++---
 docs-site/src/examples/ts/portal.tsx                   |  6 +++---
 docs-site/src/examples/ts/portalById.tsx               |  6 +++---
 docs-site/src/examples/ts/quarterPicker.tsx            |  6 +++---
 docs-site/src/examples/ts/rawChange.tsx                |  8 ++++----
 docs-site/src/examples/ts/readOnly.tsx                 |  6 +++---
 docs-site/src/examples/ts/renderCustomDay.tsx          |  6 +++---
 docs-site/src/examples/ts/renderCustomHeader.tsx       |  6 +++---
 .../src/examples/ts/renderCustomHeaderTwoMonths.tsx    |  6 +++---
 docs-site/src/examples/ts/showTime.tsx                 |  8 +++++---
 docs-site/src/examples/ts/showTimeOnly.tsx             |  8 +++++---
 docs-site/src/examples/ts/specificDateRange.tsx        |  6 +++---
 docs-site/src/examples/ts/strictParsing.tsx            |  6 +++---
 docs-site/src/examples/ts/tabIndex.tsx                 |  8 ++++++--
 docs-site/src/examples/ts/timeInput.tsx                |  6 +++---
 docs-site/src/examples/ts/today.tsx                    |  6 +++---
 docs-site/src/examples/ts/weekNumbers.tsx              |  6 +++---
 docs-site/src/examples/ts/weekPicker.tsx               |  6 +++---
 docs-site/src/examples/ts/withPortalById.tsx           |  6 +++---
 docs-site/src/examples/ts/yearDropdown.tsx             |  6 +++---
 docs-site/src/examples/ts/yearItemNumber.tsx           |  6 +++---
 docs-site/src/examples/ts/yearPicker.tsx               |  6 +++---
 docs-site/src/examples/ts/yearSelectDropdown.tsx       |  6 +++---
 85 files changed, 268 insertions(+), 258 deletions(-)

diff --git a/docs-site/src/examples/ts/calendarContainer.tsx b/docs-site/src/examples/ts/calendarContainer.tsx
index d9ba2d5cf9..a520b52aa1 100644
--- a/docs-site/src/examples/ts/calendarContainer.tsx
+++ b/docs-site/src/examples/ts/calendarContainer.tsx
@@ -1,5 +1,5 @@
 const CustomCalendarContainer = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   const MyContainer = ({
     className,
@@ -22,8 +22,8 @@ const CustomCalendarContainer = () => {
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       calendarContainer={MyContainer}
     />
   );
diff --git a/docs-site/src/examples/ts/calendarIcon.tsx b/docs-site/src/examples/ts/calendarIcon.tsx
index db199dc8a4..3afb0aff53 100644
--- a/docs-site/src/examples/ts/calendarIcon.tsx
+++ b/docs-site/src/examples/ts/calendarIcon.tsx
@@ -1,11 +1,11 @@
 const CalendarIcon = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
       showIcon
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
     />
   );
 };
diff --git a/docs-site/src/examples/ts/calendarIconExternal.tsx b/docs-site/src/examples/ts/calendarIconExternal.tsx
index 9f3c9eba70..0971c089d8 100644
--- a/docs-site/src/examples/ts/calendarIconExternal.tsx
+++ b/docs-site/src/examples/ts/calendarIconExternal.tsx
@@ -1,11 +1,11 @@
 const CalendarIconExternal = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
       showIcon
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       icon="fa fa-calendar"
     />
   );
diff --git a/docs-site/src/examples/ts/calendarIconSvgIcon.tsx b/docs-site/src/examples/ts/calendarIconSvgIcon.tsx
index ac145395b1..75bfd3ccd9 100644
--- a/docs-site/src/examples/ts/calendarIconSvgIcon.tsx
+++ b/docs-site/src/examples/ts/calendarIconSvgIcon.tsx
@@ -1,11 +1,11 @@
 const CalendarIconSvgIcon = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
       showIcon
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       icon={
         <svg
           xmlns="http://www.w3.org/2000/svg"
diff --git a/docs-site/src/examples/ts/calendarStartDay.tsx b/docs-site/src/examples/ts/calendarStartDay.tsx
index 624615db18..63d03429ce 100644
--- a/docs-site/src/examples/ts/calendarStartDay.tsx
+++ b/docs-site/src/examples/ts/calendarStartDay.tsx
@@ -1,10 +1,10 @@
 const CalendarStartDay = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       calendarStartDay={3}
     />
   );
diff --git a/docs-site/src/examples/ts/children.tsx b/docs-site/src/examples/ts/children.tsx
index fe41af9720..599c2f1fe7 100644
--- a/docs-site/src/examples/ts/children.tsx
+++ b/docs-site/src/examples/ts/children.tsx
@@ -1,10 +1,10 @@
 const Children = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
     >
       <div style={{ color: "red" }}>Don't forget to check the weather!</div>
     </DatePicker>
diff --git a/docs-site/src/examples/ts/clearInput.tsx b/docs-site/src/examples/ts/clearInput.tsx
index 0fe2be87ae..88132933c9 100644
--- a/docs-site/src/examples/ts/clearInput.tsx
+++ b/docs-site/src/examples/ts/clearInput.tsx
@@ -1,10 +1,10 @@
 const ClearInput = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       isClearable
       placeholderText="I have been cleared!"
     />
diff --git a/docs-site/src/examples/ts/closeOnScroll.tsx b/docs-site/src/examples/ts/closeOnScroll.tsx
index 3ad18c700a..5a8dc27c8d 100644
--- a/docs-site/src/examples/ts/closeOnScroll.tsx
+++ b/docs-site/src/examples/ts/closeOnScroll.tsx
@@ -1,11 +1,11 @@
 const CloseOnScroll = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
       closeOnScroll
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
     />
   );
 };
diff --git a/docs-site/src/examples/ts/closeOnScrollCallback.tsx b/docs-site/src/examples/ts/closeOnScrollCallback.tsx
index 41b6fd6297..62909e181d 100644
--- a/docs-site/src/examples/ts/closeOnScrollCallback.tsx
+++ b/docs-site/src/examples/ts/closeOnScrollCallback.tsx
@@ -1,11 +1,11 @@
 const CloseOnScrollCallback = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
       closeOnScroll={(e: Event): boolean => e.target === document}
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
     />
   );
 };
diff --git a/docs-site/src/examples/ts/configureFloatingUI.tsx b/docs-site/src/examples/ts/configureFloatingUI.tsx
index 8f097b56e8..9f39737802 100644
--- a/docs-site/src/examples/ts/configureFloatingUI.tsx
+++ b/docs-site/src/examples/ts/configureFloatingUI.tsx
@@ -1,10 +1,10 @@
 const ConfigureFloatingUI = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       popperClassName="some-custom-class"
       popperPlacement="top-end"
       popperModifiers={[
diff --git a/docs-site/src/examples/ts/customCalendarClassName.tsx b/docs-site/src/examples/ts/customCalendarClassName.tsx
index cc347ed9e6..aafa6747fb 100644
--- a/docs-site/src/examples/ts/customCalendarClassName.tsx
+++ b/docs-site/src/examples/ts/customCalendarClassName.tsx
@@ -1,10 +1,10 @@
 const CustomCalendarClassName = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       calendarClassName="rasta-stripes"
     />
   );
diff --git a/docs-site/src/examples/ts/customClassName.tsx b/docs-site/src/examples/ts/customClassName.tsx
index d9910bc80e..ba29ad8ffe 100644
--- a/docs-site/src/examples/ts/customClassName.tsx
+++ b/docs-site/src/examples/ts/customClassName.tsx
@@ -1,10 +1,10 @@
 const CustomClassName = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       className="red-border"
     />
   );
diff --git a/docs-site/src/examples/ts/customDateFormat.tsx b/docs-site/src/examples/ts/customDateFormat.tsx
index cc56053ca7..3dc69655e9 100644
--- a/docs-site/src/examples/ts/customDateFormat.tsx
+++ b/docs-site/src/examples/ts/customDateFormat.tsx
@@ -1,11 +1,11 @@
 const CustomDateFormat = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
       dateFormat="yyyy/MM/dd"
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
     />
   );
 };
diff --git a/docs-site/src/examples/ts/customDayClassName.tsx b/docs-site/src/examples/ts/customDayClassName.tsx
index c84969b929..cd0284f588 100644
--- a/docs-site/src/examples/ts/customDayClassName.tsx
+++ b/docs-site/src/examples/ts/customDayClassName.tsx
@@ -1,10 +1,10 @@
 const CustomDayClassName = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       dayClassName={(date: Date) =>
         DateFNS.getDate(date) < Math.random() * 31 ? "random" : undefined
       }
diff --git a/docs-site/src/examples/ts/customInput.tsx b/docs-site/src/examples/ts/customInput.tsx
index 27a412445a..9e5dc48669 100644
--- a/docs-site/src/examples/ts/customInput.tsx
+++ b/docs-site/src/examples/ts/customInput.tsx
@@ -5,7 +5,7 @@ type ExampleCustomInputProps = {
 };
 
 const CustomInput = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   const ExampleCustomInput = forwardRef<
     HTMLButtonElement,
@@ -18,8 +18,8 @@ const CustomInput = () => {
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       customInput={<ExampleCustomInput className="example-custom-input" />}
     />
   );
diff --git a/docs-site/src/examples/ts/customTimeClassName.tsx b/docs-site/src/examples/ts/customTimeClassName.tsx
index eadf7ec918..05b79c8403 100644
--- a/docs-site/src/examples/ts/customTimeClassName.tsx
+++ b/docs-site/src/examples/ts/customTimeClassName.tsx
@@ -1,5 +1,7 @@
 const CustomTimeClassName = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDateTime, setSelectedDateTime] = useState<Date | null>(
+    new Date(),
+  );
 
   const handleColor = (time: Date): string => {
     return time.getHours() > 12 ? "text-success" : "text-error";
@@ -8,8 +10,8 @@ const CustomTimeClassName = () => {
   return (
     <DatePicker
       showTimeSelect
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDateTime}
+      onChange={(date: Date | null) => setSelectedDateTime(date)}
       timeClassName={handleColor}
     />
   );
diff --git a/docs-site/src/examples/ts/customTimeInput.tsx b/docs-site/src/examples/ts/customTimeInput.tsx
index 2fed4edf25..6a98686c60 100644
--- a/docs-site/src/examples/ts/customTimeInput.tsx
+++ b/docs-site/src/examples/ts/customTimeInput.tsx
@@ -5,7 +5,7 @@ interface ExampleCustomTimeInputProps {
 }
 
 const CustomTimeInput = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   const ExampleCustomTimeInput = ({
     value,
@@ -23,8 +23,8 @@ const CustomTimeInput = () => {
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       showTimeInput
       customTimeInput={<ExampleCustomTimeInput />}
     />
diff --git a/docs-site/src/examples/ts/dateRange.tsx b/docs-site/src/examples/ts/dateRange.tsx
index 03eaf92629..3d0ad3dd32 100644
--- a/docs-site/src/examples/ts/dateRange.tsx
+++ b/docs-site/src/examples/ts/dateRange.tsx
@@ -1,5 +1,5 @@
 const DateRange = () => {
-  const [startDate, setStartDate] = useState<Date | null>(
+  const [selectedDate, setStartDate] = useState<Date | null>(
     new Date("2014/02/08"),
   );
   const [endDate, setEndDate] = useState<Date | null>(new Date("2014/02/10"));
@@ -7,19 +7,19 @@ const DateRange = () => {
   return (
     <>
       <DatePicker
-        selected={startDate}
+        selected={selectedDate}
         onChange={(date: Date | null) => setStartDate(date)}
         selectsStart
-        startDate={startDate}
+        startDate={selectedDate}
         endDate={endDate}
       />
       <DatePicker
         selected={endDate}
         onChange={(date: Date | null) => setEndDate(date)}
         selectsEnd
-        startDate={startDate}
+        startDate={selectedDate}
         endDate={endDate}
-        minDate={startDate}
+        minDate={selectedDate}
       />
     </>
   );
diff --git a/docs-site/src/examples/ts/default.tsx b/docs-site/src/examples/ts/default.tsx
index e85e82fda9..00f348e908 100644
--- a/docs-site/src/examples/ts/default.tsx
+++ b/docs-site/src/examples/ts/default.tsx
@@ -1,10 +1,10 @@
 const Default = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
     />
   );
 };
diff --git a/docs-site/src/examples/ts/disabled.tsx b/docs-site/src/examples/ts/disabled.tsx
index 9c8e2a8326..09ee2bf59c 100644
--- a/docs-site/src/examples/ts/disabled.tsx
+++ b/docs-site/src/examples/ts/disabled.tsx
@@ -1,10 +1,10 @@
 const Disabled = () => {
-  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       disabled
       placeholderText="This is disabled"
     />
diff --git a/docs-site/src/examples/ts/disabledKeyboardNavigation.tsx b/docs-site/src/examples/ts/disabledKeyboardNavigation.tsx
index 4460dbce72..4b87269b0e 100644
--- a/docs-site/src/examples/ts/disabledKeyboardNavigation.tsx
+++ b/docs-site/src/examples/ts/disabledKeyboardNavigation.tsx
@@ -1,10 +1,10 @@
 const DisabledKeyboardNavigation = () => {
-  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       disabledKeyboardNavigation
       placeholderText="This has disabled keyboard navigation"
     />
diff --git a/docs-site/src/examples/ts/dontCloseOnSelect.tsx b/docs-site/src/examples/ts/dontCloseOnSelect.tsx
index 54966a1f28..aa276b3071 100644
--- a/docs-site/src/examples/ts/dontCloseOnSelect.tsx
+++ b/docs-site/src/examples/ts/dontCloseOnSelect.tsx
@@ -1,10 +1,10 @@
 const DontCloseOnSelect = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       shouldCloseOnSelect={false}
     />
   );
diff --git a/docs-site/src/examples/ts/excludeDateIntervals.tsx b/docs-site/src/examples/ts/excludeDateIntervals.tsx
index f5de2d04af..ab9d61082a 100644
--- a/docs-site/src/examples/ts/excludeDateIntervals.tsx
+++ b/docs-site/src/examples/ts/excludeDateIntervals.tsx
@@ -4,7 +4,7 @@ type TExcludeDateIntervals = {
 }[];
 
 const ExcludeDateIntervals = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   const excludeDateIntervals: TExcludeDateIntervals = [
     {
@@ -15,8 +15,8 @@ const ExcludeDateIntervals = () => {
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       excludeDateIntervals={excludeDateIntervals}
       placeholderText="Select a date other than the interval from 5 days ago to 5 days in the future"
     />
diff --git a/docs-site/src/examples/ts/excludeDates.tsx b/docs-site/src/examples/ts/excludeDates.tsx
index 722adcecd7..088080f213 100644
--- a/docs-site/src/examples/ts/excludeDates.tsx
+++ b/docs-site/src/examples/ts/excludeDates.tsx
@@ -6,7 +6,7 @@ type TExcludeDates =
   | Date[];
 
 const ExcludeDates = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   const excludeDates: TExcludeDates = [
     new Date(),
@@ -15,8 +15,8 @@ const ExcludeDates = () => {
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       excludeDates={excludeDates}
       placeholderText="Select a date other than today or yesterday"
     />
diff --git a/docs-site/src/examples/ts/excludeDatesMonthPicker.tsx b/docs-site/src/examples/ts/excludeDatesMonthPicker.tsx
index 7567120dc8..19522401b2 100644
--- a/docs-site/src/examples/ts/excludeDatesMonthPicker.tsx
+++ b/docs-site/src/examples/ts/excludeDatesMonthPicker.tsx
@@ -6,7 +6,7 @@ type TExcludeDates =
   | Date[];
 
 const ExcludeDatesMonthPicker = () => {
-  const [startDate, setStartDate] = useState<Date | null>(
+  const [selectedDate, setSelectedDate] = useState<Date | null>(
     new Date("2024-08-01"),
   );
 
@@ -17,8 +17,8 @@ const ExcludeDatesMonthPicker = () => {
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       dateFormat="MM/yyyy"
       excludeDates={excludeDates}
       showMonthYearPicker
diff --git a/docs-site/src/examples/ts/excludeDatesWithMessage.tsx b/docs-site/src/examples/ts/excludeDatesWithMessage.tsx
index 05a0019457..43f4c862bb 100644
--- a/docs-site/src/examples/ts/excludeDatesWithMessage.tsx
+++ b/docs-site/src/examples/ts/excludeDatesWithMessage.tsx
@@ -6,7 +6,7 @@ type TExcludeDates =
   | Date[];
 
 const ExcludeDatesWithMessage = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   const excludeDates: TExcludeDates = [
     { date: new Date(), message: "Today is excluded" },
@@ -15,8 +15,8 @@ const ExcludeDatesWithMessage = () => {
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       excludeDates={excludeDates}
       placeholderText="Select a date other than today or yesterday"
     />
diff --git a/docs-site/src/examples/ts/excludeTimePeriod.tsx b/docs-site/src/examples/ts/excludeTimePeriod.tsx
index 262e6770f8..014f449bdb 100644
--- a/docs-site/src/examples/ts/excludeTimePeriod.tsx
+++ b/docs-site/src/examples/ts/excludeTimePeriod.tsx
@@ -1,14 +1,14 @@
 const { setHours, setMinutes } = DateFNS;
 
 const ExcludeTimePeriod = () => {
-  const [startDate, setStartDate] = useState<Date | null>(
+  const [selectedDate, setSelectedDateTime] = useState<Date | null>(
     setHours(setMinutes(new Date(), 30), 17),
   );
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDateTime(date)}
       showTimeSelect
       minTime={setHours(setMinutes(new Date(), 0), 17)}
       maxTime={setHours(setMinutes(new Date(), 30), 20)}
diff --git a/docs-site/src/examples/ts/excludeTimes.tsx b/docs-site/src/examples/ts/excludeTimes.tsx
index 8d96ae345b..58ddb80ebc 100644
--- a/docs-site/src/examples/ts/excludeTimes.tsx
+++ b/docs-site/src/examples/ts/excludeTimes.tsx
@@ -2,7 +2,7 @@ const { setHours, setMinutes } = DateFNS;
 type TExcludeTimes = Date[];
 
 const ExcludeTimes = () => {
-  const [startDate, setStartDate] = useState<Date | null>(
+  const [selectedDate, setSelectedDateTime] = useState<Date | null>(
     setHours(setMinutes(new Date(), 30), 16),
   );
 
@@ -15,8 +15,8 @@ const ExcludeTimes = () => {
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDateTime(date)}
       showTimeSelect
       excludeTimes={excludeTimes}
       dateFormat="MMMM d, yyyy h:mm aa"
diff --git a/docs-site/src/examples/ts/excludeWeeks.tsx b/docs-site/src/examples/ts/excludeWeeks.tsx
index 818a858244..dc7c1f5074 100644
--- a/docs-site/src/examples/ts/excludeWeeks.tsx
+++ b/docs-site/src/examples/ts/excludeWeeks.tsx
@@ -4,7 +4,7 @@ type TExcludeDateIntervals = {
 }[];
 
 const ExcludeWeeks = () => {
-  const [startDate, setStartDate] = useState<Date | null>(
+  const [selectedDate, setSelectedDate] = useState<Date | null>(
     new Date("2021/02/22"),
   );
 
@@ -15,8 +15,8 @@ const ExcludeWeeks = () => {
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       dateFormat="I/R"
       locale="en-GB"
       excludeDateIntervals={excludeWeeks}
diff --git a/docs-site/src/examples/ts/externalForm.tsx b/docs-site/src/examples/ts/externalForm.tsx
index 3b60f97140..9fe9519131 100644
--- a/docs-site/src/examples/ts/externalForm.tsx
+++ b/docs-site/src/examples/ts/externalForm.tsx
@@ -1,11 +1,11 @@
 const ExternalForm = () => {
-  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
 
   return (
     <>
       <DatePicker
-        selected={startDate}
-        onChange={(date: Date | null) => setStartDate(date)}
+        selected={selectedDate}
+        onChange={(date: Date | null) => setSelectedDate(date)}
         required
         form="external-form"
       />
diff --git a/docs-site/src/examples/ts/filterDates.tsx b/docs-site/src/examples/ts/filterDates.tsx
index 2e3d95cb4e..6dc1e386ec 100644
--- a/docs-site/src/examples/ts/filterDates.tsx
+++ b/docs-site/src/examples/ts/filterDates.tsx
@@ -1,7 +1,7 @@
 type TFilterDate = (date: Date) => boolean;
 
 const FilterDates = () => {
-  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
 
   const isWeekday: TFilterDate = (date) => {
     const day = DateFNS.getDay(date);
@@ -10,8 +10,8 @@ const FilterDates = () => {
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       filterDate={isWeekday}
       placeholderText="Select a weekday"
     />
diff --git a/docs-site/src/examples/ts/filterTimes.tsx b/docs-site/src/examples/ts/filterTimes.tsx
index 191bd3561d..6a9bd96442 100644
--- a/docs-site/src/examples/ts/filterTimes.tsx
+++ b/docs-site/src/examples/ts/filterTimes.tsx
@@ -2,7 +2,7 @@ const { setHours, setMinutes } = DateFNS;
 type TFilterTime = (time: Date) => boolean;
 
 const FilterTimes = () => {
-  const [startDate, setStartDate] = useState<Date | null>(
+  const [selectedDate, setSelectedDateTime] = useState<Date | null>(
     setHours(setMinutes(new Date(), 0), 9),
   );
 
@@ -15,8 +15,8 @@ const FilterTimes = () => {
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDateTime(date)}
       showTimeSelect
       filterTime={filterPassedTime}
       dateFormat="MMMM d, yyyy h:mm aa"
diff --git a/docs-site/src/examples/ts/fixedCalendar.tsx b/docs-site/src/examples/ts/fixedCalendar.tsx
index e9f49d5950..40e774d5a4 100644
--- a/docs-site/src/examples/ts/fixedCalendar.tsx
+++ b/docs-site/src/examples/ts/fixedCalendar.tsx
@@ -1,10 +1,10 @@
 const FixedCalendar = () => {
-  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       fixedHeight
     />
   );
diff --git a/docs-site/src/examples/ts/hideTimeCaption.tsx b/docs-site/src/examples/ts/hideTimeCaption.tsx
index c2469739b9..37ff9b4dac 100644
--- a/docs-site/src/examples/ts/hideTimeCaption.tsx
+++ b/docs-site/src/examples/ts/hideTimeCaption.tsx
@@ -1,10 +1,10 @@
 const HideTimeCaption = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDateTime] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDateTime(date)}
       showTimeSelect
       showTimeSelectOnly
       timeIntervals={15}
diff --git a/docs-site/src/examples/ts/highlightDates.tsx b/docs-site/src/examples/ts/highlightDates.tsx
index 91ee873aa3..4fd11c82e1 100644
--- a/docs-site/src/examples/ts/highlightDates.tsx
+++ b/docs-site/src/examples/ts/highlightDates.tsx
@@ -5,7 +5,7 @@ type HighlightDate = {
 type THighlightDates = (Date | HighlightDate)[];
 
 const HighlightDates = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   const highlightDates: THighlightDates = [
     DateFNS.subDays(new Date(), 7),
@@ -14,8 +14,8 @@ const HighlightDates = () => {
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       highlightDates={highlightDates}
       placeholderText="This highlights a week ago and a week from today"
     />
diff --git a/docs-site/src/examples/ts/highlightDatesRanges.tsx b/docs-site/src/examples/ts/highlightDatesRanges.tsx
index 29d4d24113..f9165bdea7 100644
--- a/docs-site/src/examples/ts/highlightDatesRanges.tsx
+++ b/docs-site/src/examples/ts/highlightDatesRanges.tsx
@@ -6,7 +6,7 @@ type HighlightDate = {
 type THighlightDates = (Date | HighlightDate)[];
 
 const HighlightDatesRanges = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   const highlightWithRanges: THighlightDates = [
     {
@@ -29,8 +29,8 @@ const HighlightDatesRanges = () => {
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       highlightDates={highlightWithRanges}
       placeholderText="This highlight two ranges with custom classes"
     />
diff --git a/docs-site/src/examples/ts/holidayDates.tsx b/docs-site/src/examples/ts/holidayDates.tsx
index ae4e1dc0fc..5383da21de 100644
--- a/docs-site/src/examples/ts/holidayDates.tsx
+++ b/docs-site/src/examples/ts/holidayDates.tsx
@@ -4,7 +4,7 @@ type Holiday = {
 };
 
 const HolidayDates = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   const holidays: Holiday[] = [
     { date: "2023-08-15", holidayName: "India's Independence Day" },
@@ -16,8 +16,8 @@ const HolidayDates = () => {
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       holidays={holidays}
       placeholderText="This display holidays"
     />
diff --git a/docs-site/src/examples/ts/includeDateIntervals.tsx b/docs-site/src/examples/ts/includeDateIntervals.tsx
index ef4b0526bf..ffd6772ab7 100644
--- a/docs-site/src/examples/ts/includeDateIntervals.tsx
+++ b/docs-site/src/examples/ts/includeDateIntervals.tsx
@@ -5,7 +5,7 @@ type TIncludeDateIntervals = {
 }[];
 
 const IncludeDateIntervals = () => {
-  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
 
   const includeDateIntervals: TIncludeDateIntervals = [
     { start: subDays(new Date(), 5), end: addDays(new Date(), 5) },
@@ -13,8 +13,8 @@ const IncludeDateIntervals = () => {
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       includeDateIntervals={includeDateIntervals}
       placeholderText="This only includes dates from 5 days ago to 5 days in the future"
     />
diff --git a/docs-site/src/examples/ts/includeDates.tsx b/docs-site/src/examples/ts/includeDates.tsx
index 8663e0810e..0f4ae1eba7 100644
--- a/docs-site/src/examples/ts/includeDates.tsx
+++ b/docs-site/src/examples/ts/includeDates.tsx
@@ -2,14 +2,14 @@ const { addDays } = DateFNS;
 type TIncludeDates = Date[];
 
 const IncludeDates = () => {
-  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
 
   const includeDates: TIncludeDates = [new Date(), addDays(new Date(), 1)];
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       includeDates={includeDates}
       placeholderText="This only includes today and tomorrow"
     />
diff --git a/docs-site/src/examples/ts/includeDatesMonthPicker.tsx b/docs-site/src/examples/ts/includeDatesMonthPicker.tsx
index f241a7b036..c6f1cc3a88 100644
--- a/docs-site/src/examples/ts/includeDatesMonthPicker.tsx
+++ b/docs-site/src/examples/ts/includeDatesMonthPicker.tsx
@@ -1,7 +1,7 @@
 type Timestamp = number; // milliseconds since Unix epoch
 
 const IncludeDatesMonthPicker = () => {
-  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
 
   const includeDates: Timestamp[] = [
     1661990400000, 1664582400000, 1667260800000, 1672531200000,
@@ -9,8 +9,8 @@ const IncludeDatesMonthPicker = () => {
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       dateFormat="MM/yyyy"
       includeDates={includeDates}
       showMonthYearPicker
diff --git a/docs-site/src/examples/ts/includeTimes.tsx b/docs-site/src/examples/ts/includeTimes.tsx
index fe2372c9a6..7b5ae7c17d 100644
--- a/docs-site/src/examples/ts/includeTimes.tsx
+++ b/docs-site/src/examples/ts/includeTimes.tsx
@@ -1,7 +1,7 @@
 const { setHours, setMinutes } = DateFNS;
 
 const IncludeTimes = () => {
-  const [startDate, setStartDate] = useState<Date | null>(
+  const [selectedDate, setSelectedDateTime] = useState<Date | null>(
     setHours(setMinutes(new Date(), 30), 16),
   );
 
@@ -14,8 +14,8 @@ const IncludeTimes = () => {
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDateTime(date)}
       showTimeSelect
       includeTimes={includeTimes}
       dateFormat="MMMM d, yyyy h:mm aa"
diff --git a/docs-site/src/examples/ts/injectTimes.tsx b/docs-site/src/examples/ts/injectTimes.tsx
index 75df704cc0..3ef7dc3ab1 100644
--- a/docs-site/src/examples/ts/injectTimes.tsx
+++ b/docs-site/src/examples/ts/injectTimes.tsx
@@ -1,7 +1,7 @@
 const { setHours, setMinutes, setSeconds } = DateFNS;
 
 const InjectTimes = () => {
-  const [startDate, setStartDate] = useState<Date | null>(
+  const [selectedDate, setSelectedDateTime] = useState<Date | null>(
     setHours(setMinutes(new Date(), 30), 16),
   );
 
@@ -13,8 +13,8 @@ const InjectTimes = () => {
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDateTime(date)}
       showTimeSelect
       timeFormat="HH:mm:ss"
       injectTimes={injectTimes}
diff --git a/docs-site/src/examples/ts/inline.tsx b/docs-site/src/examples/ts/inline.tsx
index 2c421ad91d..79535eaca1 100644
--- a/docs-site/src/examples/ts/inline.tsx
+++ b/docs-site/src/examples/ts/inline.tsx
@@ -1,10 +1,10 @@
 const Inline = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       inline
     />
   );
diff --git a/docs-site/src/examples/ts/inlineVisible.tsx b/docs-site/src/examples/ts/inlineVisible.tsx
index bb5604ebc7..a4ba886f9e 100644
--- a/docs-site/src/examples/ts/inlineVisible.tsx
+++ b/docs-site/src/examples/ts/inlineVisible.tsx
@@ -1,10 +1,10 @@
 const InlineVisible = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
   const [isOpen, setIsOpen] = useState(false);
 
   const handleChange = (e: Date | null) => {
     setIsOpen(!isOpen);
-    setStartDate(e);
+    setSelectedDate(e);
   };
 
   const handleClick = (e: React.MouseEvent<HTMLElement>) => {
@@ -15,10 +15,10 @@ const InlineVisible = () => {
   return (
     <>
       <button className="example-custom-input" onClick={handleClick}>
-        {DateFNS.format(startDate, "dd-MM-yyyy")}
+        {DateFNS.format(selectedDate, "dd-MM-yyyy")}
       </button>
       {isOpen && (
-        <DatePicker selected={startDate} onChange={handleChange} inline />
+        <DatePicker selected={selectedDate} onChange={handleChange} inline />
       )}
     </>
   );
diff --git a/docs-site/src/examples/ts/locale.tsx b/docs-site/src/examples/ts/locale.tsx
index 859653fb1f..890b9c48b2 100644
--- a/docs-site/src/examples/ts/locale.tsx
+++ b/docs-site/src/examples/ts/locale.tsx
@@ -1,10 +1,10 @@
 const Locale = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       locale="en-GB"
       placeholderText="Weeks start on Monday"
     />
diff --git a/docs-site/src/examples/ts/localeWithTime.tsx b/docs-site/src/examples/ts/localeWithTime.tsx
index 2e84f03943..247d541277 100644
--- a/docs-site/src/examples/ts/localeWithTime.tsx
+++ b/docs-site/src/examples/ts/localeWithTime.tsx
@@ -1,10 +1,10 @@
 const LocaleWithTime = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDateTime] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDateTime(date)}
       locale="pt-BR"
       showTimeSelect
       timeFormat="p"
diff --git a/docs-site/src/examples/ts/localeWithoutGlobalVariable.tsx b/docs-site/src/examples/ts/localeWithoutGlobalVariable.tsx
index 5551e72684..9bd3e55cb1 100644
--- a/docs-site/src/examples/ts/localeWithoutGlobalVariable.tsx
+++ b/docs-site/src/examples/ts/localeWithoutGlobalVariable.tsx
@@ -1,10 +1,10 @@
 const LocaleWithoutGlobalVariable = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       locale={fi}
     />
   );
diff --git a/docs-site/src/examples/ts/maxDate.tsx b/docs-site/src/examples/ts/maxDate.tsx
index f1e74c90ae..9385a2f0a7 100644
--- a/docs-site/src/examples/ts/maxDate.tsx
+++ b/docs-site/src/examples/ts/maxDate.tsx
@@ -1,10 +1,10 @@
 const MaxDate = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       maxDate={DateFNS.addDays(new Date(), 5)}
       placeholderText="Select a date before 5 days in the future"
     />
diff --git a/docs-site/src/examples/ts/minDate.tsx b/docs-site/src/examples/ts/minDate.tsx
index 9ba98aa6da..99465c4d70 100644
--- a/docs-site/src/examples/ts/minDate.tsx
+++ b/docs-site/src/examples/ts/minDate.tsx
@@ -1,10 +1,10 @@
 const MinDate = () => {
-  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       minDate={DateFNS.subDays(new Date(), 5)}
       placeholderText="Select a date after 5 days ago"
     />
diff --git a/docs-site/src/examples/ts/monthDropdown.tsx b/docs-site/src/examples/ts/monthDropdown.tsx
index e6394d8139..5d0e9c8a8e 100644
--- a/docs-site/src/examples/ts/monthDropdown.tsx
+++ b/docs-site/src/examples/ts/monthDropdown.tsx
@@ -1,10 +1,10 @@
 const MonthDropdown = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       showMonthDropdown
     />
   );
diff --git a/docs-site/src/examples/ts/monthDropdownShort.tsx b/docs-site/src/examples/ts/monthDropdownShort.tsx
index 3b172bba77..9a381ca542 100644
--- a/docs-site/src/examples/ts/monthDropdownShort.tsx
+++ b/docs-site/src/examples/ts/monthDropdownShort.tsx
@@ -1,10 +1,10 @@
 const MonthDropdownShort = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       showMonthDropdown
       useShortMonthInDropdown
     />
diff --git a/docs-site/src/examples/ts/monthPicker.tsx b/docs-site/src/examples/ts/monthPicker.tsx
index 7163698433..95604948ba 100644
--- a/docs-site/src/examples/ts/monthPicker.tsx
+++ b/docs-site/src/examples/ts/monthPicker.tsx
@@ -1,10 +1,10 @@
 const MonthPicker = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       dateFormat="MM/yyyy"
       showMonthYearPicker
     />
diff --git a/docs-site/src/examples/ts/monthPickerFourColumns.tsx b/docs-site/src/examples/ts/monthPickerFourColumns.tsx
index f10f041265..6a6ea8cb61 100644
--- a/docs-site/src/examples/ts/monthPickerFourColumns.tsx
+++ b/docs-site/src/examples/ts/monthPickerFourColumns.tsx
@@ -1,10 +1,10 @@
 const MonthPickerFourColumns = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       dateFormat="MM/yyyy"
       showMonthYearPicker
       showFullMonthYearPicker
diff --git a/docs-site/src/examples/ts/monthPickerFullName.tsx b/docs-site/src/examples/ts/monthPickerFullName.tsx
index 51a0dbeb86..5a8c4591e4 100644
--- a/docs-site/src/examples/ts/monthPickerFullName.tsx
+++ b/docs-site/src/examples/ts/monthPickerFullName.tsx
@@ -1,10 +1,10 @@
 const MonthPickerFullName = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       dateFormat="MM/yyyy"
       showMonthYearPicker
       showFullMonthYearPicker
diff --git a/docs-site/src/examples/ts/monthPickerTwoColumns.tsx b/docs-site/src/examples/ts/monthPickerTwoColumns.tsx
index e452b9cebf..1876b3cc39 100644
--- a/docs-site/src/examples/ts/monthPickerTwoColumns.tsx
+++ b/docs-site/src/examples/ts/monthPickerTwoColumns.tsx
@@ -1,10 +1,10 @@
 const MonthPickerTwoColumns = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       dateFormat="MM/yyyy"
       showMonthYearPicker
       showFullMonthYearPicker
diff --git a/docs-site/src/examples/ts/monthYearDropdown.tsx b/docs-site/src/examples/ts/monthYearDropdown.tsx
index 4dd720b26c..65c8495cb7 100644
--- a/docs-site/src/examples/ts/monthYearDropdown.tsx
+++ b/docs-site/src/examples/ts/monthYearDropdown.tsx
@@ -1,12 +1,12 @@
 const { subMonths, addMonths } = DateFNS;
 
 const MonthYearDropdown = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       dateFormatCalendar={"MMM yyyy"}
       minDate={subMonths(new Date(), 6)}
       maxDate={addMonths(new Date(), 6)}
diff --git a/docs-site/src/examples/ts/multiMonth.tsx b/docs-site/src/examples/ts/multiMonth.tsx
index 91f707e30d..2560987d13 100644
--- a/docs-site/src/examples/ts/multiMonth.tsx
+++ b/docs-site/src/examples/ts/multiMonth.tsx
@@ -1,10 +1,10 @@
 const MultiMonth = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       monthsShown={2}
     />
   );
diff --git a/docs-site/src/examples/ts/multiMonthDropdown.tsx b/docs-site/src/examples/ts/multiMonthDropdown.tsx
index e937675ec8..2f62917624 100644
--- a/docs-site/src/examples/ts/multiMonthDropdown.tsx
+++ b/docs-site/src/examples/ts/multiMonthDropdown.tsx
@@ -1,10 +1,10 @@
 const MultiMonthDropdown = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       monthsShown={2}
       showYearDropdown
     />
diff --git a/docs-site/src/examples/ts/multiMonthInline.tsx b/docs-site/src/examples/ts/multiMonthInline.tsx
index be22f4cd9e..4c2fc98e23 100644
--- a/docs-site/src/examples/ts/multiMonthInline.tsx
+++ b/docs-site/src/examples/ts/multiMonthInline.tsx
@@ -1,10 +1,10 @@
 const MultiMonthInline = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       monthsShown={2}
       inline
     />
diff --git a/docs-site/src/examples/ts/multiMonthPrevious.tsx b/docs-site/src/examples/ts/multiMonthPrevious.tsx
index 01057b9cfb..3b826db628 100644
--- a/docs-site/src/examples/ts/multiMonthPrevious.tsx
+++ b/docs-site/src/examples/ts/multiMonthPrevious.tsx
@@ -1,11 +1,11 @@
 const MultiMonthPrevious = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
+      selected={selectedDate}
       showPreviousMonths
-      onChange={(date: Date | null) => setStartDate(date)}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       monthsShown={2}
     />
   );
diff --git a/docs-site/src/examples/ts/noAnchorArrow.tsx b/docs-site/src/examples/ts/noAnchorArrow.tsx
index 115576afca..b33b8310b1 100644
--- a/docs-site/src/examples/ts/noAnchorArrow.tsx
+++ b/docs-site/src/examples/ts/noAnchorArrow.tsx
@@ -1,11 +1,11 @@
 const NoAnchorArrow = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
       showPopperArrow={false}
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
     />
   );
 };
diff --git a/docs-site/src/examples/ts/onBlurCallbacks.tsx b/docs-site/src/examples/ts/onBlurCallbacks.tsx
index 6ed147bf2c..35b848a0a0 100644
--- a/docs-site/src/examples/ts/onBlurCallbacks.tsx
+++ b/docs-site/src/examples/ts/onBlurCallbacks.tsx
@@ -1,7 +1,7 @@
 const { isValid, format } = DateFNS;
 
 const OnBlurCallbacks = () => {
-  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
 
   const handleOnBlur = ({
     target: { value },
@@ -17,8 +17,8 @@ const OnBlurCallbacks = () => {
   return (
     <DatePicker
       key="example9"
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       onBlur={handleOnBlur}
       placeholderText="View blur callbacks in console"
     />
diff --git a/docs-site/src/examples/ts/openToDate.tsx b/docs-site/src/examples/ts/openToDate.tsx
index 88af076b2e..a03f7a0b0d 100644
--- a/docs-site/src/examples/ts/openToDate.tsx
+++ b/docs-site/src/examples/ts/openToDate.tsx
@@ -1,10 +1,10 @@
 const OpenToDate = () => {
-  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       openToDate={new Date("1993/09/28")}
     />
   );
diff --git a/docs-site/src/examples/ts/portal.tsx b/docs-site/src/examples/ts/portal.tsx
index bb153d7be2..38de9fa23e 100644
--- a/docs-site/src/examples/ts/portal.tsx
+++ b/docs-site/src/examples/ts/portal.tsx
@@ -1,10 +1,10 @@
 const Portal = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       withPortal
     />
   );
diff --git a/docs-site/src/examples/ts/portalById.tsx b/docs-site/src/examples/ts/portalById.tsx
index 725f581d7f..0a38653a06 100644
--- a/docs-site/src/examples/ts/portalById.tsx
+++ b/docs-site/src/examples/ts/portalById.tsx
@@ -1,10 +1,10 @@
 const PortalById = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       portalId="root-portal"
     />
   );
diff --git a/docs-site/src/examples/ts/quarterPicker.tsx b/docs-site/src/examples/ts/quarterPicker.tsx
index ba6bcd3f17..6b2a94a551 100644
--- a/docs-site/src/examples/ts/quarterPicker.tsx
+++ b/docs-site/src/examples/ts/quarterPicker.tsx
@@ -1,10 +1,10 @@
 const QuarterPicker = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       dateFormat="yyyy, QQQ"
       showQuarterYearPicker
     />
diff --git a/docs-site/src/examples/ts/rawChange.tsx b/docs-site/src/examples/ts/rawChange.tsx
index 47dda61ac5..002b9a36c0 100644
--- a/docs-site/src/examples/ts/rawChange.tsx
+++ b/docs-site/src/examples/ts/rawChange.tsx
@@ -1,16 +1,16 @@
 const RawChange = () => {
-  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
 
   const handleChangeRaw = (value: string) => {
     if (value === "tomorrow") {
-      setStartDate(DateFNS.addDays(new Date(), 1));
+      setSelectedDate(DateFNS.addDays(new Date(), 1));
     }
   };
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       placeholderText='Enter "tomorrow"'
       onChangeRaw={(
         event:
diff --git a/docs-site/src/examples/ts/readOnly.tsx b/docs-site/src/examples/ts/readOnly.tsx
index d2299957b0..13128ce4c1 100644
--- a/docs-site/src/examples/ts/readOnly.tsx
+++ b/docs-site/src/examples/ts/readOnly.tsx
@@ -1,10 +1,10 @@
 const ReadOnly = () => {
-  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       placeholderText="This is readOnly"
       readOnly
     />
diff --git a/docs-site/src/examples/ts/renderCustomDay.tsx b/docs-site/src/examples/ts/renderCustomDay.tsx
index fd7c5e9c61..8e79cfca24 100644
--- a/docs-site/src/examples/ts/renderCustomDay.tsx
+++ b/docs-site/src/examples/ts/renderCustomDay.tsx
@@ -1,5 +1,5 @@
 const RenderCustomDay = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   const renderDayContents = (day: number, date: Date): React.ReactNode => {
     const tooltipText = `Tooltip for date: ${date}`;
@@ -9,8 +9,8 @@ const RenderCustomDay = () => {
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       renderDayContents={renderDayContents}
     />
   );
diff --git a/docs-site/src/examples/ts/renderCustomHeader.tsx b/docs-site/src/examples/ts/renderCustomHeader.tsx
index fadff0c442..67cfd6c5ea 100644
--- a/docs-site/src/examples/ts/renderCustomHeader.tsx
+++ b/docs-site/src/examples/ts/renderCustomHeader.tsx
@@ -66,13 +66,13 @@ const CustomHeader = ({
 );
 
 const RenderCustomHeader = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
       renderCustomHeader={CustomHeader}
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
     />
   );
 };
diff --git a/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx b/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx
index ab8ab80562..a15f5bcc84 100644
--- a/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx
+++ b/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx
@@ -47,13 +47,13 @@ const CustomHeader = ({
 );
 
 const RenderCustomHeaderTwoMonths = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
       renderCustomHeader={CustomHeader}
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       monthsShown={2}
     />
   );
diff --git a/docs-site/src/examples/ts/showTime.tsx b/docs-site/src/examples/ts/showTime.tsx
index 41011dad75..349b5a5396 100644
--- a/docs-site/src/examples/ts/showTime.tsx
+++ b/docs-site/src/examples/ts/showTime.tsx
@@ -1,10 +1,12 @@
 const ShowTime = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDateTime, setSelectedDateTime] = useState<Date | null>(
+    new Date(),
+  );
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDateTime}
+      onChange={(date: Date | null) => setSelectedDateTime(date)}
       showTimeSelect
       timeFormat="HH:mm"
       timeIntervals={15}
diff --git a/docs-site/src/examples/ts/showTimeOnly.tsx b/docs-site/src/examples/ts/showTimeOnly.tsx
index a76fa490af..8ee9698865 100644
--- a/docs-site/src/examples/ts/showTimeOnly.tsx
+++ b/docs-site/src/examples/ts/showTimeOnly.tsx
@@ -1,10 +1,12 @@
 const ShowTimeOnly = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDateTime, setSelectedDateTime] = useState<Date | null>(
+    new Date(),
+  );
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDateTime}
+      onChange={(date: Date | null) => setSelectedDateTime(date)}
       showTimeSelect
       showTimeSelectOnly
       timeIntervals={15}
diff --git a/docs-site/src/examples/ts/specificDateRange.tsx b/docs-site/src/examples/ts/specificDateRange.tsx
index 73ffa22b8a..257814ae87 100644
--- a/docs-site/src/examples/ts/specificDateRange.tsx
+++ b/docs-site/src/examples/ts/specificDateRange.tsx
@@ -1,10 +1,10 @@
 const SpecificDateRange = () => {
-  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       minDate={new Date()}
       maxDate={DateFNS.addDays(new Date(), 5)}
       placeholderText="Select a date between today and 5 days in the future"
diff --git a/docs-site/src/examples/ts/strictParsing.tsx b/docs-site/src/examples/ts/strictParsing.tsx
index c594c5377d..6abef57bef 100644
--- a/docs-site/src/examples/ts/strictParsing.tsx
+++ b/docs-site/src/examples/ts/strictParsing.tsx
@@ -1,10 +1,10 @@
 const StrictParsing = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       strictParsing
     />
   );
diff --git a/docs-site/src/examples/ts/tabIndex.tsx b/docs-site/src/examples/ts/tabIndex.tsx
index b7a0aadd1f..10cf294147 100644
--- a/docs-site/src/examples/ts/tabIndex.tsx
+++ b/docs-site/src/examples/ts/tabIndex.tsx
@@ -1,8 +1,12 @@
 const TabIndex = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
-    <DatePicker selected={startDate} onChange={setStartDate} tabIndex={1} />
+    <DatePicker
+      selected={selectedDate}
+      onChange={setSelectedDate}
+      tabIndex={1}
+    />
   );
 };
 
diff --git a/docs-site/src/examples/ts/timeInput.tsx b/docs-site/src/examples/ts/timeInput.tsx
index 22f8daa241..7e797503d7 100644
--- a/docs-site/src/examples/ts/timeInput.tsx
+++ b/docs-site/src/examples/ts/timeInput.tsx
@@ -1,10 +1,10 @@
 const TimeInput = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       timeInputLabel="Time:"
       dateFormat="MM/dd/yyyy h:mm aa"
       showTimeInput
diff --git a/docs-site/src/examples/ts/today.tsx b/docs-site/src/examples/ts/today.tsx
index a1d99a6776..5c3a7c3c49 100644
--- a/docs-site/src/examples/ts/today.tsx
+++ b/docs-site/src/examples/ts/today.tsx
@@ -1,11 +1,11 @@
 const Today = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
       todayButton="Vandaag"
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
     />
   );
 };
diff --git a/docs-site/src/examples/ts/weekNumbers.tsx b/docs-site/src/examples/ts/weekNumbers.tsx
index 707fd90c87..0cb5476372 100644
--- a/docs-site/src/examples/ts/weekNumbers.tsx
+++ b/docs-site/src/examples/ts/weekNumbers.tsx
@@ -1,10 +1,10 @@
 const WeekNumbers = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       locale="en-GB"
       showWeekNumbers
     />
diff --git a/docs-site/src/examples/ts/weekPicker.tsx b/docs-site/src/examples/ts/weekPicker.tsx
index e34dce669b..f1af02ff8a 100644
--- a/docs-site/src/examples/ts/weekPicker.tsx
+++ b/docs-site/src/examples/ts/weekPicker.tsx
@@ -1,12 +1,12 @@
 const WeekPicker = () => {
-  const [startDate, setStartDate] = useState<Date | null>(
+  const [selectedDate, setSelectedDate] = useState<Date | null>(
     new Date("2021/02/22"),
   );
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       dateFormat="I/R"
       locale="en-GB"
       showWeekNumbers
diff --git a/docs-site/src/examples/ts/withPortalById.tsx b/docs-site/src/examples/ts/withPortalById.tsx
index 6228f2c308..bae86588d5 100644
--- a/docs-site/src/examples/ts/withPortalById.tsx
+++ b/docs-site/src/examples/ts/withPortalById.tsx
@@ -1,10 +1,10 @@
 const WithPortalById = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       withPortal
       portalId="root-portal"
     />
diff --git a/docs-site/src/examples/ts/yearDropdown.tsx b/docs-site/src/examples/ts/yearDropdown.tsx
index c04062be77..4989459a64 100644
--- a/docs-site/src/examples/ts/yearDropdown.tsx
+++ b/docs-site/src/examples/ts/yearDropdown.tsx
@@ -1,10 +1,10 @@
 const YearDropdown = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       showYearDropdown
       dateFormatCalendar="MMMM"
       yearDropdownItemNumber={15}
diff --git a/docs-site/src/examples/ts/yearItemNumber.tsx b/docs-site/src/examples/ts/yearItemNumber.tsx
index 344a0a0c5b..3692a69928 100644
--- a/docs-site/src/examples/ts/yearItemNumber.tsx
+++ b/docs-site/src/examples/ts/yearItemNumber.tsx
@@ -1,10 +1,10 @@
 const YearItemNumber = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       showYearPicker
       dateFormat="yyyy"
       yearItemNumber={9}
diff --git a/docs-site/src/examples/ts/yearPicker.tsx b/docs-site/src/examples/ts/yearPicker.tsx
index 25bbc13334..fc8d3cf613 100644
--- a/docs-site/src/examples/ts/yearPicker.tsx
+++ b/docs-site/src/examples/ts/yearPicker.tsx
@@ -1,10 +1,10 @@
 const YearPicker = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       showYearPicker
       dateFormat="yyyy"
     />
diff --git a/docs-site/src/examples/ts/yearSelectDropdown.tsx b/docs-site/src/examples/ts/yearSelectDropdown.tsx
index 2c35d91edc..ddc73013ff 100644
--- a/docs-site/src/examples/ts/yearSelectDropdown.tsx
+++ b/docs-site/src/examples/ts/yearSelectDropdown.tsx
@@ -1,10 +1,10 @@
 const YearSelectDropdown = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       peekNextMonth
       showMonthDropdown
       showYearDropdown

From a5b953d1bca21478ae1e737a337a4734155fc550 Mon Sep 17 00:00:00 2001
From: balajis-qb <balaji.s@qburst.com>
Date: Mon, 15 Sep 2025 16:38:06 +0530
Subject: [PATCH 13/18] restore: Restore the changes made on
 7a954283e359e5b0a2055fe34f017c384e74f1ce

---
 docs-site/src/components/Example/index.tsx    |   3 +-
 .../src/examples/live-provider-globals.d.ts   |   1 +
 .../ts/renderCustomHeaderTwoMonths.tsx        | 104 +++++++++---------
 3 files changed, 57 insertions(+), 51 deletions(-)

diff --git a/docs-site/src/components/Example/index.tsx b/docs-site/src/components/Example/index.tsx
index 5e78d58860..18769279a1 100644
--- a/docs-site/src/components/Example/index.tsx
+++ b/docs-site/src/components/Example/index.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from "react";
+import React, { forwardRef, useMemo, useState } from "react";
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";
 import DatePicker, {
   registerLocale,
@@ -163,6 +163,7 @@ export default class CodeExampleComponent extends React.Component<
               scope={{
                 // NB any globals added here should also be referenced in ../../examples/.eslintrc
                 useState,
+                useMemo,
                 DatePicker,
                 CalendarContainer,
                 DateFNS,
diff --git a/docs-site/src/examples/live-provider-globals.d.ts b/docs-site/src/examples/live-provider-globals.d.ts
index 740a746954..f693f16cf9 100644
--- a/docs-site/src/examples/live-provider-globals.d.ts
+++ b/docs-site/src/examples/live-provider-globals.d.ts
@@ -3,6 +3,7 @@ import * as DateFNS from "date-fns";
 import type { ReactDatePickerCustomHeaderProps as ReactDatePickerCustomHeaderPropsType } from "react-datepicker";
 import type { MiddlewareState as MiddlewareStateType } from "@floating-ui/react";
 declare global {
+  const useMemo: typeof React.useMemo;
   const useState: typeof React.useState;
   const DatePicker: any;
   const CalendarContainer: any;
diff --git a/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx b/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx
index a15f5bcc84..1aa3998802 100644
--- a/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx
+++ b/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx
@@ -1,60 +1,64 @@
-const CustomHeader = ({
-  monthDate,
-  customHeaderCount,
-  decreaseMonth,
-  increaseMonth,
-}: ReactDatePickerCustomHeaderProps) => (
-  <div>
-    <button
-      aria-label="Previous Month"
-      className={
-        "react-datepicker__navigation react-datepicker__navigation--previous"
-      }
-      style={customHeaderCount === 1 ? { visibility: "hidden" } : undefined}
-      onClick={decreaseMonth}
-    >
-      <span
-        className={
-          "react-datepicker__navigation-icon react-datepicker__navigation-icon--previous"
-        }
-      >
-        {"<"}
-      </span>
-    </button>
-    <span className="react-datepicker__current-month">
-      {monthDate.toLocaleString("en-US", {
-        month: "long",
-        year: "numeric",
-      })}
-    </span>
-    <button
-      aria-label="Next Month"
-      className={
-        "react-datepicker__navigation react-datepicker__navigation--next"
-      }
-      style={customHeaderCount === 0 ? { visibility: "hidden" } : undefined}
-      onClick={increaseMonth}
-    >
-      <span
-        className={
-          "react-datepicker__navigation-icon react-datepicker__navigation-icon--next"
-        }
-      >
-        {">"}
-      </span>
-    </button>
-  </div>
-);
-
 const RenderCustomHeaderTwoMonths = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
+  const monthsShown = useMemo(() => 2, []);
 
   return (
     <DatePicker
-      renderCustomHeader={CustomHeader}
+      renderCustomHeader={({
+        monthDate,
+        customHeaderCount,
+        decreaseMonth,
+        increaseMonth,
+      }: ReactDatePickerCustomHeaderProps) => (
+        <div>
+          <button
+            aria-label="Previous Month"
+            className={
+              "react-datepicker__navigation react-datepicker__navigation--previous"
+            }
+            style={
+              customHeaderCount === 1 ? { visibility: "hidden" } : undefined
+            }
+            onClick={decreaseMonth}
+          >
+            <span
+              className={
+                "react-datepicker__navigation-icon react-datepicker__navigation-icon--previous"
+              }
+            >
+              {"<"}
+            </span>
+          </button>
+          <span className="react-datepicker__current-month">
+            {monthDate.toLocaleString("en-US", {
+              month: "long",
+              year: "numeric",
+            })}
+          </span>
+          <button
+            aria-label="Next Month"
+            className={
+              "react-datepicker__navigation react-datepicker__navigation--next"
+            }
+            onClick={increaseMonth}
+            style={{
+              visibility:
+                customHeaderCount === monthsShown - 1 ? "visible" : "hidden",
+            }}
+          >
+            <span
+              className={
+                "react-datepicker__navigation-icon react-datepicker__navigation-icon--next"
+              }
+            >
+              {">"}
+            </span>
+          </button>
+        </div>
+      )}
       selected={selectedDate}
       onChange={(date: Date | null) => setSelectedDate(date)}
-      monthsShown={2}
+      monthsShown={monthsShown}
     />
   );
 };

From 260bbae7d4ce9178e04ec9dc3c73a67cf6d75c95 Mon Sep 17 00:00:00 2001
From: balajis-qb <balaji.s@qburst.com>
Date: Mon, 15 Sep 2025 17:14:59 +0530
Subject: [PATCH 14/18] refactor: remove redundant style condition in
 RenderCustomHeaderTwoMonths example.  Related commit:
 7a954283e359e5b0a2055fe34f017c384e74f1ce

- Eliminated the visibility style condition for the previous navigation button when customHeaderCount is 1, simplifying the component's logic.
- This change enhances code clarity and reduces unnecessary complexity in the example.
---
 docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx b/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx
index 441b4004ef..ec94cc87c4 100644
--- a/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx
+++ b/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx
@@ -16,9 +16,6 @@ const RenderCustomHeaderTwoMonths = () => {
             className={
               "react-datepicker__navigation react-datepicker__navigation--previous"
             }
-            style={
-              customHeaderCount === 1 ? { visibility: "hidden" } : undefined
-            }
             onClick={decreaseMonth}
             style={{
               visibility: customHeaderCount === 0 ? "visible" : "hidden",

From 86e1a41a354ae7277f46a84ddd5672e12091204b Mon Sep 17 00:00:00 2001
From: balajis-qb <balaji.s@qburst.com>
Date: Mon, 15 Sep 2025 17:20:52 +0530
Subject: [PATCH 15/18] refactor: rename state variables in date picker
 examples for consistency.  Related commit 5aa5985

- Updated state variable names from `selectedDate` to `selectedDateTime` across multiple date picker examples.
- This change improves code clarity and maintains consistency in the examples.
---
 docs-site/src/examples/ts/customTimeInput.tsx   | 8 +++++---
 docs-site/src/examples/ts/excludeTimePeriod.tsx | 4 ++--
 docs-site/src/examples/ts/excludeTimes.tsx      | 4 ++--
 docs-site/src/examples/ts/filterTimes.tsx       | 4 ++--
 docs-site/src/examples/ts/hideTimeCaption.tsx   | 6 ++++--
 docs-site/src/examples/ts/includeTimes.tsx      | 4 ++--
 docs-site/src/examples/ts/injectTimes.tsx       | 4 ++--
 docs-site/src/examples/ts/localeWithTime.tsx    | 6 ++++--
 docs-site/src/examples/ts/timeInput.tsx         | 8 +++++---
 9 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/docs-site/src/examples/ts/customTimeInput.tsx b/docs-site/src/examples/ts/customTimeInput.tsx
index 6a98686c60..cb997b7b59 100644
--- a/docs-site/src/examples/ts/customTimeInput.tsx
+++ b/docs-site/src/examples/ts/customTimeInput.tsx
@@ -5,7 +5,9 @@ interface ExampleCustomTimeInputProps {
 }
 
 const CustomTimeInput = () => {
-  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
+  const [selectedDateTime, setSelectedDateTime] = useState<Date | null>(
+    new Date(),
+  );
 
   const ExampleCustomTimeInput = ({
     value,
@@ -23,8 +25,8 @@ const CustomTimeInput = () => {
 
   return (
     <DatePicker
-      selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      selected={selectedDateTime}
+      onChange={(date: Date | null) => setSelectedDateTime(date)}
       showTimeInput
       customTimeInput={<ExampleCustomTimeInput />}
     />
diff --git a/docs-site/src/examples/ts/excludeTimePeriod.tsx b/docs-site/src/examples/ts/excludeTimePeriod.tsx
index 014f449bdb..e00940aeb2 100644
--- a/docs-site/src/examples/ts/excludeTimePeriod.tsx
+++ b/docs-site/src/examples/ts/excludeTimePeriod.tsx
@@ -1,13 +1,13 @@
 const { setHours, setMinutes } = DateFNS;
 
 const ExcludeTimePeriod = () => {
-  const [selectedDate, setSelectedDateTime] = useState<Date | null>(
+  const [selectedDateTime, setSelectedDateTime] = useState<Date | null>(
     setHours(setMinutes(new Date(), 30), 17),
   );
 
   return (
     <DatePicker
-      selected={selectedDate}
+      selected={selectedDateTime}
       onChange={(date: Date | null) => setSelectedDateTime(date)}
       showTimeSelect
       minTime={setHours(setMinutes(new Date(), 0), 17)}
diff --git a/docs-site/src/examples/ts/excludeTimes.tsx b/docs-site/src/examples/ts/excludeTimes.tsx
index 58ddb80ebc..61bbbd75dd 100644
--- a/docs-site/src/examples/ts/excludeTimes.tsx
+++ b/docs-site/src/examples/ts/excludeTimes.tsx
@@ -2,7 +2,7 @@ const { setHours, setMinutes } = DateFNS;
 type TExcludeTimes = Date[];
 
 const ExcludeTimes = () => {
-  const [selectedDate, setSelectedDateTime] = useState<Date | null>(
+  const [selectedDateTime, setSelectedDateTime] = useState<Date | null>(
     setHours(setMinutes(new Date(), 30), 16),
   );
 
@@ -15,7 +15,7 @@ const ExcludeTimes = () => {
 
   return (
     <DatePicker
-      selected={selectedDate}
+      selected={selectedDateTime}
       onChange={(date: Date | null) => setSelectedDateTime(date)}
       showTimeSelect
       excludeTimes={excludeTimes}
diff --git a/docs-site/src/examples/ts/filterTimes.tsx b/docs-site/src/examples/ts/filterTimes.tsx
index 6a9bd96442..d13ab92c6f 100644
--- a/docs-site/src/examples/ts/filterTimes.tsx
+++ b/docs-site/src/examples/ts/filterTimes.tsx
@@ -2,7 +2,7 @@ const { setHours, setMinutes } = DateFNS;
 type TFilterTime = (time: Date) => boolean;
 
 const FilterTimes = () => {
-  const [selectedDate, setSelectedDateTime] = useState<Date | null>(
+  const [selectedDateTime, setSelectedDateTime] = useState<Date | null>(
     setHours(setMinutes(new Date(), 0), 9),
   );
 
@@ -15,7 +15,7 @@ const FilterTimes = () => {
 
   return (
     <DatePicker
-      selected={selectedDate}
+      selected={selectedDateTime}
       onChange={(date: Date | null) => setSelectedDateTime(date)}
       showTimeSelect
       filterTime={filterPassedTime}
diff --git a/docs-site/src/examples/ts/hideTimeCaption.tsx b/docs-site/src/examples/ts/hideTimeCaption.tsx
index 37ff9b4dac..63b06ebbd2 100644
--- a/docs-site/src/examples/ts/hideTimeCaption.tsx
+++ b/docs-site/src/examples/ts/hideTimeCaption.tsx
@@ -1,9 +1,11 @@
 const HideTimeCaption = () => {
-  const [selectedDate, setSelectedDateTime] = useState<Date | null>(new Date());
+  const [selectedDateTime, setSelectedDateTime] = useState<Date | null>(
+    new Date(),
+  );
 
   return (
     <DatePicker
-      selected={selectedDate}
+      selected={selectedDateTime}
       onChange={(date: Date | null) => setSelectedDateTime(date)}
       showTimeSelect
       showTimeSelectOnly
diff --git a/docs-site/src/examples/ts/includeTimes.tsx b/docs-site/src/examples/ts/includeTimes.tsx
index 7b5ae7c17d..7ca1e15074 100644
--- a/docs-site/src/examples/ts/includeTimes.tsx
+++ b/docs-site/src/examples/ts/includeTimes.tsx
@@ -1,7 +1,7 @@
 const { setHours, setMinutes } = DateFNS;
 
 const IncludeTimes = () => {
-  const [selectedDate, setSelectedDateTime] = useState<Date | null>(
+  const [selectedDateTime, setSelectedDateTime] = useState<Date | null>(
     setHours(setMinutes(new Date(), 30), 16),
   );
 
@@ -14,7 +14,7 @@ const IncludeTimes = () => {
 
   return (
     <DatePicker
-      selected={selectedDate}
+      selected={selectedDateTime}
       onChange={(date: Date | null) => setSelectedDateTime(date)}
       showTimeSelect
       includeTimes={includeTimes}
diff --git a/docs-site/src/examples/ts/injectTimes.tsx b/docs-site/src/examples/ts/injectTimes.tsx
index 3ef7dc3ab1..bced85345c 100644
--- a/docs-site/src/examples/ts/injectTimes.tsx
+++ b/docs-site/src/examples/ts/injectTimes.tsx
@@ -1,7 +1,7 @@
 const { setHours, setMinutes, setSeconds } = DateFNS;
 
 const InjectTimes = () => {
-  const [selectedDate, setSelectedDateTime] = useState<Date | null>(
+  const [selectedDateTime, setSelectedDateTime] = useState<Date | null>(
     setHours(setMinutes(new Date(), 30), 16),
   );
 
@@ -13,7 +13,7 @@ const InjectTimes = () => {
 
   return (
     <DatePicker
-      selected={selectedDate}
+      selected={selectedDateTime}
       onChange={(date: Date | null) => setSelectedDateTime(date)}
       showTimeSelect
       timeFormat="HH:mm:ss"
diff --git a/docs-site/src/examples/ts/localeWithTime.tsx b/docs-site/src/examples/ts/localeWithTime.tsx
index 247d541277..3532bfc6a4 100644
--- a/docs-site/src/examples/ts/localeWithTime.tsx
+++ b/docs-site/src/examples/ts/localeWithTime.tsx
@@ -1,9 +1,11 @@
 const LocaleWithTime = () => {
-  const [selectedDate, setSelectedDateTime] = useState<Date | null>(new Date());
+  const [selectedDateTime, setSelectedDateTime] = useState<Date | null>(
+    new Date(),
+  );
 
   return (
     <DatePicker
-      selected={selectedDate}
+      selected={selectedDateTime}
       onChange={(date: Date | null) => setSelectedDateTime(date)}
       locale="pt-BR"
       showTimeSelect
diff --git a/docs-site/src/examples/ts/timeInput.tsx b/docs-site/src/examples/ts/timeInput.tsx
index 7e797503d7..526d8c13da 100644
--- a/docs-site/src/examples/ts/timeInput.tsx
+++ b/docs-site/src/examples/ts/timeInput.tsx
@@ -1,10 +1,12 @@
 const TimeInput = () => {
-  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
+  const [selectedDateTime, setSelectedDateTime] = useState<Date | null>(
+    new Date(),
+  );
 
   return (
     <DatePicker
-      selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      selected={selectedDateTime}
+      onChange={(date: Date | null) => setSelectedDateTime(date)}
       timeInputLabel="Time:"
       dateFormat="MM/dd/yyyy h:mm aa"
       showTimeInput

From e4b27a53a7a8479374774c6b82e8cc8beb2da6f3 Mon Sep 17 00:00:00 2001
From: balajis-qb <balaji.s@qburst.com>
Date: Mon, 15 Sep 2025 17:46:11 +0530
Subject: [PATCH 16/18] fix: remove the wrong destructure of range from DateFNS

---
 docs-site/src/examples/ts/renderCustomHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs-site/src/examples/ts/renderCustomHeader.tsx b/docs-site/src/examples/ts/renderCustomHeader.tsx
index 67cfd6c5ea..42f21576d5 100644
--- a/docs-site/src/examples/ts/renderCustomHeader.tsx
+++ b/docs-site/src/examples/ts/renderCustomHeader.tsx
@@ -1,4 +1,4 @@
-const { getYear, getMonth, range } = DateFNS;
+const { getYear, getMonth } = DateFNS;
 const MONTHS = [
   "January",
   "February",

From 0d2dc051fa3f328d957299ed0fab63d9ff1fec7f Mon Sep 17 00:00:00 2001
From: balajis-qb <balaji.s@qburst.com>
Date: Mon, 15 Sep 2025 17:52:25 +0530
Subject: [PATCH 17/18] chore: remove unused date picker javascript example
 files that got copied unintentionally during the merge with main branch

- Deleted the customRangeSeparator.js and customWeekClassName.js example files as they are no longer needed.
- This cleanup helps maintain a more streamlined and relevant codebase.
---
 .../src/examples/customRangeSeparator.js      | 21 -------------------
 docs-site/src/examples/customWeekClassName.js | 12 -----------
 2 files changed, 33 deletions(-)
 delete mode 100644 docs-site/src/examples/customRangeSeparator.js
 delete mode 100644 docs-site/src/examples/customWeekClassName.js

diff --git a/docs-site/src/examples/customRangeSeparator.js b/docs-site/src/examples/customRangeSeparator.js
deleted file mode 100644
index 808095e2a8..0000000000
--- a/docs-site/src/examples/customRangeSeparator.js
+++ /dev/null
@@ -1,21 +0,0 @@
-() => {
-  const [startDate, setStartDate] = useState(new Date());
-  const [endDate, setEndDate] = useState(addDays(new Date(), 3));
-
-  const onChange = (dates) => {
-    const [start, end] = dates;
-    setStartDate(start);
-    setEndDate(end);
-  };
-
-  return (
-    <DatePicker
-      selected={startDate}
-      onChange={onChange}
-      startDate={startDate}
-      endDate={endDate}
-      selectsRange
-      rangeSeparator=" to "
-    />
-  );
-};
diff --git a/docs-site/src/examples/customWeekClassName.js b/docs-site/src/examples/customWeekClassName.js
deleted file mode 100644
index 1f2fb990e1..0000000000
--- a/docs-site/src/examples/customWeekClassName.js
+++ /dev/null
@@ -1,12 +0,0 @@
-() => {
-  const [selectedDate, setSelectedDate] = useState(new Date());
-  return (
-    <DatePicker
-      selected={selectedDate}
-      onChange={(date) => setSelectedDate(date)}
-      weekClassName={(date) =>
-        getDate(date) % 2 === 0 ? "highlighted" : undefined
-      }
-    />
-  );
-};

From 2b37f40271fce3141deb88018354b2d4cd99642d Mon Sep 17 00:00:00 2001
From: balajis-qb <balaji.s@qburst.com>
Date: Mon, 29 Sep 2025 18:51:36 +0530
Subject: [PATCH 18/18] Restore main repo yarn.lock changes as the branch
 changes are scopped to docs-site/

---
 yarn.lock | 3193 ++++++++++++++++++++++++++++-------------------------
 1 file changed, 1678 insertions(+), 1515 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index f2a42b1c05..71c0bfa50c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5,16 +5,6 @@ __metadata:
   version: 8
   cacheKey: 10c0
 
-"@ampproject/remapping@npm:^2.2.0":
-  version: 2.3.0
-  resolution: "@ampproject/remapping@npm:2.3.0"
-  dependencies:
-    "@jridgewell/gen-mapping": "npm:^0.3.5"
-    "@jridgewell/trace-mapping": "npm:^0.3.24"
-  checksum: 10c0/81d63cca5443e0f0c72ae18b544cc28c7c0ec2cea46e7cb888bb0e0f411a1191d0d6b7af798d54e30777d8d1488b2ec0732aac2be342d3d7d3ffd271c6f489ed
-  languageName: node
-  linkType: hard
-
 "@asamuzakjp/css-color@npm:^3.2.0":
   version: 3.2.0
   resolution: "@asamuzakjp/css-color@npm:3.2.0"
@@ -50,58 +40,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.25.9":
-  version: 7.26.3
-  resolution: "@babel/compat-data@npm:7.26.3"
-  checksum: 10c0/d63e71845c34dfad8d7ff8c15b562e620dbf60e68e3abfa35681d24d612594e8e5ec9790d831a287ecd79ce00f48e7ffddc85c5ce94af7242d45917b9c1a5f90
-  languageName: node
-  linkType: hard
-
-"@babel/compat-data@npm:^7.26.5":
-  version: 7.26.5
-  resolution: "@babel/compat-data@npm:7.26.5"
-  checksum: 10c0/9d2b41f0948c3dfc5de44d9f789d2208c2ea1fd7eb896dfbb297fe955e696728d6f363c600cd211e7f58ccbc2d834fe516bb1e4cf883bbabed8a32b038afc1a0
-  languageName: node
-  linkType: hard
-
-"@babel/compat-data@npm:^7.26.8":
-  version: 7.26.8
-  resolution: "@babel/compat-data@npm:7.26.8"
-  checksum: 10c0/66408a0388c3457fff1c2f6c3a061278dd7b3d2f0455ea29bb7b187fa52c60ae8b4054b3c0a184e21e45f0eaac63cf390737bc7504d1f4a088a6e7f652c068ca
-  languageName: node
-  linkType: hard
-
 "@babel/compat-data@npm:^7.27.2":
-  version: 7.28.4
-  resolution: "@babel/compat-data@npm:7.28.4"
-  checksum: 10c0/9d346471e0a016641df9a325f42ad1e8324bbdc0243ce4af4dd2b10b974128590da9eb179eea2c36647b9bb987343119105e96773c1f6981732cd4f87e5a03b9
+  version: 7.27.2
+  resolution: "@babel/compat-data@npm:7.27.2"
+  checksum: 10c0/077c9e01af3b90decee384a6a44dcf353898e980cee22ec7941f9074655dbbe97ec317345536cdc7ef7391521e1497930c522a3816af473076dd524be7fccd32
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.23.9, @babel/core@npm:^7.26.7":
-  version: 7.26.10
-  resolution: "@babel/core@npm:7.26.10"
-  dependencies:
-    "@ampproject/remapping": "npm:^2.2.0"
-    "@babel/code-frame": "npm:^7.26.2"
-    "@babel/generator": "npm:^7.26.10"
-    "@babel/helper-compilation-targets": "npm:^7.26.5"
-    "@babel/helper-module-transforms": "npm:^7.26.0"
-    "@babel/helpers": "npm:^7.26.10"
-    "@babel/parser": "npm:^7.26.10"
-    "@babel/template": "npm:^7.26.9"
-    "@babel/traverse": "npm:^7.26.10"
-    "@babel/types": "npm:^7.26.10"
-    convert-source-map: "npm:^2.0.0"
-    debug: "npm:^4.1.0"
-    gensync: "npm:^1.0.0-beta.2"
-    json5: "npm:^2.2.3"
-    semver: "npm:^6.3.1"
-  checksum: 10c0/e046e0e988ab53841b512ee9d263ca409f6c46e2a999fe53024688b92db394346fa3aeae5ea0866331f62133982eee05a675d22922a4603c3f603aa09a581d62
+"@babel/compat-data@npm:^7.27.7, @babel/compat-data@npm:^7.28.0":
+  version: 7.28.0
+  resolution: "@babel/compat-data@npm:7.28.0"
+  checksum: 10c0/c4e527302bcd61052423f757355a71c3bc62362bac13f7f130de16e439716f66091ff5bdecda418e8fa0271d4c725f860f0ee23ab7bf6e769f7a8bb16dfcb531
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.27.4, @babel/core@npm:^7.28.0":
+"@babel/core@npm:^7.23.9, @babel/core@npm:^7.26.7, @babel/core@npm:^7.27.4, @babel/core@npm:^7.28.0":
   version: 7.28.4
   resolution: "@babel/core@npm:7.28.4"
   dependencies:
@@ -125,8 +78,8 @@ __metadata:
   linkType: hard
 
 "@babel/eslint-parser@npm:^7.26.5":
-  version: 7.27.0
-  resolution: "@babel/eslint-parser@npm:7.27.0"
+  version: 7.28.4
+  resolution: "@babel/eslint-parser@npm:7.28.4"
   dependencies:
     "@nicolo-ribaudo/eslint-scope-5-internals": "npm:5.1.1-v1"
     eslint-visitor-keys: "npm:^2.1.0"
@@ -134,20 +87,7 @@ __metadata:
   peerDependencies:
     "@babel/core": ^7.11.0
     eslint: ^7.5.0 || ^8.0.0 || ^9.0.0
-  checksum: 10c0/bbecdc3f21413c4f0b21bc0ee93520ed47a61520a40d745f874097d01e6e22bf20a5f992d321656f4ef3ddbc04535a7da7ca6de2e87cecb82bbee0888f996480
-  languageName: node
-  linkType: hard
-
-"@babel/generator@npm:^7.26.10":
-  version: 7.26.10
-  resolution: "@babel/generator@npm:7.26.10"
-  dependencies:
-    "@babel/parser": "npm:^7.26.10"
-    "@babel/types": "npm:^7.26.10"
-    "@jridgewell/gen-mapping": "npm:^0.3.5"
-    "@jridgewell/trace-mapping": "npm:^0.3.25"
-    jsesc: "npm:^3.0.2"
-  checksum: 10c0/88b3b3ea80592fc89349c4e1a145e1386e4042866d2507298adf452bf972f68d13bf699a845e6ab8c028bd52c2247013eb1221b86e1db5c9779faacba9c4b10e
+  checksum: 10c0/a13822d4511bcd55652ee6230a7d9bc9b64ec3af9c6faea6289d818b88525c7c22061118adcbe549ba604919fa3a47b4222e5aaccd4e61d0dc418741364991d1
   languageName: node
   linkType: hard
 
@@ -164,29 +104,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.26.8":
-  version: 7.26.8
-  resolution: "@babel/generator@npm:7.26.8"
-  dependencies:
-    "@babel/parser": "npm:^7.26.8"
-    "@babel/types": "npm:^7.26.8"
-    "@jridgewell/gen-mapping": "npm:^0.3.5"
-    "@jridgewell/trace-mapping": "npm:^0.3.25"
-    jsesc: "npm:^3.0.2"
-  checksum: 10c0/9467f197d285ac315d1fa419138d36a3bfd69ca4baf763e914acab12f5f38e5d231497f6528e80613b28e73bb28c66fcc50b250b1f277b1a4d38ac14b03e9674
-  languageName: node
-  linkType: hard
-
-"@babel/generator@npm:^7.27.0":
-  version: 7.27.0
-  resolution: "@babel/generator@npm:7.27.0"
+"@babel/generator@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/generator@npm:7.27.1"
   dependencies:
-    "@babel/parser": "npm:^7.27.0"
-    "@babel/types": "npm:^7.27.0"
+    "@babel/parser": "npm:^7.27.1"
+    "@babel/types": "npm:^7.27.1"
     "@jridgewell/gen-mapping": "npm:^0.3.5"
     "@jridgewell/trace-mapping": "npm:^0.3.25"
     jsesc: "npm:^3.0.2"
-  checksum: 10c0/7cb10693d2b365c278f109a745dc08856cae139d262748b77b70ce1d97da84627f79648cab6940d847392c0e5d180441669ed958b3aee98d9c7d274b37c553bd
+  checksum: 10c0/c4156434b21818f558ebd93ce45f027c53ee570ce55a84fd2d9ba45a79ad204c17e0bff753c886fb6c07df3385445a9e34dc7ccb070d0ac7e80bb91c8b57f423
   languageName: node
   linkType: hard
 
@@ -212,33 +139,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-compilation-targets@npm:7.25.9"
+"@babel/helper-annotate-as-pure@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-annotate-as-pure@npm:7.27.1"
   dependencies:
-    "@babel/compat-data": "npm:^7.25.9"
-    "@babel/helper-validator-option": "npm:^7.25.9"
-    browserslist: "npm:^4.24.0"
-    lru-cache: "npm:^5.1.1"
-    semver: "npm:^6.3.1"
-  checksum: 10c0/a6b26a1e4222e69ef8e62ee19374308f060b007828bc11c65025ecc9e814aba21ff2175d6d3f8bf53c863edd728ee8f94ba7870f8f90a37d39552ad9933a8aaa
+    "@babel/types": "npm:^7.27.1"
+  checksum: 10c0/fc4751b59c8f5417e1acb0455d6ffce53fa5e79b3aca690299fbbf73b1b65bfaef3d4a18abceb190024c5836bb6cfbc3711e83888648df93df54e18152a1196c
   languageName: node
   linkType: hard
 
-"@babel/helper-compilation-targets@npm:^7.26.5":
-  version: 7.26.5
-  resolution: "@babel/helper-compilation-targets@npm:7.26.5"
+"@babel/helper-annotate-as-pure@npm:^7.27.3":
+  version: 7.27.3
+  resolution: "@babel/helper-annotate-as-pure@npm:7.27.3"
   dependencies:
-    "@babel/compat-data": "npm:^7.26.5"
-    "@babel/helper-validator-option": "npm:^7.25.9"
-    browserslist: "npm:^4.24.0"
-    lru-cache: "npm:^5.1.1"
-    semver: "npm:^6.3.1"
-  checksum: 10c0/9da5c77e5722f1a2fcb3e893049a01d414124522bbf51323bb1a0c9dcd326f15279836450fc36f83c9e8a846f3c40e88be032ed939c5a9840922bed6073edfb4
+    "@babel/types": "npm:^7.27.3"
+  checksum: 10c0/94996ce0a05b7229f956033e6dcd69393db2b0886d0db6aff41e704390402b8cdcca11f61449cb4f86cfd9e61b5ad3a73e4fa661eeed7846b125bd1c33dbc633
   languageName: node
   linkType: hard
 
-"@babel/helper-compilation-targets@npm:^7.27.2":
+"@babel/helper-compilation-targets@npm:^7.27.1, @babel/helper-compilation-targets@npm:^7.27.2":
   version: 7.27.2
   resolution: "@babel/helper-compilation-targets@npm:7.27.2"
   dependencies:
@@ -251,7 +170,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.25.9":
+"@babel/helper-create-class-features-plugin@npm:^7.18.6":
   version: 7.25.9
   resolution: "@babel/helper-create-class-features-plugin@npm:7.25.9"
   dependencies:
@@ -268,24 +187,41 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-create-class-features-plugin@npm:^7.27.0":
-  version: 7.27.0
-  resolution: "@babel/helper-create-class-features-plugin@npm:7.27.0"
+"@babel/helper-create-class-features-plugin@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-create-class-features-plugin@npm:7.27.1"
   dependencies:
-    "@babel/helper-annotate-as-pure": "npm:^7.25.9"
-    "@babel/helper-member-expression-to-functions": "npm:^7.25.9"
-    "@babel/helper-optimise-call-expression": "npm:^7.25.9"
-    "@babel/helper-replace-supers": "npm:^7.26.5"
-    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.25.9"
-    "@babel/traverse": "npm:^7.27.0"
+    "@babel/helper-annotate-as-pure": "npm:^7.27.1"
+    "@babel/helper-member-expression-to-functions": "npm:^7.27.1"
+    "@babel/helper-optimise-call-expression": "npm:^7.27.1"
+    "@babel/helper-replace-supers": "npm:^7.27.1"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.27.1"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10c0/c4945903136d934050e070f69a4d72ec425f1f70634e0ddf14ad36695f935125a6df559f8d5b94cc1ed49abd4ce9c5be8ef3ba033fa8d09c5dd78d1a9b97d8cc
+  checksum: 10c0/4ee199671d6b9bdd4988aa2eea4bdced9a73abfc831d81b00c7634f49a8fc271b3ceda01c067af58018eb720c6151322015d463abea7072a368ee13f35adbb4c
   languageName: node
   linkType: hard
 
-"@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.25.9":
+"@babel/helper-create-class-features-plugin@npm:^7.28.3":
+  version: 7.28.3
+  resolution: "@babel/helper-create-class-features-plugin@npm:7.28.3"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.27.3"
+    "@babel/helper-member-expression-to-functions": "npm:^7.27.1"
+    "@babel/helper-optimise-call-expression": "npm:^7.27.1"
+    "@babel/helper-replace-supers": "npm:^7.27.1"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.28.3"
+    semver: "npm:^6.3.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10c0/f1ace9476d581929128fd4afc29783bb674663898577b2e48ed139cfd2e92dfc69654cff76cb8fd26fece6286f66a99a993186c1e0a3e17b703b352d0bcd1ca4
+  languageName: node
+  linkType: hard
+
+"@babel/helper-create-regexp-features-plugin@npm:^7.18.6":
   version: 7.26.3
   resolution: "@babel/helper-create-regexp-features-plugin@npm:7.26.3"
   dependencies:
@@ -298,18 +234,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-define-polyfill-provider@npm:^0.6.3":
-  version: 0.6.3
-  resolution: "@babel/helper-define-polyfill-provider@npm:0.6.3"
+"@babel/helper-create-regexp-features-plugin@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-create-regexp-features-plugin@npm:7.27.1"
   dependencies:
-    "@babel/helper-compilation-targets": "npm:^7.22.6"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
-    debug: "npm:^4.1.1"
+    "@babel/helper-annotate-as-pure": "npm:^7.27.1"
+    regexpu-core: "npm:^6.2.0"
+    semver: "npm:^6.3.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10c0/591fe8bd3bb39679cc49588889b83bd628d8c4b99c55bafa81e80b1e605a348b64da955e3fd891c4ba3f36fd015367ba2eadea22af6a7de1610fbb5bcc2d3df0
+  languageName: node
+  linkType: hard
+
+"@babel/helper-define-polyfill-provider@npm:^0.6.5":
+  version: 0.6.5
+  resolution: "@babel/helper-define-polyfill-provider@npm:0.6.5"
+  dependencies:
+    "@babel/helper-compilation-targets": "npm:^7.27.2"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    debug: "npm:^4.4.1"
     lodash.debounce: "npm:^4.0.8"
-    resolve: "npm:^1.14.2"
+    resolve: "npm:^1.22.10"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10c0/4320e3527645e98b6a0d5626fef815680e3b2b03ec36045de5e909b0f01546ab3674e96f50bf3bc8413f8c9037e5ee1a5f560ebdf8210426dad1c2c03c96184a
+  checksum: 10c0/4886a068d9ca1e70af395340656a9dda33c50502c67eed39ff6451785f370bdfc6e57095b90cb92678adcd4a111ca60909af53d3a741120719c5604346ae409e
   languageName: node
   linkType: hard
 
@@ -330,7 +279,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.18.6, @babel/helper-module-imports@npm:^7.25.9":
+"@babel/helper-member-expression-to-functions@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-member-expression-to-functions@npm:7.27.1"
+  dependencies:
+    "@babel/traverse": "npm:^7.27.1"
+    "@babel/types": "npm:^7.27.1"
+  checksum: 10c0/5762ad009b6a3d8b0e6e79ff6011b3b8fdda0fefad56cfa8bfbe6aa02d5a8a8a9680a45748fe3ac47e735a03d2d88c0a676e3f9f59f20ae9fadcc8d51ccd5a53
+  languageName: node
+  linkType: hard
+
+"@babel/helper-module-imports@npm:^7.18.6":
   version: 7.25.9
   resolution: "@babel/helper-module-imports@npm:7.25.9"
   dependencies:
@@ -350,16 +309,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-transforms@npm:^7.25.9, @babel/helper-module-transforms@npm:^7.26.0":
-  version: 7.26.0
-  resolution: "@babel/helper-module-transforms@npm:7.26.0"
+"@babel/helper-module-transforms@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-module-transforms@npm:7.27.1"
   dependencies:
-    "@babel/helper-module-imports": "npm:^7.25.9"
-    "@babel/helper-validator-identifier": "npm:^7.25.9"
-    "@babel/traverse": "npm:^7.25.9"
+    "@babel/helper-module-imports": "npm:^7.27.1"
+    "@babel/helper-validator-identifier": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10c0/ee111b68a5933481d76633dad9cdab30c41df4479f0e5e1cc4756dc9447c1afd2c9473b5ba006362e35b17f4ebddd5fca090233bef8dfc84dca9d9127e56ec3a
+  checksum: 10c0/196ab29635fe6eb5ba6ead2972d41b1c0d40f400f99bd8fc109cef21440de24c26c972fabf932585e618694d590379ab8d22def8da65a54459d38ec46112ead7
   languageName: node
   linkType: hard
 
@@ -385,17 +344,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.25.9, @babel/helper-plugin-utils@npm:^7.8.0":
-  version: 7.25.9
-  resolution: "@babel/helper-plugin-utils@npm:7.25.9"
-  checksum: 10c0/483066a1ba36ff16c0116cd24f93de05de746a603a777cd695ac7a1b034928a65a4ecb35f255761ca56626435d7abdb73219eba196f9aa83b6c3c3169325599d
+"@babel/helper-optimise-call-expression@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-optimise-call-expression@npm:7.27.1"
+  dependencies:
+    "@babel/types": "npm:^7.27.1"
+  checksum: 10c0/6b861e7fcf6031b9c9fc2de3cd6c005e94a459d6caf3621d93346b52774925800ca29d4f64595a5ceacf4d161eb0d27649ae385110ed69491d9776686fa488e6
   languageName: node
   linkType: hard
 
-"@babel/helper-plugin-utils@npm:^7.26.5":
-  version: 7.26.5
-  resolution: "@babel/helper-plugin-utils@npm:7.26.5"
-  checksum: 10c0/cdaba71d4b891aa6a8dfbe5bac2f94effb13e5fa4c2c487667fdbaa04eae059b78b28d85a885071f45f7205aeb56d16759e1bed9c118b94b16e4720ef1ab0f65
+"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.25.9, @babel/helper-plugin-utils@npm:^7.8.0":
+  version: 7.25.9
+  resolution: "@babel/helper-plugin-utils@npm:7.25.9"
+  checksum: 10c0/483066a1ba36ff16c0116cd24f93de05de746a603a777cd695ac7a1b034928a65a4ecb35f255761ca56626435d7abdb73219eba196f9aa83b6c3c3169325599d
   languageName: node
   linkType: hard
 
@@ -406,16 +367,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-remap-async-to-generator@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-remap-async-to-generator@npm:7.25.9"
+"@babel/helper-remap-async-to-generator@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-remap-async-to-generator@npm:7.27.1"
   dependencies:
-    "@babel/helper-annotate-as-pure": "npm:^7.25.9"
-    "@babel/helper-wrap-function": "npm:^7.25.9"
-    "@babel/traverse": "npm:^7.25.9"
+    "@babel/helper-annotate-as-pure": "npm:^7.27.1"
+    "@babel/helper-wrap-function": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10c0/6798b562f2788210980f29c5ee96056d90dc73458c88af5bd32f9c82e28e01975588aa2a57bb866c35556bd9b76bac937e824ee63ba472b6430224b91b4879e9
+  checksum: 10c0/5ba6258f4bb57c7c9fa76b55f416b2d18c867b48c1af4f9f2f7cd7cc933fe6da7514811d08ceb4972f1493be46f4b69c40282b811d1397403febae13c2ec57b5
   languageName: node
   linkType: hard
 
@@ -432,16 +393,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-replace-supers@npm:^7.26.5":
-  version: 7.26.5
-  resolution: "@babel/helper-replace-supers@npm:7.26.5"
+"@babel/helper-replace-supers@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-replace-supers@npm:7.27.1"
   dependencies:
-    "@babel/helper-member-expression-to-functions": "npm:^7.25.9"
-    "@babel/helper-optimise-call-expression": "npm:^7.25.9"
-    "@babel/traverse": "npm:^7.26.5"
+    "@babel/helper-member-expression-to-functions": "npm:^7.27.1"
+    "@babel/helper-optimise-call-expression": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10c0/b19b1245caf835207aaaaac3a494f03a16069ae55e76a2e1350b5acd560e6a820026997a8160e8ebab82ae873e8208759aa008eb8422a67a775df41f0a4633d4
+  checksum: 10c0/4f2eaaf5fcc196580221a7ccd0f8873447b5d52745ad4096418f6101a1d2e712e9f93722c9a32bc9769a1dc197e001f60d6f5438d4dfde4b9c6a9e4df719354c
   languageName: node
   linkType: hard
 
@@ -455,6 +416,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-skip-transparent-expression-wrappers@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-skip-transparent-expression-wrappers@npm:7.27.1"
+  dependencies:
+    "@babel/traverse": "npm:^7.27.1"
+    "@babel/types": "npm:^7.27.1"
+  checksum: 10c0/f625013bcdea422c470223a2614e90d2c1cc9d832e97f32ca1b4f82b34bb4aa67c3904cb4b116375d3b5b753acfb3951ed50835a1e832e7225295c7b0c24dff7
+  languageName: node
+  linkType: hard
+
 "@babel/helper-string-parser@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/helper-string-parser@npm:7.25.9"
@@ -483,13 +454,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-validator-option@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-validator-option@npm:7.25.9"
-  checksum: 10c0/27fb195d14c7dcb07f14e58fe77c44eea19a6a40a74472ec05c441478fa0bb49fa1c32b2d64be7a38870ee48ef6601bdebe98d512f0253aea0b39756c4014f3e
-  languageName: node
-  linkType: hard
-
 "@babel/helper-validator-option@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/helper-validator-option@npm:7.27.1"
@@ -497,24 +461,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-wrap-function@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-wrap-function@npm:7.25.9"
+"@babel/helper-wrap-function@npm:^7.27.1":
+  version: 7.28.3
+  resolution: "@babel/helper-wrap-function@npm:7.28.3"
   dependencies:
-    "@babel/template": "npm:^7.25.9"
-    "@babel/traverse": "npm:^7.25.9"
-    "@babel/types": "npm:^7.25.9"
-  checksum: 10c0/b6627d83291e7b80df020f8ee2890c52b8d49272962cac0114ef90f189889c90f1027985873d1b5261a4e986e109b2754292dc112392f0b1fcbfc91cc08bd003
+    "@babel/template": "npm:^7.27.2"
+    "@babel/traverse": "npm:^7.28.3"
+    "@babel/types": "npm:^7.28.2"
+  checksum: 10c0/aecb8a457efd893dc3c6378ab9221d06197573fb2fe64afabe7923e7732607d59b07f4c5603909877d69bea3ee87025f4b1d8e4f0403ae0a07b14e9ce0bf355a
   languageName: node
   linkType: hard
 
-"@babel/helpers@npm:^7.26.10, @babel/helpers@npm:^7.26.7":
-  version: 7.27.0
-  resolution: "@babel/helpers@npm:7.27.0"
+"@babel/helpers@npm:^7.26.7":
+  version: 7.28.2
+  resolution: "@babel/helpers@npm:7.28.2"
   dependencies:
-    "@babel/template": "npm:^7.27.0"
-    "@babel/types": "npm:^7.27.0"
-  checksum: 10c0/a3c64fd2d8b164c041808826cc00769d814074ea447daaacaf2e3714b66d3f4237ef6e420f61d08f463d6608f3468c2ac5124ab7c68f704e20384def5ade95f4
+    "@babel/template": "npm:^7.27.2"
+    "@babel/types": "npm:^7.28.2"
+  checksum: 10c0/f3e7b21517e2699c4ca193663ecfb1bf1b2ae2762d8ba4a9f1786feaca0d6984537fc60bf2206e92c43640a6dada6b438f523cc1ad78610d0151aeb061b37f63
   languageName: node
   linkType: hard
 
@@ -539,51 +503,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.26.10":
-  version: 7.26.10
-  resolution: "@babel/parser@npm:7.26.10"
-  dependencies:
-    "@babel/types": "npm:^7.26.10"
-  bin:
-    parser: ./bin/babel-parser.js
-  checksum: 10c0/c47f5c0f63cd12a663e9dc94a635f9efbb5059d98086a92286d7764357c66bceba18ccbe79333e01e9be3bfb8caba34b3aaebfd8e62c3d5921c8cf907267be75
-  languageName: node
-  linkType: hard
-
-"@babel/parser@npm:^7.26.8":
-  version: 7.26.8
-  resolution: "@babel/parser@npm:7.26.8"
-  dependencies:
-    "@babel/types": "npm:^7.26.8"
-  bin:
-    parser: ./bin/babel-parser.js
-  checksum: 10c0/da04f26bae732a5b6790775a736b58c7876c28e62203c5097f043fd7273ef6debe5bfd7a4e670a6819f4549b215c7b9762c6358e44797b3c4d733defc8290781
-  languageName: node
-  linkType: hard
-
-"@babel/parser@npm:^7.26.9":
-  version: 7.26.9
-  resolution: "@babel/parser@npm:7.26.9"
+"@babel/parser@npm:^7.27.1, @babel/parser@npm:^7.27.2":
+  version: 7.27.2
+  resolution: "@babel/parser@npm:7.27.2"
   dependencies:
-    "@babel/types": "npm:^7.26.9"
+    "@babel/types": "npm:^7.27.1"
   bin:
     parser: ./bin/babel-parser.js
-  checksum: 10c0/4b9ef3c9a0d4c328e5e5544f50fe8932c36f8a2c851e7f14a85401487cd3da75cad72c2e1bcec1eac55599a6bbb2fdc091f274c4fcafa6bdd112d4915ff087fc
+  checksum: 10c0/3c06692768885c2f58207fc8c2cbdb4a44df46b7d93135a083f6eaa49310f7ced490ce76043a2a7606cdcc13f27e3d835e141b692f2f6337a2e7f43c1dbb04b4
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.27.0":
-  version: 7.27.0
-  resolution: "@babel/parser@npm:7.27.0"
+"@babel/parser@npm:^7.28.3":
+  version: 7.28.3
+  resolution: "@babel/parser@npm:7.28.3"
   dependencies:
-    "@babel/types": "npm:^7.27.0"
+    "@babel/types": "npm:^7.28.2"
   bin:
     parser: ./bin/babel-parser.js
-  checksum: 10c0/ba2ed3f41735826546a3ef2a7634a8d10351df221891906e59b29b0a0cd748f9b0e7a6f07576858a9de8e77785aad925c8389ddef146de04ea2842047c9d2859
+  checksum: 10c0/1f41eb82623b0ca0f94521b57f4790c6c457cd922b8e2597985b36bdec24114a9ccf54640286a760ceb60f11fe9102d192bf60477aee77f5d45f1029b9b72729
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.27.2, @babel/parser@npm:^7.28.3, @babel/parser@npm:^7.28.4":
+"@babel/parser@npm:^7.28.4":
   version: 7.28.4
   resolution: "@babel/parser@npm:7.28.4"
   dependencies:
@@ -594,73 +536,73 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.25.9"
+"@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/traverse": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10c0/7aab47fcbb8c1ddc195a3cd66609edcad54c5022f018db7de40185f0182950389690e953e952f117a1737b72f665ff02ad30de6c02b49b97f1d8f4ccdffedc34
+  checksum: 10c0/7dfffa978ae1cd179641a7c4b4ad688c6828c2c58ec96b118c2fb10bc3715223de6b88bff1ebff67056bb5fccc568ae773e3b83c592a1b843423319f80c99ebd
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-safari-class-field-initializer-scope@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-bugfix-safari-class-field-initializer-scope@npm:7.25.9"
+"@babel/plugin-bugfix-safari-class-field-initializer-scope@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-bugfix-safari-class-field-initializer-scope@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10c0/3a652b3574ca62775c5f101f8457950edc540c3581226579125da535d67765f41ad7f0e6327f8efeb2540a5dad5bb0c60a89fb934af3f67472e73fb63612d004
+  checksum: 10c0/2cd7a55a856e5e59bbd9484247c092a41e0d9f966778e7019da324d9e0928892d26afc4fbb2ac3d76a3c5a631cd3cf0d72dd2653b44f634f6c663b9e6f80aacd
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.25.9"
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10c0/18fc9004104a150f9f5da9f3307f361bc3104d16778bb593b7523d5110f04a8df19a2587e6bdd5e726fb1d397191add45223f4f731bb556c33f14f2779d596e8
+  checksum: 10c0/cf29835498c4a25bd470908528919729a0799b2ec94e89004929a5532c94a5e4b1a49bc5d6673a22e5afe05d08465873e14ee3b28c42eb3db489cdf5ca47c680
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.25.9"
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.25.9"
-    "@babel/plugin-transform-optional-chaining": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.13.0
-  checksum: 10c0/3f6c8781a2f7aa1791a31d2242399ca884df2ab944f90c020b6f112fb19f05fa6dad5be143d274dad1377e40415b63d24d5489faf5060b9c4a99e55d8f0c317c
+  checksum: 10c0/eddcd056f76e198868cbff883eb148acfade8f0890973ab545295df0c08e39573a72e65372bcc0b0bfadba1b043fe1aea6b0907d0b4889453ac154c404194ebc
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.25.9"
+"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.28.3":
+  version: 7.28.3
+  resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.28.3"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/traverse": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.28.3"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10c0/02b365f0cc4df8b8b811c68697c93476da387841e5f153fe42766f34241b685503ea51110d5ed6df7132759820b93e48d9fa3743cffc091eed97c19f7e5fe272
+  checksum: 10c0/3cdc27c4e08a632a58e62c6017369401976edf1cd9ae73fd9f0d6770ddd9accf40b494db15b66bab8db2a8d5dc5bab5ca8c65b19b81fdca955cd8cbbe24daadb
   languageName: node
   linkType: hard
 
 "@babel/plugin-external-helpers@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-external-helpers@npm:7.25.9"
+  version: 7.27.1
+  resolution: "@babel/plugin-external-helpers@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/014056bde9242e8152fab567005dd9d9d184176dab2577db6a4210a82e33274761e2e16f3f84fb8ed1bd5b362069e2e78700521dfe81098ae14aeda31c7439ba
+  checksum: 10c0/e4373b71acadc227b4fbcfad43b499cd0ca26d92995a3131acf8d714a3c0b54919ee4027c0ca2ff4557e74dc6771d9e0f11df5814e9397a81739096e0d02630b
   languageName: node
   linkType: hard
 
@@ -729,18 +671,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-import-assertions@npm:^7.26.0":
-  version: 7.26.0
-  resolution: "@babel/plugin-syntax-import-assertions@npm:7.26.0"
+"@babel/plugin-syntax-import-assertions@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-syntax-import-assertions@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/525b174e60b210d96c1744c1575fc2ddedcc43a479cba64a5344cf77bd0541754fc58120b5a11ff832ba098437bb05aa80900d1f49bb3d888c5e349a4a3a356e
+  checksum: 10c0/06a954ee672f7a7c44d52b6e55598da43a7064e80df219765c51c37a0692641277e90411028f7cae4f4d1dedeed084f0c453576fa421c35a81f1603c5e3e0146
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-import-attributes@npm:^7.24.7, @babel/plugin-syntax-import-attributes@npm:^7.26.0":
+"@babel/plugin-syntax-import-attributes@npm:^7.24.7":
   version: 7.26.0
   resolution: "@babel/plugin-syntax-import-attributes@npm:7.26.0"
   dependencies:
@@ -751,6 +693,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-syntax-import-attributes@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-syntax-import-attributes@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/e66f7a761b8360419bbb93ab67d87c8a97465ef4637a985ff682ce7ba6918b34b29d81190204cf908d0933058ee7b42737423cd8a999546c21b3aabad4affa9a
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-syntax-import-meta@npm:^7.10.4":
   version: 7.10.4
   resolution: "@babel/plugin-syntax-import-meta@npm:7.10.4"
@@ -773,17 +726,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-jsx@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-syntax-jsx@npm:7.25.9"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/d56597aff4df39d3decda50193b6dfbe596ca53f437ff2934622ce19a743bf7f43492d3fb3308b0289f5cee2b825d99ceb56526a2b9e7b68bf04901546c5618c
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-syntax-jsx@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-syntax-jsx@npm:7.27.1"
@@ -883,17 +825,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-typescript@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-syntax-typescript@npm:7.25.9"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/5192ebe11bd46aea68b7a60fd9555465c59af7e279e71126788e59121b86e00b505816685ab4782abe159232b0f73854e804b54449820b0d950b397ee158caa2
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-syntax-typescript@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-syntax-typescript@npm:7.27.1"
@@ -917,733 +848,748 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-arrow-functions@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-arrow-functions@npm:7.25.9"
+"@babel/plugin-transform-arrow-functions@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-arrow-functions@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/851fef9f58be60a80f46cc0ce1e46a6f7346a6f9d50fa9e0fa79d46ec205320069d0cc157db213e2bea88ef5b7d9bd7618bb83f0b1996a836e2426c3a3a1f622
+  checksum: 10c0/19abd7a7d11eef58c9340408a4c2594503f6c4eaea1baa7b0e5fbdda89df097e50663edb3448ad2300170b39efca98a75e5767af05cad3b0facb4944326896a3
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-generator-functions@npm:^7.26.8":
-  version: 7.26.8
-  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.26.8"
+"@babel/plugin-transform-async-generator-functions@npm:^7.28.0":
+  version: 7.28.0
+  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.28.0"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.26.5"
-    "@babel/helper-remap-async-to-generator": "npm:^7.25.9"
-    "@babel/traverse": "npm:^7.26.8"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-remap-async-to-generator": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.28.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/f6fefce963fe2e6268dde1958975d7adbce65fba94ca6f4bc554c90da03104ad1dd2e66d03bc0462da46868498428646e30b03a218ef0e5a84bfc87a7e375cec
+  checksum: 10c0/739d577e649d7d7b9845dc309e132964327ab3eaea43ad04d04a7dcb977c63f9aa9a423d1ca39baf10939128d02f52e6fda39c834fb9f1753785b1497e72c4dc
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-to-generator@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-async-to-generator@npm:7.25.9"
+"@babel/plugin-transform-async-to-generator@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-async-to-generator@npm:7.27.1"
   dependencies:
-    "@babel/helper-module-imports": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/helper-remap-async-to-generator": "npm:^7.25.9"
+    "@babel/helper-module-imports": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-remap-async-to-generator": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/c443d9e462ddef733ae56360064f32fc800105803d892e4ff32d7d6a6922b3765fa97b9ddc9f7f1d3f9d8c2d95721d85bef9dbf507804214c6cf6466b105c168
+  checksum: 10c0/e76b1f6f9c3bbf72e17d7639406d47f09481806de4db99a8de375a0bb40957ea309b20aa705f0c25ab1d7c845e3f365af67eafa368034521151a0e352a03ef2f
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoped-functions@npm:^7.26.5":
-  version: 7.26.5
-  resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.26.5"
+"@babel/plugin-transform-block-scoped-functions@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.26.5"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/2f3060800ead46b09971dd7bf830d66383b7bc61ced9945633b4ef9bf87787956ea83fcf49b387cecb377812588c6b81681714c760f9cf89ecba45edcbab1192
+  checksum: 10c0/3313130ba3bf0699baad0e60da1c8c3c2f0c2c0a7039cd0063e54e72e739c33f1baadfc9d8c73b3fea8c85dd7250c3964fb09c8e1fa62ba0b24a9fefe0a8dbde
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoping@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-block-scoping@npm:7.25.9"
+"@babel/plugin-transform-block-scoping@npm:^7.28.0":
+  version: 7.28.0
+  resolution: "@babel/plugin-transform-block-scoping@npm:7.28.0"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/a76e30becb6c75b4d87a2cd53556fddb7c88ddd56bfadb965287fd944810ac159aa8eb5705366fc37336041f63154ed9fab3862fb10482a45bf5ede63fd55fda
+  checksum: 10c0/787d85e72a92917e735aa54e23062fa777031f8a07046e67f5026eff3d91e64eb535575dd1df917b0011bee014ae51287478af14c1d4ba60bc81e326bc044cfc
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-properties@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-class-properties@npm:7.25.9"
+"@babel/plugin-transform-class-properties@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-class-properties@npm:7.27.1"
   dependencies:
-    "@babel/helper-create-class-features-plugin": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-create-class-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/f0603b6bd34d8ba62c03fc0572cb8bbc75874d097ac20cc7c5379e001081210a84dba1749e7123fca43b978382f605bb9973c99caf2c5b4c492d5c0a4a441150
+  checksum: 10c0/cc0662633c0fe6df95819fef223506ddf26c369c8d64ab21a728d9007ec866bf9436a253909819216c24a82186b6ccbc1ec94d7aaf3f82df227c7c02fa6a704b
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-static-block@npm:^7.26.0":
-  version: 7.26.0
-  resolution: "@babel/plugin-transform-class-static-block@npm:7.26.0"
+"@babel/plugin-transform-class-static-block@npm:^7.28.3":
+  version: 7.28.3
+  resolution: "@babel/plugin-transform-class-static-block@npm:7.28.3"
   dependencies:
-    "@babel/helper-create-class-features-plugin": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-create-class-features-plugin": "npm:^7.28.3"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.12.0
-  checksum: 10c0/cdcf5545ae6514ed75fbd73cccfa209c6a5dfdf0c2bb7bb62c0fb4ec334a32281bcf1bc16ace494d9dbe93feb8bdc0bd3cf9d9ccb6316e634a67056fa13b741b
+  checksum: 10c0/8c922a64f6f5b359f7515c89ef0037bad583b4484dfebc1f6bc1cf13462547aaceb19788827c57ec9a2d62495f34c4b471ca636bf61af00fdaea5e9642c82b60
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-classes@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-classes@npm:7.25.9"
+"@babel/plugin-transform-classes@npm:^7.28.3":
+  version: 7.28.3
+  resolution: "@babel/plugin-transform-classes@npm:7.28.3"
   dependencies:
-    "@babel/helper-annotate-as-pure": "npm:^7.25.9"
-    "@babel/helper-compilation-targets": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/helper-replace-supers": "npm:^7.25.9"
-    "@babel/traverse": "npm:^7.25.9"
-    globals: "npm:^11.1.0"
+    "@babel/helper-annotate-as-pure": "npm:^7.27.3"
+    "@babel/helper-compilation-targets": "npm:^7.27.2"
+    "@babel/helper-globals": "npm:^7.28.0"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-replace-supers": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.28.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/02742ea7cd25be286c982e672619effca528d7a931626a6f3d6cea11852951b7ee973276127eaf6418ac0e18c4d749a16b520709c707e86a67012bd23ff2927d
+  checksum: 10c0/01b6122a127c28ee42a41eacf7da14417901898a29b722c40fbf9d3db0755461f3b5a82c091496c47fe328d4e22f2266966654dc84749296f9cfabf8a4ad9e0c
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-computed-properties@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-computed-properties@npm:7.25.9"
+"@babel/plugin-transform-computed-properties@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-computed-properties@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/template": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/template": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/948c0ae3ce0ba2375241d122a9bc7cda4a7ac8110bd8a62cd804bc46a5fdb7a7a42c7799c4cd972e14e0a579d2bd0999b92e53177b73f240bb0d4b09972c758b
+  checksum: 10c0/e09a12f8c8ae0e6a6144c102956947b4ec05f6c844169121d0ec4529c2d30ad1dc59fee67736193b87a402f44552c888a519a680a31853bdb4d34788c28af3b0
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-destructuring@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-destructuring@npm:7.25.9"
+"@babel/plugin-transform-destructuring@npm:^7.28.0":
+  version: 7.28.0
+  resolution: "@babel/plugin-transform-destructuring@npm:7.28.0"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.28.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/7beec5fda665d108f69d5023aa7c298a1e566b973dd41290faa18aeea70f6f571295c1ece0a058f3ceb6c6c96de76de7cd34f5a227fbf09a1b8d8a735d28ca49
+  checksum: 10c0/cc7ccafa952b3ff7888544d5688cfafaba78c69ce1e2f04f3233f4f78c9de5e46e9695f5ea42c085b0c0cfa39b10f366d362a2be245b6d35b66d3eb1d427ccb2
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-dotall-regex@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-dotall-regex@npm:7.25.9"
+"@babel/plugin-transform-dotall-regex@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-dotall-regex@npm:7.27.1"
   dependencies:
-    "@babel/helper-create-regexp-features-plugin": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/7c3471ae5cf7521fd8da5b03e137e8d3733fc5ee4524ce01fb0c812f0bb77cb2c9657bc8a6253186be3a15bb4caa8974993c7ddc067f554ecc6a026f0a3b5e12
+  checksum: 10c0/f9caddfad9a551b4dabe0dcb7c040f458fbaaa7bbb44200c20198b32c8259be8e050e58d2c853fdac901a4cfe490b86aa857036d8d461b192dd010d0e242dedb
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-duplicate-keys@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-duplicate-keys@npm:7.25.9"
+"@babel/plugin-transform-duplicate-keys@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-duplicate-keys@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/d0c74894b9bf6ff2a04189afffb9cd43d87ebd7b7943e51a827c92d2aaa40fa89ac81565a2fd6fbeabf9e38413a9264c45862eee2b017f1d49046cc3c8ff06b4
+  checksum: 10c0/22a822e5342b7066f83eaedc4fd9bb044ac6bc68725484690b33ba04a7104980e43ea3229de439286cb8db8e7db4a865733a3f05123ab58a10f189f03553746f
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-duplicate-named-capturing-groups-regex@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-duplicate-named-capturing-groups-regex@npm:7.25.9"
+"@babel/plugin-transform-duplicate-named-capturing-groups-regex@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-duplicate-named-capturing-groups-regex@npm:7.27.1"
   dependencies:
-    "@babel/helper-create-regexp-features-plugin": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10c0/a8039a6d2b90e011c7b30975edee47b5b1097cf3c2f95ec1f5ddd029898d783a995f55f7d6eb8d6bb8873c060fb64f9f1ccba938dfe22d118d09cf68e0cd3bf6
+  checksum: 10c0/121502a252b3206913e1e990a47fea34397b4cbf7804d4cd872d45961bc45b603423f60ca87f3a3023a62528f5feb475ac1c9ec76096899ec182fcb135eba375
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-dynamic-import@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-dynamic-import@npm:7.25.9"
+"@babel/plugin-transform-dynamic-import@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-dynamic-import@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/5e643a8209072b668350f5788f23c64e9124f81f958b595c80fecca6561086d8ef346c04391b9e5e4cad8b8cbe22c258f0cd5f4ea89b97e74438e7d1abfd98cf
+  checksum: 10c0/8dcd3087aca134b064fc361d2cc34eec1f900f6be039b6368104afcef10bb75dea726bb18cabd046716b89b0edaa771f50189fa16bc5c5914a38cbcf166350f7
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-exponentiation-operator@npm:^7.26.3":
-  version: 7.26.3
-  resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.26.3"
+"@babel/plugin-transform-explicit-resource-management@npm:^7.28.0":
+  version: 7.28.0
+  resolution: "@babel/plugin-transform-explicit-resource-management@npm:7.28.0"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/plugin-transform-destructuring": "npm:^7.28.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/cac922e851c6a0831fdd2e3663564966916015aeff7f4485825fc33879cbc3a313ceb859814c9200248e2875d65bb13802a723e5d7d7b40a2e90da82a5a1e15c
+  checksum: 10c0/3baa706af3112adf2ae0c7ec0dc61b63dd02695eb5582f3c3a2b2d05399c6aa7756f55e7bbbd5412e613a6ba1dd6b6736904074b4d7ebd6b45a1e3f9145e4094
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-export-namespace-from@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-export-namespace-from@npm:7.25.9"
+"@babel/plugin-transform-exponentiation-operator@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/f291ea2ec5f36de9028a00cbd5b32f08af281b8183bf047200ff001f4cb260be56f156b2449f42149448a4a033bd6e86a3a7f06d0c2825532eb0ae6b03058dfb
+  checksum: 10c0/953d21e01fed76da8e08fb5094cade7bf8927c1bb79301916bec2db0593b41dbcfbca1024ad5db886b72208a93ada8f57a219525aad048cf15814eeb65cf760d
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-for-of@npm:^7.26.9":
-  version: 7.26.9
-  resolution: "@babel/plugin-transform-for-of@npm:7.26.9"
+"@babel/plugin-transform-export-namespace-from@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-export-namespace-from@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.26.5"
-    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/e28a521521cf9f84ddd69ca8da7c89fb9f7aa38e4dea35742fe973e4e1d7c23f9cee1a4861a2fdd9e9f18ff945886a44d7335cea1c603b96bfcb1c7c8791ef09
+  checksum: 10c0/d7165cad11f571a54c8d9263d6c6bf2b817aff4874f747cb51e6e49efb32f2c9b37a6850cdb5e3b81e0b638141bb77dc782a6ec1a94128859fbdf7767581e07c
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-function-name@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-function-name@npm:7.25.9"
+"@babel/plugin-transform-for-of@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-for-of@npm:7.27.1"
   dependencies:
-    "@babel/helper-compilation-targets": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/traverse": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/8e67fbd1dd367927b8b6afdf0a6e7cb3a3fd70766c52f700ca77428b6d536f6c9d7ec643e7762d64b23093233765c66bffa40e31aabe6492682879bcb45423e1
+  checksum: 10c0/4635763173a23aae24480681f2b0996b4f54a0cb2368880301a1801638242e263132d1e8adbe112ab272913d1d900ee0d6f7dea79443aef9d3325168cd88b3fb
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-json-strings@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-json-strings@npm:7.25.9"
+"@babel/plugin-transform-function-name@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-function-name@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-compilation-targets": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/00bc2d4751dfc9d44ab725be16ee534de13cfd7e77dfb386e5dac9e48101ce8fcbc5971df919dc25b3f8a0fa85d6dc5f2a0c3cf7ec9d61c163d9823c091844f0
+  checksum: 10c0/5abdc7b5945fbd807269dcc6e76e52b69235056023b0b35d311e8f5dfd6c09d9f225839798998fc3b663f50cf701457ddb76517025a0d7a5474f3fe56e567a4c
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-literals@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-literals@npm:7.25.9"
+"@babel/plugin-transform-json-strings@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-json-strings@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/00b14e9c14cf1e871c1f3781bf6334cac339c360404afd6aba63d2f6aca9270854d59a2b40abff1c4c90d4ffdca614440842d3043316c2f0ceb155fdf7726b3b
+  checksum: 10c0/2379714aca025516452a7c1afa1ca42a22b9b51a5050a653cc6198a51665ab82bdecf36106d32d731512706a1e373c5637f5ff635737319aa42f3827da2326d6
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-logical-assignment-operators@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.25.9"
+"@babel/plugin-transform-literals@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-literals@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/6e2051e10b2d6452980fc4bdef9da17c0d6ca48f81b8529e8804b031950e4fff7c74a7eb3de4a2b6ad22ffb631d0b67005425d232cce6e2b29ce861c78ed04f5
+  checksum: 10c0/c40dc3eb2f45a92ee476412314a40e471af51a0f51a24e91b85cef5fc59f4fe06758088f541643f07f949d2c67ee7bdce10e11c5ec56791ae09b15c3b451eeca
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-member-expression-literals@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-member-expression-literals@npm:7.25.9"
+"@babel/plugin-transform-logical-assignment-operators@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/91d17b451bcc5ea9f1c6f8264144057ade3338d4b92c0b248366e4db3a7790a28fd59cc56ac433a9627a9087a17a5684e53f4995dd6ae92831cb72f1bd540b54
+  checksum: 10c0/5b0abc7c0d09d562bf555c646dce63a30288e5db46fd2ce809a61d064415da6efc3b2b3c59b8e4fe98accd072c89a2f7c3765b400e4bf488651735d314d9feeb
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-amd@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-modules-amd@npm:7.25.9"
+"@babel/plugin-transform-member-expression-literals@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-member-expression-literals@npm:7.27.1"
   dependencies:
-    "@babel/helper-module-transforms": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/849957d9484d0a2d93331226ed6cf840cee7d57454549534c447c93f8b839ef8553eae9877f8f550e3c39f14d60992f91244b2e8e7502a46064b56c5d68ba855
+  checksum: 10c0/0874ccebbd1c6a155e5f6b3b29729fade1221b73152567c1af1e1a7c12848004dffecbd7eded6dc463955120040ae57c17cb586b53fb5a7a27fcd88177034c30
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-commonjs@npm:^7.26.3":
-  version: 7.26.3
-  resolution: "@babel/plugin-transform-modules-commonjs@npm:7.26.3"
+"@babel/plugin-transform-modules-amd@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-modules-amd@npm:7.27.1"
   dependencies:
-    "@babel/helper-module-transforms": "npm:^7.26.0"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-module-transforms": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/82e59708f19f36da29531a64a7a94eabbf6ff46a615e0f5d9b49f3f59e8ef10e2bac607d749091508d3fa655146c9e5647c3ffeca781060cdabedb4c7a33c6f2
+  checksum: 10c0/76e86cd278b6a3c5b8cca8dfb3428e9cd0c81a5df7096e04c783c506696b916a9561386d610a9d846ef64804640e0bd818ea47455fed0ee89b7f66c555b29537
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-systemjs@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.25.9"
+"@babel/plugin-transform-modules-commonjs@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-modules-commonjs@npm:7.27.1"
   dependencies:
-    "@babel/helper-module-transforms": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/helper-validator-identifier": "npm:^7.25.9"
-    "@babel/traverse": "npm:^7.25.9"
+    "@babel/helper-module-transforms": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/8299e3437542129c2684b86f98408c690df27db4122a79edded4782cf04e755d6ecb05b1e812c81a34224a81e664303392d5f3c36f3d2d51fdc99bb91c881e9a
+  checksum: 10c0/4def972dcd23375a266ea1189115a4ff61744b2c9366fc1de648b3fab2c650faf1a94092de93a33ff18858d2e6c4dddeeee5384cb42ba0129baeab01a5cdf1e2
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-umd@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-modules-umd@npm:7.25.9"
+"@babel/plugin-transform-modules-systemjs@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.27.1"
   dependencies:
-    "@babel/helper-module-transforms": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-module-transforms": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-validator-identifier": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/fa11a621f023e2ac437b71d5582f819e667c94306f022583d77da9a8f772c4128861a32bbb63bef5cba581a70cd7dbe87a37238edaafcfacf889470c395e7076
+  checksum: 10c0/f16fca62d144d9cbf558e7b5f83e13bb6d0f21fdeff3024b0cecd42ffdec0b4151461da42bd0963512783ece31aafa5ffe03446b4869220ddd095b24d414e2b5
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-named-capturing-groups-regex@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-named-capturing-groups-regex@npm:7.25.9"
+"@babel/plugin-transform-modules-umd@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-modules-umd@npm:7.27.1"
   dependencies:
-    "@babel/helper-create-regexp-features-plugin": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-module-transforms": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/e5962a8874889da2ab1aa32eb93ec21d419c7423c766e4befb39b4bb512b9ad44b47837b6cd1c8f1065445cbbcc6dc2be10298ac6e734e5ca1059fc23698daed
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-named-capturing-groups-regex@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-named-capturing-groups-regex@npm:7.27.1"
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10c0/32b14fda5c885d1706863f8af2ee6c703d39264355b57482d3a24fce7f6afbd4c7a0896e501c0806ed2b0759beb621bf7f3f7de1fbbc82026039a98d961e78ef
+  checksum: 10c0/8eaa8c9aee00a00f3bd8bd8b561d3f569644d98cb2cfe3026d7398aabf9b29afd62f24f142b4112fa1f572d9b0e1928291b099cde59f56d6b59f4d565e58abf2
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-new-target@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-new-target@npm:7.25.9"
+"@babel/plugin-transform-new-target@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-new-target@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/7b5f1b7998f1cf183a7fa646346e2f3742e5805b609f28ad5fee22d666a15010f3e398b7e1ab78cddb7901841a3d3f47135929af23d54e8bf4ce69b72051f71e
+  checksum: 10c0/9b0581412fcc5ab1b9a2d86a0c5407bd959391f0a1e77a46953fef9f7a57f3f4020d75f71098c5f9e5dcc680a87f9fd99b3205ab12e25ef8c19eed038c1e4b28
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.26.6":
-  version: 7.26.6
-  resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.26.6"
+"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.26.5"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/574d6db7cbc5c092db5d1dece8ce26195e642b9c40dbfeaf3082058a78ad7959c1c333471cdd45f38b784ec488850548075d527b178c5010ee9bff7aa527cc7a
+  checksum: 10c0/a435fc03aaa65c6ef8e99b2d61af0994eb5cdd4a28562d78c3b0b0228ca7e501aa255e1dff091a6996d7d3ea808eb5a65fd50ecd28dfb10687a8a1095dcadc7a
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-numeric-separator@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-numeric-separator@npm:7.25.9"
+"@babel/plugin-transform-numeric-separator@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-numeric-separator@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/ad63ad341977844b6f9535fcca15ca0d6d6ad112ed9cc509d4f6b75e9bf4b1b1a96a0bcb1986421a601505d34025373608b5f76d420d924b4e21f86b1a1f2749
+  checksum: 10c0/b72cbebbfe46fcf319504edc1cf59f3f41c992dd6840db766367f6a1d232cd2c52143c5eaf57e0316710bee251cae94be97c6d646b5022fcd9274ccb131b470c
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-object-rest-spread@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-object-rest-spread@npm:7.25.9"
+"@babel/plugin-transform-object-rest-spread@npm:^7.28.0":
+  version: 7.28.0
+  resolution: "@babel/plugin-transform-object-rest-spread@npm:7.28.0"
   dependencies:
-    "@babel/helper-compilation-targets": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/plugin-transform-parameters": "npm:^7.25.9"
+    "@babel/helper-compilation-targets": "npm:^7.27.2"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/plugin-transform-destructuring": "npm:^7.28.0"
+    "@babel/plugin-transform-parameters": "npm:^7.27.7"
+    "@babel/traverse": "npm:^7.28.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/02077d8abd83bf6a48ff0b59e98d7561407cf75b591cffd3fdc5dc5e9a13dec1c847a7a690983762a3afecddb244831e897e0515c293e7c653b262c30cd614af
+  checksum: 10c0/360dc6fd5285ee5e1d3be8a1fb0decd120b2a1726800317b4ab48b7c91616247030239b7fa06ceaa1a8a586fde1e143c24d45f8d41956876099d97d664f8ef1e
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-object-super@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-object-super@npm:7.25.9"
+"@babel/plugin-transform-object-super@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-object-super@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/helper-replace-supers": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-replace-supers": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/0348d00e76f1f15ada44481a76e8c923d24cba91f6e49ee9b30d6861eb75344e7f84d62a18df8a6f9e9a7eacf992f388174b7f9cc4ce48287bcefca268c07600
+  checksum: 10c0/efa2d092ef55105deb06d30aff4e460c57779b94861188128489b72378bf1f0ab0f06a4a4d68b9ae2a59a79719fbb2d148b9a3dca19ceff9c73b1f1a95e0527c
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-catch-binding@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.25.9"
+"@babel/plugin-transform-optional-catch-binding@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/722fd5ee12ab905309d4e84421584fce4b6d9e6b639b06afb20b23fa809e6ab251e908a8d5e8b14d066a28186b8ef8f58d69fd6eca9ce1b9ef7af08333378f6c
+  checksum: 10c0/807a4330f1fac08e2682d57bc82e714868fc651c8876f9a8b3a3fd8f53c129e87371f8243e712ac7dae11e090b737a2219a02fe1b6459a29e664fa073c3277bb
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-chaining@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-optional-chaining@npm:7.25.9"
+"@babel/plugin-transform-optional-chaining@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-optional-chaining@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/041ad2beae5affb8e68a0bcb6882a2dadb758db3c629a0e012f57488ab43a822ac1ea17a29db8ef36560a28262a5dfa4dbbbf06ed6e431db55abe024b7cd3961
+  checksum: 10c0/5b18ff5124e503f0a25d6b195be7351a028b3992d6f2a91fb4037e2a2c386400d66bc1df8f6df0a94c708524f318729e81a95c41906e5a7919a06a43e573a525
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-parameters@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-parameters@npm:7.25.9"
+"@babel/plugin-transform-parameters@npm:^7.27.7":
+  version: 7.27.7
+  resolution: "@babel/plugin-transform-parameters@npm:7.27.7"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/aecb446754b9e09d6b6fa95fd09e7cf682f8aaeed1d972874ba24c0a30a7e803ad5f014bb1fffc7bfeed22f93c0d200947407894ea59bf7687816f2f464f8df3
+  checksum: 10c0/f2da3804e047d9f1cfb27be6c014e2c7f6cf5e1e38290d1cb3cb2607859e3d6facb4ee8c8c1e336e9fbb440091a174ce95ce156582d7e8bf9c0e735d11681f0f
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-private-methods@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-private-methods@npm:7.25.9"
+"@babel/plugin-transform-private-methods@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-private-methods@npm:7.27.1"
   dependencies:
-    "@babel/helper-create-class-features-plugin": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-create-class-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/64bd71de93d39daefa3e6c878d6f2fd238ed7d4ecfb13b0e771ddbbc131487def3ceb405b62b534a5cbb5043046b504e1b189b0a45229cc75af979a9fbcaa7bd
+  checksum: 10c0/232bedfe9d28df215fb03cc7623bdde468b1246bdd6dc24465ff4bf9cc5f5a256ae33daea1fafa6cc59705e4d29da9024bb79baccaa5cd92811ac5db9b9244f2
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-private-property-in-object@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-private-property-in-object@npm:7.25.9"
+"@babel/plugin-transform-private-property-in-object@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-private-property-in-object@npm:7.27.1"
   dependencies:
-    "@babel/helper-annotate-as-pure": "npm:^7.25.9"
-    "@babel/helper-create-class-features-plugin": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-annotate-as-pure": "npm:^7.27.1"
+    "@babel/helper-create-class-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/d4965de19d9f204e692cc74dbc39f0bb469e5f29df96dd4457ea23c5e5596fba9d5af76eaa96f9d48a9fc20ec5f12a94c679285e36b8373406868ea228109e27
+  checksum: 10c0/a8c4536273ca716dcc98e74ea25ca76431528554922f184392be3ddaf1761d4aa0e06f1311577755bd1613f7054fb51d29de2ada1130f743d329170a1aa1fe56
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-property-literals@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-property-literals@npm:7.25.9"
+"@babel/plugin-transform-property-literals@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-property-literals@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/1639e35b2438ccf3107af760d34e6a8e4f9acdd3ae6186ae771a6e3029bd59dfe778e502d67090f1185ecda5c16addfed77561e39c518a3f51ff10d41790e106
+  checksum: 10c0/15713a87edd6db620d6e66eb551b4fbfff5b8232c460c7c76cedf98efdc5cd21080c97040231e19e06594c6d7dfa66e1ab3d0951e29d5814fb25e813f6d6209c
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-display-name@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-react-display-name@npm:7.25.9"
+"@babel/plugin-transform-react-display-name@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-react-display-name@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/63a0f962d64e71baf87c212755419e25c637d2d95ea6fdc067df26b91e606ae186442ae815b99a577eca9bf5404d9577ecad218a3cf42d0e9e286ca7b003a992
+  checksum: 10c0/6cd474b5fb30a2255027d8fc19975aee1c1da54dd8bc8b79802676096182ca4136302ce65a24fbb277f8fe30f266006bbf327ef6be2846d3681eb57509744125
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx-development@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-react-jsx-development@npm:7.25.9"
+"@babel/plugin-transform-react-jsx-development@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-react-jsx-development@npm:7.27.1"
   dependencies:
-    "@babel/plugin-transform-react-jsx": "npm:^7.25.9"
+    "@babel/plugin-transform-react-jsx": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/c0b92ff9eb029620abf320ff74aae182cea87524723d740fb48a4373d0d16bddf5edbe1116e7ba341332a5337e55c2ceaee8b8cad5549e78af7f4b3cfe77debb
+  checksum: 10c0/eb8c4b6a79dc5c49b41e928e2037e1ee0bbfa722e4fd74c0b7c0d11103c82c2c25c434000e1b051d534c7261ab5c92b6d1e85313bf1b26e37db3f051ae217b58
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-react-jsx@npm:7.25.9"
+"@babel/plugin-transform-react-jsx@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-react-jsx@npm:7.27.1"
   dependencies:
-    "@babel/helper-annotate-as-pure": "npm:^7.25.9"
-    "@babel/helper-module-imports": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/plugin-syntax-jsx": "npm:^7.25.9"
-    "@babel/types": "npm:^7.25.9"
+    "@babel/helper-annotate-as-pure": "npm:^7.27.1"
+    "@babel/helper-module-imports": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/plugin-syntax-jsx": "npm:^7.27.1"
+    "@babel/types": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/5c9947e8ed141f7606f54da3e05eea1074950c5b8354c39df69cb7f43cb5a83c6c9d7973b24bc3d89341c8611f8ad50830a98ab10d117d850e6bdd8febdce221
+  checksum: 10c0/1a08637c39fc78c9760dd4a3ed363fdbc762994bf83ed7872ad5bda0232fcd0fc557332f2ce36b522c0226dfd9cc8faac6b88eddda535f24825198a689e571af
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-pure-annotations@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.25.9"
+"@babel/plugin-transform-react-pure-annotations@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.27.1"
   dependencies:
-    "@babel/helper-annotate-as-pure": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-annotate-as-pure": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/7c8eac04644ad19dcd71bb8e949b0ae22b9e548fa4a58e545d3d0342f647fb89db7f8789a7c5b8074d478ce6d3d581eaf47dd4b36027e16fd68211c383839abc
+  checksum: 10c0/34bc090f4a7e460d82a851971b4d0f32e4bb519bafb927154f4174506283fe02b0f471fc20655c6050a8bf7b748bfa31c7e8f7d688849476d8266623554fbb28
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-regenerator@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-regenerator@npm:7.25.9"
+"@babel/plugin-transform-regenerator@npm:^7.28.3":
+  version: 7.28.3
+  resolution: "@babel/plugin-transform-regenerator@npm:7.28.3"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    regenerator-transform: "npm:^0.15.2"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/eef3ffc19f7d291b863635f32b896ad7f87806d9219a0d3404a470219abcfc5b43aabecd691026c48e875b965760d9c16abee25e6447272233f30cd07f453ec7
+  checksum: 10c0/57443c680251f86aa75c15b02b9a741df2b76bcad8eb53b9941bc09b50d50108f108e1243effe99113892f07880d2d201e932677dce0b701aefb356ce7188be9
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-regexp-modifiers@npm:^7.26.0":
-  version: 7.26.0
-  resolution: "@babel/plugin-transform-regexp-modifiers@npm:7.26.0"
+"@babel/plugin-transform-regexp-modifiers@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-regexp-modifiers@npm:7.27.1"
   dependencies:
-    "@babel/helper-create-regexp-features-plugin": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10c0/4abc1db6c964efafc7a927cda814c7275275afa4b530483e0936fd614de23cb5802f7ca43edaa402008a723d4e7eac282b6f5283aa2eeb3b27da6d6c1dd7f8ed
+  checksum: 10c0/31ae596ab56751cf43468a6c0a9d6bc3521d306d2bee9c6957cdb64bea53812ce24bd13a32f766150d62b737bca5b0650b2c62db379382fff0dccbf076055c33
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-reserved-words@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-reserved-words@npm:7.25.9"
+"@babel/plugin-transform-reserved-words@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-reserved-words@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/8b028b80d1983e3e02f74e21924323cc66ba930e5c5758909a122aa7d80e341b8b0f42e1698e42b50d47a6ba911332f584200b28e1a4e2104b7514d9dc011e96
+  checksum: 10c0/e1a87691cce21a644a474d7c9a8107d4486c062957be32042d40f0a3d0cc66e00a3150989655019c255ff020d2640ac16aaf544792717d586f219f3bad295567
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-shorthand-properties@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-shorthand-properties@npm:7.25.9"
+"@babel/plugin-transform-shorthand-properties@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-shorthand-properties@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/05a20d45f0fb62567644c507ccd4e379c1a74dacf887d2b2cac70247415e3f6d7d3bf4850c8b336053144715fedb6200fc38f7130c4b76c94eec9b9c0c2a8e9b
+  checksum: 10c0/bd5544b89520a22c41a6df5ddac9039821d3334c0ef364d18b0ba9674c5071c223bcc98be5867dc3865cb10796882b7594e2c40dedaff38e1b1273913fe353e1
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-spread@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-spread@npm:7.25.9"
+"@babel/plugin-transform-spread@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-spread@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/996c8fed238efc30e0664f9f58bd7ec8c148f4659f84425f68923a094fe891245711d26eb10d1f815f50c124434e076e860dbe9662240844d1b77cd09907dcdf
+  checksum: 10c0/b34fc58b33bd35b47d67416655c2cbc8578fbb3948b4592bc15eb6d8b4046986e25c06e3b9929460fa4ab08e9653582415e7ef8b87d265e1239251bdf5a4c162
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-sticky-regex@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-sticky-regex@npm:7.25.9"
+"@babel/plugin-transform-sticky-regex@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-sticky-regex@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/e9612b0615dab4c4fba1c560769616a9bd7b9226c73191ef84b6c3ee185c8b719b4f887cdd8336a0a13400ce606ab4a0d33bc8fa6b4fcdb53e2896d07f2568f6
+  checksum: 10c0/5698df2d924f0b1b7bdb7ef370e83f99ed3f0964eb3b9c27d774d021bee7f6d45f9a73e2be369d90b4aff1603ce29827f8743f091789960e7669daf9c3cda850
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-template-literals@npm:^7.26.8":
-  version: 7.26.8
-  resolution: "@babel/plugin-transform-template-literals@npm:7.26.8"
+"@babel/plugin-transform-template-literals@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-template-literals@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.26.5"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/205a938ded9554857a604416d369023a961334b6c20943bd861b45f0e5dbbeca1cf6fda1c2049126e38a0d18865993433fdc78eae3028e94836b3b643c08ba0d
+  checksum: 10c0/c90f403e42ef062b60654d1c122c70f3ec6f00c2f304b0931ebe6d0b432498ef8a5ef9266ddf00debc535f8390842207e44d3900eff1d2bab0cc1a700f03e083
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-typeof-symbol@npm:^7.26.7":
-  version: 7.26.7
-  resolution: "@babel/plugin-transform-typeof-symbol@npm:7.26.7"
+"@babel/plugin-transform-typeof-symbol@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-typeof-symbol@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.26.5"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/d5640e3457637e6eee1d7205d255602ccca124ed30e4de10ec75ba179d167e0a826ceeab424e119921f5c995dfddf39ef1f2c91efd2dcbf3f0dc1e7931dfd1d1
+  checksum: 10c0/a13c68015311fefa06a51830bc69d5badd06c881b13d5cf9ba04bf7c73e3fc6311cc889e18d9645ce2a64a79456dc9c7be88476c0b6802f62a686cb6f662ecd6
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-typescript@npm:^7.27.0":
-  version: 7.27.0
-  resolution: "@babel/plugin-transform-typescript@npm:7.27.0"
+"@babel/plugin-transform-typescript@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-typescript@npm:7.27.1"
   dependencies:
-    "@babel/helper-annotate-as-pure": "npm:^7.25.9"
-    "@babel/helper-create-class-features-plugin": "npm:^7.27.0"
-    "@babel/helper-plugin-utils": "npm:^7.26.5"
-    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.25.9"
-    "@babel/plugin-syntax-typescript": "npm:^7.25.9"
+    "@babel/helper-annotate-as-pure": "npm:^7.27.1"
+    "@babel/helper-create-class-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
+    "@babel/plugin-syntax-typescript": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/028e75dd6195495dc2d105ca8ded19d62aef90a215d597451cee57c35325960a87963913aa9a21b8ade190c638b588422292ea7e23b21565baf53c469254dbd4
+  checksum: 10c0/48f1db5de17a0f9fc365ff4fb046010aedc7aad813a7aa42fb73fcdab6442f9e700dde2cc0481086e01b0dae662ae4d3e965a52cde154f0f146d243a8ac68e93
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-escapes@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-unicode-escapes@npm:7.25.9"
+"@babel/plugin-transform-unicode-escapes@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-unicode-escapes@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/615c84d7c53e1575d54ba9257e753e0b98c5de1e3225237d92f55226eaab8eb5bceb74df43f50f4aa162b0bbcc934ed11feafe2b60b8ec4934ce340fad4b8828
+  checksum: 10c0/a6809e0ca69d77ee9804e0c1164e8a2dea5e40718f6dcf234aeddf7292e7414f7ee331d87f17eb6f160823a329d1d6751bd49b35b392ac4a6efc032e4d3038d8
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-property-regex@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.25.9"
+"@babel/plugin-transform-unicode-property-regex@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.27.1"
   dependencies:
-    "@babel/helper-create-regexp-features-plugin": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/1685836fc38af4344c3d2a9edbd46f7c7b28d369b63967d5b83f2f6849ec45b97223461cea3d14cc3f0be6ebb284938e637a5ca3955c0e79c873d62f593d615c
+  checksum: 10c0/a332bc3cb3eeea67c47502bc52d13a0f8abae5a7bfcb08b93a8300ddaff8d9e1238f912969494c1b494c1898c6f19687054440706700b6d12cb0b90d88beb4d0
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-regex@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-unicode-regex@npm:7.25.9"
+"@babel/plugin-transform-unicode-regex@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-unicode-regex@npm:7.27.1"
   dependencies:
-    "@babel/helper-create-regexp-features-plugin": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/448004f978279e726af26acd54f63f9002c9e2582ecd70d1c5c4436f6de490fcd817afb60016d11c52f5ef17dbaac2590e8cc7bfaf4e91b58c452cf188c7920f
+  checksum: 10c0/6abda1bcffb79feba6f5c691859cdbe984cc96481ea65d5af5ba97c2e843154005f0886e25006a37a2d213c0243506a06eaeafd93a040dbe1f79539016a0d17a
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-sets-regex@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.25.9"
+"@babel/plugin-transform-unicode-sets-regex@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.27.1"
   dependencies:
-    "@babel/helper-create-regexp-features-plugin": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10c0/56ee04fbe236b77cbcd6035cbf0be7566d1386b8349154ac33244c25f61170c47153a9423cd1d92855f7d6447b53a4a653d9e8fd1eaeeee14feb4b2baf59bd9f
+  checksum: 10c0/236645f4d0a1fba7c18dc8ffe3975933af93e478f2665650c2d91cf528cfa1587cde5cfe277e0e501fc03b5bf57638369575d6539cef478632fb93bd7d7d7178
   languageName: node
   linkType: hard
 
 "@babel/preset-env@npm:^7.26.7":
-  version: 7.26.9
-  resolution: "@babel/preset-env@npm:7.26.9"
-  dependencies:
-    "@babel/compat-data": "npm:^7.26.8"
-    "@babel/helper-compilation-targets": "npm:^7.26.5"
-    "@babel/helper-plugin-utils": "npm:^7.26.5"
-    "@babel/helper-validator-option": "npm:^7.25.9"
-    "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "npm:^7.25.9"
-    "@babel/plugin-bugfix-safari-class-field-initializer-scope": "npm:^7.25.9"
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.25.9"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.25.9"
-    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.25.9"
+  version: 7.28.3
+  resolution: "@babel/preset-env@npm:7.28.3"
+  dependencies:
+    "@babel/compat-data": "npm:^7.28.0"
+    "@babel/helper-compilation-targets": "npm:^7.27.2"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-validator-option": "npm:^7.27.1"
+    "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "npm:^7.27.1"
+    "@babel/plugin-bugfix-safari-class-field-initializer-scope": "npm:^7.27.1"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.27.1"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.27.1"
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.28.3"
     "@babel/plugin-proposal-private-property-in-object": "npm:7.21.0-placeholder-for-preset-env.2"
-    "@babel/plugin-syntax-import-assertions": "npm:^7.26.0"
-    "@babel/plugin-syntax-import-attributes": "npm:^7.26.0"
+    "@babel/plugin-syntax-import-assertions": "npm:^7.27.1"
+    "@babel/plugin-syntax-import-attributes": "npm:^7.27.1"
     "@babel/plugin-syntax-unicode-sets-regex": "npm:^7.18.6"
-    "@babel/plugin-transform-arrow-functions": "npm:^7.25.9"
-    "@babel/plugin-transform-async-generator-functions": "npm:^7.26.8"
-    "@babel/plugin-transform-async-to-generator": "npm:^7.25.9"
-    "@babel/plugin-transform-block-scoped-functions": "npm:^7.26.5"
-    "@babel/plugin-transform-block-scoping": "npm:^7.25.9"
-    "@babel/plugin-transform-class-properties": "npm:^7.25.9"
-    "@babel/plugin-transform-class-static-block": "npm:^7.26.0"
-    "@babel/plugin-transform-classes": "npm:^7.25.9"
-    "@babel/plugin-transform-computed-properties": "npm:^7.25.9"
-    "@babel/plugin-transform-destructuring": "npm:^7.25.9"
-    "@babel/plugin-transform-dotall-regex": "npm:^7.25.9"
-    "@babel/plugin-transform-duplicate-keys": "npm:^7.25.9"
-    "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "npm:^7.25.9"
-    "@babel/plugin-transform-dynamic-import": "npm:^7.25.9"
-    "@babel/plugin-transform-exponentiation-operator": "npm:^7.26.3"
-    "@babel/plugin-transform-export-namespace-from": "npm:^7.25.9"
-    "@babel/plugin-transform-for-of": "npm:^7.26.9"
-    "@babel/plugin-transform-function-name": "npm:^7.25.9"
-    "@babel/plugin-transform-json-strings": "npm:^7.25.9"
-    "@babel/plugin-transform-literals": "npm:^7.25.9"
-    "@babel/plugin-transform-logical-assignment-operators": "npm:^7.25.9"
-    "@babel/plugin-transform-member-expression-literals": "npm:^7.25.9"
-    "@babel/plugin-transform-modules-amd": "npm:^7.25.9"
-    "@babel/plugin-transform-modules-commonjs": "npm:^7.26.3"
-    "@babel/plugin-transform-modules-systemjs": "npm:^7.25.9"
-    "@babel/plugin-transform-modules-umd": "npm:^7.25.9"
-    "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.25.9"
-    "@babel/plugin-transform-new-target": "npm:^7.25.9"
-    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.26.6"
-    "@babel/plugin-transform-numeric-separator": "npm:^7.25.9"
-    "@babel/plugin-transform-object-rest-spread": "npm:^7.25.9"
-    "@babel/plugin-transform-object-super": "npm:^7.25.9"
-    "@babel/plugin-transform-optional-catch-binding": "npm:^7.25.9"
-    "@babel/plugin-transform-optional-chaining": "npm:^7.25.9"
-    "@babel/plugin-transform-parameters": "npm:^7.25.9"
-    "@babel/plugin-transform-private-methods": "npm:^7.25.9"
-    "@babel/plugin-transform-private-property-in-object": "npm:^7.25.9"
-    "@babel/plugin-transform-property-literals": "npm:^7.25.9"
-    "@babel/plugin-transform-regenerator": "npm:^7.25.9"
-    "@babel/plugin-transform-regexp-modifiers": "npm:^7.26.0"
-    "@babel/plugin-transform-reserved-words": "npm:^7.25.9"
-    "@babel/plugin-transform-shorthand-properties": "npm:^7.25.9"
-    "@babel/plugin-transform-spread": "npm:^7.25.9"
-    "@babel/plugin-transform-sticky-regex": "npm:^7.25.9"
-    "@babel/plugin-transform-template-literals": "npm:^7.26.8"
-    "@babel/plugin-transform-typeof-symbol": "npm:^7.26.7"
-    "@babel/plugin-transform-unicode-escapes": "npm:^7.25.9"
-    "@babel/plugin-transform-unicode-property-regex": "npm:^7.25.9"
-    "@babel/plugin-transform-unicode-regex": "npm:^7.25.9"
-    "@babel/plugin-transform-unicode-sets-regex": "npm:^7.25.9"
+    "@babel/plugin-transform-arrow-functions": "npm:^7.27.1"
+    "@babel/plugin-transform-async-generator-functions": "npm:^7.28.0"
+    "@babel/plugin-transform-async-to-generator": "npm:^7.27.1"
+    "@babel/plugin-transform-block-scoped-functions": "npm:^7.27.1"
+    "@babel/plugin-transform-block-scoping": "npm:^7.28.0"
+    "@babel/plugin-transform-class-properties": "npm:^7.27.1"
+    "@babel/plugin-transform-class-static-block": "npm:^7.28.3"
+    "@babel/plugin-transform-classes": "npm:^7.28.3"
+    "@babel/plugin-transform-computed-properties": "npm:^7.27.1"
+    "@babel/plugin-transform-destructuring": "npm:^7.28.0"
+    "@babel/plugin-transform-dotall-regex": "npm:^7.27.1"
+    "@babel/plugin-transform-duplicate-keys": "npm:^7.27.1"
+    "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "npm:^7.27.1"
+    "@babel/plugin-transform-dynamic-import": "npm:^7.27.1"
+    "@babel/plugin-transform-explicit-resource-management": "npm:^7.28.0"
+    "@babel/plugin-transform-exponentiation-operator": "npm:^7.27.1"
+    "@babel/plugin-transform-export-namespace-from": "npm:^7.27.1"
+    "@babel/plugin-transform-for-of": "npm:^7.27.1"
+    "@babel/plugin-transform-function-name": "npm:^7.27.1"
+    "@babel/plugin-transform-json-strings": "npm:^7.27.1"
+    "@babel/plugin-transform-literals": "npm:^7.27.1"
+    "@babel/plugin-transform-logical-assignment-operators": "npm:^7.27.1"
+    "@babel/plugin-transform-member-expression-literals": "npm:^7.27.1"
+    "@babel/plugin-transform-modules-amd": "npm:^7.27.1"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.27.1"
+    "@babel/plugin-transform-modules-systemjs": "npm:^7.27.1"
+    "@babel/plugin-transform-modules-umd": "npm:^7.27.1"
+    "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.27.1"
+    "@babel/plugin-transform-new-target": "npm:^7.27.1"
+    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.27.1"
+    "@babel/plugin-transform-numeric-separator": "npm:^7.27.1"
+    "@babel/plugin-transform-object-rest-spread": "npm:^7.28.0"
+    "@babel/plugin-transform-object-super": "npm:^7.27.1"
+    "@babel/plugin-transform-optional-catch-binding": "npm:^7.27.1"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.27.1"
+    "@babel/plugin-transform-parameters": "npm:^7.27.7"
+    "@babel/plugin-transform-private-methods": "npm:^7.27.1"
+    "@babel/plugin-transform-private-property-in-object": "npm:^7.27.1"
+    "@babel/plugin-transform-property-literals": "npm:^7.27.1"
+    "@babel/plugin-transform-regenerator": "npm:^7.28.3"
+    "@babel/plugin-transform-regexp-modifiers": "npm:^7.27.1"
+    "@babel/plugin-transform-reserved-words": "npm:^7.27.1"
+    "@babel/plugin-transform-shorthand-properties": "npm:^7.27.1"
+    "@babel/plugin-transform-spread": "npm:^7.27.1"
+    "@babel/plugin-transform-sticky-regex": "npm:^7.27.1"
+    "@babel/plugin-transform-template-literals": "npm:^7.27.1"
+    "@babel/plugin-transform-typeof-symbol": "npm:^7.27.1"
+    "@babel/plugin-transform-unicode-escapes": "npm:^7.27.1"
+    "@babel/plugin-transform-unicode-property-regex": "npm:^7.27.1"
+    "@babel/plugin-transform-unicode-regex": "npm:^7.27.1"
+    "@babel/plugin-transform-unicode-sets-regex": "npm:^7.27.1"
     "@babel/preset-modules": "npm:0.1.6-no-external-plugins"
-    babel-plugin-polyfill-corejs2: "npm:^0.4.10"
-    babel-plugin-polyfill-corejs3: "npm:^0.11.0"
-    babel-plugin-polyfill-regenerator: "npm:^0.6.1"
-    core-js-compat: "npm:^3.40.0"
+    babel-plugin-polyfill-corejs2: "npm:^0.4.14"
+    babel-plugin-polyfill-corejs3: "npm:^0.13.0"
+    babel-plugin-polyfill-regenerator: "npm:^0.6.5"
+    core-js-compat: "npm:^3.43.0"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/6812ca76bd38165a58fe8354bab5e7204e1aa17d8b9270bd8f8babb08cc7fa94cd29525fe41b553f2ba0e84033d566f10da26012b8ee0f81897005c5225d0051
+  checksum: 10c0/f7320cb062abf62de132ea2901135476938d32a896e03f5b7b3d543de08016053f6abbdaaf921d18fa43a0b76537dfd5ce8ee5dc647249b2057b8c6bf1289305
   languageName: node
   linkType: hard
 
@@ -1661,90 +1607,57 @@ __metadata:
   linkType: hard
 
 "@babel/preset-react@npm:^7.26.3":
-  version: 7.26.3
-  resolution: "@babel/preset-react@npm:7.26.3"
+  version: 7.27.1
+  resolution: "@babel/preset-react@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/helper-validator-option": "npm:^7.25.9"
-    "@babel/plugin-transform-react-display-name": "npm:^7.25.9"
-    "@babel/plugin-transform-react-jsx": "npm:^7.25.9"
-    "@babel/plugin-transform-react-jsx-development": "npm:^7.25.9"
-    "@babel/plugin-transform-react-pure-annotations": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-validator-option": "npm:^7.27.1"
+    "@babel/plugin-transform-react-display-name": "npm:^7.27.1"
+    "@babel/plugin-transform-react-jsx": "npm:^7.27.1"
+    "@babel/plugin-transform-react-jsx-development": "npm:^7.27.1"
+    "@babel/plugin-transform-react-pure-annotations": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/b470dcba11032ef6c832066f4af5c75052eaed49feb0f445227231ef1b5c42aacd6e216988c0bd469fd5728cd27b6b059ca307c9ecaa80c6bb5da4bf1c833e12
+  checksum: 10c0/a80b02ef08b026cb9830d6512d08c7cd378eef4c0631dacba4aa1106240d9bb76af6373463f0255f4bbdbfcce40375a61e92735375906ba5871629b0c314bc45
   languageName: node
   linkType: hard
 
 "@babel/preset-typescript@npm:^7.26.0":
-  version: 7.27.0
-  resolution: "@babel/preset-typescript@npm:7.27.0"
+  version: 7.27.1
+  resolution: "@babel/preset-typescript@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.26.5"
-    "@babel/helper-validator-option": "npm:^7.25.9"
-    "@babel/plugin-syntax-jsx": "npm:^7.25.9"
-    "@babel/plugin-transform-modules-commonjs": "npm:^7.26.3"
-    "@babel/plugin-transform-typescript": "npm:^7.27.0"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-validator-option": "npm:^7.27.1"
+    "@babel/plugin-syntax-jsx": "npm:^7.27.1"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.27.1"
+    "@babel/plugin-transform-typescript": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/986b20edab3c18727d911a6e1a14095c1271afc6cc625b02f42b371f06c1e041e5d7c1baf2afe8b0029b60788a06f02fd6844dedfe54183b148ab9a7429438a9
+  checksum: 10c0/cba6ca793d915f8aff9fe2f13b0dfbf5fd3f2e9a17f17478ec9878e9af0d206dcfe93154b9fd353727f16c1dca7c7a3ceb4943f8d28b216235f106bc0fbbcaa3
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.8, @babel/runtime@npm:^7.8.4":
+"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.8":
   version: 7.26.0
   resolution: "@babel/runtime@npm:7.26.0"
   dependencies:
     regenerator-runtime: "npm:^0.14.0"
-  checksum: 10c0/12c01357e0345f89f4f7e8c0e81921f2a3e3e101f06e8eaa18a382b517376520cd2fa8c237726eb094dab25532855df28a7baaf1c26342b52782f6936b07c287
-  languageName: node
-  linkType: hard
-
-"@babel/template@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/template@npm:7.25.9"
-  dependencies:
-    "@babel/code-frame": "npm:^7.25.9"
-    "@babel/parser": "npm:^7.25.9"
-    "@babel/types": "npm:^7.25.9"
-  checksum: 10c0/ebe677273f96a36c92cc15b7aa7b11cc8bc8a3bb7a01d55b2125baca8f19cae94ff3ce15f1b1880fb8437f3a690d9f89d4e91f16fc1dc4d3eb66226d128983ab
-  languageName: node
-  linkType: hard
-
-"@babel/template@npm:^7.26.8":
-  version: 7.26.8
-  resolution: "@babel/template@npm:7.26.8"
-  dependencies:
-    "@babel/code-frame": "npm:^7.26.2"
-    "@babel/parser": "npm:^7.26.8"
-    "@babel/types": "npm:^7.26.8"
-  checksum: 10c0/90bc1085cbc090cbdd43af7b9dbb98e6bda96e55e0f565f17ebb8e97c2dfce866dc727ca02b8e08bd2662ba4fd3851907ba3c48618162c291221af17fb258213
-  languageName: node
-  linkType: hard
-
-"@babel/template@npm:^7.26.9":
-  version: 7.26.9
-  resolution: "@babel/template@npm:7.26.9"
-  dependencies:
-    "@babel/code-frame": "npm:^7.26.2"
-    "@babel/parser": "npm:^7.26.9"
-    "@babel/types": "npm:^7.26.9"
-  checksum: 10c0/019b1c4129cc01ad63e17529089c2c559c74709d225f595eee017af227fee11ae8a97a6ab19ae6768b8aa22d8d75dcb60a00b28f52e9fa78140672d928bc1ae9
+  checksum: 10c0/12c01357e0345f89f4f7e8c0e81921f2a3e3e101f06e8eaa18a382b517376520cd2fa8c237726eb094dab25532855df28a7baaf1c26342b52782f6936b07c287
   languageName: node
   linkType: hard
 
-"@babel/template@npm:^7.27.0":
-  version: 7.27.0
-  resolution: "@babel/template@npm:7.27.0"
+"@babel/template@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/template@npm:7.25.9"
   dependencies:
-    "@babel/code-frame": "npm:^7.26.2"
-    "@babel/parser": "npm:^7.27.0"
-    "@babel/types": "npm:^7.27.0"
-  checksum: 10c0/13af543756127edb5f62bf121f9b093c09a2b6fe108373887ccffc701465cfbcb17e07cf48aa7f440415b263f6ec006e9415c79dfc2e8e6010b069435f81f340
+    "@babel/code-frame": "npm:^7.25.9"
+    "@babel/parser": "npm:^7.25.9"
+    "@babel/types": "npm:^7.25.9"
+  checksum: 10c0/ebe677273f96a36c92cc15b7aa7b11cc8bc8a3bb7a01d55b2125baca8f19cae94ff3ce15f1b1880fb8437f3a690d9f89d4e91f16fc1dc4d3eb66226d128983ab
   languageName: node
   linkType: hard
 
-"@babel/template@npm:^7.27.2":
+"@babel/template@npm:^7.27.1, @babel/template@npm:^7.27.2":
   version: 7.27.2
   resolution: "@babel/template@npm:7.27.2"
   dependencies:
@@ -1770,52 +1683,37 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.26.10":
-  version: 7.26.10
-  resolution: "@babel/traverse@npm:7.26.10"
-  dependencies:
-    "@babel/code-frame": "npm:^7.26.2"
-    "@babel/generator": "npm:^7.26.10"
-    "@babel/parser": "npm:^7.26.10"
-    "@babel/template": "npm:^7.26.9"
-    "@babel/types": "npm:^7.26.10"
-    debug: "npm:^4.3.1"
-    globals: "npm:^11.1.0"
-  checksum: 10c0/4e86bb4e3c30a6162bb91df86329df79d96566c3e2d9ccba04f108c30473a3a4fd360d9990531493d90f6a12004f10f616bf9b9229ca30c816b708615e9de2ac
-  languageName: node
-  linkType: hard
-
-"@babel/traverse@npm:^7.26.5, @babel/traverse@npm:^7.27.0":
-  version: 7.27.0
-  resolution: "@babel/traverse@npm:7.27.0"
+"@babel/traverse@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/traverse@npm:7.27.1"
   dependencies:
-    "@babel/code-frame": "npm:^7.26.2"
-    "@babel/generator": "npm:^7.27.0"
-    "@babel/parser": "npm:^7.27.0"
-    "@babel/template": "npm:^7.27.0"
-    "@babel/types": "npm:^7.27.0"
+    "@babel/code-frame": "npm:^7.27.1"
+    "@babel/generator": "npm:^7.27.1"
+    "@babel/parser": "npm:^7.27.1"
+    "@babel/template": "npm:^7.27.1"
+    "@babel/types": "npm:^7.27.1"
     debug: "npm:^4.3.1"
     globals: "npm:^11.1.0"
-  checksum: 10c0/c7af29781960dacaae51762e8bc6c4b13d6ab4b17312990fbca9fc38e19c4ad7fecaae24b1cf52fb844e8e6cdc76c70ad597f90e496bcb3cc0a1d66b41a0aa5b
+  checksum: 10c0/d912110037b03b1d70a2436cfd51316d930366a5f54252da2bced1ba38642f644f848240a951e5caf12f1ef6c40d3d96baa92ea6e84800f2e891c15e97b25d50
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.26.8":
-  version: 7.26.8
-  resolution: "@babel/traverse@npm:7.26.8"
+"@babel/traverse@npm:^7.28.0, @babel/traverse@npm:^7.28.3":
+  version: 7.28.3
+  resolution: "@babel/traverse@npm:7.28.3"
   dependencies:
-    "@babel/code-frame": "npm:^7.26.2"
-    "@babel/generator": "npm:^7.26.8"
-    "@babel/parser": "npm:^7.26.8"
-    "@babel/template": "npm:^7.26.8"
-    "@babel/types": "npm:^7.26.8"
+    "@babel/code-frame": "npm:^7.27.1"
+    "@babel/generator": "npm:^7.28.3"
+    "@babel/helper-globals": "npm:^7.28.0"
+    "@babel/parser": "npm:^7.28.3"
+    "@babel/template": "npm:^7.27.2"
+    "@babel/types": "npm:^7.28.2"
     debug: "npm:^4.3.1"
-    globals: "npm:^11.1.0"
-  checksum: 10c0/0771d1ce0351628ad2e8dac56f0d59f706eb125c83fbcc039bde83088ba0a1477244ad5fb060802f90366cc4d7fa871e5009a292aef6205bcf83f2e01d1a0a5d
+  checksum: 10c0/26e95b29a46925b7b41255e03185b7e65b2c4987e14bbee7bbf95867fb19c69181f301bbe1c7b201d4fe0cce6aa0cbea0282dad74b3a0fef3d9058f6c76fdcb3
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.27.1, @babel/traverse@npm:^7.28.0, @babel/traverse@npm:^7.28.3, @babel/traverse@npm:^7.28.4":
+"@babel/traverse@npm:^7.28.4":
   version: 7.28.4
   resolution: "@babel/traverse@npm:7.28.4"
   dependencies:
@@ -1840,47 +1738,37 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.26.10":
-  version: 7.26.10
-  resolution: "@babel/types@npm:7.26.10"
-  dependencies:
-    "@babel/helper-string-parser": "npm:^7.25.9"
-    "@babel/helper-validator-identifier": "npm:^7.25.9"
-  checksum: 10c0/7a7f83f568bfc3dfabfaf9ae3a97ab5c061726c0afa7dcd94226d4f84a81559da368ed79671e3a8039d16f12476cf110381a377ebdea07587925f69628200dac
-  languageName: node
-  linkType: hard
-
-"@babel/types@npm:^7.26.8":
-  version: 7.26.8
-  resolution: "@babel/types@npm:7.26.8"
+"@babel/types@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/types@npm:7.27.1"
   dependencies:
-    "@babel/helper-string-parser": "npm:^7.25.9"
-    "@babel/helper-validator-identifier": "npm:^7.25.9"
-  checksum: 10c0/cd41ea47bb3d7baf2b3bf5e70e9c3a16f2eab699fab8575b2b31a7b1cb64166eb52c97124313863dde0581747bfc7a1810c838ad60b5b7ad1897d8004c7b95a9
+    "@babel/helper-string-parser": "npm:^7.27.1"
+    "@babel/helper-validator-identifier": "npm:^7.27.1"
+  checksum: 10c0/ed736f14db2fdf0d36c539c8e06b6bb5e8f9649a12b5c0e1c516fed827f27ef35085abe08bf4d1302a4e20c9a254e762eed453bce659786d4a6e01ba26a91377
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.26.9":
-  version: 7.26.9
-  resolution: "@babel/types@npm:7.26.9"
+"@babel/types@npm:^7.27.3":
+  version: 7.27.3
+  resolution: "@babel/types@npm:7.27.3"
   dependencies:
-    "@babel/helper-string-parser": "npm:^7.25.9"
-    "@babel/helper-validator-identifier": "npm:^7.25.9"
-  checksum: 10c0/999c56269ba00e5c57aa711fbe7ff071cd6990bafd1b978341ea7572cc78919986e2aa6ee51dacf4b6a7a6fa63ba4eb3f1a03cf55eee31b896a56d068b895964
+    "@babel/helper-string-parser": "npm:^7.27.1"
+    "@babel/helper-validator-identifier": "npm:^7.27.1"
+  checksum: 10c0/bafdfc98e722a6b91a783b6f24388f478fd775f0c0652e92220e08be2cc33e02d42088542f1953ac5e5ece2ac052172b3dadedf12bec9aae57899e92fb9a9757
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.27.0":
-  version: 7.27.0
-  resolution: "@babel/types@npm:7.27.0"
+"@babel/types@npm:^7.28.2":
+  version: 7.28.2
+  resolution: "@babel/types@npm:7.28.2"
   dependencies:
-    "@babel/helper-string-parser": "npm:^7.25.9"
-    "@babel/helper-validator-identifier": "npm:^7.25.9"
-  checksum: 10c0/6f1592eabe243c89a608717b07b72969be9d9d2fce1dee21426238757ea1fa60fdfc09b29de9e48d8104311afc6e6fb1702565a9cc1e09bc1e76f2b2ddb0f6e1
+    "@babel/helper-string-parser": "npm:^7.27.1"
+    "@babel/helper-validator-identifier": "npm:^7.27.1"
+  checksum: 10c0/24b11c9368e7e2c291fe3c1bcd1ed66f6593a3975f479cbb9dd7b8c8d8eab8a962b0d2fca616c043396ce82500ac7d23d594fbbbd013828182c01596370a0b10
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.27.1, @babel/types@npm:^7.27.3, @babel/types@npm:^7.28.2, @babel/types@npm:^7.28.4":
+"@babel/types@npm:^7.28.4":
   version: 7.28.4
   resolution: "@babel/types@npm:7.28.4"
   dependencies:
@@ -1927,29 +1815,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@csstools/css-parser-algorithms@npm:^3.0.4":
-  version: 3.0.4
-  resolution: "@csstools/css-parser-algorithms@npm:3.0.4"
+"@csstools/css-parser-algorithms@npm:^3.0.4, @csstools/css-parser-algorithms@npm:^3.0.5":
+  version: 3.0.5
+  resolution: "@csstools/css-parser-algorithms@npm:3.0.5"
   peerDependencies:
-    "@csstools/css-tokenizer": ^3.0.3
-  checksum: 10c0/d411f07765e14eede17bccc6bd4f90ff303694df09aabfede3fd104b2dfacfd4fe3697cd25ddad14684c850328f3f9420ebfa9f78380892492974db24ae47dbd
+    "@csstools/css-tokenizer": ^3.0.4
+  checksum: 10c0/d9a1c888bd43849ae3437ca39251d5c95d2c8fd6b5ccdb7c45491dfd2c1cbdc3075645e80901d120e4d2c1993db9a5b2d83793b779dbbabcfb132adb142eb7f7
   languageName: node
   linkType: hard
 
-"@csstools/css-tokenizer@npm:^3.0.3":
-  version: 3.0.3
-  resolution: "@csstools/css-tokenizer@npm:3.0.3"
-  checksum: 10c0/c31bf410e1244b942e71798e37c54639d040cb59e0121b21712b40015fced2b0fb1ffe588434c5f8923c9cd0017cfc1c1c8f3921abc94c96edf471aac2eba5e5
+"@csstools/css-tokenizer@npm:^3.0.3, @csstools/css-tokenizer@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "@csstools/css-tokenizer@npm:3.0.4"
+  checksum: 10c0/3b589f8e9942075a642213b389bab75a2d50d05d203727fcdac6827648a5572674caff07907eff3f9a2389d86a4ee47308fafe4f8588f4a77b7167c588d2559f
   languageName: node
   linkType: hard
 
-"@csstools/media-query-list-parser@npm:^4.0.2":
-  version: 4.0.2
-  resolution: "@csstools/media-query-list-parser@npm:4.0.2"
+"@csstools/media-query-list-parser@npm:^4.0.3":
+  version: 4.0.3
+  resolution: "@csstools/media-query-list-parser@npm:4.0.3"
   peerDependencies:
-    "@csstools/css-parser-algorithms": ^3.0.4
-    "@csstools/css-tokenizer": ^3.0.3
-  checksum: 10c0/5d008a70f5d4fd96224066a433f5cdefa76cfd78a74416a20d6d5b2bb1bc8282b140e8373015d807d4dadb91daf3deb73eb13f853ec4e0479d0cb92e80c6f20d
+    "@csstools/css-parser-algorithms": ^3.0.5
+    "@csstools/css-tokenizer": ^3.0.4
+  checksum: 10c0/e29d856d57e9a036694662163179fc061a99579f05e7c3c35438b3e063790ae8a9ee9f1fb4b4693d8fc7672ae0801764fe83762ab7b9df2921fcc6172cfd5584
   languageName: node
   linkType: hard
 
@@ -1970,34 +1858,34 @@ __metadata:
   linkType: hard
 
 "@emnapi/core@npm:^1.4.3":
-  version: 1.5.0
-  resolution: "@emnapi/core@npm:1.5.0"
+  version: 1.4.5
+  resolution: "@emnapi/core@npm:1.4.5"
   dependencies:
-    "@emnapi/wasi-threads": "npm:1.1.0"
+    "@emnapi/wasi-threads": "npm:1.0.4"
     tslib: "npm:^2.4.0"
-  checksum: 10c0/52ba3485277706d92fa27d92b37e5b4f6ef0742c03ed68f8096f294c6bfa30f0752c82d4c2bfa14bff4dc30d63c9f71a8f9fb64a92743d00807d9e468fafd5ff
+  checksum: 10c0/da4a57f65f325d720d0e0d1a9c6618b90c4c43a5027834a110476984e1d47c95ebaed4d316b5dddb9c0ed9a493ffeb97d1934f9677035f336d8a36c1f3b2818f
   languageName: node
   linkType: hard
 
 "@emnapi/runtime@npm:^1.4.3":
-  version: 1.5.0
-  resolution: "@emnapi/runtime@npm:1.5.0"
+  version: 1.4.5
+  resolution: "@emnapi/runtime@npm:1.4.5"
   dependencies:
     tslib: "npm:^2.4.0"
-  checksum: 10c0/a85c9fc4e3af49cbe41e5437e5be2551392a931910cd0a5b5d3572532786927810c9cc1db11b232ec8f9657b33d4e6f7c4f985f1a052917d7cd703b5b2a20faa
+  checksum: 10c0/37a0278be5ac81e918efe36f1449875cbafba947039c53c65a1f8fc238001b866446fc66041513b286baaff5d6f9bec667f5164b3ca481373a8d9cb65bfc984b
   languageName: node
   linkType: hard
 
-"@emnapi/wasi-threads@npm:1.1.0":
-  version: 1.1.0
-  resolution: "@emnapi/wasi-threads@npm:1.1.0"
+"@emnapi/wasi-threads@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@emnapi/wasi-threads@npm:1.0.4"
   dependencies:
     tslib: "npm:^2.4.0"
-  checksum: 10c0/e6d54bf2b1e64cdd83d2916411e44e579b6ae35d5def0dea61a3c452d9921373044dff32a8b8473ae60c80692bdc39323e98b96a3f3d87ba6886b24dd0ef7ca1
+  checksum: 10c0/2c91a53e62f875800baf035c4d42c9c0d18e5afd9a31ca2aac8b435aeaeaeaac386b5b3d0d0e70aa7a5a9852bbe05106b1f680cd82cce03145c703b423d41313
   languageName: node
   linkType: hard
 
-"@eslint-community/eslint-utils@npm:^4.2.0, @eslint-community/eslint-utils@npm:^4.4.0":
+"@eslint-community/eslint-utils@npm:^4.2.0":
   version: 4.4.1
   resolution: "@eslint-community/eslint-utils@npm:4.4.1"
   dependencies:
@@ -2009,13 +1897,13 @@ __metadata:
   linkType: hard
 
 "@eslint-community/eslint-utils@npm:^4.7.0":
-  version: 4.9.0
-  resolution: "@eslint-community/eslint-utils@npm:4.9.0"
+  version: 4.7.0
+  resolution: "@eslint-community/eslint-utils@npm:4.7.0"
   dependencies:
     eslint-visitor-keys: "npm:^3.4.3"
   peerDependencies:
     eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-  checksum: 10c0/8881e22d519326e7dba85ea915ac7a143367c805e6ba1374c987aa2fbdd09195cc51183d2da72c0e2ff388f84363e1b220fd0d19bef10c272c63455162176817
+  checksum: 10c0/c0f4f2bd73b7b7a9de74b716a664873d08ab71ab439e51befe77d61915af41a81ecec93b408778b3a7856185244c34c2c8ee28912072ec14def84ba2dec70adf
   languageName: node
   linkType: hard
 
@@ -2026,30 +1914,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint/config-array@npm:^0.20.0":
-  version: 0.20.0
-  resolution: "@eslint/config-array@npm:0.20.0"
+"@eslint/config-array@npm:^0.21.0":
+  version: 0.21.0
+  resolution: "@eslint/config-array@npm:0.21.0"
   dependencies:
     "@eslint/object-schema": "npm:^2.1.6"
     debug: "npm:^4.3.1"
     minimatch: "npm:^3.1.2"
-  checksum: 10c0/94bc5d0abb96dc5295ff559925242ff75a54eacfb3576677e95917e42f7175e1c4b87bf039aa2a872f949b4852ad9724bf2f7529aaea6b98f28bb3fca7f1d659
+  checksum: 10c0/0ea801139166c4aa56465b309af512ef9b2d3c68f9198751bbc3e21894fe70f25fbf26e1b0e9fffff41857bc21bfddeee58649ae6d79aadcd747db0c5dca771f
   languageName: node
   linkType: hard
 
-"@eslint/config-helpers@npm:^0.2.0":
-  version: 0.2.1
-  resolution: "@eslint/config-helpers@npm:0.2.1"
-  checksum: 10c0/3e829a78b0bb4f7c44384ba1df3986e5de24b7f440ad5c6bb3cfc366ded773a869ca9ee8d212b5a563ae94596c5940dea6fd2ea1ee53a84c6241ac953dcb8bb7
+"@eslint/config-helpers@npm:^0.3.1":
+  version: 0.3.1
+  resolution: "@eslint/config-helpers@npm:0.3.1"
+  checksum: 10c0/f6c5b3a0b76a0d7d84cc93e310c259e6c3e0792ddd0a62c5fc0027796ffae44183432cb74b2c2b1162801ee1b1b34a6beb5d90a151632b4df7349f994146a856
   languageName: node
   linkType: hard
 
-"@eslint/core@npm:^0.12.0":
-  version: 0.12.0
-  resolution: "@eslint/core@npm:0.12.0"
+"@eslint/core@npm:^0.15.2":
+  version: 0.15.2
+  resolution: "@eslint/core@npm:0.15.2"
   dependencies:
     "@types/json-schema": "npm:^7.0.15"
-  checksum: 10c0/d032af81195bb28dd800c2b9617548c6c2a09b9490da3c5537fd2a1201501666d06492278bb92cfccac1f7ac249e58601dd87f813ec0d6a423ef0880434fa0c3
+  checksum: 10c0/c17a6dc4f5a6006ecb60165cc38bcd21fefb4a10c7a2578a0cfe5813bbd442531a87ed741da5adab5eb678e8e693fda2e2b14555b035355537e32bcec367ea17
   languageName: node
   linkType: hard
 
@@ -2070,10 +1958,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint/js@npm:9.24.0, @eslint/js@npm:^9.19.0":
-  version: 9.24.0
-  resolution: "@eslint/js@npm:9.24.0"
-  checksum: 10c0/efe22e29469e4140ac3e2916be8143b1bcfd1084a6edf692b7a58a3e54949d53c67f7f979bc0a811db134d9cc1e7bff8aa71ef1376b47eecd7e226b71206bb36
+"@eslint/js@npm:9.33.0":
+  version: 9.33.0
+  resolution: "@eslint/js@npm:9.33.0"
+  checksum: 10c0/4c42c9abde76a183b8e47205fd6c3116b058f82f07b6ad4de40de56cdb30a36e9ecd40efbea1b63a84d08c206aadbb0aa39a890197e1ad6455a8e542df98f186
+  languageName: node
+  linkType: hard
+
+"@eslint/js@npm:^9.19.0":
+  version: 9.35.0
+  resolution: "@eslint/js@npm:9.35.0"
+  checksum: 10c0/d40fe38724bc76c085c0b753cdf937fa35c0d6807ae76b2632e3f5f66c3040c91adcf1aff2ce70b4f45752e60629fadc415eeec9af3be3c274bae1cac54b9840
   languageName: node
   linkType: hard
 
@@ -2084,13 +1979,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint/plugin-kit@npm:^0.2.7":
-  version: 0.2.7
-  resolution: "@eslint/plugin-kit@npm:0.2.7"
+"@eslint/plugin-kit@npm:^0.3.5":
+  version: 0.3.5
+  resolution: "@eslint/plugin-kit@npm:0.3.5"
   dependencies:
-    "@eslint/core": "npm:^0.12.0"
+    "@eslint/core": "npm:^0.15.2"
     levn: "npm:^0.4.1"
-  checksum: 10c0/0a1aff1ad63e72aca923217e556c6dfd67d7cd121870eb7686355d7d1475d569773528a8b2111b9176f3d91d2ea81f7413c34600e8e5b73d59e005d70780b633
+  checksum: 10c0/c178c1b58c574200c0fd125af3e4bc775daba7ce434ba6d1eeaf9bcb64b2e9fea75efabffb3ed3ab28858e55a016a5efa95f509994ee4341b341199ca630b89e
   languageName: node
   linkType: hard
 
@@ -2103,39 +1998,39 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/dom@npm:^1.7.4":
-  version: 1.7.4
-  resolution: "@floating-ui/dom@npm:1.7.4"
+"@floating-ui/dom@npm:^1.7.3":
+  version: 1.7.3
+  resolution: "@floating-ui/dom@npm:1.7.3"
   dependencies:
     "@floating-ui/core": "npm:^1.7.3"
     "@floating-ui/utils": "npm:^0.2.10"
-  checksum: 10c0/da6166c25f9b0729caa9f498685a73a0e28251613b35d27db8de8014bc9d045158a23c092b405321a3d67c2064909b6e2a7e6c1c9cc0f62967dca5779f5aef30
+  checksum: 10c0/cba30e9af1a52fb7cb443ae516d7aec032b33da2fa50914dcb18fc834dc31c71922f5c7653431e70d493f347018b2ce6435c98b3f154d92082345689b4458e59
   languageName: node
   linkType: hard
 
-"@floating-ui/react-dom@npm:^2.1.6":
-  version: 2.1.6
-  resolution: "@floating-ui/react-dom@npm:2.1.6"
+"@floating-ui/react-dom@npm:^2.1.5":
+  version: 2.1.5
+  resolution: "@floating-ui/react-dom@npm:2.1.5"
   dependencies:
-    "@floating-ui/dom": "npm:^1.7.4"
+    "@floating-ui/dom": "npm:^1.7.3"
   peerDependencies:
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 10c0/6654834a8e73ecbdbc6cad2ad8f7abc698ac7c1800ded4d61113525c591c03d2e3b59d3cf9205859221465ea38c87af4f9e6e204703c5b7a7e85332d1eef2e18
+  checksum: 10c0/2dc9571845138e5f39952900fa4d1ad077968c97c1fd1eae30e624db42a29f6fc897c11f926b5e63c468d541eff78b41c2aa1ec45eed2f3a1cc8aa95898f3260
   languageName: node
   linkType: hard
 
 "@floating-ui/react@npm:^0.27.15":
-  version: 0.27.16
-  resolution: "@floating-ui/react@npm:0.27.16"
+  version: 0.27.15
+  resolution: "@floating-ui/react@npm:0.27.15"
   dependencies:
-    "@floating-ui/react-dom": "npm:^2.1.6"
+    "@floating-ui/react-dom": "npm:^2.1.5"
     "@floating-ui/utils": "npm:^0.2.10"
     tabbable: "npm:^6.0.0"
   peerDependencies:
     react: ">=17.0.0"
     react-dom: ">=17.0.0"
-  checksum: 10c0/a026266d8875e69de1ac1e1a00588660c8ee299c1e7d067c5c5fd1d69a46fd10acff5dd6cb66c3fe40a3347b443234309ba95f5b33d49059d0cda121f558f566
+  checksum: 10c0/682893e4305d7ee12e9d8e5844496242a068fb619a84c92d80c272175c66a5b77cc88a7fff639b505efa8a0491bf63c81e48b4427bb07e1a6ddb8a0a6618d5b1
   languageName: node
   linkType: hard
 
@@ -2329,6 +2224,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/expect-utils@npm:30.0.5":
+  version: 30.0.5
+  resolution: "@jest/expect-utils@npm:30.0.5"
+  dependencies:
+    "@jest/get-type": "npm:30.0.1"
+  checksum: 10c0/d0ee162a1d1816724580bea53e7b422b891af073bdae439e78d04d5db09e6557e334f4c3d2892b9de750a59e79605f55d3ca8dbec9fb2ba33d8b803ed98463ad
+  languageName: node
+  linkType: hard
+
 "@jest/expect-utils@npm:30.1.2":
   version: 30.1.2
   resolution: "@jest/expect-utils@npm:30.1.2"
@@ -2362,6 +2266,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/get-type@npm:30.0.1":
+  version: 30.0.1
+  resolution: "@jest/get-type@npm:30.0.1"
+  checksum: 10c0/92437ae42d0df57e8acc2d067288151439db4752cde4f5e680c73c8a6e34568bbd8c1c81a2f2f9a637a619c2aac8bc87553fb80e31475b59e2ed789a71e5e540
+  languageName: node
+  linkType: hard
+
 "@jest/get-type@npm:30.1.0":
   version: 30.1.0
   resolution: "@jest/get-type@npm:30.1.0"
@@ -2530,20 +2441,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/types@npm:^29.6.3":
-  version: 29.6.3
-  resolution: "@jest/types@npm:29.6.3"
-  dependencies:
-    "@jest/schemas": "npm:^29.6.3"
-    "@types/istanbul-lib-coverage": "npm:^2.0.0"
-    "@types/istanbul-reports": "npm:^3.0.0"
-    "@types/node": "npm:*"
-    "@types/yargs": "npm:^17.0.8"
-    chalk: "npm:^4.0.0"
-  checksum: 10c0/ea4e493dd3fb47933b8ccab201ae573dcc451f951dc44ed2a86123cd8541b82aa9d2b1031caf9b1080d6673c517e2dcc25a44b2dc4f3fbc37bfc965d444888c0
-  languageName: node
-  linkType: hard
-
 "@jridgewell/gen-mapping@npm:^0.3.12":
   version: 0.3.13
   resolution: "@jridgewell/gen-mapping@npm:0.3.13"
@@ -2617,21 +2514,19 @@ __metadata:
   linkType: hard
 
 "@jridgewell/trace-mapping@npm:^0.3.23, @jridgewell/trace-mapping@npm:^0.3.28":
-  version: 0.3.31
-  resolution: "@jridgewell/trace-mapping@npm:0.3.31"
+  version: 0.3.30
+  resolution: "@jridgewell/trace-mapping@npm:0.3.30"
   dependencies:
     "@jridgewell/resolve-uri": "npm:^3.1.0"
     "@jridgewell/sourcemap-codec": "npm:^1.4.14"
-  checksum: 10c0/4b30ec8cd56c5fd9a661f088230af01e0c1a3888d11ffb6b47639700f71225be21d1f7e168048d6d4f9449207b978a235c07c8f15c07705685d16dc06280e9d9
+  checksum: 10c0/3a1516c10f44613b9ba27c37a02ff8f410893776b2b3dad20a391b51b884dd60f97bbb56936d65d2ff8fe978510a0000266654ab8426bdb9ceb5fb4585b19e23
   languageName: node
   linkType: hard
 
-"@keyv/serialize@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "@keyv/serialize@npm:1.0.3"
-  dependencies:
-    buffer: "npm:^6.0.3"
-  checksum: 10c0/24a257870b0548cfe430680c2ae1641751e6a6ec90c573eaf51bfe956839b6cfa462b4d2827157363b6d620872d32d69fa2f37210a864ba488f8ec7158436398
+"@keyv/serialize@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@keyv/serialize@npm:1.1.0"
+  checksum: 10c0/30e34adf4fff52374c2c531e3ff215eed6414350ee56eebcb98c422feaff171b4900c73082a72399a6bfbc5ce60fbb6f968594110c960521923499146bc68c20
   languageName: node
   linkType: hard
 
@@ -2949,18 +2844,18 @@ __metadata:
   linkType: hard
 
 "@react-docgen/cli@npm:^3.0.0":
-  version: 3.0.3
-  resolution: "@react-docgen/cli@npm:3.0.3"
+  version: 3.0.2
+  resolution: "@react-docgen/cli@npm:3.0.2"
   dependencies:
-    chalk: "npm:5.6.2"
-    commander: "npm:14.0.1"
-    debug: "npm:4.4.3"
+    chalk: "npm:5.6.0"
+    commander: "npm:14.0.0"
+    debug: "npm:4.4.1"
     fast-glob: "npm:3.3.3"
     react-docgen: "npm:8.0.1"
     slash: "npm:5.1.0"
   bin:
     react-docgen: dist/cli.js
-  checksum: 10c0/dafafd3ee6f1122856197eb7a5c039e59c1681380d78a8f90772326c3560b0f8f71773f1763d45266b57d44dc4f46c93beb4011ce12456225d91d28988be9d6a
+  checksum: 10c0/92be569f68faceea2ed7ed0c961708b66cca84c0f9c89ddfb9292c002cbb155b50436047f021df4524bc556cab4c603d1de8625ed35515feeffcb970ca51dde3
   languageName: node
   linkType: hard
 
@@ -2984,8 +2879,8 @@ __metadata:
   linkType: hard
 
 "@rollup/plugin-commonjs@npm:^28.0.2":
-  version: 28.0.3
-  resolution: "@rollup/plugin-commonjs@npm:28.0.3"
+  version: 28.0.6
+  resolution: "@rollup/plugin-commonjs@npm:28.0.6"
   dependencies:
     "@rollup/pluginutils": "npm:^5.0.1"
     commondir: "npm:^1.0.1"
@@ -2999,7 +2894,7 @@ __metadata:
   peerDependenciesMeta:
     rollup:
       optional: true
-  checksum: 10c0/0dbc61a5a894cdf526c3f0a738243cf1b3f634d592db0f2b9cad8c5d8e4c3e645d9b7ac19761c07a8a475118cafa6cdef4746111019388dd6e962f7373878ea4
+  checksum: 10c0/67fa297384c2494c8f85df102c030e7f8ed8f600cfccdd1143266112ee4037d37faa1bda44a571dab35b48297342024551e995ad2f8a4d86da0aa1f33ec61868
   languageName: node
   linkType: hard
 
@@ -3038,8 +2933,8 @@ __metadata:
   linkType: hard
 
 "@rollup/plugin-typescript@npm:^12.1.2":
-  version: 12.1.2
-  resolution: "@rollup/plugin-typescript@npm:12.1.2"
+  version: 12.1.4
+  resolution: "@rollup/plugin-typescript@npm:12.1.4"
   dependencies:
     "@rollup/pluginutils": "npm:^5.1.0"
     resolve: "npm:^1.22.1"
@@ -3052,7 +2947,7 @@ __metadata:
       optional: true
     tslib:
       optional: true
-  checksum: 10c0/f447e23371bb1815030446ada3f57608bc6665f8aa2cd7343c4aa18021790fa3ba4783146ea576fb650d6ec68876182d0bc789a05b1a9163c09b16c17efdf868
+  checksum: 10c0/b5bf7f54794d0b33ae5441c5aa202a95beb7068c206f40102f94997e888756c06c2bfe00517eb74a58771078432f94e8a34e99f5c6dbf89a22b49431b83c4798
   languageName: node
   linkType: hard
 
@@ -3072,142 +2967,149 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-android-arm-eabi@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-android-arm-eabi@npm:4.39.0"
+"@rollup/rollup-android-arm-eabi@npm:4.50.2":
+  version: 4.50.2
+  resolution: "@rollup/rollup-android-arm-eabi@npm:4.50.2"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
 
-"@rollup/rollup-android-arm64@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-android-arm64@npm:4.39.0"
+"@rollup/rollup-android-arm64@npm:4.50.2":
+  version: 4.50.2
+  resolution: "@rollup/rollup-android-arm64@npm:4.50.2"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-darwin-arm64@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-darwin-arm64@npm:4.39.0"
+"@rollup/rollup-darwin-arm64@npm:4.50.2":
+  version: 4.50.2
+  resolution: "@rollup/rollup-darwin-arm64@npm:4.50.2"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-darwin-x64@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-darwin-x64@npm:4.39.0"
+"@rollup/rollup-darwin-x64@npm:4.50.2":
+  version: 4.50.2
+  resolution: "@rollup/rollup-darwin-x64@npm:4.50.2"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-freebsd-arm64@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-freebsd-arm64@npm:4.39.0"
+"@rollup/rollup-freebsd-arm64@npm:4.50.2":
+  version: 4.50.2
+  resolution: "@rollup/rollup-freebsd-arm64@npm:4.50.2"
   conditions: os=freebsd & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-freebsd-x64@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-freebsd-x64@npm:4.39.0"
+"@rollup/rollup-freebsd-x64@npm:4.50.2":
+  version: 4.50.2
+  resolution: "@rollup/rollup-freebsd-x64@npm:4.50.2"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm-gnueabihf@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.39.0"
+"@rollup/rollup-linux-arm-gnueabihf@npm:4.50.2":
+  version: 4.50.2
+  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.50.2"
   conditions: os=linux & cpu=arm & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm-musleabihf@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.39.0"
+"@rollup/rollup-linux-arm-musleabihf@npm:4.50.2":
+  version: 4.50.2
+  resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.50.2"
   conditions: os=linux & cpu=arm & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm64-gnu@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.39.0"
+"@rollup/rollup-linux-arm64-gnu@npm:4.50.2":
+  version: 4.50.2
+  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.50.2"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm64-musl@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.39.0"
+"@rollup/rollup-linux-arm64-musl@npm:4.50.2":
+  version: 4.50.2
+  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.50.2"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-loongarch64-gnu@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-linux-loongarch64-gnu@npm:4.39.0"
+"@rollup/rollup-linux-loong64-gnu@npm:4.50.2":
+  version: 4.50.2
+  resolution: "@rollup/rollup-linux-loong64-gnu@npm:4.50.2"
   conditions: os=linux & cpu=loong64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-powerpc64le-gnu@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.39.0"
+"@rollup/rollup-linux-ppc64-gnu@npm:4.50.2":
+  version: 4.50.2
+  resolution: "@rollup/rollup-linux-ppc64-gnu@npm:4.50.2"
   conditions: os=linux & cpu=ppc64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-riscv64-gnu@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.39.0"
+"@rollup/rollup-linux-riscv64-gnu@npm:4.50.2":
+  version: 4.50.2
+  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.50.2"
   conditions: os=linux & cpu=riscv64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-riscv64-musl@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-linux-riscv64-musl@npm:4.39.0"
+"@rollup/rollup-linux-riscv64-musl@npm:4.50.2":
+  version: 4.50.2
+  resolution: "@rollup/rollup-linux-riscv64-musl@npm:4.50.2"
   conditions: os=linux & cpu=riscv64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-s390x-gnu@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.39.0"
+"@rollup/rollup-linux-s390x-gnu@npm:4.50.2":
+  version: 4.50.2
+  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.50.2"
   conditions: os=linux & cpu=s390x & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-x64-gnu@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.39.0"
+"@rollup/rollup-linux-x64-gnu@npm:4.50.2":
+  version: 4.50.2
+  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.50.2"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-x64-musl@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-linux-x64-musl@npm:4.39.0"
+"@rollup/rollup-linux-x64-musl@npm:4.50.2":
+  version: 4.50.2
+  resolution: "@rollup/rollup-linux-x64-musl@npm:4.50.2"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-arm64-msvc@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.39.0"
+"@rollup/rollup-openharmony-arm64@npm:4.50.2":
+  version: 4.50.2
+  resolution: "@rollup/rollup-openharmony-arm64@npm:4.50.2"
+  conditions: os=openharmony & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-win32-arm64-msvc@npm:4.50.2":
+  version: 4.50.2
+  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.50.2"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-ia32-msvc@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.39.0"
+"@rollup/rollup-win32-ia32-msvc@npm:4.50.2":
+  version: 4.50.2
+  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.50.2"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-x64-msvc@npm:4.39.0":
-  version: 4.39.0
-  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.39.0"
+"@rollup/rollup-win32-x64-msvc@npm:4.50.2":
+  version: 4.50.2
+  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.50.2"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -3264,9 +3166,9 @@ __metadata:
   linkType: hard
 
 "@sinclair/typebox@npm:^0.34.0":
-  version: 0.34.41
-  resolution: "@sinclair/typebox@npm:0.34.41"
-  checksum: 10c0/0fb61fc2f90c25e30b19b0096eb8ab3ccef401d3e2acfce42168ff0ee877ba5981c8243fa6b1035ac756cde95316724e978b2837dd642d7e4e095de03a999c90
+  version: 0.34.35
+  resolution: "@sinclair/typebox@npm:0.34.35"
+  checksum: 10c0/2e10a655eafeee803d16abeb270d4e365caf26178842c4d64c5fa81f1e85de75a41310098299c460c54b1ed14f1cd196e726fc7fc54c263a31b42479d53379ac
   languageName: node
   linkType: hard
 
@@ -3289,18 +3191,18 @@ __metadata:
   linkType: hard
 
 "@testing-library/dom@npm:^10.4.0":
-  version: 10.4.0
-  resolution: "@testing-library/dom@npm:10.4.0"
+  version: 10.4.1
+  resolution: "@testing-library/dom@npm:10.4.1"
   dependencies:
     "@babel/code-frame": "npm:^7.10.4"
     "@babel/runtime": "npm:^7.12.5"
     "@types/aria-query": "npm:^5.0.1"
     aria-query: "npm:5.3.0"
-    chalk: "npm:^4.1.0"
     dom-accessibility-api: "npm:^0.5.9"
     lz-string: "npm:^1.5.0"
+    picocolors: "npm:1.1.1"
     pretty-format: "npm:^27.0.2"
-  checksum: 10c0/0352487720ecd433400671e773df0b84b8268fb3fe8e527cdfd7c11b1365b398b4e0eddba6e7e0c85e8d615f48257753283fccec41f6b986fd6c85f15eb5f84f
+  checksum: 10c0/19ce048012d395ad0468b0dbcc4d0911f6f9e39464d7a8464a587b29707eed5482000dad728f5acc4ed314d2f4d54f34982999a114d2404f36d048278db815b1
   languageName: node
   linkType: hard
 
@@ -3358,11 +3260,11 @@ __metadata:
   linkType: hard
 
 "@tybys/wasm-util@npm:^0.10.0":
-  version: 0.10.1
-  resolution: "@tybys/wasm-util@npm:0.10.1"
+  version: 0.10.0
+  resolution: "@tybys/wasm-util@npm:0.10.0"
   dependencies:
     tslib: "npm:^2.4.0"
-  checksum: 10c0/b255094f293794c6d2289300c5fbcafbb5532a3aed3a5ffd2f8dc1828e639b88d75f6a376dd8f94347a44813fd7a7149d8463477a9a49525c8b2dcaa38c2d1e8
+  checksum: 10c0/044feba55c1e2af703aa4946139969badb183ce1a659a75ed60bc195a90e73a3f3fc53bcd643497c9954597763ddb051fec62f80962b2ca6fc716ba897dc696e
   languageName: node
   linkType: hard
 
@@ -3447,14 +3349,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/estree@npm:1.0.7":
-  version: 1.0.7
-  resolution: "@types/estree@npm:1.0.7"
-  checksum: 10c0/be815254316882f7c40847336cd484c3bc1c3e34f710d197160d455dc9d6d050ffbf4c3bc76585dba86f737f020ab20bdb137ebe0e9116b0c86c7c0342221b8c
+"@types/estree@npm:1.0.8":
+  version: 1.0.8
+  resolution: "@types/estree@npm:1.0.8"
+  checksum: 10c0/39d34d1afaa338ab9763f37ad6066e3f349444f9052b9676a7cc0252ef9485a41c6d81c9c4e0d26e9077993354edf25efc853f3224dd4b447175ef62bdcc86a5
   languageName: node
   linkType: hard
 
-"@types/istanbul-lib-coverage@npm:*, @types/istanbul-lib-coverage@npm:^2.0.0, @types/istanbul-lib-coverage@npm:^2.0.1, @types/istanbul-lib-coverage@npm:^2.0.6":
+"@types/istanbul-lib-coverage@npm:*, @types/istanbul-lib-coverage@npm:^2.0.1, @types/istanbul-lib-coverage@npm:^2.0.6":
   version: 2.0.6
   resolution: "@types/istanbul-lib-coverage@npm:2.0.6"
   checksum: 10c0/3948088654f3eeb45363f1db158354fb013b362dba2a5c2c18c559484d5eb9f6fd85b23d66c0a7c2fcfab7308d0a585b14dadaca6cc8bf89ebfdc7f8f5102fb7
@@ -3470,7 +3372,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/istanbul-reports@npm:^3.0.0, @types/istanbul-reports@npm:^3.0.4":
+"@types/istanbul-reports@npm:^3.0.4":
   version: 3.0.4
   resolution: "@types/istanbul-reports@npm:3.0.4"
   dependencies:
@@ -3552,11 +3454,11 @@ __metadata:
   linkType: hard
 
 "@types/react@npm:^19.1.10":
-  version: 19.1.13
-  resolution: "@types/react@npm:19.1.13"
+  version: 19.1.12
+  resolution: "@types/react@npm:19.1.12"
   dependencies:
     csstype: "npm:^3.0.2"
-  checksum: 10c0/75e35b54883f5ed07d3b5cb16a4711b6dbb7ec6b74301bcb9bfa697c9d9fff022ec508e1719e7b2c69e2e8b042faac1125be7717b5e5e084f816a2c88e136920
+  checksum: 10c0/e35912b43da0caaab5252444bab87a31ca22950cde2822b3b3dc32e39c2d42dad1a4cf7b5dde9783aa2d007f0b2cba6ab9563fc6d2dbcaaa833b35178118767c
   languageName: node
   linkType: hard
 
@@ -3595,7 +3497,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/yargs@npm:^17.0.33, @types/yargs@npm:^17.0.8":
+"@types/yargs@npm:^17.0.33":
   version: 17.0.33
   resolution: "@types/yargs@npm:17.0.33"
   dependencies:
@@ -3604,191 +3506,277 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:8.29.1, @typescript-eslint/eslint-plugin@npm:^8.22.0":
-  version: 8.29.1
-  resolution: "@typescript-eslint/eslint-plugin@npm:8.29.1"
+"@typescript-eslint/eslint-plugin@npm:8.39.1":
+  version: 8.39.1
+  resolution: "@typescript-eslint/eslint-plugin@npm:8.39.1"
+  dependencies:
+    "@eslint-community/regexpp": "npm:^4.10.0"
+    "@typescript-eslint/scope-manager": "npm:8.39.1"
+    "@typescript-eslint/type-utils": "npm:8.39.1"
+    "@typescript-eslint/utils": "npm:8.39.1"
+    "@typescript-eslint/visitor-keys": "npm:8.39.1"
+    graphemer: "npm:^1.4.0"
+    ignore: "npm:^7.0.0"
+    natural-compare: "npm:^1.4.0"
+    ts-api-utils: "npm:^2.1.0"
+  peerDependencies:
+    "@typescript-eslint/parser": ^8.39.1
+    eslint: ^8.57.0 || ^9.0.0
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/7a55de558ed6ea6f09ee0b0d994b4a70e1df9f72e4afc7b3073de1b41504a36d905779304d59c34db700af60da3bb438c62480d30462a13b8b72d0b50318aeee
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/eslint-plugin@npm:^8.22.0":
+  version: 8.42.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:8.42.0"
   dependencies:
     "@eslint-community/regexpp": "npm:^4.10.0"
-    "@typescript-eslint/scope-manager": "npm:8.29.1"
-    "@typescript-eslint/type-utils": "npm:8.29.1"
-    "@typescript-eslint/utils": "npm:8.29.1"
-    "@typescript-eslint/visitor-keys": "npm:8.29.1"
+    "@typescript-eslint/scope-manager": "npm:8.42.0"
+    "@typescript-eslint/type-utils": "npm:8.42.0"
+    "@typescript-eslint/utils": "npm:8.42.0"
+    "@typescript-eslint/visitor-keys": "npm:8.42.0"
     graphemer: "npm:^1.4.0"
-    ignore: "npm:^5.3.1"
+    ignore: "npm:^7.0.0"
     natural-compare: "npm:^1.4.0"
-    ts-api-utils: "npm:^2.0.1"
+    ts-api-utils: "npm:^2.1.0"
   peerDependencies:
-    "@typescript-eslint/parser": ^8.0.0 || ^8.0.0-alpha.0
+    "@typescript-eslint/parser": ^8.42.0
     eslint: ^8.57.0 || ^9.0.0
-    typescript: ">=4.8.4 <5.9.0"
-  checksum: 10c0/a3ed7556edcac374cab622862f2f9adedc91ca305d6937db6869a0253d675858c296cb5413980e8404fc39737117faaf35b00c6804664b3c542bdc417502532f
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/835fd7497f0e4eaef55dc3d94079acc0ad1dc74735916915f160419b1e7f44d04fbce683b4871148d1af33046bd5ae3fed59103d4c49460776b560c42173bbff
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:8.29.1":
-  version: 8.29.1
-  resolution: "@typescript-eslint/parser@npm:8.29.1"
+"@typescript-eslint/parser@npm:8.39.1":
+  version: 8.39.1
+  resolution: "@typescript-eslint/parser@npm:8.39.1"
   dependencies:
-    "@typescript-eslint/scope-manager": "npm:8.29.1"
-    "@typescript-eslint/types": "npm:8.29.1"
-    "@typescript-eslint/typescript-estree": "npm:8.29.1"
-    "@typescript-eslint/visitor-keys": "npm:8.29.1"
+    "@typescript-eslint/scope-manager": "npm:8.39.1"
+    "@typescript-eslint/types": "npm:8.39.1"
+    "@typescript-eslint/typescript-estree": "npm:8.39.1"
+    "@typescript-eslint/visitor-keys": "npm:8.39.1"
     debug: "npm:^4.3.4"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0
-    typescript: ">=4.8.4 <5.9.0"
-  checksum: 10c0/af3570ff58c42c2014e5c117bebf91120737fb139d94415ca2711844990e95252c3006ccc699871fe3f592cc1a3f4ebfdc9dd5f6cb29b6b128c2524fcf311b75
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/da30372c4e8dee48a0c421996bf0bf73a62a57039ee6b817eda64de2d70fdb88dd20b50615c81be7e68fd29cdd7852829b859bb8539b4a4c78030f93acaf5664
   languageName: node
   linkType: hard
 
 "@typescript-eslint/parser@npm:^8.22.0":
-  version: 8.30.1
-  resolution: "@typescript-eslint/parser@npm:8.30.1"
+  version: 8.44.0
+  resolution: "@typescript-eslint/parser@npm:8.44.0"
   dependencies:
-    "@typescript-eslint/scope-manager": "npm:8.30.1"
-    "@typescript-eslint/types": "npm:8.30.1"
-    "@typescript-eslint/typescript-estree": "npm:8.30.1"
-    "@typescript-eslint/visitor-keys": "npm:8.30.1"
+    "@typescript-eslint/scope-manager": "npm:8.44.0"
+    "@typescript-eslint/types": "npm:8.44.0"
+    "@typescript-eslint/typescript-estree": "npm:8.44.0"
+    "@typescript-eslint/visitor-keys": "npm:8.44.0"
     debug: "npm:^4.3.4"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0
-    typescript: ">=4.8.4 <5.9.0"
-  checksum: 10c0/add025d5cfca5cd4d1f74c9297e71de95c945f4efbe6cbfbc72e2cd794cd2684397c7d832bdb5177a1f54398111243d20bd0d2ffdb32a4d5230f1db7cd6fbfb6
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/21b91fba122a4f5df0065de57c5320f8eb4c4f8e0da245f7ee0e68f08f7c5a692a28ac2cb5100d8ad8c8ee7e3804b23f996cd80e0e1da0a0fe0c37ddd2fd04b8
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/project-service@npm:8.39.1":
+  version: 8.39.1
+  resolution: "@typescript-eslint/project-service@npm:8.39.1"
+  dependencies:
+    "@typescript-eslint/tsconfig-utils": "npm:^8.39.1"
+    "@typescript-eslint/types": "npm:^8.39.1"
+    debug: "npm:^4.3.4"
+  peerDependencies:
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/40207af4f4e2a260ea276766d502c4736f6dc5488e84bbab6444e2786289ece2dbca2686323c48d4e9c265e409a309bf3d97d4aa03767dff8cc7642b436bda35
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/project-service@npm:8.42.0":
+  version: 8.42.0
+  resolution: "@typescript-eslint/project-service@npm:8.42.0"
+  dependencies:
+    "@typescript-eslint/tsconfig-utils": "npm:^8.42.0"
+    "@typescript-eslint/types": "npm:^8.42.0"
+    debug: "npm:^4.3.4"
+  peerDependencies:
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/788b0bc52683be376cd768a4fed3202cdaccc86f231ec94a0f6bbb1389fdfd0e14c505f03015cefb73869de63c8089b78a169ed957048a1e5ee1b6250ec19604
   languageName: node
   linkType: hard
 
-"@typescript-eslint/project-service@npm:8.43.0":
-  version: 8.43.0
-  resolution: "@typescript-eslint/project-service@npm:8.43.0"
+"@typescript-eslint/project-service@npm:8.44.0":
+  version: 8.44.0
+  resolution: "@typescript-eslint/project-service@npm:8.44.0"
   dependencies:
-    "@typescript-eslint/tsconfig-utils": "npm:^8.43.0"
-    "@typescript-eslint/types": "npm:^8.43.0"
+    "@typescript-eslint/tsconfig-utils": "npm:^8.44.0"
+    "@typescript-eslint/types": "npm:^8.44.0"
     debug: "npm:^4.3.4"
   peerDependencies:
     typescript: ">=4.8.4 <6.0.0"
-  checksum: 10c0/c9058b5fbf9642c35a303641e4ff2d0df1ddac337275bab84b56167f1019fbcb7e69959239fed82e53c747f58d6ee4c1859cf5b018803cba1b1aab430439d728
+  checksum: 10c0/b06e94ae2a2c167271b61200136283432b6a80ab8bcc175bdcb8f685f4daeb4e28b1d83a064f0a660f184811d67e16d4291ab5fac563e48f20213409be8e95e3
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:8.29.1":
-  version: 8.29.1
-  resolution: "@typescript-eslint/scope-manager@npm:8.29.1"
+"@typescript-eslint/scope-manager@npm:8.39.1":
+  version: 8.39.1
+  resolution: "@typescript-eslint/scope-manager@npm:8.39.1"
   dependencies:
-    "@typescript-eslint/types": "npm:8.29.1"
-    "@typescript-eslint/visitor-keys": "npm:8.29.1"
-  checksum: 10c0/8b87a04f01ebc13075e352509bca8f31c757c3220857fa473ac155f6bdf7f30fe82765d0c3d8e790f7fad394a32765bd9f716b97c08e17581d358c76086d51af
+    "@typescript-eslint/types": "npm:8.39.1"
+    "@typescript-eslint/visitor-keys": "npm:8.39.1"
+  checksum: 10c0/9466db557c1a0eaaf24b0ece5810413d11390d046bf6e47c4074879e8dba0348b835a21106c842ab20ff85f2384312cf9e20bfe7684e31640696e29957003511
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:8.30.1":
-  version: 8.30.1
-  resolution: "@typescript-eslint/scope-manager@npm:8.30.1"
+"@typescript-eslint/scope-manager@npm:8.42.0":
+  version: 8.42.0
+  resolution: "@typescript-eslint/scope-manager@npm:8.42.0"
   dependencies:
-    "@typescript-eslint/types": "npm:8.30.1"
-    "@typescript-eslint/visitor-keys": "npm:8.30.1"
-  checksum: 10c0/8560fd02bb2a73b56f79af1dfa311491926f3625a04c0f32777c7c0bdec47b4a677addf2d2e2cc313416bb59b7a6e0bff7837449816a5ec5ff81e923daa76ca7
+    "@typescript-eslint/types": "npm:8.42.0"
+    "@typescript-eslint/visitor-keys": "npm:8.42.0"
+  checksum: 10c0/caca15f2124909c588ed3e48fe0769ad8baa296a0b229f724ec94f5f746e486e08dd49eeddd66d01f09e2ddaed03f9e18d7b535a44196d413f283e22f929f623
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:8.43.0":
-  version: 8.43.0
-  resolution: "@typescript-eslint/scope-manager@npm:8.43.0"
+"@typescript-eslint/scope-manager@npm:8.44.0":
+  version: 8.44.0
+  resolution: "@typescript-eslint/scope-manager@npm:8.44.0"
   dependencies:
-    "@typescript-eslint/types": "npm:8.43.0"
-    "@typescript-eslint/visitor-keys": "npm:8.43.0"
-  checksum: 10c0/f87b3c3a5d3ad18326945288fa5b9b9fa662d87f466dc159e1514e00e359e830b80557f213acb3d23d5d600826b4cc4cfa5d2d479f8aba1b9834df19a640a779
+    "@typescript-eslint/types": "npm:8.44.0"
+    "@typescript-eslint/visitor-keys": "npm:8.44.0"
+  checksum: 10c0/c221e0b9fe9021b1b41432d96818131c107cfc33fb1f8da6093e236c992ed6160dae6355dd5571fb71b9194a24b24734c032ded4c00500599adda2cc07ef8803
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/tsconfig-utils@npm:8.39.1, @typescript-eslint/tsconfig-utils@npm:^8.39.1":
+  version: 8.39.1
+  resolution: "@typescript-eslint/tsconfig-utils@npm:8.39.1"
+  peerDependencies:
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/664dff0b4ae908cb98c78f9ca73c36cf57c3a2206965d9d0659649ffc02347eb30e1452499671a425592f14a2a5c5eb82ae389b34f3c415a12119506b4ebb61c
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/tsconfig-utils@npm:8.42.0, @typescript-eslint/tsconfig-utils@npm:^8.42.0":
+  version: 8.42.0
+  resolution: "@typescript-eslint/tsconfig-utils@npm:8.42.0"
+  peerDependencies:
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/03882eeee279fafa2cb4ee3154742417fd29395b3bfe3f867d9d4cb9cb68d1200c885c35b96dd558a1aff8561ac3700cff8ca7680a5cf34e5e0e136a6ee3c30c
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/tsconfig-utils@npm:8.44.0, @typescript-eslint/tsconfig-utils@npm:^8.44.0":
+  version: 8.44.0
+  resolution: "@typescript-eslint/tsconfig-utils@npm:8.44.0"
+  peerDependencies:
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/453157f0da2d280b4536db6c80dfee4e5c98a1174109cc8d42b20eeb3fda2d54cb6f03f57a142280710091ed0a8e28f231658c253284b1c62960c2974047f3de
   languageName: node
   linkType: hard
 
-"@typescript-eslint/tsconfig-utils@npm:8.43.0, @typescript-eslint/tsconfig-utils@npm:^8.43.0":
-  version: 8.43.0
-  resolution: "@typescript-eslint/tsconfig-utils@npm:8.43.0"
+"@typescript-eslint/type-utils@npm:8.39.1":
+  version: 8.39.1
+  resolution: "@typescript-eslint/type-utils@npm:8.39.1"
+  dependencies:
+    "@typescript-eslint/types": "npm:8.39.1"
+    "@typescript-eslint/typescript-estree": "npm:8.39.1"
+    "@typescript-eslint/utils": "npm:8.39.1"
+    debug: "npm:^4.3.4"
+    ts-api-utils: "npm:^2.1.0"
   peerDependencies:
+    eslint: ^8.57.0 || ^9.0.0
     typescript: ">=4.8.4 <6.0.0"
-  checksum: 10c0/b3a472368ad31e31e58ef019f6afec7387f5885e3fd423c71f3910b6d6b767324fde8bd60bec2e7505cc130317ece7fbc91314c44cdfea74ff76b5039bf26d52
+  checksum: 10c0/430dfefe040eae5f0c8dfbce37b5ce071095a28f335e74793923d113682e26313586e90f7bbe2c2f9bffb0da52ffdf5055ea36b96d9f218cef35aa14853122d5
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:8.29.1":
-  version: 8.29.1
-  resolution: "@typescript-eslint/type-utils@npm:8.29.1"
+"@typescript-eslint/type-utils@npm:8.42.0":
+  version: 8.42.0
+  resolution: "@typescript-eslint/type-utils@npm:8.42.0"
   dependencies:
-    "@typescript-eslint/typescript-estree": "npm:8.29.1"
-    "@typescript-eslint/utils": "npm:8.29.1"
+    "@typescript-eslint/types": "npm:8.42.0"
+    "@typescript-eslint/typescript-estree": "npm:8.42.0"
+    "@typescript-eslint/utils": "npm:8.42.0"
     debug: "npm:^4.3.4"
-    ts-api-utils: "npm:^2.0.1"
+    ts-api-utils: "npm:^2.1.0"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0
-    typescript: ">=4.8.4 <5.9.0"
-  checksum: 10c0/72cc01dbac866b0a7c7b1f637ad03ffd22f6d3617f70f06f485cf3096fddfc821fdc56de1a072cc6af70250c63698a3e5a910f67fe46eea941955b6e0da1b2bd
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/47e5f7276cafd7719d3e2f2e456fa988927e658d15c2c188a692d9c639f9d76f582a6c133cb1bf01eba9027e1022eb6b79b57861a96302460e5e847c2b536afa
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:8.29.1":
-  version: 8.29.1
-  resolution: "@typescript-eslint/types@npm:8.29.1"
-  checksum: 10c0/bbcb9e4f38df4485092b51ac6bb62d65f321d914ab58dc0ff1eaa7787dc0b4a39e237c2617b9f2c2bcb91a343f30de523e3544f69affa1ee4287a3ef2fc10ce7
+"@typescript-eslint/types@npm:8.39.1, @typescript-eslint/types@npm:^8.39.1":
+  version: 8.39.1
+  resolution: "@typescript-eslint/types@npm:8.39.1"
+  checksum: 10c0/0e188d2d52509a24c500a87adf561387ffcac56b62cb9fd0ca1f929bb3d4eedb6b8f9d516c1890855d39930c9dd8d502d5b4600b8c9cc832d3ebb595d81c7533
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:8.30.1":
-  version: 8.30.1
-  resolution: "@typescript-eslint/types@npm:8.30.1"
-  checksum: 10c0/461e800bf911c24d9b61bdbeed897921454acc0c24b4e8a79f943c14234241828c13a31dce31dcce77511185f806a2fb94769075e122e3182ba5a32dd55573eb
+"@typescript-eslint/types@npm:8.42.0, @typescript-eslint/types@npm:^8.42.0":
+  version: 8.42.0
+  resolution: "@typescript-eslint/types@npm:8.42.0"
+  checksum: 10c0/d585dff5005328282cc59f9402e886a3db64727906ad3e68b49d7ef73bc07bef3ed569287ba826ebaa07b69be42a72232a38529951d64c28cebd83db0892cd33
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:8.43.0, @typescript-eslint/types@npm:^8.43.0":
-  version: 8.43.0
-  resolution: "@typescript-eslint/types@npm:8.43.0"
-  checksum: 10c0/60d19b695affce128fe1076ebe4cff7e05d38dd50155d653fc9e995eafa56c299fd49ad4d9d2997f118a75fb57e3ca18001623bc3ef3fa0111f863079203e4b2
+"@typescript-eslint/types@npm:8.44.0, @typescript-eslint/types@npm:^8.44.0":
+  version: 8.44.0
+  resolution: "@typescript-eslint/types@npm:8.44.0"
+  checksum: 10c0/d3a4c173294533215b4676a89e454e728cda352d6c923489af4306bf5166e51625bff6980708cb1c191bdb89c864d82bccdf96a9ed5a76f6554d6af8c90e2e1d
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:8.29.1":
-  version: 8.29.1
-  resolution: "@typescript-eslint/typescript-estree@npm:8.29.1"
+"@typescript-eslint/typescript-estree@npm:8.39.1":
+  version: 8.39.1
+  resolution: "@typescript-eslint/typescript-estree@npm:8.39.1"
   dependencies:
-    "@typescript-eslint/types": "npm:8.29.1"
-    "@typescript-eslint/visitor-keys": "npm:8.29.1"
+    "@typescript-eslint/project-service": "npm:8.39.1"
+    "@typescript-eslint/tsconfig-utils": "npm:8.39.1"
+    "@typescript-eslint/types": "npm:8.39.1"
+    "@typescript-eslint/visitor-keys": "npm:8.39.1"
     debug: "npm:^4.3.4"
     fast-glob: "npm:^3.3.2"
     is-glob: "npm:^4.0.3"
     minimatch: "npm:^9.0.4"
     semver: "npm:^7.6.0"
-    ts-api-utils: "npm:^2.0.1"
+    ts-api-utils: "npm:^2.1.0"
   peerDependencies:
-    typescript: ">=4.8.4 <5.9.0"
-  checksum: 10c0/33c46c667d9262e5625d5d0064338711b342e62c5675ded6811a2cb13ee5de2f71b90e9d0be5cb338b11b1a329c376a6bbf6c3d24fa8fb457b2eefc9f3298513
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/1de1a37fed354600a08bc971492c2f14238f0a4bf07a43bedb416c17b7312d18bec92c68c8f2790bb0a1bffcd757f7962914be9f6213068f18f6c4fdde259af4
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:8.30.1":
-  version: 8.30.1
-  resolution: "@typescript-eslint/typescript-estree@npm:8.30.1"
+"@typescript-eslint/typescript-estree@npm:8.42.0":
+  version: 8.42.0
+  resolution: "@typescript-eslint/typescript-estree@npm:8.42.0"
   dependencies:
-    "@typescript-eslint/types": "npm:8.30.1"
-    "@typescript-eslint/visitor-keys": "npm:8.30.1"
+    "@typescript-eslint/project-service": "npm:8.42.0"
+    "@typescript-eslint/tsconfig-utils": "npm:8.42.0"
+    "@typescript-eslint/types": "npm:8.42.0"
+    "@typescript-eslint/visitor-keys": "npm:8.42.0"
     debug: "npm:^4.3.4"
     fast-glob: "npm:^3.3.2"
     is-glob: "npm:^4.0.3"
     minimatch: "npm:^9.0.4"
     semver: "npm:^7.6.0"
-    ts-api-utils: "npm:^2.0.1"
+    ts-api-utils: "npm:^2.1.0"
   peerDependencies:
-    typescript: ">=4.8.4 <5.9.0"
-  checksum: 10c0/9eb0b1bc4b5df37c84ac411d77ce0edf934b5fdde021ed45c984aa7894132ff7a276d2b95e2d29ef84c411df8ecdf096eec3e07ec1ee5b1fa8c623d40a82ecf0
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/2d3354d780421cfa90f812048984c43cd47aabecef7a5c0f56ad0b91331cb369d1c8366da90bf9a8f6df47df3741f9e16897e998f16270ac55376f519b775c23
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:8.43.0":
-  version: 8.43.0
-  resolution: "@typescript-eslint/typescript-estree@npm:8.43.0"
+"@typescript-eslint/typescript-estree@npm:8.44.0":
+  version: 8.44.0
+  resolution: "@typescript-eslint/typescript-estree@npm:8.44.0"
   dependencies:
-    "@typescript-eslint/project-service": "npm:8.43.0"
-    "@typescript-eslint/tsconfig-utils": "npm:8.43.0"
-    "@typescript-eslint/types": "npm:8.43.0"
-    "@typescript-eslint/visitor-keys": "npm:8.43.0"
+    "@typescript-eslint/project-service": "npm:8.44.0"
+    "@typescript-eslint/tsconfig-utils": "npm:8.44.0"
+    "@typescript-eslint/types": "npm:8.44.0"
+    "@typescript-eslint/visitor-keys": "npm:8.44.0"
     debug: "npm:^4.3.4"
     fast-glob: "npm:^3.3.2"
     is-glob: "npm:^4.0.3"
@@ -3797,67 +3785,67 @@ __metadata:
     ts-api-utils: "npm:^2.1.0"
   peerDependencies:
     typescript: ">=4.8.4 <6.0.0"
-  checksum: 10c0/184ba925067d7fbcb377450195a89511f030a49d080e27058fa78078a069d86c1936b1a82ce6f19ff24c30c4de8b779deb050c36b06db5372c95fc7e5be7115a
+  checksum: 10c0/303dd3048ee0b980b63022626bdff212c0719ce5c5945fb233464f201aadeb3fd703118c8e255a26e1ae81f772bf76b60163119b09d2168f198d5ce1724c2a70
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:8.29.1":
-  version: 8.29.1
-  resolution: "@typescript-eslint/utils@npm:8.29.1"
+"@typescript-eslint/utils@npm:8.39.1, @typescript-eslint/utils@npm:^8.0.0":
+  version: 8.39.1
+  resolution: "@typescript-eslint/utils@npm:8.39.1"
   dependencies:
-    "@eslint-community/eslint-utils": "npm:^4.4.0"
-    "@typescript-eslint/scope-manager": "npm:8.29.1"
-    "@typescript-eslint/types": "npm:8.29.1"
-    "@typescript-eslint/typescript-estree": "npm:8.29.1"
+    "@eslint-community/eslint-utils": "npm:^4.7.0"
+    "@typescript-eslint/scope-manager": "npm:8.39.1"
+    "@typescript-eslint/types": "npm:8.39.1"
+    "@typescript-eslint/typescript-estree": "npm:8.39.1"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0
-    typescript: ">=4.8.4 <5.9.0"
-  checksum: 10c0/1b2704b769b0c9353cf26a320ecf9775ba51c94c7c30e2af80ca31f4cb230f319762ab06535fcb26b6963144bbeaa53233b34965907c506283861b013f5b95fc
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/ebc01d736af43728df9a0915058d0c771dec9cc58846ffdcbb986c78e7dabf547ea7daecd75db58b2af88a3c2a43de8a7e5f81feefacfa31be173fc384d25d77
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:^8.0.0":
-  version: 8.43.0
-  resolution: "@typescript-eslint/utils@npm:8.43.0"
+"@typescript-eslint/utils@npm:8.42.0":
+  version: 8.42.0
+  resolution: "@typescript-eslint/utils@npm:8.42.0"
   dependencies:
     "@eslint-community/eslint-utils": "npm:^4.7.0"
-    "@typescript-eslint/scope-manager": "npm:8.43.0"
-    "@typescript-eslint/types": "npm:8.43.0"
-    "@typescript-eslint/typescript-estree": "npm:8.43.0"
+    "@typescript-eslint/scope-manager": "npm:8.42.0"
+    "@typescript-eslint/types": "npm:8.42.0"
+    "@typescript-eslint/typescript-estree": "npm:8.42.0"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0
     typescript: ">=4.8.4 <6.0.0"
-  checksum: 10c0/42fc8c60551361d80b5c53b303ba8cd20cf914665168416ad0a278cd44aae587311af9e4461f92ed28b5f36091d275a0e9974482d5e9ba95fc00108a537cdd36
+  checksum: 10c0/acf30019023669ddae00c02cabfa74fc12defccd4703e552ab5115edbeceaaf1688c1586873bf66aefeb3f03eb1ed456905403303913c724db38bf030e40a700
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:8.29.1":
-  version: 8.29.1
-  resolution: "@typescript-eslint/visitor-keys@npm:8.29.1"
+"@typescript-eslint/visitor-keys@npm:8.39.1":
+  version: 8.39.1
+  resolution: "@typescript-eslint/visitor-keys@npm:8.39.1"
   dependencies:
-    "@typescript-eslint/types": "npm:8.29.1"
-    eslint-visitor-keys: "npm:^4.2.0"
-  checksum: 10c0/0c12e83c84a754161c89e594a96454799669979c7021a8936515ec574a1fa1d6e3119e0eacf502e07a0fa7254974558ea7a48901c8bfed3c46579a61b655e4f5
+    "@typescript-eslint/types": "npm:8.39.1"
+    eslint-visitor-keys: "npm:^4.2.1"
+  checksum: 10c0/4d81f6826a211bc2752e25cd16d1f415f28ebc92b35142402ec23f3765f2d00963b75ac06266ad9c674ca5b057d07d8c114116e5bf14f5465dde1d1aa60bc72f
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:8.30.1":
-  version: 8.30.1
-  resolution: "@typescript-eslint/visitor-keys@npm:8.30.1"
+"@typescript-eslint/visitor-keys@npm:8.42.0":
+  version: 8.42.0
+  resolution: "@typescript-eslint/visitor-keys@npm:8.42.0"
   dependencies:
-    "@typescript-eslint/types": "npm:8.30.1"
-    eslint-visitor-keys: "npm:^4.2.0"
-  checksum: 10c0/bdc182289c68a5c8f891f9aecf6ccb59743c3f2b1bbe57f57f8c7ce1688f4381182e301919895cefc929539eea914eeb847f7d351cdc3f685ed6c5ee67a10c9e
+    "@typescript-eslint/types": "npm:8.42.0"
+    eslint-visitor-keys: "npm:^4.2.1"
+  checksum: 10c0/22c942f2a100d71c08f952b976446e824ddf227d4ac02b7016e12d4a33804ab06072d570695baed3565d0a08a1d3fa6ff3ccf97a122d63e65780f871d597f1b1
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:8.43.0":
-  version: 8.43.0
-  resolution: "@typescript-eslint/visitor-keys@npm:8.43.0"
+"@typescript-eslint/visitor-keys@npm:8.44.0":
+  version: 8.44.0
+  resolution: "@typescript-eslint/visitor-keys@npm:8.44.0"
   dependencies:
-    "@typescript-eslint/types": "npm:8.43.0"
+    "@typescript-eslint/types": "npm:8.44.0"
     eslint-visitor-keys: "npm:^4.2.1"
-  checksum: 10c0/5d576eaf7bea41933ba726f4b24410bd3fc2521ef286967c3dc630c6a90fabff2a2d7c4d12cb841d3f946d2e5e6fb2605e7edd84e3360308fe379dbf2b8dc2fa
+  checksum: 10c0/c1cb5c000ab56ddb96ddb0991a10ef3a48c76b3f3b3ab7a5a94d24e71371bf96aa22cfe4332625e49ad7b961947a21599ff7c6128253cc9495e8cbd2cad25d72
   languageName: node
   linkType: hard
 
@@ -4026,7 +4014,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.12.0, acorn@npm:^8.14.0, acorn@npm:^8.8.2":
+"acorn@npm:^8.12.0, acorn@npm:^8.8.2":
   version: 8.14.0
   resolution: "acorn@npm:8.14.0"
   bin:
@@ -4035,6 +4023,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"acorn@npm:^8.15.0":
+  version: 8.15.0
+  resolution: "acorn@npm:8.15.0"
+  bin:
+    acorn: bin/acorn
+  checksum: 10c0/dec73ff59b7d6628a01eebaece7f2bdb8bb62b9b5926dcad0f8931f2b8b79c2be21f6c68ac095592adb5adb15831a3635d9343e6a91d028bbe85d564875ec3ec
+  languageName: node
+  linkType: hard
+
 "agent-base@npm:6, agent-base@npm:^6.0.2":
   version: 6.0.2
   resolution: "agent-base@npm:6.0.2"
@@ -4151,7 +4148,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-styles@npm:^6.1.0, ansi-styles@npm:^6.2.1":
+"ansi-styles@npm:^6.0.0, ansi-styles@npm:^6.1.0, ansi-styles@npm:^6.2.1":
   version: 6.2.1
   resolution: "ansi-styles@npm:6.2.1"
   checksum: 10c0/5d1ec38c123984bcedd996eac680d548f31828bd679a66db2bdf11844634dde55fec3efa9c6bb1d89056a5e79c1ac540c4c784d592ea1d25028a92227d2f2d5c
@@ -4234,6 +4231,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"array-includes@npm:^3.1.9":
+  version: 3.1.9
+  resolution: "array-includes@npm:3.1.9"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.4"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.24.0"
+    es-object-atoms: "npm:^1.1.1"
+    get-intrinsic: "npm:^1.3.0"
+    is-string: "npm:^1.1.1"
+    math-intrinsics: "npm:^1.1.0"
+  checksum: 10c0/0235fa69078abeac05ac4250699c44996bc6f774a9cbe45db48674ce6bd142f09b327d31482ff75cf03344db4ea03eae23edb862d59378b484b47ed842574856
+  languageName: node
+  linkType: hard
+
 "array-union@npm:^2.1.0":
   version: 2.1.0
   resolution: "array-union@npm:2.1.0"
@@ -4255,21 +4268,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array.prototype.findlastindex@npm:^1.2.5":
-  version: 1.2.5
-  resolution: "array.prototype.findlastindex@npm:1.2.5"
+"array.prototype.findlastindex@npm:^1.2.6":
+  version: 1.2.6
+  resolution: "array.prototype.findlastindex@npm:1.2.6"
   dependencies:
-    call-bind: "npm:^1.0.7"
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.4"
     define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.23.2"
+    es-abstract: "npm:^1.23.9"
     es-errors: "npm:^1.3.0"
-    es-object-atoms: "npm:^1.0.0"
-    es-shim-unscopables: "npm:^1.0.2"
-  checksum: 10c0/962189487728b034f3134802b421b5f39e42ee2356d13b42d2ddb0e52057ffdcc170b9524867f4f0611a6f638f4c19b31e14606e8bcbda67799e26685b195aa3
+    es-object-atoms: "npm:^1.1.1"
+    es-shim-unscopables: "npm:^1.1.0"
+  checksum: 10c0/82559310d2e57ec5f8fc53d7df420e3abf0ba497935de0a5570586035478ba7d07618cb18e2d4ada2da514c8fb98a034aaf5c06caa0a57e2f7f4c4adedef5956
   languageName: node
   linkType: hard
 
-"array.prototype.flat@npm:^1.3.1, array.prototype.flat@npm:^1.3.2":
+"array.prototype.flat@npm:^1.3.1, array.prototype.flat@npm:^1.3.3":
   version: 1.3.3
   resolution: "array.prototype.flat@npm:1.3.3"
   dependencies:
@@ -4281,7 +4295,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array.prototype.flatmap@npm:^1.3.2, array.prototype.flatmap@npm:^1.3.3":
+"array.prototype.flatmap@npm:^1.3.3":
   version: 1.3.3
   resolution: "array.prototype.flatmap@npm:1.3.3"
   dependencies:
@@ -4328,13 +4342,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"async@npm:^3.2.3":
-  version: 3.2.6
-  resolution: "async@npm:3.2.6"
-  checksum: 10c0/36484bb15ceddf07078688d95e27076379cc2f87b10c03b6dd8a83e89475a3c8df5848859dd06a4c95af1e4c16fc973de0171a77f18ea00be899aca2a4f85e70
-  languageName: node
-  linkType: hard
-
 "available-typed-arrays@npm:^1.0.7":
   version: 1.0.7
   resolution: "available-typed-arrays@npm:1.0.7"
@@ -4383,15 +4390,15 @@ __metadata:
   linkType: hard
 
 "babel-plugin-istanbul@npm:^7.0.0":
-  version: 7.0.1
-  resolution: "babel-plugin-istanbul@npm:7.0.1"
+  version: 7.0.0
+  resolution: "babel-plugin-istanbul@npm:7.0.0"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.0.0"
     "@istanbuljs/load-nyc-config": "npm:^1.0.0"
     "@istanbuljs/schema": "npm:^0.1.3"
     istanbul-lib-instrument: "npm:^6.0.2"
     test-exclude: "npm:^6.0.0"
-  checksum: 10c0/92975e3df12503b168695463b451468da0c20e117807221652eb8e33a26c160f3b9d4c5c4e65495657420e871c6a54e5e31f539e2e1da37ef2261d7ddd4b1dfd
+  checksum: 10c0/79c37bd59ea9bcb16218e874993621e24048776fac7ee72eabe78f0909200851bdb93b32f6eba5b463206f15a1ee7ad40a725af8447952321ae1fdf14e740fe9
   languageName: node
   linkType: hard
 
@@ -4406,39 +4413,39 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-corejs2@npm:^0.4.10":
-  version: 0.4.12
-  resolution: "babel-plugin-polyfill-corejs2@npm:0.4.12"
+"babel-plugin-polyfill-corejs2@npm:^0.4.14":
+  version: 0.4.14
+  resolution: "babel-plugin-polyfill-corejs2@npm:0.4.14"
   dependencies:
-    "@babel/compat-data": "npm:^7.22.6"
-    "@babel/helper-define-polyfill-provider": "npm:^0.6.3"
+    "@babel/compat-data": "npm:^7.27.7"
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.5"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10c0/49150c310de2d472ecb95bd892bca1aa833cf5e84bbb76e3e95cf9ff2c6c8c3b3783dd19d70ba50ff6235eb8ce1fa1c0affe491273c95a1ef6a2923f4d5a3819
+  checksum: 10c0/d74cba0600a6508e86d220bde7164eb528755d91be58020e5ea92ea7fbb12c9d8d2c29246525485adfe7f68ae02618ec428f9a589cac6cbedf53cc3972ad7fbe
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-corejs3@npm:^0.11.0":
-  version: 0.11.1
-  resolution: "babel-plugin-polyfill-corejs3@npm:0.11.1"
+"babel-plugin-polyfill-corejs3@npm:^0.13.0":
+  version: 0.13.0
+  resolution: "babel-plugin-polyfill-corejs3@npm:0.13.0"
   dependencies:
-    "@babel/helper-define-polyfill-provider": "npm:^0.6.3"
-    core-js-compat: "npm:^3.40.0"
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.5"
+    core-js-compat: "npm:^3.43.0"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10c0/025f754b6296d84b20200aff63a3c1acdd85e8c621781f2bd27fe2512d0060526192d02329326947c6b29c27cf475fbcfaaff8c51eab1d2bfc7b79086bb64229
+  checksum: 10c0/5d8e228da425edc040d8c868486fd01ba10b0440f841156a30d9f8986f330f723e2ee61553c180929519563ef5b64acce2caac36a5a847f095d708dda5d8206d
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-regenerator@npm:^0.6.1":
-  version: 0.6.3
-  resolution: "babel-plugin-polyfill-regenerator@npm:0.6.3"
+"babel-plugin-polyfill-regenerator@npm:^0.6.5":
+  version: 0.6.5
+  resolution: "babel-plugin-polyfill-regenerator@npm:0.6.5"
   dependencies:
-    "@babel/helper-define-polyfill-provider": "npm:^0.6.3"
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.5"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10c0/40164432e058e4b5c6d56feecacdad22692ae0534bd80c92d5399ed9e1a6a2b6797c8fda837995daddd4ca391f9aa2d58c74ad465164922e0f73631eaf9c4f76
+  checksum: 10c0/63aa8ed716df6a9277c6ab42b887858fa9f57a70cc1d0ae2b91bdf081e45d4502848cba306fb60b02f59f99b32fd02ff4753b373cac48ccdac9b7d19dd56f06d
   languageName: node
   linkType: hard
 
@@ -4450,8 +4457,8 @@ __metadata:
   linkType: hard
 
 "babel-preset-current-node-syntax@npm:^1.1.0":
-  version: 1.2.0
-  resolution: "babel-preset-current-node-syntax@npm:1.2.0"
+  version: 1.1.0
+  resolution: "babel-preset-current-node-syntax@npm:1.1.0"
   dependencies:
     "@babel/plugin-syntax-async-generators": "npm:^7.8.4"
     "@babel/plugin-syntax-bigint": "npm:^7.8.3"
@@ -4469,8 +4476,8 @@ __metadata:
     "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5"
     "@babel/plugin-syntax-top-level-await": "npm:^7.14.5"
   peerDependencies:
-    "@babel/core": ^7.0.0 || ^8.0.0-0
-  checksum: 10c0/94a4f81cddf9b051045d08489e4fff7336292016301664c138cfa3d9ffe3fe2ba10a24ad6ae589fd95af1ac72ba0216e1653555c187e694d7b17be0c002bea10
+    "@babel/core": ^7.0.0
+  checksum: 10c0/0b838d4412e3322cb4436f246e24e9c00bebcedfd8f00a2f51489db683bd35406bbd55a700759c28d26959c6e03f84dd6a1426f576f440267c1d7a73c5717281
   languageName: node
   linkType: hard
 
@@ -4500,13 +4507,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"base64-js@npm:^1.3.1":
-  version: 1.5.1
-  resolution: "base64-js@npm:1.5.1"
-  checksum: 10c0/f23823513b63173a001030fae4f2dabe283b99a9d324ade3ad3d148e218134676f1ee8568c877cd79ec1c53158dcf2d2ba527a97c606618928ba99dd930102bf
-  languageName: node
-  linkType: hard
-
 "boxen@npm:^5.0.0":
   version: 5.1.2
   resolution: "boxen@npm:5.1.2"
@@ -4560,7 +4560,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.24.0, browserslist@npm:^4.24.3":
+"browserslist@npm:^4.24.0":
   version: 4.24.4
   resolution: "browserslist@npm:4.24.4"
   dependencies:
@@ -4574,6 +4574,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"browserslist@npm:^4.25.1":
+  version: 4.25.2
+  resolution: "browserslist@npm:4.25.2"
+  dependencies:
+    caniuse-lite: "npm:^1.0.30001733"
+    electron-to-chromium: "npm:^1.5.199"
+    node-releases: "npm:^2.0.19"
+    update-browserslist-db: "npm:^1.1.3"
+  bin:
+    browserslist: cli.js
+  checksum: 10c0/3fd27c6d569125e08b476d0ded78232c756bffeb79f29cfa548961dfd62fa560f8bf60fdb52d496ba276aea0c843968dd38ed4138a724277715be3b41dac8861
+  languageName: node
+  linkType: hard
+
 "bs-logger@npm:^0.2.6":
   version: 0.2.6
   resolution: "bs-logger@npm:0.2.6"
@@ -4599,16 +4613,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"buffer@npm:^6.0.3":
-  version: 6.0.3
-  resolution: "buffer@npm:6.0.3"
-  dependencies:
-    base64-js: "npm:^1.3.1"
-    ieee754: "npm:^1.2.1"
-  checksum: 10c0/2a905fbbcde73cc5d8bd18d1caa23715d5f83a5935867c2329f0ac06104204ba7947be098fe1317fbd8830e26090ff8e764f08cd14fefc977bb248c3487bcbd0
-  languageName: node
-  linkType: hard
-
 "cacache@npm:^16.1.0":
   version: 16.1.3
   resolution: "cacache@npm:16.1.3"
@@ -4675,13 +4679,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cacheable@npm:^1.8.9":
-  version: 1.8.10
-  resolution: "cacheable@npm:1.8.10"
+"cacheable@npm:^1.10.4":
+  version: 1.10.4
+  resolution: "cacheable@npm:1.10.4"
   dependencies:
-    hookified: "npm:^1.8.1"
-    keyv: "npm:^5.3.2"
-  checksum: 10c0/56d3ef860dbd173f56fccf96c55903ba132bc1a89ef8d1f42290766f5e3f63ae3537a9f305e03d8ccdcdb57f9db56d615014be593a75b4b0ee76a75344c0ec5f
+    hookified: "npm:^1.11.0"
+    keyv: "npm:^5.5.0"
+  checksum: 10c0/80690b084cba1c52bf46ca4a8452bd192d0d37896a53899608908a553968711dbe78db144d99912b629952f6f03af5aaebe5958d503d3609c1bfe37cc5b899cc
   languageName: node
   linkType: hard
 
@@ -4765,7 +4769,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:4.1.2, chalk@npm:^4.0.0, chalk@npm:^4.0.2, chalk@npm:^4.1.0, chalk@npm:^4.1.2":
+"caniuse-lite@npm:^1.0.30001733":
+  version: 1.0.30001735
+  resolution: "caniuse-lite@npm:1.0.30001735"
+  checksum: 10c0/1cb74221f16f8835c903770c1cf88fb73a07298b8398396a2b97570136e8f691053ee5840eb589fe34b4ede14ab828c9421d893a67e43c26ef91ab052813cb8c
+  languageName: node
+  linkType: hard
+
+"chalk@npm:4.1.2, chalk@npm:^4.0.0, chalk@npm:^4.1.0, chalk@npm:^4.1.2":
   version: 4.1.2
   resolution: "chalk@npm:4.1.2"
   dependencies:
@@ -4775,10 +4786,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:5.6.2, chalk@npm:^5.6.0":
-  version: 5.6.2
-  resolution: "chalk@npm:5.6.2"
-  checksum: 10c0/99a4b0f0e7991796b1e7e3f52dceb9137cae2a9dfc8fc0784a550dc4c558e15ab32ed70b14b21b52beb2679b4892b41a0aa44249bcb996f01e125d58477c6976
+"chalk@npm:5.6.0, chalk@npm:^5.6.0":
+  version: 5.6.0
+  resolution: "chalk@npm:5.6.0"
+  checksum: 10c0/f8558fc12fd9805f167611803b325b0098bbccdc9f1d3bafead41c9bac61f263357f3c0df0cbe28bc2fd5fca3edcf618b01d6771a5a776b4c15d061482a72b23
   languageName: node
   linkType: hard
 
@@ -4812,17 +4823,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ci-info@npm:^3.2.0":
-  version: 3.9.0
-  resolution: "ci-info@npm:3.9.0"
-  checksum: 10c0/6f0109e36e111684291d46123d491bc4e7b7a1934c3a20dea28cba89f1d4a03acd892f5f6a81ed3855c38647e285a150e3c9ba062e38943bef57fee6c1554c3a
-  languageName: node
-  linkType: hard
-
 "ci-info@npm:^4.2.0":
-  version: 4.3.0
-  resolution: "ci-info@npm:4.3.0"
-  checksum: 10c0/60d3dfe95d75c01454ec1cfd5108617dd598a28a2a3e148bd7e1523c1c208b5f5a3007cafcbe293e6fd0a5a310cc32217c5dc54743eeabc0a2bec80072fc055c
+  version: 4.2.0
+  resolution: "ci-info@npm:4.2.0"
+  checksum: 10c0/37a2f4b6a213a5cf835890eb0241f0d5b022f6cfefde58a69e9af8e3a0e71e06d6ad7754b0d4efb9cd2613e58a7a33996d71b56b0d04242722e86666f3f3d058
   languageName: node
   linkType: hard
 
@@ -4856,13 +4860,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cli-truncate@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "cli-truncate@npm:5.0.0"
+"cli-truncate@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "cli-truncate@npm:4.0.0"
   dependencies:
-    slice-ansi: "npm:^7.1.0"
-    string-width: "npm:^8.0.0"
-  checksum: 10c0/f07a2e66669b77003928a52585a6880287d99b6cfe036d0037711e4439accaf36a496caf43508fe728ef9ebf0db88db45211252ce86a8f10d5aeea6890f2b2a9
+    slice-ansi: "npm:^5.0.0"
+    string-width: "npm:^7.0.0"
+  checksum: 10c0/d7f0b73e3d9b88cb496e6c086df7410b541b56a43d18ade6a573c9c18bd001b1c3fba1ad578f741a4218fdc794d042385f8ac02c25e1c295a2d8b9f3cb86eb4c
   languageName: node
   linkType: hard
 
@@ -4944,10 +4948,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:14.0.1, commander@npm:^14.0.0":
-  version: 14.0.1
-  resolution: "commander@npm:14.0.1"
-  checksum: 10c0/64439c0651ddd01c1d0f48c8f08e97c18a0a1fa693879451f1203ad01132af2c2aa85da24cf0d8e098ab9e6dc385a756be670d2999a3c628ec745c3ec124587b
+"commander@npm:14.0.0, commander@npm:^14.0.0":
+  version: 14.0.0
+  resolution: "commander@npm:14.0.0"
+  checksum: 10c0/73c4babfa558077868d84522b11ef56834165d472b9e86a634cd4c3ae7fc72d59af6377d8878e06bd570fe8f3161eced3cbe383c38f7093272bb65bd242b595b
   languageName: node
   linkType: hard
 
@@ -4986,19 +4990,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js-compat@npm:^3.40.0":
-  version: 3.40.0
-  resolution: "core-js-compat@npm:3.40.0"
+"core-js-compat@npm:^3.43.0":
+  version: 3.45.0
+  resolution: "core-js-compat@npm:3.45.0"
   dependencies:
-    browserslist: "npm:^4.24.3"
-  checksum: 10c0/44f6e88726fe266a5be9581a79766800478a8d5c492885f2d4c2a4e2babd9b06bc1689d5340d3a61ae7332f990aff2e83b6203ff8773137a627cfedfbeefabeb
+    browserslist: "npm:^4.25.1"
+  checksum: 10c0/3515955d2c83846f0bf8c4a0f96fc514a6b711e9b3ee19a8df3683a6b0720d762fef60a63bb5c07907f9d18aa00c5904ef690dd4150bc39e2d47e01f05154fda
   languageName: node
   linkType: hard
 
 "core-js@npm:^3.40.0":
-  version: 3.41.0
-  resolution: "core-js@npm:3.41.0"
-  checksum: 10c0/a29ed0b7fe81acf49d04ce5c17a1947166b1c15197327a5d12f95bbe84b46d60c3c13de701d808f41da06fa316285f3f55ce5903abc8d5642afc1eac4457afc8
+  version: 3.45.1
+  resolution: "core-js@npm:3.45.1"
+  checksum: 10c0/c38e5fae5a05ee3a129c45e10056aafe61dbb15fd35d27e0c289f5490387541c89741185e0aeb61acb558559c6697e016c245cca738fa169a73f2b06cd30e6b6
   languageName: node
   linkType: hard
 
@@ -5130,7 +5134,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4, debug@npm:^4.3.7":
+"debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4":
   version: 4.4.0
   resolution: "debug@npm:4.4.0"
   dependencies:
@@ -5142,15 +5146,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4.4.3, debug@npm:^4.4.1":
-  version: 4.4.3
-  resolution: "debug@npm:4.4.3"
+"debug@npm:4.4.1, debug@npm:^4.4.1":
+  version: 4.4.1
+  resolution: "debug@npm:4.4.1"
   dependencies:
     ms: "npm:^2.1.3"
   peerDependenciesMeta:
     supports-color:
       optional: true
-  checksum: 10c0/d79136ec6c83ecbefd0f6a5593da6a9c91ec4d7ddc4b54c883d6e71ec9accb5f67a1a5e96d00a328196b5b5c86d365e98d8a3a70856aaf16b4e7b1985e67f5a6
+  checksum: 10c0/d2b44bc1afd912b49bb7ebb0d50a860dc93a4dd7d946e8de94abc957bb63726b7dd5aa48c18c2386c379ec024c46692e15ed3ed97d481729f929201e671fcd55
   languageName: node
   linkType: hard
 
@@ -5171,14 +5175,14 @@ __metadata:
   linkType: hard
 
 "dedent@npm:^1.6.0":
-  version: 1.7.0
-  resolution: "dedent@npm:1.7.0"
+  version: 1.6.0
+  resolution: "dedent@npm:1.6.0"
   peerDependencies:
     babel-plugin-macros: ^3.1.0
   peerDependenciesMeta:
     babel-plugin-macros:
       optional: true
-  checksum: 10c0/c5e8a8beb5072bd5e520cb64b27a82d7ec3c2a63ee5ce47dbc2a05d5b7700cefd77a992a752cd0a8b1d979c1db06b14fb9486e805f3ad6088eda6e07cd9bf2d5
+  checksum: 10c0/671b8f5e390dd2a560862c4511dd6d2638e71911486f78cb32116551f8f2aa6fcaf50579ffffb2f866d46b5b80fd72470659ca5760ede8f967619ef7df79e8a5
   languageName: node
   linkType: hard
 
@@ -5321,14 +5325,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ejs@npm:^3.1.10":
-  version: 3.1.10
-  resolution: "ejs@npm:3.1.10"
-  dependencies:
-    jake: "npm:^10.8.5"
-  bin:
-    ejs: bin/cli.js
-  checksum: 10c0/52eade9e68416ed04f7f92c492183340582a36482836b11eab97b159fcdcfdedc62233a1bf0bf5e5e1851c501f2dca0e2e9afd111db2599e4e7f53ee29429ae1
+"electron-to-chromium@npm:^1.5.199":
+  version: 1.5.201
+  resolution: "electron-to-chromium@npm:1.5.201"
+  checksum: 10c0/83f415506e4f79ebe3bcf311526823fe73cd9d54938eff6d98504d222d7c1f7db21acbe98b30394349b1dc973ac85123f1afb5f2b495e166885e5ddd7cf086e6
   languageName: node
   linkType: hard
 
@@ -5420,26 +5420,85 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-abstract@npm:^1.17.5, es-abstract@npm:^1.23.2, es-abstract@npm:^1.23.3, es-abstract@npm:^1.23.5, es-abstract@npm:^1.23.6, es-abstract@npm:^1.23.9":
-  version: 1.23.9
-  resolution: "es-abstract@npm:1.23.9"
+"es-abstract@npm:^1.17.5, es-abstract@npm:^1.23.2, es-abstract@npm:^1.23.3, es-abstract@npm:^1.23.5, es-abstract@npm:^1.23.6, es-abstract@npm:^1.23.9":
+  version: 1.23.9
+  resolution: "es-abstract@npm:1.23.9"
+  dependencies:
+    array-buffer-byte-length: "npm:^1.0.2"
+    arraybuffer.prototype.slice: "npm:^1.0.4"
+    available-typed-arrays: "npm:^1.0.7"
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.3"
+    data-view-buffer: "npm:^1.0.2"
+    data-view-byte-length: "npm:^1.0.2"
+    data-view-byte-offset: "npm:^1.0.1"
+    es-define-property: "npm:^1.0.1"
+    es-errors: "npm:^1.3.0"
+    es-object-atoms: "npm:^1.0.0"
+    es-set-tostringtag: "npm:^2.1.0"
+    es-to-primitive: "npm:^1.3.0"
+    function.prototype.name: "npm:^1.1.8"
+    get-intrinsic: "npm:^1.2.7"
+    get-proto: "npm:^1.0.0"
+    get-symbol-description: "npm:^1.1.0"
+    globalthis: "npm:^1.0.4"
+    gopd: "npm:^1.2.0"
+    has-property-descriptors: "npm:^1.0.2"
+    has-proto: "npm:^1.2.0"
+    has-symbols: "npm:^1.1.0"
+    hasown: "npm:^2.0.2"
+    internal-slot: "npm:^1.1.0"
+    is-array-buffer: "npm:^3.0.5"
+    is-callable: "npm:^1.2.7"
+    is-data-view: "npm:^1.0.2"
+    is-regex: "npm:^1.2.1"
+    is-shared-array-buffer: "npm:^1.0.4"
+    is-string: "npm:^1.1.1"
+    is-typed-array: "npm:^1.1.15"
+    is-weakref: "npm:^1.1.0"
+    math-intrinsics: "npm:^1.1.0"
+    object-inspect: "npm:^1.13.3"
+    object-keys: "npm:^1.1.1"
+    object.assign: "npm:^4.1.7"
+    own-keys: "npm:^1.0.1"
+    regexp.prototype.flags: "npm:^1.5.3"
+    safe-array-concat: "npm:^1.1.3"
+    safe-push-apply: "npm:^1.0.0"
+    safe-regex-test: "npm:^1.1.0"
+    set-proto: "npm:^1.0.0"
+    string.prototype.trim: "npm:^1.2.10"
+    string.prototype.trimend: "npm:^1.0.9"
+    string.prototype.trimstart: "npm:^1.0.8"
+    typed-array-buffer: "npm:^1.0.3"
+    typed-array-byte-length: "npm:^1.0.3"
+    typed-array-byte-offset: "npm:^1.0.4"
+    typed-array-length: "npm:^1.0.7"
+    unbox-primitive: "npm:^1.1.0"
+    which-typed-array: "npm:^1.1.18"
+  checksum: 10c0/1de229c9e08fe13c17fe5abaec8221545dfcd57e51f64909599a6ae896df84b8fd2f7d16c60cb00d7bf495b9298ca3581aded19939d4b7276854a4b066f8422b
+  languageName: node
+  linkType: hard
+
+"es-abstract@npm:^1.24.0":
+  version: 1.24.0
+  resolution: "es-abstract@npm:1.24.0"
   dependencies:
     array-buffer-byte-length: "npm:^1.0.2"
     arraybuffer.prototype.slice: "npm:^1.0.4"
     available-typed-arrays: "npm:^1.0.7"
     call-bind: "npm:^1.0.8"
-    call-bound: "npm:^1.0.3"
+    call-bound: "npm:^1.0.4"
     data-view-buffer: "npm:^1.0.2"
     data-view-byte-length: "npm:^1.0.2"
     data-view-byte-offset: "npm:^1.0.1"
     es-define-property: "npm:^1.0.1"
     es-errors: "npm:^1.3.0"
-    es-object-atoms: "npm:^1.0.0"
+    es-object-atoms: "npm:^1.1.1"
     es-set-tostringtag: "npm:^2.1.0"
     es-to-primitive: "npm:^1.3.0"
     function.prototype.name: "npm:^1.1.8"
-    get-intrinsic: "npm:^1.2.7"
-    get-proto: "npm:^1.0.0"
+    get-intrinsic: "npm:^1.3.0"
+    get-proto: "npm:^1.0.1"
     get-symbol-description: "npm:^1.1.0"
     globalthis: "npm:^1.0.4"
     gopd: "npm:^1.2.0"
@@ -5451,21 +5510,24 @@ __metadata:
     is-array-buffer: "npm:^3.0.5"
     is-callable: "npm:^1.2.7"
     is-data-view: "npm:^1.0.2"
+    is-negative-zero: "npm:^2.0.3"
     is-regex: "npm:^1.2.1"
+    is-set: "npm:^2.0.3"
     is-shared-array-buffer: "npm:^1.0.4"
     is-string: "npm:^1.1.1"
     is-typed-array: "npm:^1.1.15"
-    is-weakref: "npm:^1.1.0"
+    is-weakref: "npm:^1.1.1"
     math-intrinsics: "npm:^1.1.0"
-    object-inspect: "npm:^1.13.3"
+    object-inspect: "npm:^1.13.4"
     object-keys: "npm:^1.1.1"
     object.assign: "npm:^4.1.7"
     own-keys: "npm:^1.0.1"
-    regexp.prototype.flags: "npm:^1.5.3"
+    regexp.prototype.flags: "npm:^1.5.4"
     safe-array-concat: "npm:^1.1.3"
     safe-push-apply: "npm:^1.0.0"
     safe-regex-test: "npm:^1.1.0"
     set-proto: "npm:^1.0.0"
+    stop-iteration-iterator: "npm:^1.1.0"
     string.prototype.trim: "npm:^1.2.10"
     string.prototype.trimend: "npm:^1.0.9"
     string.prototype.trimstart: "npm:^1.0.8"
@@ -5474,8 +5536,8 @@ __metadata:
     typed-array-byte-offset: "npm:^1.0.4"
     typed-array-length: "npm:^1.0.7"
     unbox-primitive: "npm:^1.1.0"
-    which-typed-array: "npm:^1.1.18"
-  checksum: 10c0/1de229c9e08fe13c17fe5abaec8221545dfcd57e51f64909599a6ae896df84b8fd2f7d16c60cb00d7bf495b9298ca3581aded19939d4b7276854a4b066f8422b
+    which-typed-array: "npm:^1.1.19"
+  checksum: 10c0/b256e897be32df5d382786ce8cce29a1dd8c97efbab77a26609bd70f2ed29fbcfc7a31758cb07488d532e7ccccdfca76c1118f2afe5a424cdc05ca007867c318
   languageName: node
   linkType: hard
 
@@ -5556,6 +5618,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"es-shim-unscopables@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "es-shim-unscopables@npm:1.1.0"
+  dependencies:
+    hasown: "npm:^2.0.2"
+  checksum: 10c0/1b9702c8a1823fc3ef39035a4e958802cf294dd21e917397c561d0b3e195f383b978359816b1732d02b255ccf63e1e4815da0065b95db8d7c992037be3bbbcdb
+  languageName: node
+  linkType: hard
+
 "es-to-primitive@npm:^1.3.0":
   version: 1.3.0
   resolution: "es-to-primitive@npm:1.3.0"
@@ -5589,13 +5660,13 @@ __metadata:
   linkType: hard
 
 "eslint-config-prettier@npm:^10.0.1":
-  version: 10.1.1
-  resolution: "eslint-config-prettier@npm:10.1.1"
+  version: 10.1.8
+  resolution: "eslint-config-prettier@npm:10.1.8"
   peerDependencies:
     eslint: ">=7.0.0"
   bin:
     eslint-config-prettier: bin/cli.js
-  checksum: 10c0/3dbfdf6495dd62e2e1644ea9e8e978100dabcd8740fd264df1222d130001a1e8de05d6ed6c67d3a60727386a07507f067d1ca79af6d546910414beab19e7966e
+  checksum: 10c0/e1bcfadc9eccd526c240056b1e59c5cd26544fe59feb85f38f4f1f116caed96aea0b3b87868e68b3099e55caaac3f2e5b9f58110f85db893e83a332751192682
   languageName: node
   linkType: hard
 
@@ -5610,44 +5681,44 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-module-utils@npm:^2.12.0":
-  version: 2.12.0
-  resolution: "eslint-module-utils@npm:2.12.0"
+"eslint-module-utils@npm:^2.12.1":
+  version: 2.12.1
+  resolution: "eslint-module-utils@npm:2.12.1"
   dependencies:
     debug: "npm:^3.2.7"
   peerDependenciesMeta:
     eslint:
       optional: true
-  checksum: 10c0/4d8b46dcd525d71276f9be9ffac1d2be61c9d54cc53c992e6333cf957840dee09381842b1acbbb15fc6b255ebab99cd481c5007ab438e5455a14abe1a0468558
+  checksum: 10c0/6f4efbe7a91ae49bf67b4ab3644cb60bc5bd7db4cb5521de1b65be0847ffd3fb6bce0dd68f0995e1b312d137f768e2a1f842ee26fe73621afa05f850628fdc40
   languageName: node
   linkType: hard
 
 "eslint-plugin-import@npm:^2.31.0":
-  version: 2.31.0
-  resolution: "eslint-plugin-import@npm:2.31.0"
+  version: 2.32.0
+  resolution: "eslint-plugin-import@npm:2.32.0"
   dependencies:
     "@rtsao/scc": "npm:^1.1.0"
-    array-includes: "npm:^3.1.8"
-    array.prototype.findlastindex: "npm:^1.2.5"
-    array.prototype.flat: "npm:^1.3.2"
-    array.prototype.flatmap: "npm:^1.3.2"
+    array-includes: "npm:^3.1.9"
+    array.prototype.findlastindex: "npm:^1.2.6"
+    array.prototype.flat: "npm:^1.3.3"
+    array.prototype.flatmap: "npm:^1.3.3"
     debug: "npm:^3.2.7"
     doctrine: "npm:^2.1.0"
     eslint-import-resolver-node: "npm:^0.3.9"
-    eslint-module-utils: "npm:^2.12.0"
+    eslint-module-utils: "npm:^2.12.1"
     hasown: "npm:^2.0.2"
-    is-core-module: "npm:^2.15.1"
+    is-core-module: "npm:^2.16.1"
     is-glob: "npm:^4.0.3"
     minimatch: "npm:^3.1.2"
     object.fromentries: "npm:^2.0.8"
     object.groupby: "npm:^1.0.3"
-    object.values: "npm:^1.2.0"
+    object.values: "npm:^1.2.1"
     semver: "npm:^6.3.1"
-    string.prototype.trimend: "npm:^1.0.8"
+    string.prototype.trimend: "npm:^1.0.9"
     tsconfig-paths: "npm:^3.15.0"
   peerDependencies:
     eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
-  checksum: 10c0/e21d116ddd1900e091ad120b3eb68c5dd5437fe2c930f1211781cd38b246f090a6b74d5f3800b8255a0ed29782591521ad44eb21c5534960a8f1fb4040fd913a
+  checksum: 10c0/bfb1b8fc8800398e62ddfefbf3638d185286edfed26dfe00875cc2846d954491b4f5112457831588b757fa789384e1ae585f812614c4797f0499fa234fd4a48b
   languageName: node
   linkType: hard
 
@@ -5707,15 +5778,15 @@ __metadata:
   linkType: hard
 
 "eslint-plugin-unused-imports@npm:^4.1.4":
-  version: 4.1.4
-  resolution: "eslint-plugin-unused-imports@npm:4.1.4"
+  version: 4.2.0
+  resolution: "eslint-plugin-unused-imports@npm:4.2.0"
   peerDependencies:
     "@typescript-eslint/eslint-plugin": ^8.0.0-0 || ^7.0.0 || ^6.0.0 || ^5.0.0
     eslint: ^9.0.0 || ^8.0.0
   peerDependenciesMeta:
     "@typescript-eslint/eslint-plugin":
       optional: true
-  checksum: 10c0/3899f64b0e8b23fa6b81e2754fc10f93d8741e051d70390a8100ca39af7878bde8625f234b76111af69562ef2512104b52c3703e986ccb3ac9adc07911896acf
+  checksum: 10c0/b6293323670dda64b0b5931ace1ab45f731e399e87da591c208da09c6bf89a84591b160b8e15e3b47f8f1f662dc80306368a60c09f833de0f6f1dbd97c247949
   languageName: node
   linkType: hard
 
@@ -5729,13 +5800,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-scope@npm:^8.3.0":
-  version: 8.3.0
-  resolution: "eslint-scope@npm:8.3.0"
+"eslint-scope@npm:^8.4.0":
+  version: 8.4.0
+  resolution: "eslint-scope@npm:8.4.0"
   dependencies:
     esrecurse: "npm:^4.3.0"
     estraverse: "npm:^5.2.0"
-  checksum: 10c0/23bf54345573201fdf06d29efa345ab508b355492f6c6cc9e2b9f6d02b896f369b6dd5315205be94b8853809776c4d13353b85c6b531997b164ff6c3328ecf5b
+  checksum: 10c0/407f6c600204d0f3705bd557f81bd0189e69cd7996f408f8971ab5779c0af733d1af2f1412066b40ee1588b085874fc37a2333986c6521669cdbdd36ca5058e0
   languageName: node
   linkType: hard
 
@@ -5753,7 +5824,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-visitor-keys@npm:^4.1.0, eslint-visitor-keys@npm:^4.2.0":
+"eslint-visitor-keys@npm:^4.1.0":
   version: 4.2.0
   resolution: "eslint-visitor-keys@npm:4.2.0"
   checksum: 10c0/2ed81c663b147ca6f578312919483eb040295bbab759e5a371953456c636c5b49a559883e2677112453728d66293c0a4c90ab11cab3428cf02a0236d2e738269
@@ -5768,17 +5839,17 @@ __metadata:
   linkType: hard
 
 "eslint@npm:^9.19.0":
-  version: 9.24.0
-  resolution: "eslint@npm:9.24.0"
+  version: 9.33.0
+  resolution: "eslint@npm:9.33.0"
   dependencies:
     "@eslint-community/eslint-utils": "npm:^4.2.0"
     "@eslint-community/regexpp": "npm:^4.12.1"
-    "@eslint/config-array": "npm:^0.20.0"
-    "@eslint/config-helpers": "npm:^0.2.0"
-    "@eslint/core": "npm:^0.12.0"
+    "@eslint/config-array": "npm:^0.21.0"
+    "@eslint/config-helpers": "npm:^0.3.1"
+    "@eslint/core": "npm:^0.15.2"
     "@eslint/eslintrc": "npm:^3.3.1"
-    "@eslint/js": "npm:9.24.0"
-    "@eslint/plugin-kit": "npm:^0.2.7"
+    "@eslint/js": "npm:9.33.0"
+    "@eslint/plugin-kit": "npm:^0.3.5"
     "@humanfs/node": "npm:^0.16.6"
     "@humanwhocodes/module-importer": "npm:^1.0.1"
     "@humanwhocodes/retry": "npm:^0.4.2"
@@ -5789,9 +5860,9 @@ __metadata:
     cross-spawn: "npm:^7.0.6"
     debug: "npm:^4.3.2"
     escape-string-regexp: "npm:^4.0.0"
-    eslint-scope: "npm:^8.3.0"
-    eslint-visitor-keys: "npm:^4.2.0"
-    espree: "npm:^10.3.0"
+    eslint-scope: "npm:^8.4.0"
+    eslint-visitor-keys: "npm:^4.2.1"
+    espree: "npm:^10.4.0"
     esquery: "npm:^1.5.0"
     esutils: "npm:^2.0.2"
     fast-deep-equal: "npm:^3.1.3"
@@ -5813,7 +5884,7 @@ __metadata:
       optional: true
   bin:
     eslint: bin/eslint.js
-  checksum: 10c0/f758ff1b9d2f2af5335f562f3f40aa8f71607b3edca33f7616840a222ed224555aeb3ac6943cc86e4f9ac5dc124a60bbfde624d054fb235631a8c04447e39ecc
+  checksum: 10c0/1e1f60d2b62d9d65553e9af916a8dccf00eeedd982103f35bf58c205803907cb1fda73ef595178d47384ea80d8624a182b63682a6b15d8387e9a5d86904a2a2d
   languageName: node
   linkType: hard
 
@@ -5828,14 +5899,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"espree@npm:^10.3.0":
-  version: 10.3.0
-  resolution: "espree@npm:10.3.0"
+"espree@npm:^10.4.0":
+  version: 10.4.0
+  resolution: "espree@npm:10.4.0"
   dependencies:
-    acorn: "npm:^8.14.0"
+    acorn: "npm:^8.15.0"
     acorn-jsx: "npm:^5.3.2"
-    eslint-visitor-keys: "npm:^4.2.0"
-  checksum: 10c0/272beeaca70d0a1a047d61baff64db04664a33d7cfb5d144f84bc8a5c6194c6c8ebe9cc594093ca53add88baa23e59b01e69e8a0160ab32eac570482e165c462
+    eslint-visitor-keys: "npm:^4.2.1"
+  checksum: 10c0/c63fe06131c26c8157b4083313cb02a9a54720a08e21543300e55288c40e06c3fc284bdecf108d3a1372c5934a0a88644c98714f38b6ae8ed272b40d9ea08d6b
   languageName: node
   linkType: hard
 
@@ -5926,7 +5997,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"expect@npm:30.1.2, expect@npm:^30.0.0":
+"expect@npm:30.1.2":
   version: 30.1.2
   resolution: "expect@npm:30.1.2"
   dependencies:
@@ -5940,6 +6011,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expect@npm:^30.0.0":
+  version: 30.0.5
+  resolution: "expect@npm:30.0.5"
+  dependencies:
+    "@jest/expect-utils": "npm:30.0.5"
+    "@jest/get-type": "npm:30.0.1"
+    jest-matcher-utils: "npm:30.0.5"
+    jest-message-util: "npm:30.0.5"
+    jest-mock: "npm:30.0.5"
+    jest-util: "npm:30.0.5"
+  checksum: 10c0/e08e4ced2856a0898b3a4e8d09aab7f8e2212cde701e41a560c3ab7e9053517947ff1a762fc425dbe0c48ed54e131aa7190de67a402f98b4e5ada23eb21c0a9f
+  languageName: node
+  linkType: hard
+
 "exponential-backoff@npm:^3.1.1":
   version: 3.1.1
   resolution: "exponential-backoff@npm:3.1.1"
@@ -6025,12 +6110,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"file-entry-cache@npm:^10.0.7":
-  version: 10.0.8
-  resolution: "file-entry-cache@npm:10.0.8"
+"file-entry-cache@npm:^10.1.4":
+  version: 10.1.4
+  resolution: "file-entry-cache@npm:10.1.4"
   dependencies:
-    flat-cache: "npm:^6.1.8"
-  checksum: 10c0/f0932e4145cd8d608a4b78c97000b64cf85700234ab5805157b31a8a9fab3e11cc3f47fb45fbac9b9ded6f80b6459fa796a02f195d73629e22629c0c7ac733a1
+    flat-cache: "npm:^6.1.13"
+  checksum: 10c0/78a7d6b257c620374a8fc5280f14acffc7bd5cb5d39a5bd3509c640f17209f5194eff6e3b476d19db7cfbe9f97abe85ec8d33260f7ed94225efb2a95a68841a6
   languageName: node
   linkType: hard
 
@@ -6043,15 +6128,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"filelist@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "filelist@npm:1.0.4"
-  dependencies:
-    minimatch: "npm:^5.0.1"
-  checksum: 10c0/426b1de3944a3d153b053f1c0ebfd02dccd0308a4f9e832ad220707a6d1f1b3c9784d6cadf6b2f68f09a57565f63ebc7bcdc913ccf8012d834f472c46e596f41
-  languageName: node
-  linkType: hard
-
 "filesize@npm:^6.1.0":
   version: 6.4.0
   resolution: "filesize@npm:6.4.0"
@@ -6098,14 +6174,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"flat-cache@npm:^6.1.8":
-  version: 6.1.8
-  resolution: "flat-cache@npm:6.1.8"
+"flat-cache@npm:^6.1.13":
+  version: 6.1.13
+  resolution: "flat-cache@npm:6.1.13"
   dependencies:
-    cacheable: "npm:^1.8.9"
+    cacheable: "npm:^1.10.4"
     flatted: "npm:^3.3.3"
-    hookified: "npm:^1.8.1"
-  checksum: 10c0/ccd7eb36e1d9d9b1b5e224990b37aa528a1db5546c204c9134dc1e737b9da71dd40bc9706663d40e512dd58367c7cf624d922c1ba949d5089720cf4d11fd9191
+    hookified: "npm:^1.11.0"
+  checksum: 10c0/30e96c67323910685a112fb4adc0f101152c3f29e50a425b1cad6693c25c7de8c998d2ec62979660231b955d083b8e0397b5b0e5859286fcc9fccd55e8f63b9d
   languageName: node
   linkType: hard
 
@@ -6132,6 +6208,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"for-each@npm:^0.3.5":
+  version: 0.3.5
+  resolution: "for-each@npm:0.3.5"
+  dependencies:
+    is-callable: "npm:^1.2.7"
+  checksum: 10c0/0e0b50f6a843a282637d43674d1fb278dda1dd85f4f99b640024cfb10b85058aac0cc781bf689d5fe50b4b7f638e91e548560723a4e76e04fe96ae35ef039cee
+  languageName: node
+  linkType: hard
+
 "foreground-child@npm:^3.1.0":
   version: 3.3.0
   resolution: "foreground-child@npm:3.3.0"
@@ -6251,13 +6336,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-east-asian-width@npm:^1.3.0":
-  version: 1.4.0
-  resolution: "get-east-asian-width@npm:1.4.0"
-  checksum: 10c0/4e481d418e5a32061c36fbb90d1b225a254cc5b2df5f0b25da215dcd335a3c111f0c2023ffda43140727a9cafb62dac41d022da82c08f31083ee89f714ee3b83
-  languageName: node
-  linkType: hard
-
 "get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6, get-intrinsic@npm:^1.2.7":
   version: 1.2.7
   resolution: "get-intrinsic@npm:1.2.7"
@@ -6462,7 +6540,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"graceful-fs@npm:^4.2.11, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9":
+"graceful-fs@npm:^4.2.11, graceful-fs@npm:^4.2.6":
   version: 4.2.11
   resolution: "graceful-fs@npm:4.2.11"
   checksum: 10c0/386d011a553e02bc594ac2ca0bd6d9e4c22d7fa8cfbfc448a6d148c59ea881b092db9dbe3547ae4b88e55f1b01f7c4a2ecc53b310c042793e63aa44cf6c257f2
@@ -6485,6 +6563,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"handlebars@npm:^4.7.8":
+  version: 4.7.8
+  resolution: "handlebars@npm:4.7.8"
+  dependencies:
+    minimist: "npm:^1.2.5"
+    neo-async: "npm:^2.6.2"
+    source-map: "npm:^0.6.1"
+    uglify-js: "npm:^3.1.4"
+    wordwrap: "npm:^1.0.0"
+  dependenciesMeta:
+    uglify-js:
+      optional: true
+  bin:
+    handlebars: bin/handlebars
+  checksum: 10c0/7aff423ea38a14bb379316f3857fe0df3c5d66119270944247f155ba1f08e07a92b340c58edaa00cfe985c21508870ee5183e0634dcb53dd405f35c93ef7f10d
+  languageName: node
+  linkType: hard
+
 "has-bigints@npm:^1.0.2":
   version: 1.1.0
   resolution: "has-bigints@npm:1.1.0"
@@ -6549,10 +6645,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hookified@npm:^1.8.1":
-  version: 1.8.2
-  resolution: "hookified@npm:1.8.2"
-  checksum: 10c0/6219057e00e9ad04b53c784c7147ecd24a29cd76f5a11ff3719b2e226b25501e2ddff4301906a148896633208623453934f06b8441732873800a4f7a8f4eac44
+"hookified@npm:^1.11.0":
+  version: 1.12.0
+  resolution: "hookified@npm:1.12.0"
+  checksum: 10c0/2487cf6a26563e745971cd5fc96ceae10da9182ff30d5e057dd7100dbb93806d7bea11f2a80a09af0cc4a53feff65bc64a6fe568360ce86428ca1f1221ae0446
   languageName: node
   linkType: hard
 
@@ -6670,13 +6766,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ieee754@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "ieee754@npm:1.2.1"
-  checksum: 10c0/b0782ef5e0935b9f12883a2e2aa37baa75da6e66ce6515c168697b42160807d9330de9a32ec1ed73149aea02e0d822e572bca6f1e22bdcbd2149e13b050b17bb
-  languageName: node
-  linkType: hard
-
 "ignore-walk@npm:^6.0.0":
   version: 6.0.5
   resolution: "ignore-walk@npm:6.0.5"
@@ -6686,17 +6775,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ignore@npm:^5.2.0, ignore@npm:^5.3.1":
+"ignore@npm:^5.2.0":
   version: 5.3.2
   resolution: "ignore@npm:5.3.2"
   checksum: 10c0/f9f652c957983634ded1e7f02da3b559a0d4cc210fca3792cb67f1b153623c9c42efdc1c4121af171e295444459fc4a9201101fb041b1104a3c000bccb188337
   languageName: node
   linkType: hard
 
-"ignore@npm:^7.0.3":
-  version: 7.0.3
-  resolution: "ignore@npm:7.0.3"
-  checksum: 10c0/8e21637513cbcd888a4873d34d5c651a2e24b3c4c9a6b159335a26bed348c3c386c51d6fab23577f59140e1b226323138fbd50e63882d4568fd12aa6c822029e
+"ignore@npm:^7.0.0":
+  version: 7.0.4
+  resolution: "ignore@npm:7.0.4"
+  checksum: 10c0/90e1f69ce352b9555caecd9cbfd07abe7626d312a6f90efbbb52c7edca6ea8df065d66303863b30154ab1502afb2da8bc59d5b04e1719a52ef75bbf675c488eb
+  languageName: node
+  linkType: hard
+
+"ignore@npm:^7.0.5":
+  version: 7.0.5
+  resolution: "ignore@npm:7.0.5"
+  checksum: 10c0/ae00db89fe873064a093b8999fe4cc284b13ef2a178636211842cceb650b9c3e390d3339191acb145d81ed5379d2074840cf0c33a20bdbd6f32821f79eb4ad5d
   languageName: node
   linkType: hard
 
@@ -6851,7 +6947,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-core-module@npm:^2.13.0, is-core-module@npm:^2.15.1, is-core-module@npm:^2.16.0, is-core-module@npm:^2.8.1":
+"is-core-module@npm:^2.13.0, is-core-module@npm:^2.16.0, is-core-module@npm:^2.16.1, is-core-module@npm:^2.8.1":
   version: 2.16.1
   resolution: "is-core-module@npm:2.16.1"
   dependencies:
@@ -6904,6 +7000,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-fullwidth-code-point@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "is-fullwidth-code-point@npm:4.0.0"
+  checksum: 10c0/df2a717e813567db0f659c306d61f2f804d480752526886954a2a3e2246c7745fd07a52b5fecf2b68caf0a6c79dcdace6166fdf29cc76ed9975cc334f0a018b8
+  languageName: node
+  linkType: hard
+
 "is-fullwidth-code-point@npm:^5.0.0":
   version: 5.0.0
   resolution: "is-fullwidth-code-point@npm:5.0.0"
@@ -6962,6 +7065,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-negative-zero@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "is-negative-zero@npm:2.0.3"
+  checksum: 10c0/bcdcf6b8b9714063ffcfa9929c575ac69bfdabb8f4574ff557dfc086df2836cf07e3906f5bbc4f2a5c12f8f3ba56af640c843cdfc74da8caed86c7c7d66fd08e
+  languageName: node
+  linkType: hard
+
 "is-number-object@npm:^1.1.1":
   version: 1.1.1
   resolution: "is-number-object@npm:1.1.1"
@@ -7083,6 +7193,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-weakref@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "is-weakref@npm:1.1.1"
+  dependencies:
+    call-bound: "npm:^1.0.3"
+  checksum: 10c0/8e0a9c07b0c780949a100e2cab2b5560a48ecd4c61726923c1a9b77b6ab0aa0046c9e7fb2206042296817045376dee2c8ab1dabe08c7c3dfbf195b01275a085b
+  languageName: node
+  linkType: hard
+
 "is-weakset@npm:^2.0.3":
   version: 2.0.4
   resolution: "is-weakset@npm:2.0.4"
@@ -7193,20 +7312,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jake@npm:^10.8.5":
-  version: 10.9.2
-  resolution: "jake@npm:10.9.2"
-  dependencies:
-    async: "npm:^3.2.3"
-    chalk: "npm:^4.0.2"
-    filelist: "npm:^1.0.4"
-    minimatch: "npm:^3.1.2"
-  bin:
-    jake: bin/cli.js
-  checksum: 10c0/c4597b5ed9b6a908252feab296485a4f87cba9e26d6c20e0ca144fb69e0c40203d34a2efddb33b3d297b8bd59605e6c1f44f6221ca1e10e69175ecbf3ff5fe31
-  languageName: node
-  linkType: hard
-
 "jest-axe@npm:^10.0.0":
   version: 10.0.0
   resolution: "jest-axe@npm:10.0.0"
@@ -7336,6 +7441,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-diff@npm:30.0.5":
+  version: 30.0.5
+  resolution: "jest-diff@npm:30.0.5"
+  dependencies:
+    "@jest/diff-sequences": "npm:30.0.1"
+    "@jest/get-type": "npm:30.0.1"
+    chalk: "npm:^4.1.2"
+    pretty-format: "npm:30.0.5"
+  checksum: 10c0/b218ced37b7676f578ea866762f04caa74901bdcf3f593872aa9a4991a586302651a1d16bb0386772adacc7580a452ec621359af75d733c0b50ea947fe1881d3
+  languageName: node
+  linkType: hard
+
 "jest-diff@npm:30.1.2":
   version: 30.1.2
   resolution: "jest-diff@npm:30.1.2"
@@ -7466,6 +7583,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-matcher-utils@npm:30.0.5":
+  version: 30.0.5
+  resolution: "jest-matcher-utils@npm:30.0.5"
+  dependencies:
+    "@jest/get-type": "npm:30.0.1"
+    chalk: "npm:^4.1.2"
+    jest-diff: "npm:30.0.5"
+    pretty-format: "npm:30.0.5"
+  checksum: 10c0/231d891b29bfc218f2f5739c10873b6671426e31ad1c5538eed1531e62608fd3f60d32f41821332a6cf41f1614fd37361434c754fdd49c849b35ef2e5156c02e
+  languageName: node
+  linkType: hard
+
 "jest-matcher-utils@npm:30.1.2":
   version: 30.1.2
   resolution: "jest-matcher-utils@npm:30.1.2"
@@ -7478,6 +7607,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-message-util@npm:30.0.5":
+  version: 30.0.5
+  resolution: "jest-message-util@npm:30.0.5"
+  dependencies:
+    "@babel/code-frame": "npm:^7.27.1"
+    "@jest/types": "npm:30.0.5"
+    "@types/stack-utils": "npm:^2.0.3"
+    chalk: "npm:^4.1.2"
+    graceful-fs: "npm:^4.2.11"
+    micromatch: "npm:^4.0.8"
+    pretty-format: "npm:30.0.5"
+    slash: "npm:^3.0.0"
+    stack-utils: "npm:^2.0.6"
+  checksum: 10c0/38b710c127db6c79c36d690377d9f9f1e3c2e4b2d2e60f3b82a5b4da70efb1f4783c6cf0cf1f6be6e3b7fb2d2aed889583d2430f65afc09e7e6d68aa5fa981dc
+  languageName: node
+  linkType: hard
+
 "jest-message-util@npm:30.1.0":
   version: 30.1.0
   resolution: "jest-message-util@npm:30.1.0"
@@ -7654,20 +7800,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-util@npm:^29.0.0":
-  version: 29.7.0
-  resolution: "jest-util@npm:29.7.0"
-  dependencies:
-    "@jest/types": "npm:^29.6.3"
-    "@types/node": "npm:*"
-    chalk: "npm:^4.0.0"
-    ci-info: "npm:^3.2.0"
-    graceful-fs: "npm:^4.2.9"
-    picomatch: "npm:^2.2.3"
-  checksum: 10c0/bc55a8f49fdbb8f51baf31d2a4f312fb66c9db1483b82f602c9c990e659cdd7ec529c8e916d5a89452ecbcfae4949b21b40a7a59d4ffc0cd813a973ab08c8150
-  languageName: node
-  linkType: hard
-
 "jest-validate@npm:30.1.0":
   version: 30.1.0
   resolution: "jest-validate@npm:30.1.0"
@@ -7908,12 +8040,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"keyv@npm:^5.3.2":
-  version: 5.3.2
-  resolution: "keyv@npm:5.3.2"
+"keyv@npm:^5.5.0":
+  version: 5.5.0
+  resolution: "keyv@npm:5.5.0"
   dependencies:
-    "@keyv/serialize": "npm:^1.0.3"
-  checksum: 10c0/293ebd052e7889685b8b770b7b4c9047aaafd821f5446b5b5ffa1cc6e9b830ee752f7b2d108bd96e1277c644c89f02a39e09c45159a6cb87663e183c4405989a
+    "@keyv/serialize": "npm:^1.1.0"
+  checksum: 10c0/2db63fd2abcdf71929f032569673b6edd0de111edb012411658e2589dc5f49793a98aecd56c67fafda3f90a31f32e35555a97f8621040728260c66ad8daeea48
   languageName: node
   linkType: hard
 
@@ -7924,13 +8056,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"known-css-properties@npm:^0.35.0":
-  version: 0.35.0
-  resolution: "known-css-properties@npm:0.35.0"
-  checksum: 10c0/04a4a2859d62670bb25b5b28091a1f03f6f0d3298a5ed3e7476397c5287b98c434f6dd9c004a0c67a53b7f21acc93f83c972e98c122f568d4d0bd21fd2b90fb6
-  languageName: node
-  linkType: hard
-
 "known-css-properties@npm:^0.36.0":
   version: 0.36.0
   resolution: "known-css-properties@npm:0.36.0"
@@ -7938,6 +8063,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"known-css-properties@npm:^0.37.0":
+  version: 0.37.0
+  resolution: "known-css-properties@npm:0.37.0"
+  checksum: 10c0/e0ec08cae580e8833254b690971f73ec6f78ac461820a3c755b4a0b62c5b871501753b4aa60b30576a0f621ba44b231235cf9f35ab89e2e7de5448dfe0600241
+  languageName: node
+  linkType: hard
+
 "leven@npm:^3.1.0":
   version: 3.1.0
   resolution: "leven@npm:3.1.0"
@@ -7990,16 +8122,16 @@ __metadata:
   linkType: hard
 
 "listr2@npm:^9.0.3":
-  version: 9.0.4
-  resolution: "listr2@npm:9.0.4"
+  version: 9.0.3
+  resolution: "listr2@npm:9.0.3"
   dependencies:
-    cli-truncate: "npm:^5.0.0"
+    cli-truncate: "npm:^4.0.0"
     colorette: "npm:^2.0.20"
     eventemitter3: "npm:^5.0.1"
     log-update: "npm:^6.1.0"
     rfdc: "npm:^1.4.1"
     wrap-ansi: "npm:^9.0.0"
-  checksum: 10c0/69feca532f5b3317112a74bc7589ad29f98ccfbe1a582bdab556d536978b094e5841b94069e01cf59ea919684dfb68218754526ddd317b1dc829ab57f7450e45
+  checksum: 10c0/29978a32f9fb052f1efc11e8ad7745426c5bf706af87151672cb98e49fa11dc83a44f5065267f7f20a299e0942fed85677ab368e1cef8367800243675c50a20e
   languageName: node
   linkType: hard
 
@@ -8233,17 +8365,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mdn-data@npm:^2.15.0":
-  version: 2.15.0
-  resolution: "mdn-data@npm:2.15.0"
-  checksum: 10c0/8a0c83198b013d43c2c43bd19c38d44e397b3fe097d269fa3c093d8c112acf12d0be4d892ba50a4802cccb91dd4f720218a66e675150ea2cc3d8aa0d32247e76
-  languageName: node
-  linkType: hard
-
 "mdn-data@npm:^2.21.0":
-  version: 2.24.0
-  resolution: "mdn-data@npm:2.24.0"
-  checksum: 10c0/7263bad5f58d732461d8664cbcd225584c1a982f4d76d383e110debce69e28c579d8dae8f8faf43fe9aafea80a2c00d4d80539750fe1531fac1f007a5d7fb70e
+  version: 2.21.0
+  resolution: "mdn-data@npm:2.21.0"
+  checksum: 10c0/cd26902551af2cc29f06f130893cb04bca9ee278939fce3ffbcb759497cc80d53a6f4abdef2ae2f3ed3c95ac8d651f53fc141defd580ebf4ae2f93aea325957b
   languageName: node
   linkType: hard
 
@@ -8326,7 +8451,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimist@npm:^1.2.0, minimist@npm:^1.2.6":
+"minimist@npm:^1.2.0, minimist@npm:^1.2.5, minimist@npm:^1.2.6":
   version: 1.2.8
   resolution: "minimist@npm:1.2.8"
   checksum: 10c0/19d3fcdca050087b84c2029841a093691a91259a47def2f18222f41e7645a0b7c44ef4b40e88a1e58a40c84d2ef0ee6047c55594d298146d0eb3f6b737c20ce6
@@ -8511,18 +8636,18 @@ __metadata:
   linkType: hard
 
 "nano-spawn@npm:^1.0.2":
-  version: 1.0.3
-  resolution: "nano-spawn@npm:1.0.3"
-  checksum: 10c0/ea18857e493710a50ded333dd71677953bd9bd9e6a17ade74af957763c50a9a02205ef31bc0d6784f5b3ad82db3d9f47531e9baac2acf01118f9b7c35bd9d5de
+  version: 1.0.2
+  resolution: "nano-spawn@npm:1.0.2"
+  checksum: 10c0/d8cec78f127a44aa5e38be01746b3d963a8dcf8b00b4a05bf259b5369af2225b8c7dc9d12517050b90234e5c3eeea4ece5d18a5f9c6c3462b56f9f595f07e632
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.3.8":
-  version: 3.3.8
-  resolution: "nanoid@npm:3.3.8"
+"nanoid@npm:^3.3.11":
+  version: 3.3.11
+  resolution: "nanoid@npm:3.3.11"
   bin:
     nanoid: bin/nanoid.cjs
-  checksum: 10c0/4b1bb29f6cfebf3be3bc4ad1f1296fb0a10a3043a79f34fbffe75d1621b4318319211cd420549459018ea3592f0d2f159247a6f874911d6d26eaaadda2478120
+  checksum: 10c0/40e7f70b3d15f725ca072dfc4f74e81fcf1fbb02e491cf58ac0c79093adc9b0a73b152bcde57df4b79cd097e13023d7504acb38404a4da7bc1cd8e887b82fe0b
   languageName: node
   linkType: hard
 
@@ -8556,6 +8681,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"neo-async@npm:^2.6.2":
+  version: 2.6.2
+  resolution: "neo-async@npm:2.6.2"
+  checksum: 10c0/c2f5a604a54a8ec5438a342e1f356dff4bc33ccccdb6dc668d94fe8e5eccfc9d2c2eea6064b0967a767ba63b33763f51ccf2cd2441b461a7322656c1f06b3f5d
+  languageName: node
+  linkType: hard
+
 "node-addon-api@npm:^7.0.0":
   version: 7.1.1
   resolution: "node-addon-api@npm:7.1.1"
@@ -8756,9 +8888,9 @@ __metadata:
   linkType: hard
 
 "nwsapi@npm:^2.2.16":
-  version: 2.2.22
-  resolution: "nwsapi@npm:2.2.22"
-  checksum: 10c0/b6a0e5ea6754aacfdfe551c8c0f1b374eaf94d48b0a4e7eac666f879ecbc1892ef1d7c457e9b02eefad3fa1323ea1faebcba533eeab6582e24c9c503411bf879
+  version: 2.2.21
+  resolution: "nwsapi@npm:2.2.21"
+  checksum: 10c0/dd330cabb886fd417624bd3af368d86c3d507c002c05fb2f7981874204298deec9e8bd5103d8a0c4a0e0dc280276dc4a59a059e1045eeb7a628f79e6cefba6a3
   languageName: node
   linkType: hard
 
@@ -8776,6 +8908,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"object-inspect@npm:^1.13.4":
+  version: 1.13.4
+  resolution: "object-inspect@npm:1.13.4"
+  checksum: 10c0/d7f8711e803b96ea3191c745d6f8056ce1f2496e530e6a19a0e92d89b0fa3c76d910c31f0aa270432db6bd3b2f85500a376a83aaba849a8d518c8845b3211692
+  languageName: node
+  linkType: hard
+
 "object-keys@npm:^1.1.1":
   version: 1.1.1
   resolution: "object-keys@npm:1.1.1"
@@ -8832,7 +8971,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.values@npm:^1.1.6, object.values@npm:^1.2.0, object.values@npm:^1.2.1":
+"object.values@npm:^1.1.6, object.values@npm:^1.2.1":
   version: 1.2.1
   resolution: "object.values@npm:1.2.1"
   dependencies:
@@ -9074,14 +9213,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picocolors@npm:^1.0.0, picocolors@npm:^1.1.1":
+"picocolors@npm:1.1.1, picocolors@npm:^1.0.0, picocolors@npm:^1.1.1":
   version: 1.1.1
   resolution: "picocolors@npm:1.1.1"
   checksum: 10c0/e2e3e8170ab9d7c7421969adaa7e1b31434f789afb9b3f115f6b96d91945041ac3ceb02e9ec6fe6510ff036bcc0bf91e69a1772edc0b707e12b19c0f2d6bcf58
   languageName: node
   linkType: hard
 
-"picomatch@npm:^2.0.4, picomatch@npm:^2.2.3, picomatch@npm:^2.3.1":
+"picomatch@npm:^2.0.4, picomatch@npm:^2.3.1":
   version: 2.3.1
   resolution: "picomatch@npm:2.3.1"
   checksum: 10c0/26c02b8d06f03206fc2ab8d16f19960f2ff9e81a658f831ecb656d8f17d9edc799e8364b1f4a7873e89d9702dff96204be0fa26fe4181f6843f040f819dac4be
@@ -9176,14 +9315,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.5.3":
-  version: 8.5.3
-  resolution: "postcss@npm:8.5.3"
+"postcss@npm:^8.5.6":
+  version: 8.5.6
+  resolution: "postcss@npm:8.5.6"
   dependencies:
-    nanoid: "npm:^3.3.8"
+    nanoid: "npm:^3.3.11"
     picocolors: "npm:^1.1.1"
     source-map-js: "npm:^1.2.1"
-  checksum: 10c0/b75510d7b28c3ab728c8733dd01538314a18c52af426f199a3c9177e63eb08602a3938bfb66b62dc01350b9aed62087eabbf229af97a1659eb8d3513cec823b3
+  checksum: 10c0/5127cc7c91ed7a133a1b7318012d8bfa112da9ef092dddf369ae699a1f10ebbd89b1b9f25f3228795b84585c72aabd5ced5fc11f2ba467eedf7b081a66fad024
   languageName: node
   linkType: hard
 
@@ -9195,11 +9334,11 @@ __metadata:
   linkType: hard
 
 "prettier@npm:^3.4.2":
-  version: 3.5.3
-  resolution: "prettier@npm:3.5.3"
+  version: 3.6.2
+  resolution: "prettier@npm:3.6.2"
   bin:
     prettier: bin/prettier.cjs
-  checksum: 10c0/3880cb90b9dc0635819ab52ff571518c35bd7f15a6e80a2054c05dbc8a3aa6e74f135519e91197de63705bcb38388ded7e7230e2178432a1468005406238b877
+  checksum: 10c0/488cb2f2b99ec13da1e50074912870217c11edaddedeadc649b1244c749d15ba94e846423d062e2c4c9ae683e2d65f754de28889ba06e697ac4f988d44f45812
   languageName: node
   linkType: hard
 
@@ -9516,16 +9655,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regenerator-transform@npm:^0.15.2":
-  version: 0.15.2
-  resolution: "regenerator-transform@npm:0.15.2"
-  dependencies:
-    "@babel/runtime": "npm:^7.8.4"
-  checksum: 10c0/7cfe6931ec793269701994a93bab89c0cc95379191fad866270a7fea2adfec67ea62bb5b374db77058b60ba4509319d9b608664d0d288bd9989ca8dbd08fae90
-  languageName: node
-  linkType: hard
-
-"regexp.prototype.flags@npm:^1.5.3":
+"regexp.prototype.flags@npm:^1.5.3, regexp.prototype.flags@npm:^1.5.4":
   version: 1.5.4
   resolution: "regexp.prototype.flags@npm:1.5.4"
   dependencies:
@@ -9608,7 +9738,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.14.2, resolve@npm:^1.22.1, resolve@npm:^1.22.4":
+"resolve@npm:^1.22.1, resolve@npm:^1.22.10, resolve@npm:^1.22.4":
   version: 1.22.10
   resolution: "resolve@npm:1.22.10"
   dependencies:
@@ -9634,7 +9764,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A^1.14.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>":
+"resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.10#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>":
   version: 1.22.10
   resolution: "resolve@patch:resolve@npm%3A1.22.10#optional!builtin<compat/resolve>::version=1.22.10&hash=c3c19d"
   dependencies:
@@ -9730,30 +9860,31 @@ __metadata:
   linkType: hard
 
 "rollup@npm:^4.32.1":
-  version: 4.39.0
-  resolution: "rollup@npm:4.39.0"
-  dependencies:
-    "@rollup/rollup-android-arm-eabi": "npm:4.39.0"
-    "@rollup/rollup-android-arm64": "npm:4.39.0"
-    "@rollup/rollup-darwin-arm64": "npm:4.39.0"
-    "@rollup/rollup-darwin-x64": "npm:4.39.0"
-    "@rollup/rollup-freebsd-arm64": "npm:4.39.0"
-    "@rollup/rollup-freebsd-x64": "npm:4.39.0"
-    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.39.0"
-    "@rollup/rollup-linux-arm-musleabihf": "npm:4.39.0"
-    "@rollup/rollup-linux-arm64-gnu": "npm:4.39.0"
-    "@rollup/rollup-linux-arm64-musl": "npm:4.39.0"
-    "@rollup/rollup-linux-loongarch64-gnu": "npm:4.39.0"
-    "@rollup/rollup-linux-powerpc64le-gnu": "npm:4.39.0"
-    "@rollup/rollup-linux-riscv64-gnu": "npm:4.39.0"
-    "@rollup/rollup-linux-riscv64-musl": "npm:4.39.0"
-    "@rollup/rollup-linux-s390x-gnu": "npm:4.39.0"
-    "@rollup/rollup-linux-x64-gnu": "npm:4.39.0"
-    "@rollup/rollup-linux-x64-musl": "npm:4.39.0"
-    "@rollup/rollup-win32-arm64-msvc": "npm:4.39.0"
-    "@rollup/rollup-win32-ia32-msvc": "npm:4.39.0"
-    "@rollup/rollup-win32-x64-msvc": "npm:4.39.0"
-    "@types/estree": "npm:1.0.7"
+  version: 4.50.2
+  resolution: "rollup@npm:4.50.2"
+  dependencies:
+    "@rollup/rollup-android-arm-eabi": "npm:4.50.2"
+    "@rollup/rollup-android-arm64": "npm:4.50.2"
+    "@rollup/rollup-darwin-arm64": "npm:4.50.2"
+    "@rollup/rollup-darwin-x64": "npm:4.50.2"
+    "@rollup/rollup-freebsd-arm64": "npm:4.50.2"
+    "@rollup/rollup-freebsd-x64": "npm:4.50.2"
+    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.50.2"
+    "@rollup/rollup-linux-arm-musleabihf": "npm:4.50.2"
+    "@rollup/rollup-linux-arm64-gnu": "npm:4.50.2"
+    "@rollup/rollup-linux-arm64-musl": "npm:4.50.2"
+    "@rollup/rollup-linux-loong64-gnu": "npm:4.50.2"
+    "@rollup/rollup-linux-ppc64-gnu": "npm:4.50.2"
+    "@rollup/rollup-linux-riscv64-gnu": "npm:4.50.2"
+    "@rollup/rollup-linux-riscv64-musl": "npm:4.50.2"
+    "@rollup/rollup-linux-s390x-gnu": "npm:4.50.2"
+    "@rollup/rollup-linux-x64-gnu": "npm:4.50.2"
+    "@rollup/rollup-linux-x64-musl": "npm:4.50.2"
+    "@rollup/rollup-openharmony-arm64": "npm:4.50.2"
+    "@rollup/rollup-win32-arm64-msvc": "npm:4.50.2"
+    "@rollup/rollup-win32-ia32-msvc": "npm:4.50.2"
+    "@rollup/rollup-win32-x64-msvc": "npm:4.50.2"
+    "@types/estree": "npm:1.0.8"
     fsevents: "npm:~2.3.2"
   dependenciesMeta:
     "@rollup/rollup-android-arm-eabi":
@@ -9776,9 +9907,9 @@ __metadata:
       optional: true
     "@rollup/rollup-linux-arm64-musl":
       optional: true
-    "@rollup/rollup-linux-loongarch64-gnu":
+    "@rollup/rollup-linux-loong64-gnu":
       optional: true
-    "@rollup/rollup-linux-powerpc64le-gnu":
+    "@rollup/rollup-linux-ppc64-gnu":
       optional: true
     "@rollup/rollup-linux-riscv64-gnu":
       optional: true
@@ -9790,6 +9921,8 @@ __metadata:
       optional: true
     "@rollup/rollup-linux-x64-musl":
       optional: true
+    "@rollup/rollup-openharmony-arm64":
+      optional: true
     "@rollup/rollup-win32-arm64-msvc":
       optional: true
     "@rollup/rollup-win32-ia32-msvc":
@@ -9800,7 +9933,7 @@ __metadata:
       optional: true
   bin:
     rollup: dist/bin/rollup
-  checksum: 10c0/2dc0c23ca04bd00295035b405c977261559aed8acc9902ee9ff44e4a6b54734fcb64999c32143c43804dcb543da7983032831b893a902633b006c21848a093ce
+  checksum: 10c0/5415d0a5ae6f37fa5f10997b3c5cff20c2ea6bd1636db90e59672969a4f83b29f6168bf9dd26c1276c2e37e1d55674472758da90cbc46c8b08ada5d0ec60eb9b
   languageName: node
   linkType: hard
 
@@ -9919,15 +10052,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^7.7.1":
-  version: 7.7.1
-  resolution: "semver@npm:7.7.1"
-  bin:
-    semver: bin/semver.js
-  checksum: 10c0/fd603a6fb9c399c6054015433051bdbe7b99a940a8fb44b85c2b524c4004b023d7928d47cb22154f8d054ea7ee8597f586605e05b52047f048278e4ac56ae958
-  languageName: node
-  linkType: hard
-
 "semver@npm:^7.7.2":
   version: 7.7.2
   resolution: "semver@npm:7.7.2"
@@ -10108,6 +10232,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"slice-ansi@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "slice-ansi@npm:5.0.0"
+  dependencies:
+    ansi-styles: "npm:^6.0.0"
+    is-fullwidth-code-point: "npm:^4.0.0"
+  checksum: 10c0/2d4d40b2a9d5cf4e8caae3f698fe24ae31a4d778701724f578e984dcb485ec8c49f0c04dab59c401821e80fcdfe89cace9c66693b0244e40ec485d72e543914f
+  languageName: node
+  linkType: hard
+
 "slice-ansi@npm:^7.1.0":
   version: 7.1.0
   resolution: "slice-ansi@npm:7.1.0"
@@ -10198,7 +10332,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map@npm:^0.6.0":
+"source-map@npm:^0.6.0, source-map@npm:^0.6.1":
   version: 0.6.1
   resolution: "source-map@npm:0.6.1"
   checksum: 10c0/ab55398007c5e5532957cb0beee2368529618ac0ab372d789806f5718123cc4367d57de3904b4e6a4170eb5a0b0f41373066d02ca0735a0c4d75c7d328d3e011
@@ -10289,6 +10423,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stop-iteration-iterator@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "stop-iteration-iterator@npm:1.1.0"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    internal-slot: "npm:^1.1.0"
+  checksum: 10c0/de4e45706bb4c0354a4b1122a2b8cc45a639e86206807ce0baf390ee9218d3ef181923fa4d2b67443367c491aa255c5fbaa64bb74648e3c5b48299928af86c09
+  languageName: node
+  linkType: hard
+
 "string-argv@npm:^0.3.2":
   version: 0.3.2
   resolution: "string-argv@npm:0.3.2"
@@ -10339,16 +10483,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string-width@npm:^8.0.0":
-  version: 8.1.0
-  resolution: "string-width@npm:8.1.0"
-  dependencies:
-    get-east-asian-width: "npm:^1.3.0"
-    strip-ansi: "npm:^7.1.0"
-  checksum: 10c0/749b5d0dab2532b4b6b801064230f4da850f57b3891287023117ab63a464ad79dd208f42f793458f48f3ad121fe2e1f01dd525ff27ead957ed9f205e27406593
-  languageName: node
-  linkType: hard
-
 "string.prototype.matchall@npm:^4.0.12":
   version: 4.0.12
   resolution: "string.prototype.matchall@npm:4.0.12"
@@ -10395,7 +10529,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string.prototype.trimend@npm:^1.0.8, string.prototype.trimend@npm:^1.0.9":
+"string.prototype.trimend@npm:^1.0.9":
   version: 1.0.9
   resolution: "string.prototype.trimend@npm:1.0.9"
   dependencies:
@@ -10535,25 +10669,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stylelint-scss@npm:^6.11.0":
-  version: 6.11.1
-  resolution: "stylelint-scss@npm:6.11.1"
-  dependencies:
-    css-tree: "npm:^3.0.1"
-    is-plain-object: "npm:^5.0.0"
-    known-css-properties: "npm:^0.35.0"
-    mdn-data: "npm:^2.15.0"
-    postcss-media-query-parser: "npm:^0.2.3"
-    postcss-resolve-nested-selector: "npm:^0.1.6"
-    postcss-selector-parser: "npm:^7.1.0"
-    postcss-value-parser: "npm:^4.2.0"
-  peerDependencies:
-    stylelint: ^16.0.2
-  checksum: 10c0/63b6cd02db1e7fa04f0bafe94d3772ab95dfcd60b8d329142d7d82f5247a6ad4a3d4ace6e4983d501a8f996e3dce08117a47db47623d1ee9a58649ca7b81fcd0
-  languageName: node
-  linkType: hard
-
-"stylelint-scss@npm:^6.12.0":
+"stylelint-scss@npm:^6.11.0, stylelint-scss@npm:^6.12.0":
   version: 6.12.1
   resolution: "stylelint-scss@npm:6.12.1"
   dependencies:
@@ -10572,12 +10688,12 @@ __metadata:
   linkType: hard
 
 "stylelint@npm:^16.14.1":
-  version: 16.18.0
-  resolution: "stylelint@npm:16.18.0"
+  version: 16.24.0
+  resolution: "stylelint@npm:16.24.0"
   dependencies:
-    "@csstools/css-parser-algorithms": "npm:^3.0.4"
-    "@csstools/css-tokenizer": "npm:^3.0.3"
-    "@csstools/media-query-list-parser": "npm:^4.0.2"
+    "@csstools/css-parser-algorithms": "npm:^3.0.5"
+    "@csstools/css-tokenizer": "npm:^3.0.4"
+    "@csstools/media-query-list-parser": "npm:^4.0.3"
     "@csstools/selector-specificity": "npm:^5.0.0"
     "@dual-bundle/import-meta-resolve": "npm:^4.1.0"
     balanced-match: "npm:^2.0.0"
@@ -10585,24 +10701,24 @@ __metadata:
     cosmiconfig: "npm:^9.0.0"
     css-functions-list: "npm:^3.2.3"
     css-tree: "npm:^3.1.0"
-    debug: "npm:^4.3.7"
+    debug: "npm:^4.4.1"
     fast-glob: "npm:^3.3.3"
     fastest-levenshtein: "npm:^1.0.16"
-    file-entry-cache: "npm:^10.0.7"
+    file-entry-cache: "npm:^10.1.4"
     global-modules: "npm:^2.0.0"
     globby: "npm:^11.1.0"
     globjoin: "npm:^0.1.4"
     html-tags: "npm:^3.3.1"
-    ignore: "npm:^7.0.3"
+    ignore: "npm:^7.0.5"
     imurmurhash: "npm:^0.1.4"
     is-plain-object: "npm:^5.0.0"
-    known-css-properties: "npm:^0.35.0"
+    known-css-properties: "npm:^0.37.0"
     mathml-tag-names: "npm:^2.1.3"
     meow: "npm:^13.2.0"
     micromatch: "npm:^4.0.8"
     normalize-path: "npm:^3.0.0"
     picocolors: "npm:^1.1.1"
-    postcss: "npm:^8.5.3"
+    postcss: "npm:^8.5.6"
     postcss-resolve-nested-selector: "npm:^0.1.6"
     postcss-safe-parser: "npm:^7.0.1"
     postcss-selector-parser: "npm:^7.1.0"
@@ -10615,7 +10731,7 @@ __metadata:
     write-file-atomic: "npm:^5.0.1"
   bin:
     stylelint: bin/stylelint.mjs
-  checksum: 10c0/7e6646c850a1862033d1e91ab04a72ef021facf5ef1b8fd130b5ccd680ae2b9e783f8f594a4ac844c51ffd07a04838c601bb6c0beb446d9c3c90aa5dcd9a92d0
+  checksum: 10c0/f694bfa86b8030d71e0ebd7eb815e927869481325af9a096d574d60d459944d3f11c295a5ed8885ae3d090aa1ab9431698fba1b7b99cea9884f7c762433a2891
   languageName: node
   linkType: hard
 
@@ -10802,15 +10918,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-api-utils@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "ts-api-utils@npm:2.0.1"
-  peerDependencies:
-    typescript: ">=4.8.4"
-  checksum: 10c0/23fd56a958b332cac00150a652e4c84730df30571bd2faa1ba6d7b511356d1a61656621492bb6c7f15dd6e18847a1408357a0e406671d358115369a17f5bfedd
-  languageName: node
-  linkType: hard
-
 "ts-api-utils@npm:^2.1.0":
   version: 2.1.0
   resolution: "ts-api-utils@npm:2.1.0"
@@ -10821,24 +10928,25 @@ __metadata:
   linkType: hard
 
 "ts-jest@npm:^29.2.5":
-  version: 29.2.6
-  resolution: "ts-jest@npm:29.2.6"
+  version: 29.4.1
+  resolution: "ts-jest@npm:29.4.1"
   dependencies:
     bs-logger: "npm:^0.2.6"
-    ejs: "npm:^3.1.10"
     fast-json-stable-stringify: "npm:^2.1.0"
-    jest-util: "npm:^29.0.0"
+    handlebars: "npm:^4.7.8"
     json5: "npm:^2.2.3"
     lodash.memoize: "npm:^4.1.2"
     make-error: "npm:^1.3.6"
-    semver: "npm:^7.7.1"
+    semver: "npm:^7.7.2"
+    type-fest: "npm:^4.41.0"
     yargs-parser: "npm:^21.1.1"
   peerDependencies:
     "@babel/core": ">=7.0.0-beta.0 <8"
-    "@jest/transform": ^29.0.0
-    "@jest/types": ^29.0.0
-    babel-jest: ^29.0.0
-    jest: ^29.0.0
+    "@jest/transform": ^29.0.0 || ^30.0.0
+    "@jest/types": ^29.0.0 || ^30.0.0
+    babel-jest: ^29.0.0 || ^30.0.0
+    jest: ^29.0.0 || ^30.0.0
+    jest-util: ^29.0.0 || ^30.0.0
     typescript: ">=4.3 <6"
   peerDependenciesMeta:
     "@babel/core":
@@ -10851,9 +10959,11 @@ __metadata:
       optional: true
     esbuild:
       optional: true
+    jest-util:
+      optional: true
   bin:
     ts-jest: cli.js
-  checksum: 10c0/2a79bdb2631bbd004cd6ec171d62dc3681b86e7d1c20eece7f56e7c3df11a0f5a14f4831960b1ba8d1836787395c8f9dcbd084fd7f59246bbee8048feb93f892
+  checksum: 10c0/e4881717323c9e03ba9ad2f8726872cd0bede7f3f34095754aa850688b319f50294211cfd330edad878005e70601cbbbb0bb489ed0949a9aa545491e1083e923
   languageName: node
   linkType: hard
 
@@ -10917,6 +11027,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"type-fest@npm:^4.41.0":
+  version: 4.41.0
+  resolution: "type-fest@npm:4.41.0"
+  checksum: 10c0/f5ca697797ed5e88d33ac8f1fec21921839871f808dc59345c9cf67345bfb958ce41bd821165dbf3ae591cedec2bf6fe8882098dfdd8dc54320b859711a2c1e4
+  languageName: node
+  linkType: hard
+
 "typed-array-buffer@npm:^1.0.3":
   version: 1.0.3
   resolution: "typed-array-buffer@npm:1.0.3"
@@ -10971,36 +11088,46 @@ __metadata:
   linkType: hard
 
 "typescript-eslint@npm:^8.22.0":
-  version: 8.29.1
-  resolution: "typescript-eslint@npm:8.29.1"
+  version: 8.39.1
+  resolution: "typescript-eslint@npm:8.39.1"
   dependencies:
-    "@typescript-eslint/eslint-plugin": "npm:8.29.1"
-    "@typescript-eslint/parser": "npm:8.29.1"
-    "@typescript-eslint/utils": "npm:8.29.1"
+    "@typescript-eslint/eslint-plugin": "npm:8.39.1"
+    "@typescript-eslint/parser": "npm:8.39.1"
+    "@typescript-eslint/typescript-estree": "npm:8.39.1"
+    "@typescript-eslint/utils": "npm:8.39.1"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0
-    typescript: ">=4.8.4 <5.9.0"
-  checksum: 10c0/31319c891d224ec8d7cf96ad7e6c84480b3d17d4c46c5beccca06fc7891f41eabd5593e44867e69dbfb79459f5545c2cc2e985c950bdd7b4e7c3bb1ec8941030
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/4070729621c20f8a9bad3df13fb8ac175609a57d046c155df785d474c2926d3e506f0bd5e762be7e2aacd03839c9c9a2015ad087086cee5838c486b9bf46b27b
   languageName: node
   linkType: hard
 
 "typescript@npm:^5.7.3":
-  version: 5.8.2
-  resolution: "typescript@npm:5.8.2"
+  version: 5.9.2
+  resolution: "typescript@npm:5.9.2"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/5c4f6fbf1c6389b6928fe7b8fcd5dc73bb2d58cd4e3883f1d774ed5bd83b151cbac6b7ecf11723de56d4676daeba8713894b1e9af56174f2f9780ae7848ec3c6
+  checksum: 10c0/cd635d50f02d6cf98ed42de2f76289701c1ec587a363369255f01ed15aaf22be0813226bff3c53e99d971f9b540e0b3cc7583dbe05faded49b1b0bed2f638a18
   languageName: node
   linkType: hard
 
 "typescript@patch:typescript@npm%3A^5.7.3#optional!builtin<compat/typescript>":
-  version: 5.8.2
-  resolution: "typescript@patch:typescript@npm%3A5.8.2#optional!builtin<compat/typescript>::version=5.8.2&hash=5786d5"
+  version: 5.9.2
+  resolution: "typescript@patch:typescript@npm%3A5.9.2#optional!builtin<compat/typescript>::version=5.9.2&hash=5786d5"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/5448a08e595cc558ab321e49d4cac64fb43d1fa106584f6ff9a8d8e592111b373a995a1d5c7f3046211c8a37201eb6d0f1566f15cdb7a62a5e3be01d087848e2
+  checksum: 10c0/34d2a8e23eb8e0d1875072064d5e1d9c102e0bdce56a10a25c0b917b8aa9001a9cf5c225df12497e99da107dc379360bc138163c66b55b95f5b105b50578067e
+  languageName: node
+  linkType: hard
+
+"uglify-js@npm:^3.1.4":
+  version: 3.19.3
+  resolution: "uglify-js@npm:3.19.3"
+  bin:
+    uglifyjs: bin/uglifyjs
+  checksum: 10c0/83b0a90eca35f778e07cad9622b80c448b6aad457c9ff8e568afed978212b42930a95f9e1be943a1ffa4258a3340fbb899f41461131c05bb1d0a9c303aed8479
   languageName: node
   linkType: hard
 
@@ -11196,6 +11323,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"update-browserslist-db@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "update-browserslist-db@npm:1.1.3"
+  dependencies:
+    escalade: "npm:^3.2.0"
+    picocolors: "npm:^1.1.1"
+  peerDependencies:
+    browserslist: ">= 4.21.0"
+  bin:
+    update-browserslist-db: cli.js
+  checksum: 10c0/682e8ecbf9de474a626f6462aa85927936cdd256fe584c6df2508b0df9f7362c44c957e9970df55dfe44d3623807d26316ea2c7d26b80bb76a16c56c37233c32
+  languageName: node
+  linkType: hard
+
 "uri-js@npm:^4.2.2":
   version: 4.4.1
   resolution: "uri-js@npm:4.4.1"
@@ -11351,6 +11492,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"which-typed-array@npm:^1.1.19":
+  version: 1.1.19
+  resolution: "which-typed-array@npm:1.1.19"
+  dependencies:
+    available-typed-arrays: "npm:^1.0.7"
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.4"
+    for-each: "npm:^0.3.5"
+    get-proto: "npm:^1.0.1"
+    gopd: "npm:^1.2.0"
+    has-tostringtag: "npm:^1.0.2"
+  checksum: 10c0/702b5dc878addafe6c6300c3d0af5983b175c75fcb4f2a72dfc3dd38d93cf9e89581e4b29c854b16ea37e50a7d7fca5ae42ece5c273d8060dcd603b2404bbb3f
+  languageName: node
+  linkType: hard
+
 "which@npm:^1.3.1":
   version: 1.3.1
   resolution: "which@npm:1.3.1"
@@ -11420,6 +11576,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"wordwrap@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "wordwrap@npm:1.0.0"
+  checksum: 10c0/7ed2e44f3c33c5c3e3771134d2b0aee4314c9e49c749e37f464bf69f2bcdf0cbf9419ca638098e2717cff4875c47f56a007532f6111c3319f557a2ca91278e92
+  languageName: node
+  linkType: hard
+
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0, wrap-ansi@npm:^7.0.0":
   version: 7.0.0
   resolution: "wrap-ansi@npm:7.0.0"