From a84e5a6ced7bb77c770e4c1f2e736d157b426035 Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Tue, 2 Jul 2024 10:59:32 +0200
Subject: [PATCH] fix(ui,dashboard): Revamp DatePicker component (#7891)

**What**
- Revamps the DatePicker component.
- Addresses all issues with broken DatePickers across admin.

**Note**
- Part of this PR is adding a I18nProvider which is used to set the locale that is used for our DatePicker and Calendar components. Per default they use the browser locale. In the current implementation, we are grabbing the locale to use from the language that is picked in the "Profile" section. This means that currently the only possible locale is "en-US", meaning times uses AM/PM. This is likely not what we want, but we need to make a decision on how we want to handle this globally, will create a ticket for it and we can then clean it up later on.
- This PR does not include "presets" or a DateRange picker that were part of the old implementation. Will open tickets to re-add this later on, but since we aren't using it in admin any where it makes sense to address later.
- This PR also bumps and pin every `@radix-ui` dependency in `@medusajs/ui` and `@medusajs/dashboard`. Our different versions were pulling in multiple versions of internal radix dependencies which were breaking Popover and Dialog behaviour across admin. One thing to note is that Radix have started to print warnings for missing Descriptions and Titles in dialogs. We should add these as we go, for better accessibility. Its not an urgent task but something we can add as we clean up admin over the following weeks.

CLOSES CORE-2382
---
 packages/admin-next/dashboard/package.json    |    6 +-
 packages/admin-next/dashboard/src/app.tsx     |    5 +-
 .../date-range-display/date-range-display.tsx |    4 +-
 .../src/components/common/form/form.tsx       |   14 +-
 .../localized-date-picker/index.ts            |    1 -
 .../localized-date-picker.tsx                 |   37 -
 .../modals/stacked-focus-modal/index.ts       |    2 +-
 ...oucs-modal.tsx => stacked-focus-modal.tsx} |    0
 .../data-table-filter/date-filter.tsx         |   11 +-
 .../dashboard/src/hooks/use-date.tsx          |    2 +
 .../providers/i18n-provider/i18n-provider.tsx |   16 +
 .../src/providers/i18n-provider/index.ts      |    1 +
 .../edit-campaign-form/edit-campaign-form.tsx |   22 +-
 .../create-campaign-form-fields.tsx           |   16 +-
 .../price-list-configuration-form.tsx         |   16 +-
 .../price-list-create-form.tsx                |    1 -
 .../price-list-details-form.tsx               |   13 +-
 .../price-list-detail/price-list-detail.tsx   |    4 +-
 packages/design-system/ui/package.json        |   41 +-
 .../components/calendar/calendar.stories.tsx  |   79 -
 .../ui/src/components/calendar/calendar.tsx   |  174 --
 .../ui/src/components/calendar/index.ts       |    1 -
 .../calender/_internal-calendar.tsx           |   53 +
 .../components/calender/calendar-button.tsx   |   29 +
 .../src/components/calender/calendar-cell.tsx |   75 +
 .../src/components/calender/calendar-grid.tsx |   46 +
 .../components/calender/calendar.stories.tsx  |   61 +
 .../ui/src/components/calender/calendar.tsx   |  110 +
 .../ui/src/components/calender/index.ts       |    2 +
 .../date-picker/date-picker-button.tsx        |   42 +
 .../date-picker/date-picker-clear-button.tsx  |   40 +
 .../date-picker/date-picker-field.tsx         |   55 +
 .../date-picker/date-picker.spec.tsx          |   58 -
 .../date-picker/date-picker.stories.tsx       |  308 +--
 .../components/date-picker/date-picker.tsx    | 1229 ++-------
 .../components/date-segment/date-segment.tsx  |   54 +
 .../ui/src/components/date-segment/index.ts   |    1 +
 .../i18n-provider/i18n-provider.tsx           |   12 +
 .../ui/src/components/i18n-provider/index.ts  |    1 +
 .../ui/src/components/popover/popover.tsx     |    3 +-
 .../ui/src/components/prompt/prompt.tsx       |    4 +-
 .../time-input/time-input.stories.tsx         |   56 -
 .../src/components/time-input/time-input.tsx  |  125 +-
 packages/design-system/ui/src/index.ts        |    3 +-
 packages/design-system/ui/src/types.ts        |    2 +
 .../design-system/ui/src/utils/calendar.ts    |  138 +
 yarn.lock                                     | 2325 +++++++++++++----
 47 files changed, 2874 insertions(+), 2424 deletions(-)
 delete mode 100644 packages/admin-next/dashboard/src/components/localization/localized-date-picker/index.ts
 delete mode 100644 packages/admin-next/dashboard/src/components/localization/localized-date-picker/localized-date-picker.tsx
 rename packages/admin-next/dashboard/src/components/modals/stacked-focus-modal/{stacked-foucs-modal.tsx => stacked-focus-modal.tsx} (100%)
 create mode 100644 packages/admin-next/dashboard/src/providers/i18n-provider/i18n-provider.tsx
 create mode 100644 packages/admin-next/dashboard/src/providers/i18n-provider/index.ts
 delete mode 100644 packages/design-system/ui/src/components/calendar/calendar.stories.tsx
 delete mode 100644 packages/design-system/ui/src/components/calendar/calendar.tsx
 delete mode 100644 packages/design-system/ui/src/components/calendar/index.ts
 create mode 100644 packages/design-system/ui/src/components/calender/_internal-calendar.tsx
 create mode 100644 packages/design-system/ui/src/components/calender/calendar-button.tsx
 create mode 100644 packages/design-system/ui/src/components/calender/calendar-cell.tsx
 create mode 100644 packages/design-system/ui/src/components/calender/calendar-grid.tsx
 create mode 100644 packages/design-system/ui/src/components/calender/calendar.stories.tsx
 create mode 100644 packages/design-system/ui/src/components/calender/calendar.tsx
 create mode 100644 packages/design-system/ui/src/components/calender/index.ts
 create mode 100644 packages/design-system/ui/src/components/date-picker/date-picker-button.tsx
 create mode 100644 packages/design-system/ui/src/components/date-picker/date-picker-clear-button.tsx
 create mode 100644 packages/design-system/ui/src/components/date-picker/date-picker-field.tsx
 delete mode 100644 packages/design-system/ui/src/components/date-picker/date-picker.spec.tsx
 create mode 100644 packages/design-system/ui/src/components/date-segment/date-segment.tsx
 create mode 100644 packages/design-system/ui/src/components/date-segment/index.ts
 create mode 100644 packages/design-system/ui/src/components/i18n-provider/i18n-provider.tsx
 create mode 100644 packages/design-system/ui/src/components/i18n-provider/index.ts
 delete mode 100644 packages/design-system/ui/src/components/time-input/time-input.stories.tsx
 create mode 100644 packages/design-system/ui/src/utils/calendar.ts

diff --git a/packages/admin-next/dashboard/package.json b/packages/admin-next/dashboard/package.json
index 5d6cb4ffb8..477473f7fa 100644
--- a/packages/admin-next/dashboard/package.json
+++ b/packages/admin-next/dashboard/package.json
@@ -35,14 +35,14 @@
     "@medusajs/icons": "1.2.1",
     "@medusajs/js-sdk": "0.0.1",
     "@medusajs/ui": "3.0.0",
-    "@radix-ui/react-collapsible": "1.0.3",
-    "@radix-ui/react-hover-card": "^1.0.7",
+    "@radix-ui/react-collapsible": "1.1.0",
+    "@radix-ui/react-hover-card": "1.1.1",
     "@tanstack/react-query": "^5.28.14",
     "@tanstack/react-table": "8.10.7",
     "@tanstack/react-virtual": "^3.0.4",
     "@uiw/react-json-view": "^2.0.0-alpha.17",
     "cmdk": "^0.2.0",
-    "date-fns": "^3.2.0",
+    "date-fns": "^3.6.0",
     "framer-motion": "^11.0.3",
     "i18next": "23.7.11",
     "i18next-browser-languagedetector": "7.2.0",
diff --git a/packages/admin-next/dashboard/src/app.tsx b/packages/admin-next/dashboard/src/app.tsx
index def2787f4b..e1a0ffd4ac 100644
--- a/packages/admin-next/dashboard/src/app.tsx
+++ b/packages/admin-next/dashboard/src/app.tsx
@@ -3,6 +3,7 @@ import { QueryClientProvider } from "@tanstack/react-query"
 
 import { I18n } from "./components/utilities/i18n"
 import { queryClient } from "./lib/query-client"
+import { I18nProvider } from "./providers/i18n-provider"
 import { RouterProvider } from "./providers/router-provider"
 import { ThemeProvider } from "./providers/theme-provider"
 
@@ -14,7 +15,9 @@ function App() {
       <ThemeProvider>
         <I18n />
         <TooltipProvider>
-          <RouterProvider />
+          <I18nProvider>
+            <RouterProvider />
+          </I18nProvider>
         </TooltipProvider>
         <Toaster />
       </ThemeProvider>
diff --git a/packages/admin-next/dashboard/src/components/common/date-range-display/date-range-display.tsx b/packages/admin-next/dashboard/src/components/common/date-range-display/date-range-display.tsx
index 8243e41b54..738c9d9f5e 100644
--- a/packages/admin-next/dashboard/src/components/common/date-range-display/date-range-display.tsx
+++ b/packages/admin-next/dashboard/src/components/common/date-range-display/date-range-display.tsx
@@ -27,7 +27,7 @@ export const DateRangeDisplay = ({
           <Text weight="plus" size="small">
             {t("fields.startDate")}
           </Text>
-          <Text size="small">
+          <Text size="small" className="tabular-nums">
             {startDate
               ? getFullDate({
                   date: startDate,
@@ -44,7 +44,7 @@ export const DateRangeDisplay = ({
           <Text size="small" weight="plus">
             {t("fields.endDate")}
           </Text>
-          <Text size="small">
+          <Text size="small" className="tabular-nums">
             {endDate
               ? getFullDate({
                   date: endDate,
diff --git a/packages/admin-next/dashboard/src/components/common/form/form.tsx b/packages/admin-next/dashboard/src/components/common/form/form.tsx
index 9799136d8f..877946d59f 100644
--- a/packages/admin-next/dashboard/src/components/common/form/form.tsx
+++ b/packages/admin-next/dashboard/src/components/common/form/form.tsx
@@ -78,6 +78,7 @@ const useFormField = () => {
     id,
     name: fieldContext.name,
     formItemId: `${id}-form-item`,
+    formLabelId: `${id}-form-item-label`,
     formDescriptionId: `${id}-form-item-description`,
     formErrorMessageId: `${id}-form-item-message`,
     ...fieldState,
@@ -109,12 +110,13 @@ const Label = forwardRef<
     icon?: ReactNode
   }
 >(({ className, optional = false, tooltip, icon, ...props }, ref) => {
-  const { formItemId } = useFormField()
+  const { formLabelId, formItemId } = useFormField()
   const { t } = useTranslation()
 
   return (
     <div className="flex items-center gap-x-1">
       <LabelComponent
+        id={formLabelId}
         ref={ref}
         className={clx(className)}
         htmlFor={formItemId}
@@ -142,8 +144,13 @@ const Control = forwardRef<
   React.ElementRef<typeof Slot>,
   React.ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formErrorMessageId } =
-    useFormField()
+  const {
+    error,
+    formItemId,
+    formDescriptionId,
+    formErrorMessageId,
+    formLabelId,
+  } = useFormField()
 
   return (
     <Slot
@@ -155,6 +162,7 @@ const Control = forwardRef<
           : `${formDescriptionId} ${formErrorMessageId}`
       }
       aria-invalid={!!error}
+      aria-labelledby={formLabelId}
       {...props}
     />
   )
diff --git a/packages/admin-next/dashboard/src/components/localization/localized-date-picker/index.ts b/packages/admin-next/dashboard/src/components/localization/localized-date-picker/index.ts
deleted file mode 100644
index 3b64d8f60f..0000000000
--- a/packages/admin-next/dashboard/src/components/localization/localized-date-picker/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./localized-date-picker"
diff --git a/packages/admin-next/dashboard/src/components/localization/localized-date-picker/localized-date-picker.tsx b/packages/admin-next/dashboard/src/components/localization/localized-date-picker/localized-date-picker.tsx
deleted file mode 100644
index b84f047a11..0000000000
--- a/packages/admin-next/dashboard/src/components/localization/localized-date-picker/localized-date-picker.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { DatePicker } from "@medusajs/ui"
-import { ComponentPropsWithoutRef } from "react"
-import { useTranslation } from "react-i18next"
-import { languages } from "../../../i18n/languages"
-
-type LocalizedDatePickerProps = Omit<
-  ComponentPropsWithoutRef<typeof DatePicker>,
-  "translations" | "locale"
->
-
-export const LocalizedDatePicker = ({
-  mode = "single",
-  ...props
-}: LocalizedDatePickerProps) => {
-  const { i18n, t } = useTranslation()
-
-  const locale = languages.find(
-    (lang) => lang.code === i18n.language
-  )?.date_locale
-
-  const translations = {
-    cancel: t("actions.cancel"),
-    apply: t("general.apply"),
-    end: t("general.end"),
-    start: t("general.start"),
-    range: t("general.range"),
-  }
-
-  return (
-    <DatePicker
-      mode={mode}
-      translations={translations}
-      locale={locale}
-      {...(props as any)}
-    />
-  )
-}
diff --git a/packages/admin-next/dashboard/src/components/modals/stacked-focus-modal/index.ts b/packages/admin-next/dashboard/src/components/modals/stacked-focus-modal/index.ts
index e130e6356a..e1c5081749 100644
--- a/packages/admin-next/dashboard/src/components/modals/stacked-focus-modal/index.ts
+++ b/packages/admin-next/dashboard/src/components/modals/stacked-focus-modal/index.ts
@@ -1 +1 @@
-export * from "./stacked-foucs-modal"
+export * from "./stacked-focus-modal"
diff --git a/packages/admin-next/dashboard/src/components/modals/stacked-focus-modal/stacked-foucs-modal.tsx b/packages/admin-next/dashboard/src/components/modals/stacked-focus-modal/stacked-focus-modal.tsx
similarity index 100%
rename from packages/admin-next/dashboard/src/components/modals/stacked-focus-modal/stacked-foucs-modal.tsx
rename to packages/admin-next/dashboard/src/components/modals/stacked-focus-modal/stacked-focus-modal.tsx
diff --git a/packages/admin-next/dashboard/src/components/table/data-table/data-table-filter/date-filter.tsx b/packages/admin-next/dashboard/src/components/table/data-table/data-table-filter/date-filter.tsx
index 255285ddff..5533633cea 100644
--- a/packages/admin-next/dashboard/src/components/table/data-table/data-table-filter/date-filter.tsx
+++ b/packages/admin-next/dashboard/src/components/table/data-table/data-table-filter/date-filter.tsx
@@ -65,10 +65,7 @@ export const DateFilter = ({
   const customStartValue = getDateFromComparison(currentDateComparison, "$gte")
   const customEndValue = getDateFromComparison(currentDateComparison, "$lte")
 
-  const handleCustomDateChange = (
-    value: Date | undefined,
-    pos: "start" | "end"
-  ) => {
+  const handleCustomDateChange = (value: Date | null, pos: "start" | "end") => {
     const key = pos === "start" ? "$gte" : "$lte"
     const dateValue = value ? value.toISOString() : undefined
 
@@ -201,8 +198,7 @@ export const DateFilter = ({
                 </div>
                 <div className="px-2 py-1">
                   <DatePicker
-                    // placeholder="MM/DD/YYYY" TODO: Fix DatePicker component not working with placeholder
-                    toDate={customEndValue}
+                    maxValue={customEndValue}
                     value={customStartValue}
                     onChange={(d) => handleCustomDateChange(d, "start")}
                   />
@@ -216,8 +212,7 @@ export const DateFilter = ({
                 </div>
                 <div className="px-2 py-1">
                   <DatePicker
-                    // placeholder="MM/DD/YYYY"
-                    fromDate={customStartValue}
+                    minValue={customStartValue}
                     value={customEndValue || undefined}
                     onChange={(d) => {
                       handleCustomDateChange(d, "end")
diff --git a/packages/admin-next/dashboard/src/hooks/use-date.tsx b/packages/admin-next/dashboard/src/hooks/use-date.tsx
index af8769f712..15e40541f5 100644
--- a/packages/admin-next/dashboard/src/hooks/use-date.tsx
+++ b/packages/admin-next/dashboard/src/hooks/use-date.tsx
@@ -4,6 +4,8 @@ import { useTranslation } from "react-i18next"
 
 import { languages } from "../i18n/languages"
 
+// TODO: We rely on the current language to determine the date locale. This is not ideal, as we use en-US for the english translation.
+// We either need to also have an en-GB translation or we need to separate the date locale from the translation language.
 export const useDate = () => {
   const { i18n } = useTranslation()
 
diff --git a/packages/admin-next/dashboard/src/providers/i18n-provider/i18n-provider.tsx b/packages/admin-next/dashboard/src/providers/i18n-provider/i18n-provider.tsx
new file mode 100644
index 0000000000..6da3118eb8
--- /dev/null
+++ b/packages/admin-next/dashboard/src/providers/i18n-provider/i18n-provider.tsx
@@ -0,0 +1,16 @@
+import { I18nProvider as Provider } from "@medusajs/ui"
+import { PropsWithChildren } from "react"
+import { useTranslation } from "react-i18next"
+import { languages } from "../../i18n/languages"
+
+type I18nProviderProps = PropsWithChildren
+
+export const I18nProvider = ({ children }: I18nProviderProps) => {
+  const { i18n } = useTranslation()
+
+  const locale =
+    languages.find((lan) => lan.code === i18n.language)?.code ||
+    languages[0].code
+
+  return <Provider locale={locale}>{children}</Provider>
+}
diff --git a/packages/admin-next/dashboard/src/providers/i18n-provider/index.ts b/packages/admin-next/dashboard/src/providers/i18n-provider/index.ts
new file mode 100644
index 0000000000..ed399e5acf
--- /dev/null
+++ b/packages/admin-next/dashboard/src/providers/i18n-provider/index.ts
@@ -0,0 +1 @@
+export * from "./i18n-provider"
diff --git a/packages/admin-next/dashboard/src/routes/campaigns/campaign-edit/components/edit-campaign-form/edit-campaign-form.tsx b/packages/admin-next/dashboard/src/routes/campaigns/campaign-edit/components/edit-campaign-form/edit-campaign-form.tsx
index 6482bd74b9..9eb49155b6 100644
--- a/packages/admin-next/dashboard/src/routes/campaigns/campaign-edit/components/edit-campaign-form/edit-campaign-form.tsx
+++ b/packages/admin-next/dashboard/src/routes/campaigns/campaign-edit/components/edit-campaign-form/edit-campaign-form.tsx
@@ -5,10 +5,7 @@ import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import * as zod from "zod"
 import { Form } from "../../../../../components/common/form"
-import {
-  RouteDrawer,
-  useRouteModal,
-} from "../../../../../components/modals"
+import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
 import { useUpdateCampaign } from "../../../../../hooks/api/campaigns"
 
 type EditCampaignFormProps = {
@@ -133,18 +130,16 @@ export const EditCampaignForm = ({ campaign }: EditCampaignFormProps) => {
             <Form.Field
               control={form.control}
               name="starts_at"
-              render={({ field: { value, onChange, ref: _ref, ...field } }) => {
+              render={({ field }) => {
                 return (
                   <Form.Item>
                     <Form.Label>{t("campaigns.fields.start_date")}</Form.Label>
 
                     <Form.Control>
                       <DatePicker
-                        showTimePicker
-                        value={value ?? undefined}
-                        onChange={(v) => {
-                          onChange(v ?? null)
-                        }}
+                        granularity="minute"
+                        hourCycle={12}
+                        shouldCloseOnSelect={false}
                         {...field}
                       />
                     </Form.Control>
@@ -158,16 +153,15 @@ export const EditCampaignForm = ({ campaign }: EditCampaignFormProps) => {
             <Form.Field
               control={form.control}
               name="ends_at"
-              render={({ field: { value, onChange, ref: _ref, ...field } }) => {
+              render={({ field }) => {
                 return (
                   <Form.Item>
                     <Form.Label>{t("campaigns.fields.end_date")}</Form.Label>
 
                     <Form.Control>
                       <DatePicker
-                        showTimePicker
-                        value={value ?? undefined}
-                        onChange={(v) => onChange(v ?? null)}
+                        granularity="minute"
+                        shouldCloseOnSelect={false}
                         {...field}
                       />
                     </Form.Control>
diff --git a/packages/admin-next/dashboard/src/routes/campaigns/common/components/create-campaign-form-fields/create-campaign-form-fields.tsx b/packages/admin-next/dashboard/src/routes/campaigns/common/components/create-campaign-form-fields/create-campaign-form-fields.tsx
index ceadd2b5a5..1403aa55ad 100644
--- a/packages/admin-next/dashboard/src/routes/campaigns/common/components/create-campaign-form-fields/create-campaign-form-fields.tsx
+++ b/packages/admin-next/dashboard/src/routes/campaigns/common/components/create-campaign-form-fields/create-campaign-form-fields.tsx
@@ -138,18 +138,15 @@ export const CreateCampaignFormFields = ({ form, fieldScope = "" }) => {
         <Form.Field
           control={form.control}
           name={`${fieldScope}starts_at`}
-          render={({ field: { value, onChange, ref: _ref, ...field } }) => {
+          render={({ field }) => {
             return (
               <Form.Item>
                 <Form.Label>{t("campaigns.fields.start_date")}</Form.Label>
 
                 <Form.Control>
                   <DatePicker
-                    showTimePicker
-                    value={value ?? undefined}
-                    onChange={(v) => {
-                      onChange(v ?? null)
-                    }}
+                    granularity="minute"
+                    shouldCloseOnSelect={false}
                     {...field}
                   />
                 </Form.Control>
@@ -163,16 +160,15 @@ export const CreateCampaignFormFields = ({ form, fieldScope = "" }) => {
         <Form.Field
           control={form.control}
           name={`${fieldScope}ends_at`}
-          render={({ field: { value, onChange, ref: _ref, ...field } }) => {
+          render={({ field }) => {
             return (
               <Form.Item>
                 <Form.Label>{t("campaigns.fields.end_date")}</Form.Label>
 
                 <Form.Control>
                   <DatePicker
-                    showTimePicker
-                    value={value ?? undefined}
-                    onChange={(v) => onChange(v ?? null)}
+                    granularity="minute"
+                    shouldCloseOnSelect={false}
                     {...field}
                   />
                 </Form.Control>
diff --git a/packages/admin-next/dashboard/src/routes/price-lists/price-list-configuration/components/price-list-configuration-form/price-list-configuration-form.tsx b/packages/admin-next/dashboard/src/routes/price-lists/price-list-configuration/components/price-list-configuration-form/price-list-configuration-form.tsx
index f26d34a69f..1ef624c33b 100644
--- a/packages/admin-next/dashboard/src/routes/price-lists/price-list-configuration/components/price-list-configuration-form/price-list-configuration-form.tsx
+++ b/packages/admin-next/dashboard/src/routes/price-lists/price-list-configuration/components/price-list-configuration-form/price-list-configuration-form.tsx
@@ -41,7 +41,6 @@ const PriceListConfigurationSchema = z.object({
 
 const STACKED_MODAL_ID = "cg"
 
-// TODO: Fix DatePickers once new version is merged.
 export const PriceListConfigurationForm = ({
   priceList,
   customerGroups,
@@ -122,7 +121,7 @@ export const PriceListConfigurationForm = ({
           <Form.Field
             control={form.control}
             name="starts_at"
-            render={({ field: { value, onChange, ...field } }) => {
+            render={({ field }) => {
               return (
                 <Form.Item>
                   <div className="grid grid-cols-1 gap-3">
@@ -135,12 +134,10 @@ export const PriceListConfigurationForm = ({
                       </Form.Hint>
                     </div>
                     <Form.Control>
-                      {/* TODO: Add timepicker see CORE-2382 */}
                       <DatePicker
-                        mode="single"
+                        granularity="minute"
+                        shouldCloseOnSelect={false}
                         {...field}
-                        onChange={(value) => onChange(value ?? null)}
-                        value={value ?? undefined}
                       />
                     </Form.Control>
                   </div>
@@ -153,7 +150,7 @@ export const PriceListConfigurationForm = ({
           <Form.Field
             control={form.control}
             name="ends_at"
-            render={({ field: { value, onChange, ...field } }) => {
+            render={({ field }) => {
               return (
                 <Form.Item>
                   <div className="grid grid-cols-1 gap-3">
@@ -167,10 +164,9 @@ export const PriceListConfigurationForm = ({
                     </div>
                     <Form.Control>
                       <DatePicker
-                        mode="single"
+                        granularity="minute"
+                        shouldCloseOnSelect={false}
                         {...field}
-                        onChange={(value) => onChange(value ?? null)}
-                        value={value ?? undefined}
                       />
                     </Form.Control>
                   </div>
diff --git a/packages/admin-next/dashboard/src/routes/price-lists/price-list-create/components/price-list-create-form/price-list-create-form.tsx b/packages/admin-next/dashboard/src/routes/price-lists/price-list-create/components/price-list-create-form/price-list-create-form.tsx
index 2476028c72..82abdb79aa 100644
--- a/packages/admin-next/dashboard/src/routes/price-lists/price-list-create/components/price-list-create-form/price-list-create-form.tsx
+++ b/packages/admin-next/dashboard/src/routes/price-lists/price-list-create/components/price-list-create-form/price-list-create-form.tsx
@@ -46,7 +46,6 @@ type PriceListCreateFormProps = {
   currencies: HttpTypes.AdminStoreCurrency[]
 }
 
-// TODO: Fix DatePickers once new version is merged.
 export const PriceListCreateForm = ({
   regions,
   currencies,
diff --git a/packages/admin-next/dashboard/src/routes/price-lists/price-list-create/components/price-list-create-form/price-list-details-form.tsx b/packages/admin-next/dashboard/src/routes/price-lists/price-list-create/components/price-list-create-form/price-list-details-form.tsx
index 63631690de..17c9ec3d41 100644
--- a/packages/admin-next/dashboard/src/routes/price-lists/price-list-create/components/price-list-create-form/price-list-details-form.tsx
+++ b/packages/admin-next/dashboard/src/routes/price-lists/price-list-create/components/price-list-create-form/price-list-details-form.tsx
@@ -173,7 +173,7 @@ export const PriceListDetailsForm = ({ form }: PriceListDetailsFormProps) => {
         <Form.Field
           control={form.control}
           name="starts_at"
-          render={({ field: { value, ...field } }) => {
+          render={({ field }) => {
             return (
               <Form.Item>
                 <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
@@ -186,11 +186,10 @@ export const PriceListDetailsForm = ({ form }: PriceListDetailsFormProps) => {
                     </Form.Hint>
                   </div>
                   <Form.Control>
-                    {/* TODO: Add timepicker see CORE-2382 */}
                     <DatePicker
-                      mode="single"
+                      granularity="minute"
+                      shouldCloseOnSelect={false}
                       {...field}
-                      value={value ?? undefined}
                     />
                   </Form.Control>
                 </div>
@@ -203,7 +202,7 @@ export const PriceListDetailsForm = ({ form }: PriceListDetailsFormProps) => {
         <Form.Field
           control={form.control}
           name="ends_at"
-          render={({ field: { value, ...field } }) => {
+          render={({ field }) => {
             return (
               <Form.Item>
                 <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
@@ -215,9 +214,9 @@ export const PriceListDetailsForm = ({ form }: PriceListDetailsFormProps) => {
                   </div>
                   <Form.Control>
                     <DatePicker
-                      mode="single"
+                      granularity="minute"
+                      shouldCloseOnSelect={false}
                       {...field}
-                      value={value ?? undefined}
                     />
                   </Form.Control>
                 </div>
diff --git a/packages/admin-next/dashboard/src/routes/price-lists/price-list-detail/price-list-detail.tsx b/packages/admin-next/dashboard/src/routes/price-lists/price-list-detail/price-list-detail.tsx
index af0ae3a37e..d6e4a0da91 100644
--- a/packages/admin-next/dashboard/src/routes/price-lists/price-list-detail/price-list-detail.tsx
+++ b/packages/admin-next/dashboard/src/routes/price-lists/price-list-detail/price-list-detail.tsx
@@ -34,7 +34,7 @@ export const PriceListDetails = () => {
         )
       })}
       <div className="flex flex-col gap-x-4 xl:flex-row xl:items-start">
-        <div className="flex w-full flex-col gap-y-3">
+        <div className="flex flex-1 flex-col gap-y-3">
           <PriceListGeneralSection priceList={price_list} />
           <PriceListProductSection priceList={price_list} />
           {after.widgets.map((w, i) => {
@@ -48,7 +48,7 @@ export const PriceListDetails = () => {
             <JsonViewSection data={price_list} />
           </div>
         </div>
-        <div className="mt-2 flex w-full max-w-[100%] flex-col gap-y-2 xl:mt-0 xl:max-w-[423px]">
+        <div className="mt-2 flex w-full max-w-[100%] flex-col gap-y-2 xl:mt-0 xl:max-w-[440px]">
           {sideBefore.widgets.map((w, i) => {
             return (
               <div key={i}>
diff --git a/packages/design-system/ui/package.json b/packages/design-system/ui/package.json
index fb7f3c0897..208818c76b 100644
--- a/packages/design-system/ui/package.json
+++ b/packages/design-system/ui/package.json
@@ -81,34 +81,35 @@
   },
   "dependencies": {
     "@medusajs/icons": "^1.2.1",
-    "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-alert-dialog": "1.0.4",
-    "@radix-ui/react-avatar": "^1.0.3",
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-dialog": "1.0.4",
-    "@radix-ui/react-dropdown-menu": "^2.0.5",
-    "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-popover": "^1.0.6",
-    "@radix-ui/react-portal": "^1.0.3",
-    "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-scroll-area": "^1.0.4",
-    "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-switch": "^1.0.3",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-tooltip": "^1.0.6",
-    "@react-aria/datepicker": "^3.5.0",
-    "@react-stately/datepicker": "^3.5.0",
+    "@radix-ui/react-accordion": "1.2.0",
+    "@radix-ui/react-alert-dialog": "1.1.1",
+    "@radix-ui/react-avatar": "1.1.0",
+    "@radix-ui/react-checkbox": "1.1.1",
+    "@radix-ui/react-dialog": "1.1.1",
+    "@radix-ui/react-dropdown-menu": "2.1.1",
+    "@radix-ui/react-label": "2.1.0",
+    "@radix-ui/react-popover": "1.1.1",
+    "@radix-ui/react-portal": "1.1.1",
+    "@radix-ui/react-radio-group": "1.2.0",
+    "@radix-ui/react-scroll-area": "1.1.0",
+    "@radix-ui/react-select": "2.1.1",
+    "@radix-ui/react-slot": "1.1.0",
+    "@radix-ui/react-switch": "1.1.0",
+    "@radix-ui/react-tabs": "1.1.0",
+    "@radix-ui/react-tooltip": "1.1.2",
     "clsx": "^1.2.1",
     "copy-to-clipboard": "^3.3.3",
     "cva": "1.0.0-beta.1",
     "date-fns": "^2.30.0",
     "prism-react-renderer": "^2.0.6",
     "prismjs": "^1.29.0",
+    "react-aria": "^3.33.1",
     "react-currency-input-field": "^3.6.11",
-    "react-day-picker": "^8.8.0",
+    "react-stately": "^3.31.1",
     "sonner": "^1.4.41",
-    "tailwind-merge": "^2.2.1"
+    "tailwind-merge": "^2.2.1",
+    "upgrade": "^1.1.0",
+    "yarn": "^1.22.22"
   },
   "peerDependencies": {
     "react": "^18.0.0",
diff --git a/packages/design-system/ui/src/components/calendar/calendar.stories.tsx b/packages/design-system/ui/src/components/calendar/calendar.stories.tsx
deleted file mode 100644
index ed24ea624d..0000000000
--- a/packages/design-system/ui/src/components/calendar/calendar.stories.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import * as React from "react"
-
-import { Text } from "@/components/text"
-import { DateRange } from "react-day-picker"
-import { Calendar } from "./calendar"
-
-const Demo = ({ mode, ...args }: Parameters<typeof Calendar>[0]) => {
-  const [date, setDate] = React.useState<Date | undefined>(new Date())
-  const [dateRange, setDateRange] = React.useState<DateRange | undefined>(
-    undefined
-  )
-
-  return (
-    <div className="flex flex-col items-center gap-y-4">
-      <Calendar
-        {...(args as any)}
-        mode={mode as "single" | "range"}
-        selected={mode === "single" ? date : dateRange}
-        onSelect={mode === "single" ? setDate : setDateRange}
-      />
-
-      {mode === "single" && (
-        <Text className="text-ui-fg-base">
-          Selected Date: {date ? date.toDateString() : "None"}
-        </Text>
-      )}
-      {mode === "range" && (
-        <Text className="text-ui-fg-base">
-          Selected Range:{" "}
-          {dateRange
-            ? `${dateRange.from?.toDateString()} – ${
-                dateRange.to?.toDateString() ?? ""
-              }`
-            : "None"}
-        </Text>
-      )}
-    </div>
-  )
-}
-
-const meta: Meta<typeof Calendar> = {
-  title: "Components/Calendar",
-  component: Calendar,
-  render: Demo,
-  parameters: {
-    layout: "centered",
-  },
-}
-
-export default meta
-
-type Story = StoryObj<typeof Calendar>
-
-export const Single: Story = {
-  args: {
-    mode: "single",
-  },
-}
-
-export const TwoMonthSingle: Story = {
-  args: {
-    mode: "single",
-    numberOfMonths: 2,
-  },
-}
-
-export const Range: Story = {
-  args: {
-    mode: "range",
-  },
-}
-
-export const TwoMonthRange: Story = {
-  args: {
-    mode: "range",
-    numberOfMonths: 2,
-  },
-}
diff --git a/packages/design-system/ui/src/components/calendar/calendar.tsx b/packages/design-system/ui/src/components/calendar/calendar.tsx
deleted file mode 100644
index 7a8364635a..0000000000
--- a/packages/design-system/ui/src/components/calendar/calendar.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-"use client"
-
-import { TriangleLeftMini, TriangleRightMini } from "@medusajs/icons"
-import * as React from "react"
-import {
-  DayPicker,
-  useDayRender,
-  type DayPickerRangeProps,
-  type DayPickerSingleProps,
-  type DayProps,
-} from "react-day-picker"
-
-import { clx } from "@/utils/clx"
-import { iconButtonVariants } from "../icon-button"
-
-type OmitKeys<T, K extends keyof T> = {
-  [P in keyof T as P extends K ? never : P]: T[P]
-}
-
-type KeysToOmit = "showWeekNumber" | "captionLayout" | "mode"
-
-type SingleProps = OmitKeys<DayPickerSingleProps, KeysToOmit>
-type RangeProps = OmitKeys<DayPickerRangeProps, KeysToOmit>
-
-/**
- * @interface
- */
-type CalendarProps =
-  | ({
-      mode: "single"
-    } & SingleProps)
-  | ({
-      mode?: undefined
-    } & SingleProps)
-  | ({
-      mode: "range"
-    } & RangeProps)
-
-/**
- * This component is based on the [react-date-picker](https://www.npmjs.com/package/react-date-picker) package.
- *
- * @excludeExternal
- */
-const Calendar = ({
-  /**
-   * @ignore
-   */
-  className,
-  /**
-   * @ignore
-   */
-  classNames,
-  /**
-   * The calendar's mode.
-   */
-  mode = "single",
-  /**
-   * Whether to show days of previous and next months.
-   *
-   * @keep
-   */
-  showOutsideDays = true,
-  /**
-   * The locale to use for formatting dates. To change the locale pass a date-fns locale object.
-   *
-   * @keep
-   */
-  locale,
-  ...props
-}: CalendarProps) => {
-  return (
-    <DayPicker
-      mode={mode}
-      showOutsideDays={showOutsideDays}
-      className={clx(className)}
-      classNames={{
-        months: "flex flex-col sm:flex-row",
-        month: "space-y-2 p-3",
-        caption: "flex justify-center relative items-center h-8",
-        caption_label:
-          "txt-compact-small-plus absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center text-ui-fg-base",
-        nav: "space-x-1 flex items-center bg-ui-bg-base-pressed rounded-md w-full h-full justify-between p-0.5",
-        nav_button: clx(
-          iconButtonVariants({ variant: "transparent", size: "small" })
-        ),
-        nav_button_previous: "!absolute left-0.5",
-        nav_button_next: "!absolute right-0.5",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex w-full gap-x-2",
-        head_cell: clx(
-          "txt-compact-small-plus text-ui-fg-muted m-0 box-border flex h-8 w-8 items-center justify-center p-0"
-        ),
-        row: "flex w-full mt-2 gap-x-2",
-        cell: "txt-compact-small-plus relative rounded-md p-0 text-center focus-within:relative",
-        day: "txt-compact-small-plus text-ui-fg-base bg-ui-bg-base hover:bg-ui-bg-base-hover focus-visible:shadow-borders-interactive-with-focus h-8 w-8 rounded-md p-0 text-center outline-none transition-all",
-        day_selected:
-          "bg-ui-bg-interactive text-ui-fg-on-color hover:bg-ui-bg-interactive focus-visible:bg-ui-bg-interactive",
-        day_outside: "text-ui-fg-disabled aria-selected:text-ui-fg-on-color",
-        day_disabled: "text-ui-fg-disabled",
-        day_range_middle:
-          "aria-selected:!bg-ui-bg-highlight aria-selected:!text-ui-fg-interactive",
-        day_hidden: "invisible",
-        ...classNames,
-      }}
-      locale={locale}
-      components={{
-        IconLeft: () => <TriangleLeftMini />,
-        IconRight: () => <TriangleRightMini />,
-        Day: Day,
-      }}
-      {...(props as SingleProps & RangeProps)}
-    />
-  )
-}
-Calendar.displayName = "Calendar"
-
-const Day = ({ date, displayMonth }: DayProps) => {
-  const ref = React.useRef<HTMLButtonElement>(null)
-  const { activeModifiers, buttonProps, divProps, isButton, isHidden } =
-    useDayRender(date, displayMonth, ref)
-
-  const { selected, today, disabled, range_middle } = activeModifiers
-
-  React.useEffect(() => {
-    if (selected) {
-      ref.current?.focus()
-    }
-  }, [selected])
-
-  if (isHidden) {
-    return <></>
-  }
-
-  if (!isButton) {
-    return (
-      <div
-        {...divProps}
-        className={clx("flex items-center justify-center", divProps.className)}
-      />
-    )
-  }
-
-  const {
-    children: buttonChildren,
-    className: buttonClassName,
-    ...buttonPropsRest
-  } = buttonProps
-
-  return (
-    <button
-      ref={ref}
-      {...buttonPropsRest}
-      type="button"
-      className={clx("relative", buttonClassName)}
-    >
-      {buttonChildren}
-      {today && (
-        <span
-          className={clx(
-            "absolute right-[5px] top-[5px] h-1 w-1 rounded-full",
-            {
-              "bg-ui-fg-interactive": !selected,
-              "bg-ui-fg-on-color": selected,
-              "!bg-ui-fg-interactive": selected && range_middle,
-              "bg-ui-fg-disabled": disabled,
-            }
-          )}
-        />
-      )}
-    </button>
-  )
-}
-
-export { Calendar }
diff --git a/packages/design-system/ui/src/components/calendar/index.ts b/packages/design-system/ui/src/components/calendar/index.ts
deleted file mode 100644
index 33dfcd855d..0000000000
--- a/packages/design-system/ui/src/components/calendar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./calendar"
diff --git a/packages/design-system/ui/src/components/calender/_internal-calendar.tsx b/packages/design-system/ui/src/components/calender/_internal-calendar.tsx
new file mode 100644
index 0000000000..230190b3c8
--- /dev/null
+++ b/packages/design-system/ui/src/components/calender/_internal-calendar.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import { createCalendar } from "@internationalized/date"
+import { TriangleLeftMini, TriangleRightMini } from "@medusajs/icons"
+import * as React from "react"
+import {
+    DateValue,
+    useCalendar,
+    useLocale,
+    type CalendarProps,
+} from "react-aria"
+import { useCalendarState } from "react-stately"
+
+import { CalendarButton } from "./calendar-button"
+import { CalendarGrid } from "./calendar-grid"
+
+/**
+ * InternalCalendar is the internal implementation of the Calendar component.
+ * It's not for public use, but only used for other components like DatePicker.
+ */
+const InternalCalendar = <TDateValue extends DateValue>(
+  props: CalendarProps<TDateValue>
+) => {
+  const { locale } = useLocale()
+
+  const state = useCalendarState({
+    ...props,
+    locale,
+    createCalendar,
+  })
+
+  const { calendarProps, prevButtonProps, nextButtonProps, title } =
+    useCalendar(props, state)
+
+  return (
+    <div {...calendarProps} className="flex flex-col gap-y-2">
+      <div className="bg-ui-bg-field border-base grid grid-cols-[28px_1fr_28px] items-center gap-1 rounded-md border p-0.5">
+        <CalendarButton {...prevButtonProps}>
+          <TriangleLeftMini />
+        </CalendarButton>
+        <div className="flex items-center justify-center">
+          <h2 className="txt-compact-small-plus">{title}</h2>
+        </div>
+        <CalendarButton {...nextButtonProps}>
+          <TriangleRightMini />
+        </CalendarButton>
+      </div>
+      <CalendarGrid state={state} />
+    </div>
+  )
+}
+
+export { InternalCalendar }
diff --git a/packages/design-system/ui/src/components/calender/calendar-button.tsx b/packages/design-system/ui/src/components/calender/calendar-button.tsx
new file mode 100644
index 0000000000..e6575475fe
--- /dev/null
+++ b/packages/design-system/ui/src/components/calender/calendar-button.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import { AriaButtonProps, useButton } from "react-aria"
+
+import { IconButton } from "@/components/icon-button"
+
+interface CalendarButtonProps extends AriaButtonProps<"button"> {}
+
+const CalendarButton = React.forwardRef<HTMLButtonElement, CalendarButtonProps>(
+  ({ children, ...props }, ref) => {
+    const innerRef = React.useRef<HTMLButtonElement>(null)
+    React.useImperativeHandle(ref, () => innerRef.current as HTMLButtonElement)
+
+    const { buttonProps } = useButton(props, innerRef)
+
+    return (
+      <IconButton
+        size="small"
+        variant="transparent"
+        className="rounded-[4px]"
+        {...buttonProps}
+      >
+        {children}
+      </IconButton>
+    )
+  }
+)
+CalendarButton.displayName = "CalendarButton"
+
+export { CalendarButton }
diff --git a/packages/design-system/ui/src/components/calender/calendar-cell.tsx b/packages/design-system/ui/src/components/calender/calendar-cell.tsx
new file mode 100644
index 0000000000..31a83006e5
--- /dev/null
+++ b/packages/design-system/ui/src/components/calender/calendar-cell.tsx
@@ -0,0 +1,75 @@
+"use client"
+
+import { CalendarDate } from "@internationalized/date"
+import * as React from "react"
+import { useCalendarCell } from "react-aria"
+import { CalendarState } from "react-stately"
+
+import { clx } from "@/utils/clx"
+
+interface CalendarCellProps {
+  date: CalendarDate
+  state: CalendarState
+}
+
+const CalendarCell = ({ state, date }: CalendarCellProps) => {
+  const ref = React.useRef(null)
+  const {
+    cellProps,
+    buttonProps,
+    isSelected,
+    isOutsideVisibleRange,
+    isDisabled,
+    isUnavailable,
+    formattedDate,
+  } = useCalendarCell({ date }, state, ref)
+
+  const isToday = getIsToday(date)
+
+  return (
+    <td {...cellProps} className="p-1">
+      <div
+        {...buttonProps}
+        ref={ref}
+        hidden={isOutsideVisibleRange}
+        className={clx(
+          "bg-ui-bg-base txt-compact-small relative flex size-8 items-center justify-center rounded-md outline-none transition-fg border border-transparent",
+          "hover:bg-ui-bg-base-hover",
+          "focus-visible:shadow-borders-focus focus-visible:border-ui-border-interactive",
+          {
+            "!bg-ui-bg-interactive !text-ui-fg-on-color": isSelected,
+            "hidden": isOutsideVisibleRange,
+            "text-ui-fg-muted hover:!bg-ui-bg-base cursor-default": isDisabled || isUnavailable,
+          }
+        )}
+      >
+        {formattedDate}
+        {isToday && (
+          <div
+            role="none"
+            className={clx(
+              "bg-ui-bg-interactive absolute bottom-[3px] left-1/2 size-[3px] -translate-x-1/2 rounded-full transition-fg",
+              {
+                "bg-ui-fg-on-color": isSelected,
+              }
+            )}
+          />
+        )}
+      </div>
+    </td>
+  )
+}
+
+/**
+ * Check if the date is today. The CalendarDate is using a 1-based index for the month.
+ * @returns Whether the CalendarDate is today.
+ */
+function getIsToday(date: CalendarDate) {
+  const today = new Date()
+  return (
+    [date.year, date.month, date.day].join("-") ===
+    [today.getFullYear(), today.getMonth() + 1, today.getDate()].join("-")
+  )
+}
+
+export { CalendarCell }
diff --git a/packages/design-system/ui/src/components/calender/calendar-grid.tsx b/packages/design-system/ui/src/components/calender/calendar-grid.tsx
new file mode 100644
index 0000000000..64185554c8
--- /dev/null
+++ b/packages/design-system/ui/src/components/calender/calendar-grid.tsx
@@ -0,0 +1,46 @@
+import { getWeeksInMonth } from "@internationalized/date"
+import * as React from "react"
+import { AriaCalendarGridProps, useCalendarGrid, useLocale } from "react-aria"
+
+import { CalendarState } from "react-stately"
+import { CalendarCell } from "./calendar-cell"
+
+interface CalendarGridProps extends AriaCalendarGridProps {
+  state: CalendarState
+}
+
+const CalendarGrid = ({ state, ...props }: CalendarGridProps) => {
+  const { locale } = useLocale()
+  const { gridProps, headerProps, weekDays } = useCalendarGrid(props, state)
+
+  const weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale)
+
+  return (
+    <table {...gridProps}>
+      <thead {...headerProps}>
+        <tr>
+          {weekDays.map((day, index) => (
+            <th key={index} className="txt-compact-small-plus text-ui-fg-muted size-8 p-1 rounded-md">{day}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {[...new Array(weeksInMonth).keys()].map((weekIndex) => (
+          <tr key={weekIndex}>
+            {state
+              .getDatesInWeek(weekIndex)
+              .map((date, i) =>
+                date ? (
+                  <CalendarCell key={i} state={state} date={date} />
+                ) : (
+                  <td key={i} />
+                )
+              )}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}
+
+export { CalendarGrid }
diff --git a/packages/design-system/ui/src/components/calender/calendar.stories.tsx b/packages/design-system/ui/src/components/calender/calendar.stories.tsx
new file mode 100644
index 0000000000..e1497d2c89
--- /dev/null
+++ b/packages/design-system/ui/src/components/calender/calendar.stories.tsx
@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import * as React from "react"
+import { ComponentPropsWithoutRef } from "react"
+import { Button } from "../button"
+import { Calendar } from "./calendar"
+
+const meta: Meta<typeof Calendar> = {
+  title: "Components/CalendarNew",
+  component: Calendar,
+  parameters: {
+    layout: "centered",
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Calendar>
+
+export const Default: Story = {
+  args: {},
+}
+
+const ControlledDemo = (args: ComponentPropsWithoutRef<typeof Calendar>) => {
+  const [date, setDate] = React.useState<Date | null>(new Date())
+
+  return (
+    <div>
+      <Calendar {...args} value={date} onChange={setDate} />
+      <div className="flex items-center justify-between">
+        <pre className="font-mono txt-compact-small">{date ? date.toDateString() : "null"}</pre>
+        <Button variant="secondary" size="small" onClick={() => setDate(null)}>Reset</Button>
+      </div>
+    </div>
+  )
+}
+
+export const Controlled: Story = {
+  render: ControlledDemo,
+}
+
+export const MinValue: Story = {
+  args: {
+    minValue: new Date(),
+  },
+}
+
+export const MaxValue: Story = {
+  args: {
+    maxValue: new Date(),
+  },
+}
+
+export const DisabledDates: Story = {
+  args: {
+    isDateUnavailable: (date: Date) => {
+      const unavailable = date.getDay() === 0
+
+      return unavailable
+    },
+  },
+}
diff --git a/packages/design-system/ui/src/components/calender/calendar.tsx b/packages/design-system/ui/src/components/calender/calendar.tsx
new file mode 100644
index 0000000000..4a599c077c
--- /dev/null
+++ b/packages/design-system/ui/src/components/calender/calendar.tsx
@@ -0,0 +1,110 @@
+import {
+  CalendarDate,
+  createCalendar,
+  getLocalTimeZone
+} from "@internationalized/date"
+import { TriangleLeftMini, TriangleRightMini } from "@medusajs/icons"
+import * as React from "react"
+import {
+  DateValue,
+  useCalendar,
+  useLocale,
+  type CalendarProps as BaseCalendarProps,
+} from "react-aria"
+import { useCalendarState } from "react-stately"
+
+import { createCalendarDate, getDefaultCalendarDate, updateCalendarDate } from "@/utils/calendar"
+
+import { CalendarButton } from "./calendar-button"
+import { CalendarGrid } from "./calendar-grid"
+
+interface CalendarValueProps {
+  value?: Date | null
+  defaultValue?: Date | null
+  onChange?: (value: Date | null) => void
+  isDateUnavailable?: (date: Date) => boolean
+  minValue?: Date
+  maxValue?: Date
+}
+
+interface CalendarProps
+  extends Omit<BaseCalendarProps<CalendarDate>, keyof CalendarValueProps>,
+    CalendarValueProps {}
+
+const Calendar = (props: CalendarProps) => {
+  const [value, setValue] = React.useState<CalendarDate  | null | undefined>(
+    () => getDefaultCalendarDate(props.value, props.defaultValue)
+  )
+
+  const { locale } = useLocale()
+  const _props = React.useMemo(() => convertProps(props, setValue), [props])
+
+  const state = useCalendarState({
+    ..._props,
+    value,
+    locale,
+    createCalendar,
+  })
+
+  React.useEffect(() => {
+    setValue(props.value ? updateCalendarDate(value, props.value) : null)
+  }, [props.value])
+
+  const { calendarProps, prevButtonProps, nextButtonProps, title } =
+    useCalendar({ value, ..._props }, state)
+
+  return (
+    <div {...calendarProps} className="flex flex-col gap-y-2">
+      <div className="bg-ui-bg-field border-base grid grid-cols-[28px_1fr_28px] items-center gap-1 rounded-md border p-0.5">
+        <CalendarButton {...prevButtonProps}>
+          <TriangleLeftMini />
+        </CalendarButton>
+        <div className="flex items-center justify-center">
+          <h2 className="txt-compact-small-plus">{title}</h2>
+        </div>
+        <CalendarButton {...nextButtonProps}>
+          <TriangleRightMini />
+        </CalendarButton>
+      </div>
+      <CalendarGrid state={state} />
+    </div>
+  )
+}
+
+function convertProps(
+  props: CalendarProps,
+  setValue: React.Dispatch<
+    React.SetStateAction<CalendarDate | null | undefined>
+  >
+): BaseCalendarProps<CalendarDate> {
+  const {
+    minValue,
+    maxValue,
+    isDateUnavailable: _isDateUnavailable,
+    onChange: _onChange,
+    value: __value__,
+    defaultValue: __defaultValue__,
+    ...rest
+  } = props
+
+  const onChange = (value: CalendarDate | null) => {
+    setValue(value)
+    _onChange?.(value ? value.toDate(getLocalTimeZone()) : null)
+  }
+
+  const isDateUnavailable = (date: DateValue) => {
+    const _date = date.toDate(getLocalTimeZone())
+
+    return _isDateUnavailable ? _isDateUnavailable(_date) : false
+  }
+
+  return {
+    ...rest,
+    onChange,
+    isDateUnavailable,
+    minValue: minValue ? createCalendarDate(minValue) : minValue,
+    maxValue: maxValue ? createCalendarDate(maxValue) : maxValue,
+  }
+}
+
+export { Calendar }
diff --git a/packages/design-system/ui/src/components/calender/index.ts b/packages/design-system/ui/src/components/calender/index.ts
new file mode 100644
index 0000000000..945ccd52d5
--- /dev/null
+++ b/packages/design-system/ui/src/components/calender/index.ts
@@ -0,0 +1,2 @@
+export * from "./_internal-calendar"
+export * from "./calendar"
diff --git a/packages/design-system/ui/src/components/date-picker/date-picker-button.tsx b/packages/design-system/ui/src/components/date-picker/date-picker-button.tsx
new file mode 100644
index 0000000000..6b00b18a4e
--- /dev/null
+++ b/packages/design-system/ui/src/components/date-picker/date-picker-button.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import { clx } from "@/utils/clx"
+import * as React from "react"
+import { AriaButtonProps, useButton } from "react-aria"
+
+interface CalendarButtonProps extends AriaButtonProps<"button"> {
+  size?: "base" | "small"
+}
+
+const DatePickerButton = React.forwardRef<
+  HTMLButtonElement,
+  CalendarButtonProps
+>(({ children, size = "base", ...props }, ref) => {
+  const innerRef = React.useRef<HTMLButtonElement>(null)
+  React.useImperativeHandle(ref, () => innerRef.current as HTMLButtonElement)
+
+  const { buttonProps } = useButton(props, innerRef)
+
+  return (
+    <button
+      type="button"
+      className={clx(
+        "text-ui-fg-muted transition-fg flex items-center justify-center border-r outline-none",
+        "disabled:text-ui-fg-disabled",
+        "hover:bg-ui-button-transparent-hover",
+        "focus-visible:bg-ui-bg-interactive focus-visible:text-ui-fg-on-color",
+        {
+          "size-7": size === "small",
+          "size-8": size === "base",
+        }
+      )}
+      aria-label="Open calendar"
+      {...buttonProps}
+    >
+      {children}
+    </button>
+  )
+})
+DatePickerButton.displayName = "DatePickerButton"
+
+export { DatePickerButton }
diff --git a/packages/design-system/ui/src/components/date-picker/date-picker-clear-button.tsx b/packages/design-system/ui/src/components/date-picker/date-picker-clear-button.tsx
new file mode 100644
index 0000000000..e89092cea9
--- /dev/null
+++ b/packages/design-system/ui/src/components/date-picker/date-picker-clear-button.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import { clx } from "@/utils/clx"
+import * as React from "react"
+
+const ALLOWED_KEYS = ["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"]
+
+export const DatePickerClearButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<"button">
+>(({ type = "button", className, children, ...props }, ref) => {
+  /**
+   * Allows the button to be used with only the keyboard.
+   * Otherwise the wrapping component will hijack the event.
+   */
+  const stopPropagation = (e: React.KeyboardEvent) => {
+    if (!ALLOWED_KEYS.includes(e.key)) {
+      e.stopPropagation()
+    }
+  }
+
+  return (
+    <button
+      ref={ref}
+      type={type}
+      className={clx(
+        "text-ui-fg-muted transition-fg flex size-full items-center justify-center outline-none",
+        "hover:bg-ui-button-transparent-hover",
+        "focus-visible:bg-ui-bg-interactive focus-visible:text-ui-fg-on-color",
+        className
+      )}
+      aria-label="Clear date"
+      onKeyDown={stopPropagation}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+})
+DatePickerClearButton.displayName = "DatePickerClearButton"
diff --git a/packages/design-system/ui/src/components/date-picker/date-picker-field.tsx b/packages/design-system/ui/src/components/date-picker/date-picker-field.tsx
new file mode 100644
index 0000000000..1e0bbfc5fd
--- /dev/null
+++ b/packages/design-system/ui/src/components/date-picker/date-picker-field.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import { createCalendar } from "@internationalized/date"
+import * as React from "react"
+import {
+  AriaDatePickerProps,
+  DateValue,
+  useDateField,
+  useLocale,
+} from "react-aria"
+import { useDateFieldState } from "react-stately"
+
+import { DateSegment } from "@/components/date-segment"
+import { cva } from "cva"
+
+interface DatePickerFieldProps extends AriaDatePickerProps<DateValue> {
+  size?: "base" | "small"
+}
+
+const datePickerFieldStyles = cva({
+  base: "flex items-center tabular-nums",
+  variants: {
+    size: {
+      small: "py-1",
+      base: "py-1.5",
+    },
+  },
+  defaultVariants: {
+    size: "base",
+  },
+})
+
+const DatePickerField = ({ size = "base", ...props }: DatePickerFieldProps) => {
+  const { locale } = useLocale()
+
+
+  const state = useDateFieldState({
+    ...props,
+    locale,
+    createCalendar,
+  })
+
+  const ref = React.useRef<HTMLDivElement>(null)
+  const { fieldProps } = useDateField(props, state, ref)
+
+  return (
+    <div ref={ref} aria-label="Date input" className={datePickerFieldStyles({ size })} {...fieldProps}>
+      {state.segments.map((segment, index) => {
+        return <DateSegment key={index} segment={segment} state={state} />
+      })}
+    </div>
+  )
+}
+
+export { DatePickerField }
diff --git a/packages/design-system/ui/src/components/date-picker/date-picker.spec.tsx b/packages/design-system/ui/src/components/date-picker/date-picker.spec.tsx
deleted file mode 100644
index 3a8664a622..0000000000
--- a/packages/design-system/ui/src/components/date-picker/date-picker.spec.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { render, screen } from "@testing-library/react"
-import * as React from "react"
-
-import { DatePicker } from "./date-picker"
-
-describe("DatePicker", () => {
-  describe("Preset validation", () => {
-    it("should throw an error if a preset is before the min year", async () => {
-      expect(() =>
-        render(
-          <DatePicker
-            fromYear={1800}
-            presets={[
-              {
-                label: "Year of the first US census",
-                date: new Date(1790, 0, 1),
-              },
-            ]}
-          />
-        )
-      ).toThrowError(
-        /Preset Year of the first US census is before fromYear 1800./
-      )
-    })
-
-    it("should throw an error if a preset is after the max year", async () => {
-      expect(() =>
-        render(
-          <DatePicker
-            toYear={2012}
-            presets={[
-              {
-                label: "End of the Mayan calendar",
-                date: new Date(2025, 0, 1),
-              },
-            ]}
-          />
-        )
-      ).toThrowError(/Preset End of the Mayan calendar is after toYear 2012./)
-    })
-  })
-
-  describe("Single", () => {
-    it("should render", async () => {
-      render(<DatePicker />)
-
-      expect(screen.getByRole("button")).toBeInTheDocument()
-    })
-  })
-
-  describe("Range", () => {
-    it("should render", async () => {
-      render(<DatePicker mode={"range"} />)
-
-      expect(screen.getByRole("button")).toBeInTheDocument()
-    })
-  })
-})
diff --git a/packages/design-system/ui/src/components/date-picker/date-picker.stories.tsx b/packages/design-system/ui/src/components/date-picker/date-picker.stories.tsx
index cea8797a43..e3e5ce41c5 100644
--- a/packages/design-system/ui/src/components/date-picker/date-picker.stories.tsx
+++ b/packages/design-system/ui/src/components/date-picker/date-picker.stories.tsx
@@ -1,243 +1,137 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import * as React from "react"
-import { DateRange } from "react-day-picker"
-
-import { Button } from "@/components/button"
+import { ComponentPropsWithoutRef } from "react"
+import { Button } from "../button"
+import { Drawer } from "../drawer"
+import { Label } from "../label"
 import { DatePicker } from "./date-picker"
-import { Popover } from "@/components/popover"
 
 const meta: Meta<typeof DatePicker> = {
-  title: "Components/DatePicker",
+  title: "Components/DatePickerNew",
   component: DatePicker,
   parameters: {
     layout: "centered",
   },
-  render: (args) => {
-    return (
-      <div className="w-[200px]">
-        <DatePicker {...args} />
-      </div>
-    )
-  },
 }
 
 export default meta
 
 type Story = StoryObj<typeof DatePicker>
 
-const presets = [
-  {
-    label: "Today",
-    date: new Date(),
-  },
-  {
-    label: "Tomorrow",
-    date: new Date(new Date().setDate(new Date().getDate() + 1)),
-  },
-  {
-    label: "A week from now",
-    date: new Date(new Date().setDate(new Date().getDate() + 7)),
-  },
-  {
-    label: "A month from now",
-    date: new Date(new Date().setMonth(new Date().getMonth() + 1)),
-  },
-  {
-    label: "6 months from now",
-    date: new Date(new Date().setMonth(new Date().getMonth() + 6)),
-  },
-  {
-    label: "A year from now",
-    date: new Date(new Date().setFullYear(new Date().getFullYear() + 1)),
-  },
-]
-
-export const Single: Story = {
-  args: {},
-}
-
-export const SingleWithPresets: Story = {
+export const Default: Story = {
   args: {
-    presets,
+    "aria-label": "Select a date",
   },
 }
 
-export const SingleWithTimePicker: Story = {
-  args: {
-    showTimePicker: true,
-  },
-}
+const today = new Date() // Today
+const oneWeekFromToday = new Date(new Date(today as Date).setDate(today.getDate() + 7)) // Today + 7 days
 
-export const SingleWithTimePickerAndPresets: Story = {
-  args: {
-    showTimePicker: true,
-    presets,
-  },
-}
-
-const rangePresets = [
-  {
-    label: "Today",
-    dateRange: {
-      from: new Date(),
-      to: new Date(),
-    },
-  },
-  {
-    label: "Last 7 days",
-    dateRange: {
-      from: new Date(new Date().setDate(new Date().getDate() - 7)),
-      to: new Date(),
-    },
-  },
-  {
-    label: "Last 30 days",
-    dateRange: {
-      from: new Date(new Date().setDate(new Date().getDate() - 30)),
-      to: new Date(),
-    },
-  },
-  {
-    label: "Last 3 months",
-    dateRange: {
-      from: new Date(new Date().setMonth(new Date().getMonth() - 3)),
-      to: new Date(),
-    },
-  },
-  {
-    label: "Last 6 months",
-    dateRange: {
-      from: new Date(new Date().setMonth(new Date().getMonth() - 6)),
-      to: new Date(),
-    },
-  },
-  {
-    label: "Month to date",
-    dateRange: {
-      from: new Date(new Date().setDate(1)),
-      to: new Date(),
-    },
-  },
-  {
-    label: "Year to date",
-    dateRange: {
-      from: new Date(new Date().setFullYear(new Date().getFullYear(), 0, 1)),
-      to: new Date(),
-    },
-  },
-]
-
-export const Range: Story = {
-  args: {
-    mode: "range",
-  },
-}
-
-export const RangeWithPresets: Story = {
-  args: {
-    mode: "range",
-    presets: rangePresets,
-  },
-}
-
-export const RangeWithTimePicker: Story = {
-  args: {
-    mode: "range",
-    showTimePicker: true,
-  },
-}
-
-export const RangeWithTimePickerAndPresets: Story = {
-  args: {
-    mode: "range",
-    showTimePicker: true,
-    presets: rangePresets,
-  },
-}
-
-const ControlledDemo = () => {
-  const [value, setValue] = React.useState<Date | undefined>(undefined)
+const ControlledDemo = (args: ComponentPropsWithoutRef<typeof DatePicker>) => {
+  const [startDate, setStartDate] = React.useState<Date | null>(today)
+  const [endDate, setEndDate] = React.useState<Date | null>(oneWeekFromToday)
 
   return (
-    <div className="flex w-[200px] flex-col gap-y-4">
-      <DatePicker
-        value={value}
-        onChange={(value) => {
-          setValue(value)
-        }}
-      />
-      <Button onClick={() => setValue(undefined)}>Reset</Button>
+    <div className="text-ui-fg-subtle grid max-w-[576px] gap-4 md:grid-cols-2">
+      <fieldset className="flex flex-col gap-y-0.5">
+        <Label id="starts_at:r1:label" htmlFor="starts_at:r1">Starts at</Label>
+        <DatePicker
+          id="starts_at:r1"
+          aria-labelledby="starts_at:r1:label"
+          {...args}
+          maxValue={endDate || undefined}
+          value={startDate}
+          onChange={setStartDate}
+        />
+      </fieldset>
+      <fieldset className="flex flex-col gap-y-0.5">
+        <Label id="ends_at:r1:label" htmlFor="ends_at:r1">Ends at</Label>
+        <DatePicker
+          id="ends_at:r1"
+          name="ends_at"
+          aria-labelledby="ends_at:r1:label"
+          minValue={startDate || undefined}
+          {...args}
+          value={endDate}
+          onChange={setEndDate}
+        />
+      </fieldset>
     </div>
   )
 }
 
 export const Controlled: Story = {
-  render: () => <ControlledDemo />,
+  render: ControlledDemo,
+  args: {
+    className: "w-[230px]",
+  },
 }
 
-const ControlledRangeDemo = () => {
-  const [value, setValue] = React.useState<DateRange | undefined>(undefined)
+export const MinValue: Story = {
+  args: {
+    "aria-label": "Select a date",
+    className: "w-[230px]",
+    minValue: new Date(),
+  },
+}
 
-  React.useEffect(() => {
-    console.log("Value changed: ", value)
-  }, [value])
+export const MaxValue: Story = {
+  args: {
+    "aria-label": "Select a date",
+    className: "w-[230px]",
+    maxValue: new Date(),
+  },
+}
 
+export const DisabledDates: Story = {
+  args: {
+    isDateUnavailable: (date: Date) => {
+      const unavailable = date.getDay() === 0
+
+      return unavailable
+    },
+    "aria-label": "Select a date",
+    className: "w-[230px]",
+  },
+}
+
+export const WithTime: Story = {
+  args: {
+    granularity: "minute",
+    "aria-label": "Select a date",
+    className: "w-[230px]",
+    value: new Date(),
+  },
+}
+
+export const Small: Story = {
+  args: {
+    size: "small",
+    "aria-label": "Select a date",
+    className: "w-[230px]",
+  },
+}
+
+const InDrawerDemo = (args: ComponentPropsWithoutRef<typeof DatePicker>) => {
   return (
-    <div className="flex w-[200px] flex-col gap-y-4">
-      <DatePicker
-        mode="range"
-        value={value}
-        onChange={(value) => {
-          setValue(value)
-        }}
-      />
-      <Button onClick={() => setValue(undefined)}>Reset</Button>
-    </div>
+    <Drawer>
+      <Drawer.Trigger asChild>
+        <Button size="small">Open Drawer</Button>
+      </Drawer.Trigger>
+      <Drawer.Content>
+        <Drawer.Header>
+          <Drawer.Title>Select a date</Drawer.Title>
+        </Drawer.Header>
+        <Drawer.Body>
+          <div className="p-4">
+            <DatePicker {...args} />
+          </div>
+        </Drawer.Body>
+      </Drawer.Content>
+    </Drawer>
   )
 }
 
-export const ControlledRange: Story = {
-  render: () => <ControlledRangeDemo />,
-}
-
-type NestedProps = {
-  value?: Date
-  onChange?: (value: Date | undefined) => void
-}
-const Nested = ({ value, onChange }: NestedProps) => {
-  return (
-    <Popover>
-      <Popover.Trigger asChild>
-        <Button>Open</Button>
-      </Popover.Trigger>
-      <Popover.Content>
-        <div className="px-3 py-2">
-          <DatePicker value={value} onChange={onChange} />
-        </div>
-        <Popover.Seperator />
-        <div className="px-3 py-2">
-          <DatePicker value={value} onChange={onChange} />
-        </div>
-        <Popover.Seperator />
-        <div className="flex items-center justify-between gap-x-2 px-3 py-2 [&_button]:w-full">
-          <Button variant="secondary">Clear</Button>
-          <Button>Apply</Button>
-        </div>
-      </Popover.Content>
-    </Popover>
-  )
-}
-
-const NestedDemo = () => {
-  const [value, setValue] = React.useState<Date | undefined>(undefined)
-
-  return (
-    <div className="flex w-[200px] flex-col gap-y-4">
-      <Nested value={value} onChange={setValue} />
-    </div>
-  )
-}
-
-export const NestedControlled: Story = {
-  render: () => <NestedDemo />,
+export const InDrawer: Story = {
+  render: InDrawerDemo,
 }
diff --git a/packages/design-system/ui/src/components/date-picker/date-picker.tsx b/packages/design-system/ui/src/components/date-picker/date-picker.tsx
index ff4cc7224a..41121eeabc 100644
--- a/packages/design-system/ui/src/components/date-picker/date-picker.tsx
+++ b/packages/design-system/ui/src/components/date-picker/date-picker.tsx
@@ -1,1059 +1,210 @@
 "use client"
 
-import { Time } from "@internationalized/date"
-import { Calendar as CalendarIcon, Minus } from "@medusajs/icons"
-import * as Primitives from "@radix-ui/react-popover"
-import { TimeValue } from "@react-aria/datepicker"
-import { format, type Locale } from "date-fns"
-import * as React from "react"
-
-import { Button } from "@/components/button"
-import { Calendar as CalendarPrimitive } from "@/components/calendar"
-import { TimeInput } from "@/components/time-input"
-import type { DateRange } from "@/types"
-import { clx } from "@/utils/clx"
-import { isBrowserLocaleClockType24h } from "@/utils/is-browser-locale-hour-cycle-24h"
+import { CalendarDate, CalendarDateTime, getLocalTimeZone } from "@internationalized/date"
+import { CalendarMini, Clock, XMarkMini } from "@medusajs/icons"
 import { cva } from "cva"
+import * as React from "react"
+import {
+  DateValue,
+  useDatePicker,
+  useInteractOutside,
+  type AriaDatePickerProps as BaseDatePickerProps,
+} from "react-aria"
+import { useDatePickerState } from "react-stately"
 
-const displayVariants = cva({
-  base: clx(
-    "text-ui-fg-base bg-ui-bg-field transition-fg shadow-buttons-neutral flex w-full items-center gap-x-2 rounded-md outline-none",
-    "hover:bg-ui-bg-field-hover",
-    "focus-visible:shadow-borders-interactive-with-active data-[state=open]:shadow-borders-interactive-with-active",
-    "disabled:bg-ui-bg-disabled disabled:text-ui-fg-disabled disabled:shadow-buttons-neutral",
-    "aria-[invalid=true]:!shadow-borders-error"
-  ),
-  variants: {
-    size: {
-      base: "txt-compact-small h-8 pr-2 py-1.5",
-      small: "txt-compact-small h-7 pr-2 py-1",
-    },
-  },
-  defaultVariants: {
-    size: "base",
-  },
-})
+import { InternalCalendar } from "@/components/calender"
+import { Popover } from "@/components/popover"
+import { TimeInput } from "@/components/time-input"
+import { Granularity } from "@/types"
+import {
+  createCalendarDateFromDate,
+  getDefaultCalendarDateFromDate,
+  updateCalendarDateFromDate,
+} from "@/utils/calendar"
+import { clx } from "@/utils/clx"
 
-interface DisplayProps extends React.ComponentProps<"button"> {
-  placeholder?: string
-  size?: "small" | "base"
-}
+import { DatePickerButton } from "./date-picker-button"
+import { DatePickerClearButton } from "./date-picker-clear-button"
+import { DatePickerField } from "./date-picker-field"
 
-const Display = React.forwardRef<HTMLButtonElement, DisplayProps>(
-  (
-    {
-      className,
-      children,
-      /**
-       * Placeholder of the date picker's input.
-       */
-      placeholder,
-      /**
-       * The size of the date picker's input.
-       */
-      size = "base",
-      ...props
-    }: DisplayProps,
-    ref
-  ) => {
-    return (
-      <Primitives.Trigger asChild>
-        <button
-          ref={ref}
-          className={clx(displayVariants({ size }), className)}
-          {...props}
-        >
-          <span className={clx("flex items-center justify-center size-8 border-r", {
-            "size-7": size === "small",
-          })}>
-          <CalendarIcon className="text-ui-fg-muted" />
-          </span>
-          <span className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-left">
-            {children ? (
-              children
-            ) : placeholder ? (
-              <span className="text-ui-fg-muted">{placeholder}</span>
-            ) : null}
-          </span>
-        </button>
-      </Primitives.Trigger>
-    )
-  }
-)
-Display.displayName = "DatePicker.Display"
-
-const Flyout = React.forwardRef<
-  React.ElementRef<typeof Primitives.Content>,
-  React.ComponentProps<typeof Primitives.Content>
->(({ className, children, ...props }, ref) => {
-  return (
-    <Primitives.Portal>
-      <Primitives.Content
-        ref={ref}
-        sideOffset={8}
-        align="center"
-        className={clx(
-          "txt-compact-small shadow-elevation-flyout bg-ui-bg-base w-fit rounded-lg",
-          "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </Primitives.Content>
-    </Primitives.Portal>
-  )
-})
-Flyout.displayName = "DatePicker.Flyout"
-
-interface Preset {
-  /**
-   * The preset's label.
-   */
-  label: string
-}
-
-interface DatePreset extends Preset {
-  /**
-   * The preset's selected date.
-   */
-  date: Date
-}
-
-interface DateRangePreset extends Preset {
-  /**
-   * The preset's selected date range.
-   */
-  dateRange: DateRange
-}
-
-type PresetContainerProps<TPreset extends Preset, TValue> = {
-  presets: TPreset[] | TPreset[]
-  onSelect: (value: TValue) => void
-  currentValue?: TValue
-}
-
-const PresetContainer = <TPreset extends Preset, TValue>({
-  /**
-   * Selectable preset configurations.
-   */
-  presets,
-  /**
-   * A function that handles the event when a preset is selected.
-   */
-  onSelect,
-  /**
-   * The currently selected preset.
-   */
-  currentValue,
-}: PresetContainerProps<TPreset, TValue>) => {
-  const isDateRangePresets = (preset: any): preset is DateRangePreset => {
-    return "dateRange" in preset
-  }
-
-  const isDatePresets = (preset: any): preset is DatePreset => {
-    return "date" in preset
-  }
-
-  const handleClick = (preset: TPreset) => {
-    if (isDateRangePresets(preset)) {
-      onSelect(preset.dateRange as TValue)
-    } else if (isDatePresets(preset)) {
-      onSelect(preset.date as TValue)
-    }
-  }
-
-  const compareDates = (date1: Date, date2: Date) => {
-    return (
-      date1.getDate() === date2.getDate() &&
-      date1.getMonth() === date2.getMonth() &&
-      date1.getFullYear() === date2.getFullYear()
-    )
-  }
-
-  const compareRanges = (range1: DateRange, range2: DateRange) => {
-    const from1 = range1.from
-    const from2 = range2.from
-
-    let equalFrom = false
-
-    if (from1 && from2) {
-      const sameFrom = compareDates(from1, from2)
-
-      if (sameFrom) {
-        equalFrom = true
-      }
-    }
-
-    const to1 = range1.to
-    const to2 = range2.to
-
-    let equalTo = false
-
-    if (to1 && to2) {
-      const sameTo = compareDates(to1, to2)
-
-      if (sameTo) {
-        equalTo = true
-      }
-    }
-
-    return equalFrom && equalTo
-  }
-
-  const matchesCurrent = (preset: TPreset) => {
-    if (isDateRangePresets(preset)) {
-      const value = currentValue as DateRange | undefined
-
-      return value && compareRanges(value, preset.dateRange)
-    } else if (isDatePresets(preset)) {
-      const value = currentValue as Date | undefined
-
-      return value && compareDates(value, preset.date)
-    }
-
-    return false
-  }
-
-  return (
-    <ul className="flex flex-col items-start">
-      {presets.map((preset, index) => {
-        return (
-          <li key={index} className="w-full">
-            <button
-              className={clx(
-                "txt-compact-small-plus w-full overflow-hidden text-ellipsis whitespace-nowrap rounded-md p-2 text-left",
-                "text-ui-fg-subtle hover:bg-ui-bg-base-hover outline-none transition-all",
-                "focus-visible:bg-ui-bg-base-hover",
-                {
-                  "!bg-ui-bg-base-pressed": matchesCurrent(preset),
-                }
-              )}
-              onClick={() => handleClick(preset)}
-              aria-label={`Select ${preset.label}`}
-            >
-              {preset.label}
-            </button>
-          </li>
-        )
-      })}
-    </ul>
-  )
-}
-PresetContainer.displayName = "DatePicker.PresetContainer"
-
-const formatDate = (date: Date, includeTime?: boolean) => {
-  const usesAmPm = !isBrowserLocaleClockType24h()
-
-  if (includeTime) {
-    if (usesAmPm) {
-      return format(date, "MMM d, yyyy h:mm a")
-    }
-
-    return format(date, "MMM d, yyyy HH:mm")
-  }
-
-  return format(date, "MMM d, yyyy")
-}
-
-type CalendarProps = {
-  /**
-   * The year to start showing the dates from.
-   */
-  fromYear?: number
-  /**
-   * The year to show dates to.
-   */
-  toYear?: number
-  /**
-   * The month to start showing dates from.
-   */
-  fromMonth?: Date
-  /**
-   * The month to show dates to.
-   */
-  toMonth?: Date
-  /**
-   * The day to start showing dates from.
-   */
-  fromDay?: Date
-  /**
-   * The day to show dates to.
-   */
-  toDay?: Date
-  /**
-   * The date to show dates from.
-   */
-  fromDate?: Date
-  /**
-   * The date to show dates to.
-   */
-  toDate?: Date
-  /**
-   * The locale to use for formatting dates. To change the locale pass a date-fns locale object.
-   */
-  locale?: Locale
-}
-
-type Translations = {
-  cancel?: string
-  apply?: string
-  start?: string
-  end?: string
-  range?: string
-}
-
-interface PickerProps extends CalendarProps {
-  /**
-   * The class name to apply on the date picker.
-   */
+type DatePickerValueProps = {
+  defaultValue?: Date | null
+  value?: Date | null
+  onChange?: (value: Date | null) => void
+  isDateUnavailable?: (date: Date) => boolean
+  minValue?: Date
+  maxValue?: Date
+  shouldCloseOnSelect?: boolean
+  granularity?: Granularity
+  size?: "base" | "small"
   className?: string
-  /**
-   * Whether the date picker's input is disabled.
-   */
-  disabled?: boolean
-  /**
-   * Whether the date picker's input is required.
-   */
-  required?: boolean
-  /**
-   * The date picker's placeholder.
-   */
-  placeholder?: string
-  /**
-   * The date picker's size.
-   */
-  size?: "small" | "base"
-  /**
-   * Whether to show a time picker along with the date picker.
-   */
-  showTimePicker?: boolean
-  /**
-   * Translation keys for the date picker. Use this to localize the date picker.
-   */
-  translations?: Translations
-  id?: string
-  "aria-invalid"?: boolean
-  "aria-label"?: string
-  "aria-labelledby"?: string
-  "aria-required"?: boolean
 }
 
-interface SingleProps extends PickerProps {
-  presets?: DatePreset[]
-  defaultValue?: Date
-  value?: Date
-  onChange?: (date: Date | undefined) => void
-}
+interface DatePickerProps
+  extends Omit<BaseDatePickerProps<CalendarDateTime | CalendarDate>, keyof DatePickerValueProps>,
+    DatePickerValueProps {}
 
-const SingleDatePicker = React.forwardRef<HTMLButtonElement, SingleProps>(({
-  defaultValue,
-  value,
+const datePickerStyles = (
+  isOpen: boolean,
+  isInvalid: boolean,
+  value?: DateValue | null
+) =>
+  cva({
+    base: clx(
+      "bg-ui-bg-field shadow-borders-base txt-compact-small text-ui-fg-base transition-fg grid items-center gap-2 overflow-hidden rounded-md",
+      "focus-within:shadow-borders-interactive-with-active focus-visible:shadow-borders-interactive-with-active",
+      "aria-[invalid=true]:shadow-borders-error invalid:shadow-borders-error",
+      {
+        "shadow-borders-interactive-with-active": isOpen,
+        "shadow-borders-error": isInvalid,
+        "pr-2": !value,
+      }
+    ),
+    variants: {
+      size: {
+        small: clx("grid-cols-[28px_1fr]", {
+          "grid-cols-[28px_1fr_28px]": !!value,
+        }),
+        base: clx("grid-cols-[32px_1fr]", {
+          "grid-cols-[32px_1fr_32px]": !!value,
+        }),
+      },
+    },
+  })
+
+const HAS_TIME = new Set<Granularity>(["hour","minute", "second"])
+
+const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(({
   size = "base",
-  onChange,
-  presets,
-  showTimePicker,
-  disabled,
+  shouldCloseOnSelect = true,
   className,
-  placeholder,
-  translations,
-  ...props
-}: SingleProps, ref) => {
-  const [open, setOpen] = React.useState(false)
-  const [date, setDate] = React.useState<Date | undefined>(
-    value ?? defaultValue ?? undefined
-  )
-  const [month, setMonth] = React.useState<Date | undefined>(date)
-
-  const [time, setTime] = React.useState<TimeValue>(
-    value
-      ? new Time(value.getHours(), value.getMinutes())
-      : defaultValue
-      ? new Time(defaultValue.getHours(), defaultValue.getMinutes())
-      : new Time(0, 0)
-  )
-
-  const initialDate = React.useMemo(() => {
-    return date
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open])
-
-  /**
-   * Update the date when the value changes.
-   */
-  React.useEffect(() => {
-    setDate(value ?? defaultValue ?? undefined)
-  }, [value, defaultValue])
-
-  React.useEffect(() => {
-    if (date) {
-      setMonth(date)
-    }
-  }, [date])
-
-  React.useEffect(() => {
-    if (!open) {
-      setMonth(date)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open])
-
-  const onCancel = () => {
-    setDate(initialDate)
-    setTime(
-      initialDate
-        ? new Time(initialDate.getHours(), initialDate.getMinutes())
-        : new Time(0, 0)
-    )
-    setOpen(false)
-  }
-
-  const onOpenChange = (open: boolean) => {
-    if (!open) {
-      onCancel()
-    }
-
-    setOpen(open)
-  }
-
-  const onDateChange = (date: Date | undefined) => {
-    const newDate = date
-
-    if (showTimePicker) {
-      /**
-       * If the time is cleared, and the date is
-       * changed then we want to reset the time.
-       */
-      if (newDate && !time) {
-        setTime(new Time(0, 0))
-      }
-
-      /**
-       * If the time is set, and the date is changed
-       * then we want to update the date with the
-       * time.
-       */
-      if (newDate && time) {
-        newDate.setHours(time.hour)
-        newDate.setMinutes(time.minute)
-      }
-    }
-
-    setDate(newDate)
-  }
-
-  const onTimeChange = (time: TimeValue) => {
-    setTime(time)
-
-    if (!date) {
-      return
-    }
-
-    const newDate = new Date(date.getTime())
-
-    if (!time) {
-      /**
-       * When a segment of the time input is cleared,
-       * it will return `null` as the value is no longer
-       * a valid time. In this case, we want to set the
-       * time to for the date, effectivly resetting the
-       * input field.
-       */
-      newDate.setHours(0)
-      newDate.setMinutes(0)
-    } else {
-      newDate.setHours(time.hour)
-      newDate.setMinutes(time.minute)
-    }
-
-    setDate(newDate)
-  }
-
-  const formattedDate = React.useMemo(() => {
-    if (!date) {
-      return null
-    }
-
-    return formatDate(date, showTimePicker)
-  }, [date, showTimePicker])
-
-  const onApply = () => {
-    setOpen(false)
-    onChange?.(date)
-  }
-
-  return (
-    <Primitives.Root modal open={open} onOpenChange={onOpenChange}>
-      <Display
-        placeholder={placeholder}
-        disabled={disabled}
-        className={className}
-        aria-required={props.required || props["aria-required"]}
-        aria-invalid={props["aria-invalid"]}
-        aria-label={props["aria-label"]}
-        aria-labelledby={props["aria-labelledby"]}
-        size={size}
-        ref={ref}
-      >
-        {formattedDate}
-      </Display>
-      <Flyout>
-        <div className="flex">
-          <div className="flex items-start">
-            {presets && presets.length > 0 && (
-              <div className="relative h-full w-[160px] border-r">
-                <div className="absolute inset-0 overflow-y-scroll p-3">
-                  <PresetContainer
-                    currentValue={date}
-                    presets={presets}
-                    onSelect={onDateChange}
-                  />
-                </div>
-              </div>
-            )}
-            <div>
-              <CalendarPrimitive
-                mode="single"
-                month={month}
-                onMonthChange={setMonth}
-                selected={date}
-                onSelect={onDateChange}
-                disabled={disabled}
-                {...props}
-              />
-              {showTimePicker && (
-                <div className="border-ui-border-base border-t p-3">
-                  <TimeInput
-                    aria-label="Time"
-                    onChange={onTimeChange}
-                    isDisabled={!date}
-                    value={time}
-                    isRequired={props.required}
-                  />
-                </div>
-              )}
-              <div className="border-ui-border-base flex items-center gap-x-2 border-t p-3">
-                <Button
-                  variant="secondary"
-                  size="small"
-                  className="w-full"
-                  type="button"
-                  onClick={onCancel}
-                >
-                  {translations?.cancel ?? "Cancel"}
-                </Button>
-                <Button
-                  variant="primary"
-                  size="small"
-                  className="w-full"
-                  type="button"
-                  onClick={onApply}
-                >
-                  {translations?.apply ?? "Apply"}
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </Flyout>
-    </Primitives.Root>
-  )
-})
-
-interface RangeProps extends PickerProps {
-  presets?: DateRangePreset[]
-  defaultValue?: DateRange
-  value?: DateRange
-  onChange?: (dateRange: DateRange | undefined) => void
-}
-
-const RangeDatePicker = React.forwardRef<HTMLButtonElement, RangeProps>(({
-  /**
-   * The date range selected by default.
-   */
-  defaultValue,
-  /**
-   * The selected date range.
-   */
-  value,
-  /**
-   * A function to handle the change in the selected date range.
-   */
-  onChange,
-  size = "base",
-  showTimePicker,
-  /**
-   * Provide selectable preset configurations.
-   */
-  presets,
-  disabled,
-  className,
-  placeholder,
-  translations,
-  ...props
-}: RangeProps, ref) => {
-  const [open, setOpen] = React.useState(false)
-  const [range, setRange] = React.useState<DateRange | undefined>(
-    value ?? defaultValue ?? undefined
-  )
-  const [month, setMonth] = React.useState<Date | undefined>(range?.from)
-
-  const [startTime, setStartTime] = React.useState<TimeValue>(
-    value?.from
-      ? new Time(value.from.getHours(), value.from.getMinutes())
-      : defaultValue?.from
-      ? new Time(defaultValue.from.getHours(), defaultValue.from.getMinutes())
-      : new Time(0, 0)
-  )
-  const [endTime, setEndTime] = React.useState<TimeValue>(
-    value?.to
-      ? new Time(value.to.getHours(), value.to.getMinutes())
-      : defaultValue?.to
-      ? new Time(defaultValue.to.getHours(), defaultValue.to.getMinutes())
-      : new Time(0, 0)
-  )
-
-  const initialRange = React.useMemo(() => {
-    return range
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open])
-
-  /**
-   * Update the range when the value changes.
-   */
-  React.useEffect(() => {
-    setRange(value ?? defaultValue ?? undefined)
-  }, [value, defaultValue])
-
-  React.useEffect(() => {
-    if (range) {
-      setMonth(range.from)
-    }
-  }, [range])
-
-  React.useEffect(() => {
-    if (!open) {
-      setMonth(range?.from)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open])
-
-  const onRangeChange = (range: DateRange | undefined) => {
-    const newRange = range
-
-    if (showTimePicker) {
-      if (newRange?.from && !startTime) {
-        setStartTime(new Time(0, 0))
-      }
-
-      if (newRange?.to && !endTime) {
-        setEndTime(new Time(0, 0))
-      }
-
-      if (newRange?.from && startTime) {
-        newRange.from.setHours(startTime.hour)
-        newRange.from.setMinutes(startTime.minute)
-      }
-
-      if (newRange?.to && endTime) {
-        newRange.to.setHours(endTime.hour)
-        newRange.to.setMinutes(endTime.minute)
-      }
-    }
-
-    setRange(newRange)
-  }
-
-  const onCancel = () => {
-    setRange(initialRange)
-    setStartTime(
-      initialRange?.from
-        ? new Time(initialRange.from.getHours(), initialRange.from.getMinutes())
-        : new Time(0, 0)
-    )
-    setEndTime(
-      initialRange?.to
-        ? new Time(initialRange.to.getHours(), initialRange.to.getMinutes())
-        : new Time(0, 0)
-    )
-    setOpen(false)
-  }
-
-  const onOpenChange = (open: boolean) => {
-    if (!open) {
-      onCancel()
-    }
-
-    setOpen(open)
-  }
-
-  const onTimeChange = (time: TimeValue, pos: "start" | "end") => {
-    switch (pos) {
-      case "start":
-        setStartTime(time)
-        break
-      case "end":
-        setEndTime(time)
-        break
-    }
-
-    if (!range) {
-      return
-    }
-
-    if (pos === "start") {
-      if (!range.from) {
-        return
-      }
-
-      const newDate = new Date(range.from.getTime())
-
-      if (!time) {
-        newDate.setHours(0)
-        newDate.setMinutes(0)
-      } else {
-        newDate.setHours(time.hour)
-        newDate.setMinutes(time.minute)
-      }
-
-      setRange({
-        ...range,
-        from: newDate,
-      })
-    }
-
-    if (pos === "end") {
-      if (!range.to) {
-        return
-      }
-
-      const newDate = new Date(range.to.getTime())
-
-      if (!time) {
-        newDate.setHours(0)
-        newDate.setMinutes(0)
-      } else {
-        newDate.setHours(time.hour)
-        newDate.setMinutes(time.minute)
-      }
-
-      setRange({
-        ...range,
-        to: newDate,
-      })
-    }
-  }
-
-  const displayRange = React.useMemo(() => {
-    if (!range) {
-      return null
-    }
-
-    return `${range.from ? formatDate(range.from, showTimePicker) : ""} - ${
-      range.to ? formatDate(range.to, showTimePicker) : ""
-    }`
-  }, [range, showTimePicker])
-
-  const onApply = () => {
-    setOpen(false)
-    onChange?.(range)
-  }
-
-  return (
-    <Primitives.Root modal open={open} onOpenChange={onOpenChange}>
-      <Display
-        placeholder={placeholder}
-        disabled={disabled}
-        className={className}
-        aria-required={props.required || props["aria-required"]}
-        aria-invalid={props["aria-invalid"]}
-        aria-label={props["aria-label"]}
-        aria-labelledby={props["aria-labelledby"]}
-        size={size}
-        ref={ref}
-      >
-        {displayRange}
-      </Display>
-      <Flyout>
-        <div className="flex">
-          <div className="flex items-start">
-            {presets && presets.length > 0 && (
-              <div className="relative h-full w-[160px] border-r">
-                <div className="absolute inset-0 overflow-y-scroll p-3">
-                  <PresetContainer
-                    currentValue={range}
-                    presets={presets}
-                    onSelect={onRangeChange}
-                  />
-                </div>
-              </div>
-            )}
-            <div>
-              <CalendarPrimitive
-                mode="range"
-                selected={range}
-                onSelect={onRangeChange}
-                month={month}
-                onMonthChange={setMonth}
-                numberOfMonths={2}
-                disabled={disabled}
-                classNames={{
-                  months: "flex flex-row divide-x divide-ui-border-base",
-                }}
-                {...props}
-              />
-              {showTimePicker && (
-                <div className="border-ui-border-base flex items-center justify-evenly gap-x-3 border-t p-3">
-                  <div className="flex flex-1 items-center gap-x-2">
-                    <span className="text-ui-fg-subtle">
-                      {translations?.start ?? "Start"}:
-                    </span>
-                    <TimeInput
-                      value={startTime}
-                      onChange={(v) => onTimeChange(v, "start")}
-                      aria-label="Start date time"
-                      isDisabled={!range?.from}
-                      isRequired={props.required}
-                    />
-                  </div>
-                  <Minus className="text-ui-fg-muted" />
-                  <div className="flex flex-1 items-center gap-x-2">
-                    <span className="text-ui-fg-subtle">
-                      {translations?.end ?? "End"}:
-                    </span>
-                    <TimeInput
-                      value={endTime}
-                      onChange={(v) => onTimeChange(v, "end")}
-                      aria-label="End date time"
-                      isDisabled={!range?.to}
-                      isRequired={props.required}
-                    />
-                  </div>
-                </div>
-              )}
-              <div className="flex items-center justify-between border-t p-3">
-                <p className={clx("text-ui-fg-subtle txt-compact-small-plus")}>
-                  <span className="text-ui-fg-muted">
-                    {translations?.range ?? "Range"}:
-                  </span>{" "}
-                  {displayRange}
-                </p>
-                <div className="flex items-center gap-x-2">
-                  <Button
-                    size="small"
-                    variant="secondary"
-                    type="button"
-                    onClick={onCancel}
-                  >
-                    {translations?.cancel ?? "Cancel"}
-                  </Button>
-                  <Button
-                    size="small"
-                    variant="primary"
-                    type="button"
-                    onClick={onApply}
-                  >
-                    {translations?.apply ?? "Apply"}
-                  </Button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </Flyout>
-    </Primitives.Root>
-  )
-})
-
-/**
- * @interface
- *
- * @prop presets - Provide selectable preset configurations.
- * @prop defaultValue - The date selected by default.
- * @prop value - The selected date.
- * @prop onChange - A function to handle the change in the selected date.
- */
-type DatePickerProps = (
-  | {
-      mode?: "single"
-      presets?: DatePreset[]
-      defaultValue?: Date
-      value?: Date
-      onChange?: (date: Date | undefined) => void
-    }
-  | {
-      mode: "range"
-      presets?: DateRangePreset[]
-      defaultValue?: DateRange
-      value?: DateRange
-      onChange?: (dateRange: DateRange | undefined) => void
-    }
-) &
-  PickerProps
-
-const validatePresets = (
-  presets: DateRangePreset[] | DatePreset[],
-  rules: PickerProps
-) => {
-  const { toYear, fromYear, fromMonth, toMonth, fromDay, toDay } = rules
-
-  if (presets && presets.length > 0) {
-    const fromYearToUse = fromYear
-    const toYearToUse = toYear
-
-    presets.forEach((preset) => {
-      if ("date" in preset) {
-        const presetYear = preset.date.getFullYear()
-
-        if (fromYear && presetYear < fromYear) {
-          throw new Error(
-            `Preset ${preset.label} is before fromYear ${fromYearToUse}.`
-          )
-        }
-
-        if (toYear && presetYear > toYear) {
-          throw new Error(
-            `Preset ${preset.label} is after toYear ${toYearToUse}.`
-          )
-        }
-
-        if (fromMonth) {
-          const presetMonth = preset.date.getMonth()
-
-          if (presetMonth < fromMonth.getMonth()) {
-            throw new Error(
-              `Preset ${preset.label} is before fromMonth ${fromMonth}.`
-            )
-          }
-        }
-
-        if (toMonth) {
-          const presetMonth = preset.date.getMonth()
-
-          if (presetMonth > toMonth.getMonth()) {
-            throw new Error(
-              `Preset ${preset.label} is after toMonth ${toMonth}.`
-            )
-          }
-        }
-
-        if (fromDay) {
-          const presetDay = preset.date.getDate()
-
-          if (presetDay < fromDay.getDate()) {
-            throw new Error(
-              `Preset ${preset.label} is before fromDay ${fromDay}.`
-            )
-          }
-        }
-
-        if (toDay) {
-          const presetDay = preset.date.getDate()
-
-          if (presetDay > toDay.getDate()) {
-            throw new Error(
-              `Preset ${preset.label} is after toDay ${format(
-                toDay,
-                "MMM dd, yyyy"
-              )}.`
-            )
-          }
-        }
-      }
-
-      if ("dateRange" in preset) {
-        const presetFromYear = preset.dateRange.from?.getFullYear()
-        const presetToYear = preset.dateRange.to?.getFullYear()
-
-        if (presetFromYear && fromYear && presetFromYear < fromYear) {
-          throw new Error(
-            `Preset ${preset.label}'s 'from' is before fromYear ${fromYearToUse}.`
-          )
-        }
-
-        if (presetToYear && toYear && presetToYear > toYear) {
-          throw new Error(
-            `Preset ${preset.label}'s 'to' is after toYear ${toYearToUse}.`
-          )
-        }
-
-        if (fromMonth) {
-          const presetMonth = preset.dateRange.from?.getMonth()
-
-          if (presetMonth && presetMonth < fromMonth.getMonth()) {
-            throw new Error(
-              `Preset ${preset.label}'s 'from' is before fromMonth ${format(
-                fromMonth,
-                "MMM, yyyy"
-              )}.`
-            )
-          }
-        }
-
-        if (toMonth) {
-          const presetMonth = preset.dateRange.to?.getMonth()
-
-          if (presetMonth && presetMonth > toMonth.getMonth()) {
-            throw new Error(
-              `Preset ${preset.label}'s 'to' is after toMonth ${format(
-                toMonth,
-                "MMM, yyyy"
-              )}.`
-            )
-          }
-        }
-
-        if (fromDay) {
-          const presetDay = preset.dateRange.from?.getDate()
-
-          if (presetDay && presetDay < fromDay.getDate()) {
-            throw new Error(
-              `Preset ${
-                preset.dateRange.from
-              }'s 'from' is before fromDay ${format(fromDay, "MMM dd, yyyy")}.`
-            )
-          }
-        }
-
-        if (toDay) {
-          const presetDay = preset.dateRange.to?.getDate()
-
-          if (presetDay && presetDay > toDay.getDate()) {
-            throw new Error(
-              `Preset ${preset.label}'s 'to' is after toDay ${format(
-                toDay,
-                "MMM dd, yyyy"
-              )}.`
-            )
-          }
-        }
-      }
-    })
-  }
-}
-
-/**
- * This component is based on the [Calendar](https://docs.medusajs.com/ui/components/calendar)
- * component and [Radix UI Popover](https://www.radix-ui.com/primitives/docs/components/popover).
- */
-const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(({
-  /**
-   * The date picker's mode.
-   */
-  mode = "single",
   ...props
 }, ref) => {
-  if (props.presets) {
-    validatePresets(props.presets, props)
+  const [value, setValue] = React.useState<CalendarDateTime | CalendarDate | null | undefined>(
+    getDefaultCalendarDateFromDate(props.value, props.defaultValue, props.granularity)
+  )
+
+  const innerRef = React.useRef<HTMLDivElement>(null)
+  React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)
+
+  const contentRef = React.useRef<HTMLDivElement>(null)
+
+  const _props = convertProps(props, setValue)
+
+  const state = useDatePickerState({
+    ..._props,
+    shouldCloseOnSelect,
+  })
+
+  const { groupProps, fieldProps, buttonProps, dialogProps, calendarProps } =
+    useDatePicker(_props, state, innerRef)
+
+  React.useEffect(() => {
+    setValue(props.value ? updateCalendarDateFromDate(value, props.value, props.granularity) : null)
+    state.setValue(props.value ? updateCalendarDateFromDate(value, props.value, props.granularity) : null)
+  }, [props.value])
+
+  function clear(e: React.MouseEvent<HTMLButtonElement>) {
+    e.preventDefault()
+    e.stopPropagation()
+
+    props.onChange?.(null)
+    state.setValue(null)
   }
 
-  if (mode === "single") {
-    return <SingleDatePicker ref={ref} {...(props as SingleProps)} />
-  }
+  useInteractOutside({
+    ref: contentRef,
+    onInteractOutside: () => {
+      state.setOpen(false)
+    },
+  })
 
-  return <RangeDatePicker ref={ref} {...(props as RangeProps)} />
+  const hasTime = props.granularity && HAS_TIME.has(props.granularity)
+  const Icon = hasTime ? Clock : CalendarMini
+
+  return (
+    <Popover open={state.isOpen} onOpenChange={state.setOpen}>
+      <Popover.Anchor asChild>
+        <div
+          ref={ref}
+          className={clx(
+            datePickerStyles(
+              state.isOpen,
+              state.isInvalid,
+              state.value
+            )({ size }),
+            className
+          )}
+          {...groupProps}
+        >
+          <DatePickerButton {...buttonProps} size={size}>
+            <Icon />
+          </DatePickerButton>
+          <DatePickerField {...fieldProps} size={size} />
+          {!!state.value && (
+            <DatePickerClearButton onClick={clear}>
+              <XMarkMini />
+            </DatePickerClearButton>
+          )}
+        </div>
+      </Popover.Anchor>
+      <Popover.Content
+        ref={contentRef}
+        {...dialogProps}
+        className="flex flex-col divide-y p-0"
+      >
+        <div className="p-3">
+          <InternalCalendar autoFocus {...calendarProps} />
+        </div>
+        {state.hasTime && (
+          <div className="p-3">
+            <TimeInput
+              value={state.timeValue}
+              onChange={state.setTimeValue}
+              hourCycle={props.hourCycle}
+            />
+          </div>
+        )}
+      </Popover.Content>
+    </Popover>
+  )
 })
 DatePicker.displayName = "DatePicker"
 
-export { DatePicker }
+function convertProps(
+  props: DatePickerProps,
+  setValue: React.Dispatch<
+    React.SetStateAction<CalendarDateTime | CalendarDate | null | undefined>
+  >
+): BaseDatePickerProps<CalendarDateTime | CalendarDate> {
+  const {
+    minValue,
+    maxValue,
+    isDateUnavailable: _isDateUnavailable,
+    onChange: _onChange,
+    value: __value__,
+    defaultValue: __defaultValue__,
+    ...rest
+  } = props
+
+  const onChange = (value: CalendarDateTime | CalendarDateTime | null) => {
+    setValue(value)
+    _onChange?.(value ? value.toDate(getLocalTimeZone()) : null)
+  }
+
+  const isDateUnavailable = (date: DateValue) => {
+    const _date = date.toDate(getLocalTimeZone())
+
+    return _isDateUnavailable ? _isDateUnavailable(_date) : false
+  }
+
+  return {
+    ...rest,
+    onChange: onChange as BaseDatePickerProps<CalendarDateTime | CalendarDate>["onChange"],
+    isDateUnavailable,
+    minValue: minValue ? createCalendarDateFromDate(minValue, props.granularity) : minValue,
+    maxValue: maxValue ? createCalendarDateFromDate(maxValue, props.granularity) : maxValue,
+  }
+}
+
+export { DatePicker, type Granularity }
diff --git a/packages/design-system/ui/src/components/date-segment/date-segment.tsx b/packages/design-system/ui/src/components/date-segment/date-segment.tsx
new file mode 100644
index 0000000000..47cc35e4ce
--- /dev/null
+++ b/packages/design-system/ui/src/components/date-segment/date-segment.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import * as React from "react"
+import { useDateSegment } from "react-aria"
+import { DateFieldState, DateSegment as Segment } from "react-stately"
+
+import { clx } from "@/utils/clx"
+
+interface DateSegmentProps extends React.ComponentPropsWithoutRef<"div"> {
+  segment: Segment
+  state: DateFieldState
+}
+
+const DateSegment = ({ segment, state }: DateSegmentProps) => {
+  const ref = React.useRef<HTMLDivElement>(null)
+  const { segmentProps } = useDateSegment(segment, state, ref)
+
+  const isComma = segment.type === "literal" && segment.text === ", "
+
+  /**
+   * We render an empty span with a margin to maintain the correct spacing
+   * between date and time segments.
+   */
+  if (isComma) {
+    return <span className="mx-1" />
+  }
+
+  return (
+    /**
+     * We wrap the segment in a span to prevent the segment from being
+     * focused when the user clicks outside of the component.
+     *
+     * See: https://github.com/adobe/react-spectrum/issues/3164
+     */
+    <span>
+      <div
+        ref={ref}
+        className={clx(
+          "transition-fg outline-none",
+          "focus-visible:bg-ui-bg-interactive focus-visible:text-ui-fg-on-color",
+          {
+            "text-ui-fg-muted uppercase": segment.isPlaceholder,
+            "text-ui-fg-muted": !segment.isEditable && !state.value,
+          }
+        )}
+        {...segmentProps}
+      >
+        {segment.text}
+      </div>
+    </span>
+  )
+}
+
+export { DateSegment }
diff --git a/packages/design-system/ui/src/components/date-segment/index.ts b/packages/design-system/ui/src/components/date-segment/index.ts
new file mode 100644
index 0000000000..8534cc9992
--- /dev/null
+++ b/packages/design-system/ui/src/components/date-segment/index.ts
@@ -0,0 +1 @@
+export * from "./date-segment"
diff --git a/packages/design-system/ui/src/components/i18n-provider/i18n-provider.tsx b/packages/design-system/ui/src/components/i18n-provider/i18n-provider.tsx
new file mode 100644
index 0000000000..aa3929dbe6
--- /dev/null
+++ b/packages/design-system/ui/src/components/i18n-provider/i18n-provider.tsx
@@ -0,0 +1,12 @@
+"use client"
+
+import * as React from "react"
+import { I18nProvider as Primitive, I18nProviderProps as Props } from "react-aria"
+
+interface I18nProviderProps extends Props {}
+
+const I18nProvider = (props: I18nProviderProps) => {
+  return <Primitive {...props} />
+}
+
+export { I18nProvider }
diff --git a/packages/design-system/ui/src/components/i18n-provider/index.ts b/packages/design-system/ui/src/components/i18n-provider/index.ts
new file mode 100644
index 0000000000..ed399e5acf
--- /dev/null
+++ b/packages/design-system/ui/src/components/i18n-provider/index.ts
@@ -0,0 +1 @@
+export * from "./i18n-provider"
diff --git a/packages/design-system/ui/src/components/popover/popover.tsx b/packages/design-system/ui/src/components/popover/popover.tsx
index 84fd3fccf6..1bfc320b15 100644
--- a/packages/design-system/ui/src/components/popover/popover.tsx
+++ b/packages/design-system/ui/src/components/popover/popover.tsx
@@ -37,7 +37,8 @@ const Close = React.forwardRef<
 })
 Close.displayName = "Popover.Close"
 
-interface ContentProps extends React.ComponentPropsWithoutRef<typeof Primitives.Content> {}
+interface ContentProps
+  extends React.ComponentPropsWithoutRef<typeof Primitives.Content> {}
 
 /**
  * @excludeExternal
diff --git a/packages/design-system/ui/src/components/prompt/prompt.tsx b/packages/design-system/ui/src/components/prompt/prompt.tsx
index 902a9a9915..a880351b5c 100644
--- a/packages/design-system/ui/src/components/prompt/prompt.tsx
+++ b/packages/design-system/ui/src/components/prompt/prompt.tsx
@@ -56,8 +56,8 @@ Root.displayName = "Prompt"
 const Trigger = Primitives.Trigger
 Trigger.displayName = "Prompt.Trigger"
 
-const Portal = ({ className, ...props }: Primitives.AlertDialogPortalProps) => {
-  return <Primitives.AlertDialogPortal className={clx(className)} {...props} />
+const Portal = (props: Primitives.AlertDialogPortalProps) => {
+  return <Primitives.AlertDialogPortal {...props} />
 }
 Portal.displayName = "Prompt.Portal"
 
diff --git a/packages/design-system/ui/src/components/time-input/time-input.stories.tsx b/packages/design-system/ui/src/components/time-input/time-input.stories.tsx
deleted file mode 100644
index 577e0e5ef4..0000000000
--- a/packages/design-system/ui/src/components/time-input/time-input.stories.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import * as React from "react"
-
-import { isBrowserLocaleClockType24h } from "../../utils/is-browser-locale-hour-cycle-24h"
-import { TimeInput } from "./time-input"
-
-const meta: Meta<typeof TimeInput> = {
-  title: "Components/TimeInput",
-  component: TimeInput,
-  parameters: {
-    layout: "centered",
-  },
-  render: (args) => (
-    <div className="w-[300px]">
-      <TimeInput aria-labelledby="time" {...args} />
-    </div>
-  ),
-}
-
-export default meta
-
-type Story = StoryObj<typeof TimeInput>
-
-// Hour Cycle defaults to your browser's locale.
-export const Default: Story = {
-  render: (args) => {
-    return (
-      <div className="flex flex-col gap-y-4">
-        <TimeInput aria-labelledby="time" {...args} />
-        <div className="flex flex-col gap-y-2">
-          <p className="text-xs">
-            Will use 24h or 12h cycle depending on your locale
-          </p>
-          <div className="text-xs">
-            <pre>
-              Locale: {window.navigator.language}, Hour Cycle:{" "}
-              {isBrowserLocaleClockType24h() ? "24h" : "12h"}
-            </pre>
-          </div>
-        </div>
-      </div>
-    )
-  },
-}
-
-export const Hour24: Story = {
-  args: {
-    hourCycle: 24,
-  },
-}
-
-export const Hour12: Story = {
-  args: {
-    hourCycle: 12,
-  },
-}
diff --git a/packages/design-system/ui/src/components/time-input/time-input.tsx b/packages/design-system/ui/src/components/time-input/time-input.tsx
index 6c9bdaab94..1e8f147c0b 100644
--- a/packages/design-system/ui/src/components/time-input/time-input.tsx
+++ b/packages/design-system/ui/src/components/time-input/time-input.tsx
@@ -1,131 +1,44 @@
 "use client"
 
+import * as React from "react"
 import {
   AriaTimeFieldProps,
   TimeValue,
-  useDateSegment,
+  useLocale,
   useTimeField,
-} from "@react-aria/datepicker"
-import {
-  useTimeFieldState,
-  type DateFieldState,
-  type DateSegment,
-} from "@react-stately/datepicker"
-import * as React from "react"
+} from "react-aria"
+import { useTimeFieldState } from "react-stately"
 
-import { inputBaseStyles } from "@/components/input"
+import { DateSegment } from "@/components/date-segment"
 import { clx } from "@/utils/clx"
 
-type TimeSegmentProps = {
-  segment: DateSegment
-  state: DateFieldState
-}
-
-const TimeSegment = ({ segment, state }: TimeSegmentProps) => {
+const TimeInput = (props: AriaTimeFieldProps<TimeValue>) => {
   const ref = React.useRef<HTMLDivElement>(null)
 
-  const { segmentProps } = useDateSegment(segment, state, ref)
-
-  const isColon = segment.type === "literal" && segment.text === ":"
-  const isSpace = segment.type === "literal" && segment.text === " "
-
-  const isDecorator = isColon || isSpace
+  const { locale } = useLocale()
+  const state = useTimeFieldState({
+    ...props,
+    locale,
+  })
+  const { fieldProps } = useTimeField(props, state, ref)
 
   return (
     <div
-      {...segmentProps}
       ref={ref}
+      {...fieldProps}
+      aria-label="Time input"
       className={clx(
-        "txt-compact-small w-full rounded-md px-2 py-1 text-left uppercase tabular-nums",
-        inputBaseStyles,
-        "group-aria-[invalid=true]/time-input:!shadow-borders-error group-invalid/time-input:!shadow-borders-error",
+        "bg-ui-bg-field shadow-borders-base txt-compact-small flex items-center rounded-md px-2 py-1",
         {
-          "text-ui-fg-muted !w-fit border-none bg-transparent px-0 shadow-none":
-            isDecorator,
-          hidden: isSpace,
-          "text-ui-fg-disabled bg-ui-bg-disabled border-ui-border-base shadow-none":
-            state.isDisabled,
-          "!text-ui-fg-muted !bg-transparent": !segment.isEditable,
+          "": props.isDisabled,
         }
       )}
     >
-      <span
-        aria-hidden="true"
-        className={clx(
-          "txt-compact-small text-ui-fg-muted pointer-events-none block w-full text-left",
-          {
-            hidden: !segment.isPlaceholder,
-            "h-0": !segment.isPlaceholder,
-          }
-        )}
-      >
-        {segment.placeholder}
-      </span>
-      {segment.isPlaceholder ? "" : segment.text}
+      {state.segments.map((segment, index) => {
+        return <DateSegment key={index} segment={segment} state={state} />
+      })}
     </div>
   )
 }
 
-type TimeInputProps = Omit<
-  AriaTimeFieldProps<TimeValue>,
-  "label" | "shouldForceLeadingZeros" | "description" | "errorMessage"
->
-
-/**
- * This component is based on the `div` element and supports all of its props.
- */
-const TimeInput = React.forwardRef<HTMLDivElement, TimeInputProps>(
-  (
-    {
-      /**
-       * The time's format. If no value is specified, the format is
-       * set based on the user's locale.
-       */
-      hourCycle,
-      ...props
-    }: TimeInputProps,
-    ref
-  ) => {
-    const innerRef = React.useRef<HTMLDivElement>(null)
-
-    React.useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(
-      ref,
-      () => innerRef?.current
-    )
-
-    const locale = window !== undefined ? window.navigator.language : "en-US"
-
-    const state = useTimeFieldState({
-      hourCycle: hourCycle,
-      locale: locale,
-      shouldForceLeadingZeros: true,
-      autoFocus: true,
-      ...props,
-    })
-
-    const { fieldProps } = useTimeField(
-      {
-        ...props,
-        hourCycle: hourCycle,
-        shouldForceLeadingZeros: true,
-      },
-      state,
-      innerRef
-    )
-
-    return (
-      <div
-        {...fieldProps}
-        ref={innerRef}
-        className="group/time-input inline-flex w-full gap-x-2"
-      >
-        {state.segments.map((segment, i) => (
-          <TimeSegment key={i} segment={segment} state={state} />
-        ))}
-      </div>
-    )
-  }
-)
-TimeInput.displayName = "TimeInput"
-
 export { TimeInput }
diff --git a/packages/design-system/ui/src/index.ts b/packages/design-system/ui/src/index.ts
index 67230d7e27..5266633114 100644
--- a/packages/design-system/ui/src/index.ts
+++ b/packages/design-system/ui/src/index.ts
@@ -2,7 +2,7 @@ export { Alert } from "./components/alert"
 export { Avatar } from "./components/avatar"
 export { Badge } from "./components/badge"
 export { Button } from "./components/button"
-export { Calendar } from "./components/calendar"
+export { Calendar } from "./components/calender"
 export { Checkbox } from "./components/checkbox"
 export { Code } from "./components/code"
 export { CodeBlock } from "./components/code-block"
@@ -17,6 +17,7 @@ export { DropdownMenu } from "./components/dropdown-menu"
 export { FocusModal } from "./components/focus-modal"
 export { Heading } from "./components/heading"
 export { Hint } from "./components/hint"
+export { I18nProvider } from "./components/i18n-provider"
 export { IconBadge } from "./components/icon-badge"
 export { IconButton } from "./components/icon-button"
 export { Input } from "./components/input"
diff --git a/packages/design-system/ui/src/types.ts b/packages/design-system/ui/src/types.ts
index aa493a1ae0..627d9d70fe 100644
--- a/packages/design-system/ui/src/types.ts
+++ b/packages/design-system/ui/src/types.ts
@@ -53,3 +53,5 @@ export type ToastAction = {
    */
   variant?: ToastActionVariant
 }
+
+export type Granularity = "day" | "hour" | "minute" | "second"
diff --git a/packages/design-system/ui/src/utils/calendar.ts b/packages/design-system/ui/src/utils/calendar.ts
new file mode 100644
index 0000000000..617914c4ae
--- /dev/null
+++ b/packages/design-system/ui/src/utils/calendar.ts
@@ -0,0 +1,138 @@
+import { CalendarDate, CalendarDateTime } from "@internationalized/date"
+
+import { Granularity } from "@/types"
+
+function getDefaultCalendarDateTime(
+  value: Date | null | undefined,
+  defaultValue: Date | null | undefined
+) {
+  if (value) {
+    return createCalendarDateTime(value)
+  }
+
+  if (defaultValue) {
+    return createCalendarDateTime(defaultValue)
+  }
+
+  return null
+}
+
+function createCalendarDateTime(date: Date) {
+  return new CalendarDateTime(
+    date.getFullYear(),
+    date.getMonth() + 1,
+    date.getDate(),
+    date.getHours(),
+    date.getMinutes(),
+    date.getSeconds(),
+    date.getMilliseconds()
+  )
+}
+
+function updateCalendarDateTime(
+  date: CalendarDateTime | null | undefined,
+  value: Date
+) {
+  if (!date) {
+    return createCalendarDateTime(value)
+  }
+
+  date.set({
+    day: value.getDate(),
+    month: value.getMonth() + 1,
+    year: value.getFullYear(),
+    hour: value.getHours(),
+    minute: value.getMinutes(),
+    second: value.getSeconds(),
+    millisecond: value.getMilliseconds(),
+  })
+
+  return date
+}
+
+function getDefaultCalendarDate(
+  value: Date | null | undefined,
+  defaultValue: Date | null | undefined
+) {
+  if (value) {
+    return createCalendarDate(value)
+  }
+
+  if (defaultValue) {
+    return createCalendarDate(defaultValue)
+  }
+
+  return null
+}
+
+function createCalendarDate(date: Date) {
+  return new CalendarDate(
+    date.getFullYear(),
+    date.getMonth() + 1,
+    date.getDate()
+  )
+}
+
+function updateCalendarDate(
+  date: CalendarDate | null | undefined,
+  value: Date
+) {
+  if (!date) {
+    return createCalendarDate(value)
+  }
+
+  date.set({
+    day: value.getDate(),
+    month: value.getMonth() + 1,
+    year: value.getFullYear(),
+  })
+
+  return date
+}
+
+const USES_TIME = new Set<Granularity>(["hour", "minute", "second"])
+
+function createCalendarDateFromDate(date: Date, granularity?: Granularity) {
+  if (granularity && USES_TIME.has(granularity)) {
+    return createCalendarDateTime(date)
+  }
+
+  return createCalendarDate(date)
+}
+
+function updateCalendarDateFromDate(
+  date: CalendarDate | CalendarDateTime | null | undefined,
+  value: Date,
+  granularity?: Granularity
+) {
+  if (granularity && USES_TIME.has(granularity)) {
+    return updateCalendarDateTime(date as CalendarDateTime, value)
+  }
+
+  return updateCalendarDate(date as CalendarDate, value)
+}
+
+function getDefaultCalendarDateFromDate(
+  value: Date | null | undefined,
+  defaultValue: Date | null | undefined,
+  granularity?: Granularity
+) {
+  if (value) {
+    return createCalendarDateFromDate(value, granularity)
+  }
+
+  if (defaultValue) {
+    return createCalendarDateFromDate(defaultValue, granularity)
+  }
+
+  return null
+}
+
+export {
+  createCalendarDate,
+  createCalendarDateFromDate,
+  getDefaultCalendarDate,
+  getDefaultCalendarDateFromDate,
+  updateCalendarDate,
+  updateCalendarDateFromDate,
+}
diff --git a/yarn.lock b/yarn.lock
index cd863b20ac..7247e8077a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3670,40 +3670,40 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@internationalized/date@npm:^3.5.3":
-  version: 3.5.3
-  resolution: "@internationalized/date@npm:3.5.3"
+"@internationalized/date@npm:^3.5.4":
+  version: 3.5.4
+  resolution: "@internationalized/date@npm:3.5.4"
   dependencies:
     "@swc/helpers": ^0.5.0
-  checksum: 2b517be98f60266445d75644ba091139a63069f9ec4289d3f31c3c0e1f21ee129d7c4905be84c617727d2890148d16e0ecc6804ab0b3e8d6b8eabc7fbb4a8169
+  checksum: 4e1fe3e2ad1719390e9b859ee23e8b7e9315ddfc2a0fcf446d8954a5b41147a4bed025f9d9718e0d4a6f097407af87ac0bdea3879d23d2a84757dd5aa5b9edf8
   languageName: node
   linkType: hard
 
-"@internationalized/message@npm:^3.1.3":
-  version: 3.1.3
-  resolution: "@internationalized/message@npm:3.1.3"
+"@internationalized/message@npm:^3.1.4":
+  version: 3.1.4
+  resolution: "@internationalized/message@npm:3.1.4"
   dependencies:
     "@swc/helpers": ^0.5.0
     intl-messageformat: ^10.1.0
-  checksum: 9a76cdfa0dbee8bb81c81fb30f18ab816477910a780025b6df741aeb5d1bd469c0dfe9a3788365ca7317a0072333ae0f0159fb5ec441228952185683b00c5b3b
+  checksum: 29d2a2117381a2e50377a13cdc4379981403992b917997c477bc7bc82b59fcdd1252addf36d001edd4d30b2f496ad9c5a982732b52032e5559f0703e27521a9c
   languageName: node
   linkType: hard
 
-"@internationalized/number@npm:^3.5.2":
-  version: 3.5.2
-  resolution: "@internationalized/number@npm:3.5.2"
+"@internationalized/number@npm:^3.5.3":
+  version: 3.5.3
+  resolution: "@internationalized/number@npm:3.5.3"
   dependencies:
     "@swc/helpers": ^0.5.0
-  checksum: 098c1ade5cc3fbb70f87eae69f30fab995d5137307b735e735bf20ea1a8dd2fc0acbf52028c435ea31c82b8e8dbdcdbd6f919f58385879866afeba6e11235a44
+  checksum: dd1bb4e89c6468b97e8357e1ba0a60234bd2c8226f3241c4c7499e5b1791ba0574127ea6de0fd6c4158e2ceef564bba6531a8f5589e58b820df669e312500f99
   languageName: node
   linkType: hard
 
-"@internationalized/string@npm:^3.2.2":
-  version: 3.2.2
-  resolution: "@internationalized/string@npm:3.2.2"
+"@internationalized/string@npm:^3.2.3":
+  version: 3.2.3
+  resolution: "@internationalized/string@npm:3.2.3"
   dependencies:
     "@swc/helpers": ^0.5.0
-  checksum: 6ec68b8bbb9347a1f1fce46cecb5f359a962358e301afc76761d2ace198bad00ab7c0eef189be5124e5bd77b0ef8187c744f8c6eab3727b2f9743d7c08442cb0
+  checksum: 824d2972951823d0421babb7e03003228fcbd9966028264838b2dad1032d4142f159c82f730a0b8026b8c8c10f06afe7df634c8d0cc8a9b6362909c6f653440a
   languageName: node
   linkType: hard
 
@@ -4439,8 +4439,8 @@ __metadata:
     "@medusajs/types": 1.11.16
     "@medusajs/ui": 3.0.0
     "@medusajs/ui-preset": 1.1.3
-    "@radix-ui/react-collapsible": 1.0.3
-    "@radix-ui/react-hover-card": ^1.0.7
+    "@radix-ui/react-collapsible": 1.1.0
+    "@radix-ui/react-hover-card": 1.1.1
     "@tanstack/react-query": ^5.28.14
     "@tanstack/react-table": 8.10.7
     "@tanstack/react-virtual": ^3.0.4
@@ -4451,7 +4451,7 @@ __metadata:
     "@vitejs/plugin-react": 4.2.1
     autoprefixer: ^10.4.17
     cmdk: ^0.2.0
-    date-fns: ^3.2.0
+    date-fns: ^3.6.0
     framer-motion: ^11.0.3
     i18next: 23.7.11
     i18next-browser-languagedetector: 7.2.0
@@ -5269,24 +5269,22 @@ __metadata:
   dependencies:
     "@medusajs/icons": ^1.2.1
     "@medusajs/ui-preset": ^1.1.3
-    "@radix-ui/react-accordion": ^1.1.2
-    "@radix-ui/react-alert-dialog": 1.0.4
-    "@radix-ui/react-avatar": ^1.0.3
-    "@radix-ui/react-checkbox": ^1.0.4
-    "@radix-ui/react-dialog": 1.0.4
-    "@radix-ui/react-dropdown-menu": ^2.0.5
-    "@radix-ui/react-label": ^2.0.2
-    "@radix-ui/react-popover": ^1.0.6
-    "@radix-ui/react-portal": ^1.0.3
-    "@radix-ui/react-radio-group": ^1.1.3
-    "@radix-ui/react-scroll-area": ^1.0.4
-    "@radix-ui/react-select": ^2.0.0
-    "@radix-ui/react-slot": ^1.0.2
-    "@radix-ui/react-switch": ^1.0.3
-    "@radix-ui/react-tabs": ^1.0.4
-    "@radix-ui/react-tooltip": ^1.0.6
-    "@react-aria/datepicker": ^3.5.0
-    "@react-stately/datepicker": ^3.5.0
+    "@radix-ui/react-accordion": 1.2.0
+    "@radix-ui/react-alert-dialog": 1.1.1
+    "@radix-ui/react-avatar": 1.1.0
+    "@radix-ui/react-checkbox": 1.1.1
+    "@radix-ui/react-dialog": 1.1.1
+    "@radix-ui/react-dropdown-menu": 2.1.1
+    "@radix-ui/react-label": 2.1.0
+    "@radix-ui/react-popover": 1.1.1
+    "@radix-ui/react-portal": 1.1.1
+    "@radix-ui/react-radio-group": 1.2.0
+    "@radix-ui/react-scroll-area": 1.1.0
+    "@radix-ui/react-select": 2.1.1
+    "@radix-ui/react-slot": 1.1.0
+    "@radix-ui/react-switch": 1.1.0
+    "@radix-ui/react-tabs": 1.1.0
+    "@radix-ui/react-tooltip": 1.1.2
     "@storybook/addon-essentials": ^7.0.23
     "@storybook/addon-interactions": ^7.0.23
     "@storybook/addon-links": ^7.0.23
@@ -5318,9 +5316,10 @@ __metadata:
     prismjs: ^1.29.0
     prop-types: ^15.8.1
     react: ^18.2.0
+    react-aria: ^3.33.1
     react-currency-input-field: ^3.6.11
-    react-day-picker: ^8.8.0
     react-dom: ^18.2.0
+    react-stately: ^3.31.1
     resize-observer-polyfill: ^1.5.1
     rimraf: ^5.0.1
     sonner: ^1.4.41
@@ -5329,9 +5328,11 @@ __metadata:
     tailwindcss: ^3.4.3
     tsc-alias: ^1.8.7
     typescript: ^5.1.6
+    upgrade: ^1.1.0
     vite: ^4.3.9
     vite-plugin-turbosnap: ^1.0.2
     vitest: ^0.32.2
+    yarn: ^1.22.22
   peerDependencies:
     react: ^18.0.0
     react-dom: ^18.0.0
@@ -5939,6 +5940,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/number@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/number@npm:1.1.0"
+  checksum: a48e34d5ff1484de1b7cf5d7317fefc831d49e96a2229f300fd37b657bd8cfb59c922830c00ec02838ab21de3b299a523474592e4f30882153412ed47edce6a4
+  languageName: node
+  linkType: hard
+
 "@radix-ui/primitive@npm:1.0.0":
   version: 1.0.0
   resolution: "@radix-ui/primitive@npm:1.0.0"
@@ -5964,56 +5972,54 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-accordion@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "@radix-ui/react-accordion@npm:1.1.2"
+"@radix-ui/react-accordion@npm:1.2.0":
+  version: 1.2.0
+  resolution: "@radix-ui/react-accordion@npm:1.2.0"
   dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/primitive": 1.0.1
-    "@radix-ui/react-collapsible": 1.0.3
-    "@radix-ui/react-collection": 1.0.3
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-direction": 1.0.1
-    "@radix-ui/react-id": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-use-controllable-state": 1.0.1
+    "@radix-ui/primitive": 1.1.0
+    "@radix-ui/react-collapsible": 1.1.0
+    "@radix-ui/react-collection": 1.1.0
+    "@radix-ui/react-compose-refs": 1.1.0
+    "@radix-ui/react-context": 1.1.0
+    "@radix-ui/react-direction": 1.1.0
+    "@radix-ui/react-id": 1.1.0
+    "@radix-ui/react-primitive": 2.0.0
+    "@radix-ui/react-use-controllable-state": 1.1.0
   peerDependencies:
     "@types/react": "*"
     "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
   peerDependenciesMeta:
     "@types/react":
       optional: true
     "@types/react-dom":
       optional: true
-  checksum: 54fe3642306d62f68ac4d534c6bec1998d00d441663b16119fe267cb085e48761acf3c02b9466245d42b8ab419632a573d35d79d3a5d328906bde121dd1816db
+  checksum: 324d7eb1653f57431297a2f3428f6221edf54d712b94ce9194243cfaef462490bd9d9976ec3cc868f5598f156242068f84d674a3febcf1c8ea8c4115efea0ae2
   languageName: node
   linkType: hard
 
-"@radix-ui/react-alert-dialog@npm:1.0.4":
-  version: 1.0.4
-  resolution: "@radix-ui/react-alert-dialog@npm:1.0.4"
+"@radix-ui/react-alert-dialog@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-alert-dialog@npm:1.1.1"
   dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/primitive": 1.0.1
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-dialog": 1.0.4
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-slot": 1.0.2
+    "@radix-ui/primitive": 1.1.0
+    "@radix-ui/react-compose-refs": 1.1.0
+    "@radix-ui/react-context": 1.1.0
+    "@radix-ui/react-dialog": 1.1.1
+    "@radix-ui/react-primitive": 2.0.0
+    "@radix-ui/react-slot": 1.1.0
   peerDependencies:
     "@types/react": "*"
     "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
   peerDependenciesMeta:
     "@types/react":
       optional: true
     "@types/react-dom":
       optional: true
-  checksum: ae8eff133632d26cd33e71bb29ca240d4bb84c3344147297add9751106821164a37a125f2190ad967b826aa529d56ad087e12d68c03edd3902cad7298a1dec30
+  checksum: 65185c77fd13e60035717d312aa8cc4f8637ce65215ffa3d6acdc1d7735872e64c21c53523d7d9c27b45a49041765bdb83cd157fe916903fcd80f355c3d532b1
   languageName: node
   linkType: hard
 
@@ -6056,80 +6062,77 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-avatar@npm:^1.0.3":
-  version: 1.0.4
-  resolution: "@radix-ui/react-avatar@npm:1.0.4"
+"@radix-ui/react-avatar@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-avatar@npm:1.1.0"
   dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-use-callback-ref": 1.0.1
-    "@radix-ui/react-use-layout-effect": 1.0.1
+    "@radix-ui/react-context": 1.1.0
+    "@radix-ui/react-primitive": 2.0.0
+    "@radix-ui/react-use-callback-ref": 1.1.0
+    "@radix-ui/react-use-layout-effect": 1.1.0
   peerDependencies:
     "@types/react": "*"
     "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
   peerDependenciesMeta:
     "@types/react":
       optional: true
     "@types/react-dom":
       optional: true
-  checksum: 608494c53968085bfcf9b987d80c3ec6720bdb65f78591d53e8bba3b360e86366d48a7dee11405dd443f5a3565432184b95bb9d4954bca1922cc9385a942caaf
+  checksum: 6358ae171c886aa66a4b381d847ef8c84b7020adceaea8676f4f434e5229ff06a13022ff611557f548dd4e8739eadf1b0d22111ae3d47e08b5dd1005edcf76a5
   languageName: node
   linkType: hard
 
-"@radix-ui/react-checkbox@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "@radix-ui/react-checkbox@npm:1.0.4"
+"@radix-ui/react-checkbox@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-checkbox@npm:1.1.1"
   dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/primitive": 1.0.1
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-presence": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-use-controllable-state": 1.0.1
-    "@radix-ui/react-use-previous": 1.0.1
-    "@radix-ui/react-use-size": 1.0.1
+    "@radix-ui/primitive": 1.1.0
+    "@radix-ui/react-compose-refs": 1.1.0
+    "@radix-ui/react-context": 1.1.0
+    "@radix-ui/react-presence": 1.1.0
+    "@radix-ui/react-primitive": 2.0.0
+    "@radix-ui/react-use-controllable-state": 1.1.0
+    "@radix-ui/react-use-previous": 1.1.0
+    "@radix-ui/react-use-size": 1.1.0
   peerDependencies:
     "@types/react": "*"
     "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
   peerDependenciesMeta:
     "@types/react":
       optional: true
     "@types/react-dom":
       optional: true
-  checksum: a4bd259a7e15ad88f72524190ddcc2db0688d439aad954e06d0adf6038b2e17397ed8ae0ea26ab09bf6981f1b9dd883904b2b7e74b307b5c6b1a3765d27fe737
+  checksum: 2d7d35b8319298166905057e9f7fb1d4b51d73bdec6c7c2127d2266e0f053c39586e316ea0da9a24612dfa86b8fc1f5160d4c37f79ae567025b62616de95c2c7
   languageName: node
   linkType: hard
 
-"@radix-ui/react-collapsible@npm:1.0.3":
-  version: 1.0.3
-  resolution: "@radix-ui/react-collapsible@npm:1.0.3"
+"@radix-ui/react-collapsible@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-collapsible@npm:1.1.0"
   dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/primitive": 1.0.1
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-id": 1.0.1
-    "@radix-ui/react-presence": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-use-controllable-state": 1.0.1
-    "@radix-ui/react-use-layout-effect": 1.0.1
+    "@radix-ui/primitive": 1.1.0
+    "@radix-ui/react-compose-refs": 1.1.0
+    "@radix-ui/react-context": 1.1.0
+    "@radix-ui/react-id": 1.1.0
+    "@radix-ui/react-presence": 1.1.0
+    "@radix-ui/react-primitive": 2.0.0
+    "@radix-ui/react-use-controllable-state": 1.1.0
+    "@radix-ui/react-use-layout-effect": 1.1.0
   peerDependencies:
     "@types/react": "*"
     "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
   peerDependenciesMeta:
     "@types/react":
       optional: true
     "@types/react-dom":
       optional: true
-  checksum: 7bc3e601e3fa84991bdf46ea1bdb725760942f8facadf42f05808abc7a1399c6ab90a00c70699367026afbd8afba0254ff9634f9d1e05b24ae452d9e0524d328
+  checksum: 07d6d0be153d0c56d533e820005caa13a8305ba34b55af74180180113074979bcfd1d7414ba2533272deb659275c0c38eb48004338fd542fdcbd1962925f199f
   languageName: node
   linkType: hard
 
@@ -6156,6 +6159,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-collection@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-collection@npm:1.1.0"
+  dependencies:
+    "@radix-ui/react-compose-refs": 1.1.0
+    "@radix-ui/react-context": 1.1.0
+    "@radix-ui/react-primitive": 2.0.0
+    "@radix-ui/react-slot": 1.1.0
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: fecb9f0871c827070a8794b39c7379fdc7d0855c4b05804f0b395eef39c37b2c2b6779865d6cb35d3bc74b6b380107bd8b3754d1730a34ea88913e6cd0eb84d4
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-compose-refs@npm:1.0.0":
   version: 1.0.0
   resolution: "@radix-ui/react-compose-refs@npm:1.0.0"
@@ -6260,36 +6285,35 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-dialog@npm:1.0.4":
-  version: 1.0.4
-  resolution: "@radix-ui/react-dialog@npm:1.0.4"
+"@radix-ui/react-dialog@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-dialog@npm:1.1.1"
   dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/primitive": 1.0.1
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-dismissable-layer": 1.0.4
-    "@radix-ui/react-focus-guards": 1.0.1
-    "@radix-ui/react-focus-scope": 1.0.3
-    "@radix-ui/react-id": 1.0.1
-    "@radix-ui/react-portal": 1.0.3
-    "@radix-ui/react-presence": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-slot": 1.0.2
-    "@radix-ui/react-use-controllable-state": 1.0.1
+    "@radix-ui/primitive": 1.1.0
+    "@radix-ui/react-compose-refs": 1.1.0
+    "@radix-ui/react-context": 1.1.0
+    "@radix-ui/react-dismissable-layer": 1.1.0
+    "@radix-ui/react-focus-guards": 1.1.0
+    "@radix-ui/react-focus-scope": 1.1.0
+    "@radix-ui/react-id": 1.1.0
+    "@radix-ui/react-portal": 1.1.1
+    "@radix-ui/react-presence": 1.1.0
+    "@radix-ui/react-primitive": 2.0.0
+    "@radix-ui/react-slot": 1.1.0
+    "@radix-ui/react-use-controllable-state": 1.1.0
     aria-hidden: ^1.1.1
-    react-remove-scroll: 2.5.5
+    react-remove-scroll: 2.5.7
   peerDependencies:
     "@types/react": "*"
     "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
   peerDependenciesMeta:
     "@types/react":
       optional: true
     "@types/react-dom":
       optional: true
-  checksum: 45eb0cb8c9b74714e4a3027055e3d1e8387f6c02c6822aa9711bbc3dffa2f6981385ce55909102987fbf4a48a85c10989b80ad71e80229dae0745ccd6b2e3e76
+  checksum: a21e318e8d45bed22067880f66beb4ea91118a6c0d43aa20de495c0373b53c12dfe28f58196d5b33300573a5e24e064ec53648a576f02366fb5a297d887b0860
   languageName: node
   linkType: hard
 
@@ -6308,6 +6332,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-direction@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-direction@npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: eb07d8cc3ae2388b824e0a11ae0e3b71fb0c49972b506e249cec9f27a5b7ef4305ee668c98b674833c92e842163549a83beb0a197dec1ec65774bdeeb61f932c
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-dismissable-layer@npm:1.0.0":
   version: 1.0.0
   resolution: "@radix-ui/react-dismissable-layer@npm:1.0.0"
@@ -6349,30 +6386,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-dismissable-layer@npm:1.0.5":
-  version: 1.0.5
-  resolution: "@radix-ui/react-dismissable-layer@npm:1.0.5"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/primitive": 1.0.1
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-use-callback-ref": 1.0.1
-    "@radix-ui/react-use-escape-keydown": 1.0.3
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: 7e4308867aecfb07b506330c1964d94a52247ab9453725613cd326762aa13e483423c250f107219c131b0449600eb8d1576ce3159c2b96e8c978f75e46062cb2
-  languageName: node
-  linkType: hard
-
 "@radix-ui/react-dismissable-layer@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-dismissable-layer@npm:1.1.0"
@@ -6396,29 +6409,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-dropdown-menu@npm:^2.0.5":
-  version: 2.0.6
-  resolution: "@radix-ui/react-dropdown-menu@npm:2.0.6"
+"@radix-ui/react-dropdown-menu@npm:2.1.1":
+  version: 2.1.1
+  resolution: "@radix-ui/react-dropdown-menu@npm:2.1.1"
   dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/primitive": 1.0.1
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-id": 1.0.1
-    "@radix-ui/react-menu": 2.0.6
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-use-controllable-state": 1.0.1
+    "@radix-ui/primitive": 1.1.0
+    "@radix-ui/react-compose-refs": 1.1.0
+    "@radix-ui/react-context": 1.1.0
+    "@radix-ui/react-id": 1.1.0
+    "@radix-ui/react-menu": 2.1.1
+    "@radix-ui/react-primitive": 2.0.0
+    "@radix-ui/react-use-controllable-state": 1.1.0
   peerDependencies:
     "@types/react": "*"
     "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
   peerDependenciesMeta:
     "@types/react":
       optional: true
     "@types/react-dom":
       optional: true
-  checksum: 525cab53547d2ce2904518b1f66b62179d656c57c8d6dd7dbe863cc05025d8bad535f44011e2735b07fc500579c3d64d89a9a39593d4c8f91f31052d75b729e1
+  checksum: b54f1e41ddc8c3709ba2f8a59621138268d0380aca8399450a234997cc2214e4a6acf1a64ab387558ba39c0bd5839995a668bd71781762daac7618a2d71b4082
   languageName: node
   linkType: hard
 
@@ -6498,28 +6510,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-focus-scope@npm:1.0.4":
-  version: 1.0.4
-  resolution: "@radix-ui/react-focus-scope@npm:1.0.4"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-use-callback-ref": 1.0.1
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: 2fce0bafcab4e16cf4ed7560bda40654223f3d0add6b231e1c607433030c14e6249818b444b7b58ee7a6ff6bbf8e192c9c81d22c3a5c88c2daade9d1f881b5be
-  languageName: node
-  linkType: hard
-
 "@radix-ui/react-focus-scope@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-focus-scope@npm:1.1.0"
@@ -6541,31 +6531,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-hover-card@npm:^1.0.7":
-  version: 1.0.7
-  resolution: "@radix-ui/react-hover-card@npm:1.0.7"
+"@radix-ui/react-hover-card@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-hover-card@npm:1.1.1"
   dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/primitive": 1.0.1
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-dismissable-layer": 1.0.5
-    "@radix-ui/react-popper": 1.1.3
-    "@radix-ui/react-portal": 1.0.4
-    "@radix-ui/react-presence": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-use-controllable-state": 1.0.1
+    "@radix-ui/primitive": 1.1.0
+    "@radix-ui/react-compose-refs": 1.1.0
+    "@radix-ui/react-context": 1.1.0
+    "@radix-ui/react-dismissable-layer": 1.1.0
+    "@radix-ui/react-popper": 1.2.0
+    "@radix-ui/react-portal": 1.1.1
+    "@radix-ui/react-presence": 1.1.0
+    "@radix-ui/react-primitive": 2.0.0
+    "@radix-ui/react-use-controllable-state": 1.1.0
   peerDependencies:
     "@types/react": "*"
     "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
   peerDependenciesMeta:
     "@types/react":
       optional: true
     "@types/react-dom":
       optional: true
-  checksum: f29f3da5bd9a967b5a35e91ac2d1b223191c7a074550d9d9cc10a0c0baf62ba0705b32912a7d2ef1ea5c27dd5e130a9fda9cbe6c2a7f3c2037ed5dfed89aa8cc
+  checksum: d27f89258caec7660113f6bdfcffdd8999c8ac25761eb099b467cdb6c2cdea14c2953a100130e212cfb2621f9718b6291e292be915280698e0cfd4c1b3ed29af
   languageName: node
   linkType: hard
 
@@ -6612,64 +6601,62 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-label@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "@radix-ui/react-label@npm:2.0.2"
+"@radix-ui/react-label@npm:2.1.0":
+  version: 2.1.0
+  resolution: "@radix-ui/react-label@npm:2.1.0"
   dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/react-primitive": 1.0.3
+    "@radix-ui/react-primitive": 2.0.0
   peerDependencies:
     "@types/react": "*"
     "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
   peerDependenciesMeta:
     "@types/react":
       optional: true
     "@types/react-dom":
       optional: true
-  checksum: a6528735b9f3e15ad83b7a905861bbc5a9b9236716957d6e99902bbfced0472aed4ddbf519bc0e6c41f528986e7acf7270cf0734a2fc380a547a8640809d3a81
+  checksum: 282d3b1b72ff14b431b3bb427d66d14253bbd30fad2437d8f4e7d5c0b6a41f6f7ed157460e02fb91b67b1c8cebc65f2c6fe1d3a32f4459d41238fc0fd4719875
   languageName: node
   linkType: hard
 
-"@radix-ui/react-menu@npm:2.0.6":
-  version: 2.0.6
-  resolution: "@radix-ui/react-menu@npm:2.0.6"
+"@radix-ui/react-menu@npm:2.1.1":
+  version: 2.1.1
+  resolution: "@radix-ui/react-menu@npm:2.1.1"
   dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/primitive": 1.0.1
-    "@radix-ui/react-collection": 1.0.3
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-direction": 1.0.1
-    "@radix-ui/react-dismissable-layer": 1.0.5
-    "@radix-ui/react-focus-guards": 1.0.1
-    "@radix-ui/react-focus-scope": 1.0.4
-    "@radix-ui/react-id": 1.0.1
-    "@radix-ui/react-popper": 1.1.3
-    "@radix-ui/react-portal": 1.0.4
-    "@radix-ui/react-presence": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-roving-focus": 1.0.4
-    "@radix-ui/react-slot": 1.0.2
-    "@radix-ui/react-use-callback-ref": 1.0.1
+    "@radix-ui/primitive": 1.1.0
+    "@radix-ui/react-collection": 1.1.0
+    "@radix-ui/react-compose-refs": 1.1.0
+    "@radix-ui/react-context": 1.1.0
+    "@radix-ui/react-direction": 1.1.0
+    "@radix-ui/react-dismissable-layer": 1.1.0
+    "@radix-ui/react-focus-guards": 1.1.0
+    "@radix-ui/react-focus-scope": 1.1.0
+    "@radix-ui/react-id": 1.1.0
+    "@radix-ui/react-popper": 1.2.0
+    "@radix-ui/react-portal": 1.1.1
+    "@radix-ui/react-presence": 1.1.0
+    "@radix-ui/react-primitive": 2.0.0
+    "@radix-ui/react-roving-focus": 1.1.0
+    "@radix-ui/react-slot": 1.1.0
+    "@radix-ui/react-use-callback-ref": 1.1.0
     aria-hidden: ^1.1.1
-    react-remove-scroll: 2.5.5
+    react-remove-scroll: 2.5.7
   peerDependencies:
     "@types/react": "*"
     "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
   peerDependenciesMeta:
     "@types/react":
       optional: true
     "@types/react-dom":
       optional: true
-  checksum: 06926fa59cb8f5614f2e1a085ea1cbf09631ae28fb6e5d6e6d2a0a84d24979e3aca311cdb19dfdb254c1823ff85fd5250c29d4463f8f7622dd523e35df3fce1d
+  checksum: 2cb11867430276d8db595886ae0e01e67a555676d37e108d5a6c386df23329482115a041b6a4057fad6b855aa423681805c20d1f290fd1502e521e8e55aafb54
   languageName: node
   linkType: hard
 
-"@radix-ui/react-popover@npm:^1.0.6":
+"@radix-ui/react-popover@npm:1.1.1":
   version: 1.1.1
   resolution: "@radix-ui/react-popover@npm:1.1.1"
   dependencies:
@@ -6731,35 +6718,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-popper@npm:1.1.3":
-  version: 1.1.3
-  resolution: "@radix-ui/react-popper@npm:1.1.3"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@floating-ui/react-dom": ^2.0.0
-    "@radix-ui/react-arrow": 1.0.3
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-use-callback-ref": 1.0.1
-    "@radix-ui/react-use-layout-effect": 1.0.1
-    "@radix-ui/react-use-rect": 1.0.1
-    "@radix-ui/react-use-size": 1.0.1
-    "@radix-ui/rect": 1.0.1
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: a38c374ec65dd8d7c604af7151e96faec1743828d859dc4892e720c1803a7e1562add26aec2ddf2091defae4e15d989c028032ea481419e38c4693b3f12545c3
-  languageName: node
-  linkType: hard
-
 "@radix-ui/react-popper@npm:1.2.0":
   version: 1.2.0
   resolution: "@radix-ui/react-popper@npm:1.2.0"
@@ -6821,26 +6779,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-portal@npm:1.0.4, @radix-ui/react-portal@npm:^1.0.3":
-  version: 1.0.4
-  resolution: "@radix-ui/react-portal@npm:1.0.4"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/react-primitive": 1.0.3
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: fed32f8148b833fe852fb5e2f859979ffdf2fb9a9ef46583b9b52915d764ad36ba5c958a64e61d23395628ccc09d678229ee94cd112941e8fe2575021f820c29
-  languageName: node
-  linkType: hard
-
 "@radix-ui/react-portal@npm:1.1.1":
   version: 1.1.1
   resolution: "@radix-ui/react-portal@npm:1.1.1"
@@ -6875,27 +6813,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-presence@npm:1.0.1":
-  version: 1.0.1
-  resolution: "@radix-ui/react-presence@npm:1.0.1"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-use-layout-effect": 1.0.1
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: 90780618b265fe794a8f1ddaa5bfd3c71a1127fa79330a14d32722e6265b44452a9dd36efe4e769129d33e57f979f6b8713e2cbf2e2755326aa3b0f337185b6e
-  languageName: node
-  linkType: hard
-
 "@radix-ui/react-presence@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-presence@npm:1.1.0"
@@ -6968,32 +6885,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-radio-group@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "@radix-ui/react-radio-group@npm:1.1.3"
+"@radix-ui/react-radio-group@npm:1.2.0":
+  version: 1.2.0
+  resolution: "@radix-ui/react-radio-group@npm:1.2.0"
   dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/primitive": 1.0.1
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-direction": 1.0.1
-    "@radix-ui/react-presence": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-roving-focus": 1.0.4
-    "@radix-ui/react-use-controllable-state": 1.0.1
-    "@radix-ui/react-use-previous": 1.0.1
-    "@radix-ui/react-use-size": 1.0.1
+    "@radix-ui/primitive": 1.1.0
+    "@radix-ui/react-compose-refs": 1.1.0
+    "@radix-ui/react-context": 1.1.0
+    "@radix-ui/react-direction": 1.1.0
+    "@radix-ui/react-presence": 1.1.0
+    "@radix-ui/react-primitive": 2.0.0
+    "@radix-ui/react-roving-focus": 1.1.0
+    "@radix-ui/react-use-controllable-state": 1.1.0
+    "@radix-ui/react-use-previous": 1.1.0
+    "@radix-ui/react-use-size": 1.1.0
   peerDependencies:
     "@types/react": "*"
     "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
   peerDependenciesMeta:
     "@types/react":
       optional: true
     "@types/react-dom":
       optional: true
-  checksum: a23264cc9e8cb3738db8edf50ae27b82f79093f57c2e9a4d319fdece280147f5615643ad6df480383dcd53f39078e321c25be5e18992ffda36b2c73ebfcad9c4
+  checksum: 24764236699e397c65ed32260e91d40681e24f3808b19c1f8fec4757641e3f959a32dacd83f23aaf4abda6c26d28af6ce293e5736f7d6220a129c15953b21ab7
   languageName: node
   linkType: hard
 
@@ -7025,31 +6941,96 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-scroll-area@npm:^1.0.4":
-  version: 1.0.5
-  resolution: "@radix-ui/react-scroll-area@npm:1.0.5"
+"@radix-ui/react-roving-focus@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-roving-focus@npm:1.1.0"
   dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/number": 1.0.1
-    "@radix-ui/primitive": 1.0.1
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-direction": 1.0.1
-    "@radix-ui/react-presence": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-use-callback-ref": 1.0.1
-    "@radix-ui/react-use-layout-effect": 1.0.1
+    "@radix-ui/primitive": 1.1.0
+    "@radix-ui/react-collection": 1.1.0
+    "@radix-ui/react-compose-refs": 1.1.0
+    "@radix-ui/react-context": 1.1.0
+    "@radix-ui/react-direction": 1.1.0
+    "@radix-ui/react-id": 1.1.0
+    "@radix-ui/react-primitive": 2.0.0
+    "@radix-ui/react-use-callback-ref": 1.1.0
+    "@radix-ui/react-use-controllable-state": 1.1.0
   peerDependencies:
     "@types/react": "*"
     "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
   peerDependenciesMeta:
     "@types/react":
       optional: true
     "@types/react-dom":
       optional: true
-  checksum: a08818aeeb15920a02e708699a8bdc85c26eab0579ab741129b464a799b5d9a04f81810a2d200f1cf4aef03452067770e87b0f81593a689350fcd7e51819e4cb
+  checksum: ce367d3033a12d639a8d445d2efa090aa4bc5a78125be568f8c8e4e59f30afd51b585a90031ec18cdba19afbaf1974633dbc0c2c3d2a14d9eb1bfea2ddbe5369
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-scroll-area@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-scroll-area@npm:1.1.0"
+  dependencies:
+    "@radix-ui/number": 1.1.0
+    "@radix-ui/primitive": 1.1.0
+    "@radix-ui/react-compose-refs": 1.1.0
+    "@radix-ui/react-context": 1.1.0
+    "@radix-ui/react-direction": 1.1.0
+    "@radix-ui/react-presence": 1.1.0
+    "@radix-ui/react-primitive": 2.0.0
+    "@radix-ui/react-use-callback-ref": 1.1.0
+    "@radix-ui/react-use-layout-effect": 1.1.0
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 46063b17f06bd2fe20ceaceb2fb0c1cd1b2767045d6d721904bc3f5d6726704a77eaf63997a514ca8f43d973da0c6446d7ca04057d9983cb0d46f4be8c01c9f5
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-select@npm:2.1.1":
+  version: 2.1.1
+  resolution: "@radix-ui/react-select@npm:2.1.1"
+  dependencies:
+    "@radix-ui/number": 1.1.0
+    "@radix-ui/primitive": 1.1.0
+    "@radix-ui/react-collection": 1.1.0
+    "@radix-ui/react-compose-refs": 1.1.0
+    "@radix-ui/react-context": 1.1.0
+    "@radix-ui/react-direction": 1.1.0
+    "@radix-ui/react-dismissable-layer": 1.1.0
+    "@radix-ui/react-focus-guards": 1.1.0
+    "@radix-ui/react-focus-scope": 1.1.0
+    "@radix-ui/react-id": 1.1.0
+    "@radix-ui/react-popper": 1.2.0
+    "@radix-ui/react-portal": 1.1.1
+    "@radix-ui/react-primitive": 2.0.0
+    "@radix-ui/react-slot": 1.1.0
+    "@radix-ui/react-use-callback-ref": 1.1.0
+    "@radix-ui/react-use-controllable-state": 1.1.0
+    "@radix-ui/react-use-layout-effect": 1.1.0
+    "@radix-ui/react-use-previous": 1.1.0
+    "@radix-ui/react-visually-hidden": 1.1.0
+    aria-hidden: ^1.1.1
+    react-remove-scroll: 2.5.7
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: f12bce67f49f82e44f04d109f53be195d7a415e89e29aa09ec704899d6a7198486f118f3d1e37aa7afd3e14524951752fc79170ac5bd4c831cdc4032ea1c0382
   languageName: node
   linkType: hard
 
@@ -7093,46 +7074,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-select@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "@radix-ui/react-select@npm:2.0.0"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/number": 1.0.1
-    "@radix-ui/primitive": 1.0.1
-    "@radix-ui/react-collection": 1.0.3
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-direction": 1.0.1
-    "@radix-ui/react-dismissable-layer": 1.0.5
-    "@radix-ui/react-focus-guards": 1.0.1
-    "@radix-ui/react-focus-scope": 1.0.4
-    "@radix-ui/react-id": 1.0.1
-    "@radix-ui/react-popper": 1.1.3
-    "@radix-ui/react-portal": 1.0.4
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-slot": 1.0.2
-    "@radix-ui/react-use-callback-ref": 1.0.1
-    "@radix-ui/react-use-controllable-state": 1.0.1
-    "@radix-ui/react-use-layout-effect": 1.0.1
-    "@radix-ui/react-use-previous": 1.0.1
-    "@radix-ui/react-visually-hidden": 1.0.3
-    aria-hidden: ^1.1.1
-    react-remove-scroll: 2.5.5
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: 63aa4d119c5273035a2fce5a05739729abb8995ead00e810b86acfba05835fda655d962d3553b1f2011ed4f84e328f1e7e171cd9eaa7e3433b3d65c58cf3394a
-  languageName: node
-  linkType: hard
-
 "@radix-ui/react-separator@npm:1.0.3":
   version: 1.0.3
   resolution: "@radix-ui/react-separator@npm:1.0.3"
@@ -7165,7 +7106,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-slot@npm:1.0.2, @radix-ui/react-slot@npm:^1.0.2":
+"@radix-ui/react-slot@npm:1.0.2":
   version: 1.0.2
   resolution: "@radix-ui/react-slot@npm:1.0.2"
   dependencies:
@@ -7196,56 +7137,54 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-switch@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "@radix-ui/react-switch@npm:1.0.3"
+"@radix-ui/react-switch@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-switch@npm:1.1.0"
   dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/primitive": 1.0.1
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-use-controllable-state": 1.0.1
-    "@radix-ui/react-use-previous": 1.0.1
-    "@radix-ui/react-use-size": 1.0.1
+    "@radix-ui/primitive": 1.1.0
+    "@radix-ui/react-compose-refs": 1.1.0
+    "@radix-ui/react-context": 1.1.0
+    "@radix-ui/react-primitive": 2.0.0
+    "@radix-ui/react-use-controllable-state": 1.1.0
+    "@radix-ui/react-use-previous": 1.1.0
+    "@radix-ui/react-use-size": 1.1.0
   peerDependencies:
     "@types/react": "*"
     "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
   peerDependenciesMeta:
     "@types/react":
       optional: true
     "@types/react-dom":
       optional: true
-  checksum: e7c65aeedf9d3cd47320fd3759b8c7f3777619cd847a96f2c52841488ad1745fa35335e2877a4f839902942410a7ffe9baf05ec1c249a0401a2b1b9363dbf343
+  checksum: 49a250371dccce2a06564ce5812ffbd13b7b69fffe8473529a8a344d8caf95d4068f7d47bd257228e35802f008ba66af410b4d8456bc4257da237fa657c74d50
   languageName: node
   linkType: hard
 
-"@radix-ui/react-tabs@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "@radix-ui/react-tabs@npm:1.0.4"
+"@radix-ui/react-tabs@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-tabs@npm:1.1.0"
   dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/primitive": 1.0.1
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-direction": 1.0.1
-    "@radix-ui/react-id": 1.0.1
-    "@radix-ui/react-presence": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-roving-focus": 1.0.4
-    "@radix-ui/react-use-controllable-state": 1.0.1
+    "@radix-ui/primitive": 1.1.0
+    "@radix-ui/react-context": 1.1.0
+    "@radix-ui/react-direction": 1.1.0
+    "@radix-ui/react-id": 1.1.0
+    "@radix-ui/react-presence": 1.1.0
+    "@radix-ui/react-primitive": 2.0.0
+    "@radix-ui/react-roving-focus": 1.1.0
+    "@radix-ui/react-use-controllable-state": 1.1.0
   peerDependencies:
     "@types/react": "*"
     "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
   peerDependenciesMeta:
     "@types/react":
       optional: true
     "@types/react-dom":
       optional: true
-  checksum: 79699a921f5c2e890e0e496a751d9c2a7c4017eff8e52f094389e993263332881353bdd27b8cc123c906b36743e803eec7f32fdbb4d413328cba0a37d6413339
+  checksum: d6cb742c36a6918dd37c6a3c531b1f6832916dde26855f6c94baf4a17d20bbb17ffd8ba9844539c568a4484a39bbdf5fc528d44534d1d46d094840836c9ff47d
   languageName: node
   linkType: hard
 
@@ -7323,34 +7262,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-tooltip@npm:^1.0.6":
-  version: 1.0.7
-  resolution: "@radix-ui/react-tooltip@npm:1.0.7"
+"@radix-ui/react-tooltip@npm:1.1.2":
+  version: 1.1.2
+  resolution: "@radix-ui/react-tooltip@npm:1.1.2"
   dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/primitive": 1.0.1
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-dismissable-layer": 1.0.5
-    "@radix-ui/react-id": 1.0.1
-    "@radix-ui/react-popper": 1.1.3
-    "@radix-ui/react-portal": 1.0.4
-    "@radix-ui/react-presence": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-slot": 1.0.2
-    "@radix-ui/react-use-controllable-state": 1.0.1
-    "@radix-ui/react-visually-hidden": 1.0.3
+    "@radix-ui/primitive": 1.1.0
+    "@radix-ui/react-compose-refs": 1.1.0
+    "@radix-ui/react-context": 1.1.0
+    "@radix-ui/react-dismissable-layer": 1.1.0
+    "@radix-ui/react-id": 1.1.0
+    "@radix-ui/react-popper": 1.2.0
+    "@radix-ui/react-portal": 1.1.1
+    "@radix-ui/react-presence": 1.1.0
+    "@radix-ui/react-primitive": 2.0.0
+    "@radix-ui/react-slot": 1.1.0
+    "@radix-ui/react-use-controllable-state": 1.1.0
+    "@radix-ui/react-visually-hidden": 1.1.0
   peerDependencies:
     "@types/react": "*"
     "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
   peerDependenciesMeta:
     "@types/react":
       optional: true
     "@types/react-dom":
       optional: true
-  checksum: 915524ea9d102eb26e656c550a084ca460219041c0e7cec0e72b522ee52a43b4d725f4ad3352212f4ae88b3672ef7b23bad07844275cafea075ada590678d873
+  checksum: 76f3abcd27f7f673612631abc340a17e6ab0e5d20b901fe4828400de05d4d8a8711392417b028be86a3053a0881b80d0ed41c4e027eb64c1af9fe74db70d3786
   languageName: node
   linkType: hard
 
@@ -7533,6 +7471,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-use-previous@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-use-previous@npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 9787d24790d4e330715127f2f4db56c4cbed9b0a47f97e11a68582c08a356a53c1ec41c7537382f6fb8d0db25de152770f17430e8eaf0fa59705be97760acbad
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-use-rect@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/react-use-rect@npm:1.0.1"
@@ -7615,6 +7566,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-visually-hidden@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-visually-hidden@npm:1.1.0"
+  dependencies:
+    "@radix-ui/react-primitive": 2.0.0
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: db138dd5f3c94958a9f836740d4408c89c4a73e770eaba5ead921e69b3c0d196c5cd58323d82829a9bc05a74873c299195dfd8366b9808e53a9a3dbca5a1e5fe
+  languageName: node
+  linkType: hard
+
 "@radix-ui/rect@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/rect@npm:1.0.1"
@@ -7631,282 +7601,1389 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-aria/datepicker@npm:^3.5.0":
-  version: 3.10.0
-  resolution: "@react-aria/datepicker@npm:3.10.0"
+"@react-aria/breadcrumbs@npm:^3.5.13":
+  version: 3.5.13
+  resolution: "@react-aria/breadcrumbs@npm:3.5.13"
   dependencies:
-    "@internationalized/date": ^3.5.3
-    "@internationalized/number": ^3.5.2
-    "@internationalized/string": ^3.2.2
-    "@react-aria/focus": ^3.17.0
-    "@react-aria/form": ^3.0.4
-    "@react-aria/i18n": ^3.11.0
-    "@react-aria/interactions": ^3.21.2
-    "@react-aria/label": ^3.7.7
-    "@react-aria/spinbutton": ^3.6.4
-    "@react-aria/utils": ^3.24.0
-    "@react-stately/datepicker": ^3.9.3
-    "@react-stately/form": ^3.0.2
-    "@react-types/button": ^3.9.3
-    "@react-types/calendar": ^3.4.5
-    "@react-types/datepicker": ^3.7.3
-    "@react-types/dialog": ^3.5.9
-    "@react-types/shared": ^3.23.0
+    "@react-aria/i18n": ^3.11.1
+    "@react-aria/link": ^3.7.1
+    "@react-aria/utils": ^3.24.1
+    "@react-types/breadcrumbs": ^3.7.5
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: d3759e533ace5c64abf1b7924cf4db6847a62728faf5b1b2fee8588653e26031e624eb046c45f855577832cd9075b02b616a35d17258843b4aded7d5f0f38822
+  languageName: node
+  linkType: hard
+
+"@react-aria/button@npm:^3.9.5":
+  version: 3.9.5
+  resolution: "@react-aria/button@npm:3.9.5"
+  dependencies:
+    "@react-aria/focus": ^3.17.1
+    "@react-aria/interactions": ^3.21.3
+    "@react-aria/utils": ^3.24.1
+    "@react-stately/toggle": ^3.7.4
+    "@react-types/button": ^3.9.4
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 3d095e98a73d833f4507e551171ea96b8ac1c62cb0bc422c6d7d7456fe9f796c3995fb4df4511e0be0c62d393eda7819b10de54a0b3470672cf55499f5497343
+  languageName: node
+  linkType: hard
+
+"@react-aria/calendar@npm:^3.5.8":
+  version: 3.5.8
+  resolution: "@react-aria/calendar@npm:3.5.8"
+  dependencies:
+    "@internationalized/date": ^3.5.4
+    "@react-aria/i18n": ^3.11.1
+    "@react-aria/interactions": ^3.21.3
+    "@react-aria/live-announcer": ^3.3.4
+    "@react-aria/utils": ^3.24.1
+    "@react-stately/calendar": ^3.5.1
+    "@react-types/button": ^3.9.4
+    "@react-types/calendar": ^3.4.6
+    "@react-types/shared": ^3.23.1
     "@swc/helpers": ^0.5.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: 4f8ef1fb8ea2b6aa57f5298cc1b48fa904fb2bbd7643b06b3c7577227008e3c7076e4ae9d8545a50cce28b545fb5868dced1bf2df35cf1a0d5f15ad8e050c2bf
+  checksum: 317e5ee8ad5c5c8dc4cb4acc19da1f49667faf8b53831aa53cad126640ead2130ee843c7d2fb12c92299d2a9e972ec42f6a56be4f64342b9ee7b44a722629a05
   languageName: node
   linkType: hard
 
-"@react-aria/focus@npm:^3.17.0":
-  version: 3.17.0
-  resolution: "@react-aria/focus@npm:3.17.0"
+"@react-aria/checkbox@npm:^3.14.3":
+  version: 3.14.3
+  resolution: "@react-aria/checkbox@npm:3.14.3"
   dependencies:
-    "@react-aria/interactions": ^3.21.2
-    "@react-aria/utils": ^3.24.0
-    "@react-types/shared": ^3.23.0
+    "@react-aria/form": ^3.0.5
+    "@react-aria/interactions": ^3.21.3
+    "@react-aria/label": ^3.7.8
+    "@react-aria/toggle": ^3.10.4
+    "@react-aria/utils": ^3.24.1
+    "@react-stately/checkbox": ^3.6.5
+    "@react-stately/form": ^3.0.3
+    "@react-stately/toggle": ^3.7.4
+    "@react-types/checkbox": ^3.8.1
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: fd486e5681851d558652239335c15c5d58482c3a2ff1c599558d491426217840ce699de467080a8b2f6bb4dacf4e6edfe2ef46866e786a5e81975e95a83d9db0
+  languageName: node
+  linkType: hard
+
+"@react-aria/combobox@npm:^3.9.1":
+  version: 3.9.1
+  resolution: "@react-aria/combobox@npm:3.9.1"
+  dependencies:
+    "@react-aria/i18n": ^3.11.1
+    "@react-aria/listbox": ^3.12.1
+    "@react-aria/live-announcer": ^3.3.4
+    "@react-aria/menu": ^3.14.1
+    "@react-aria/overlays": ^3.22.1
+    "@react-aria/selection": ^3.18.1
+    "@react-aria/textfield": ^3.14.5
+    "@react-aria/utils": ^3.24.1
+    "@react-stately/collections": ^3.10.7
+    "@react-stately/combobox": ^3.8.4
+    "@react-stately/form": ^3.0.3
+    "@react-types/button": ^3.9.4
+    "@react-types/combobox": ^3.11.1
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: d78d7eb29aaf9e7a7716501ce695c34f4feffc9abe22ab74e38349c5270891cda20db8e638fc7e95742c41960e04b2101577a9407af81a3bd6cd3f2cdd97a549
+  languageName: node
+  linkType: hard
+
+"@react-aria/datepicker@npm:^3.10.1":
+  version: 3.10.1
+  resolution: "@react-aria/datepicker@npm:3.10.1"
+  dependencies:
+    "@internationalized/date": ^3.5.4
+    "@internationalized/number": ^3.5.3
+    "@internationalized/string": ^3.2.3
+    "@react-aria/focus": ^3.17.1
+    "@react-aria/form": ^3.0.5
+    "@react-aria/i18n": ^3.11.1
+    "@react-aria/interactions": ^3.21.3
+    "@react-aria/label": ^3.7.8
+    "@react-aria/spinbutton": ^3.6.5
+    "@react-aria/utils": ^3.24.1
+    "@react-stately/datepicker": ^3.9.4
+    "@react-stately/form": ^3.0.3
+    "@react-types/button": ^3.9.4
+    "@react-types/calendar": ^3.4.6
+    "@react-types/datepicker": ^3.7.4
+    "@react-types/dialog": ^3.5.10
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 3b36f35b2af5ee803ca29fba506d8e70cf1adf00e9c68ea1b5d26e5f401a4de51f39caf043bb404054affdf700a957c0814252f58e407748bdc0605aac870704
+  languageName: node
+  linkType: hard
+
+"@react-aria/dialog@npm:^3.5.14":
+  version: 3.5.14
+  resolution: "@react-aria/dialog@npm:3.5.14"
+  dependencies:
+    "@react-aria/focus": ^3.17.1
+    "@react-aria/overlays": ^3.22.1
+    "@react-aria/utils": ^3.24.1
+    "@react-types/dialog": ^3.5.10
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 9a3455ab8ce03afceb02c56e70b14213c3f3824ac09bd73b65c21cbcd5484cc58217cf33d5d7427e8d7a7e61aa20ce5faa482044bf1aee7916789e4c842df483
+  languageName: node
+  linkType: hard
+
+"@react-aria/dnd@npm:^3.6.1":
+  version: 3.6.1
+  resolution: "@react-aria/dnd@npm:3.6.1"
+  dependencies:
+    "@internationalized/string": ^3.2.3
+    "@react-aria/i18n": ^3.11.1
+    "@react-aria/interactions": ^3.21.3
+    "@react-aria/live-announcer": ^3.3.4
+    "@react-aria/overlays": ^3.22.1
+    "@react-aria/utils": ^3.24.1
+    "@react-stately/dnd": ^3.3.1
+    "@react-types/button": ^3.9.4
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: c888bb5005b8b4e495ae257210ce25c38f1dd1ba8bcf7570308fd64adcd00a82dad971dac63923b28e264a1806a87a15fdfaafb91640824ae3dd11bbd266425b
+  languageName: node
+  linkType: hard
+
+"@react-aria/focus@npm:^3.17.1":
+  version: 3.17.1
+  resolution: "@react-aria/focus@npm:3.17.1"
+  dependencies:
+    "@react-aria/interactions": ^3.21.3
+    "@react-aria/utils": ^3.24.1
+    "@react-types/shared": ^3.23.1
     "@swc/helpers": ^0.5.0
     clsx: ^2.0.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: 7e9cb239c0a39f8c9397b295b7f4ba4c3c21f613ed53cdf814ceb913f8356f633c1c0dd3d6470956da69571f887542526142d264ccf0ad89e2faeec5f7562e3c
+  checksum: 32b0fcd9a0ea625c68870691377fd5db02f18c195f03bea8318f5a8095e795c8019bfac9fd64fb3dd94ed68898d61f31881f510e220fabc4d54fb64789bda577
   languageName: node
   linkType: hard
 
-"@react-aria/form@npm:^3.0.4":
-  version: 3.0.4
-  resolution: "@react-aria/form@npm:3.0.4"
+"@react-aria/form@npm:^3.0.5":
+  version: 3.0.5
+  resolution: "@react-aria/form@npm:3.0.5"
   dependencies:
-    "@react-aria/interactions": ^3.21.2
-    "@react-aria/utils": ^3.24.0
-    "@react-stately/form": ^3.0.2
-    "@react-types/shared": ^3.23.0
+    "@react-aria/interactions": ^3.21.3
+    "@react-aria/utils": ^3.24.1
+    "@react-stately/form": ^3.0.3
+    "@react-types/shared": ^3.23.1
     "@swc/helpers": ^0.5.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: ced781730a298270feb458eaafd92ce51c00e0c12cce059f92dffc4c9d0f1ff67139d0a9979c39c3cd446bf4d04deea1b3fd1b149a43c5e868a6ab0176d1b463
+  checksum: 846532d7d5e3999bd4f8f6a85013de5b8aeeba9ae15002b09ec2bfa04997699bac8e23473d72be440973af5da95ccdee6fbc93614be117e06f1e254bf916b225
   languageName: node
   linkType: hard
 
-"@react-aria/i18n@npm:^3.11.0":
-  version: 3.11.0
-  resolution: "@react-aria/i18n@npm:3.11.0"
+"@react-aria/grid@npm:^3.9.1":
+  version: 3.9.1
+  resolution: "@react-aria/grid@npm:3.9.1"
   dependencies:
-    "@internationalized/date": ^3.5.3
-    "@internationalized/message": ^3.1.3
-    "@internationalized/number": ^3.5.2
-    "@internationalized/string": ^3.2.2
-    "@react-aria/ssr": ^3.9.3
-    "@react-aria/utils": ^3.24.0
-    "@react-types/shared": ^3.23.0
+    "@react-aria/focus": ^3.17.1
+    "@react-aria/i18n": ^3.11.1
+    "@react-aria/interactions": ^3.21.3
+    "@react-aria/live-announcer": ^3.3.4
+    "@react-aria/selection": ^3.18.1
+    "@react-aria/utils": ^3.24.1
+    "@react-stately/collections": ^3.10.7
+    "@react-stately/grid": ^3.8.7
+    "@react-stately/selection": ^3.15.1
+    "@react-stately/virtualizer": ^3.7.1
+    "@react-types/checkbox": ^3.8.1
+    "@react-types/grid": ^3.2.6
+    "@react-types/shared": ^3.23.1
     "@swc/helpers": ^0.5.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: ac520438e951fe9d61c9086815e2e8b39df3c275698e155e670bd771a2381cc1be15de946608671fd79bdc7cb547e80903492b4fb446d04fc167a91cf60b1934
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 96a450e19cba760ab1ecb944a142e9494adfc5ebd28f932e3171bd797d194cbd422cc5aaa419afebe27698a1e596ee65326ce6957fd71eb5baf9a257c74c2829
   languageName: node
   linkType: hard
 
-"@react-aria/interactions@npm:^3.21.2":
-  version: 3.21.2
-  resolution: "@react-aria/interactions@npm:3.21.2"
+"@react-aria/gridlist@npm:^3.8.1":
+  version: 3.8.1
+  resolution: "@react-aria/gridlist@npm:3.8.1"
   dependencies:
-    "@react-aria/ssr": ^3.9.3
-    "@react-aria/utils": ^3.24.0
-    "@react-types/shared": ^3.23.0
+    "@react-aria/focus": ^3.17.1
+    "@react-aria/grid": ^3.9.1
+    "@react-aria/i18n": ^3.11.1
+    "@react-aria/interactions": ^3.21.3
+    "@react-aria/selection": ^3.18.1
+    "@react-aria/utils": ^3.24.1
+    "@react-stately/collections": ^3.10.7
+    "@react-stately/list": ^3.10.5
+    "@react-stately/tree": ^3.8.1
+    "@react-types/shared": ^3.23.1
     "@swc/helpers": ^0.5.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: 135b14891c4c6a72b1d61a0e231d3f0111e5549cae17b27a8accb8d18bc7af8bd9886932040f65d756488da5a0555b3de9bc4a870cccbd39f4e56ae3fb28374e
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 4bab520b050cba0353ac5be488b2b573083be35b52acb9ce3c4dce6e7b0880789ef17fb6db5ba0d2c938ad4d9278838446e84c9b424ae9feb4858b8b0b949062
   languageName: node
   linkType: hard
 
-"@react-aria/label@npm:^3.7.7":
-  version: 3.7.7
-  resolution: "@react-aria/label@npm:3.7.7"
+"@react-aria/i18n@npm:^3.11.1":
+  version: 3.11.1
+  resolution: "@react-aria/i18n@npm:3.11.1"
   dependencies:
-    "@react-aria/utils": ^3.24.0
-    "@react-types/shared": ^3.23.0
+    "@internationalized/date": ^3.5.4
+    "@internationalized/message": ^3.1.4
+    "@internationalized/number": ^3.5.3
+    "@internationalized/string": ^3.2.3
+    "@react-aria/ssr": ^3.9.4
+    "@react-aria/utils": ^3.24.1
+    "@react-types/shared": ^3.23.1
     "@swc/helpers": ^0.5.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: f8e2c222627df4da6b18cbff15508b87205e9830f4612fc94fd9270b620aa65c482a94fa5c13e9687142bcca6c2b73405ed5c0288b6329f44e9ba241bab506d3
+  checksum: b79250d287f75ade6795ab82a427ca04197dfc102066f3b79a5111a9b3d6bb4d0f70afaabd7b1122f75053767e5a3f4921b83befad44dd38a761979e9c8abad1
   languageName: node
   linkType: hard
 
-"@react-aria/live-announcer@npm:^3.3.3":
-  version: 3.3.3
-  resolution: "@react-aria/live-announcer@npm:3.3.3"
+"@react-aria/interactions@npm:^3.21.3":
+  version: 3.21.3
+  resolution: "@react-aria/interactions@npm:3.21.3"
+  dependencies:
+    "@react-aria/ssr": ^3.9.4
+    "@react-aria/utils": ^3.24.1
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 73f02f14d00151d1bc147aa2ad27f31c16385434741337e5edad1627e38ec339a651797bcdeea2fe9ab6069a72775805b37176de231bb79495f9f885db60309d
+  languageName: node
+  linkType: hard
+
+"@react-aria/label@npm:^3.7.8":
+  version: 3.7.8
+  resolution: "@react-aria/label@npm:3.7.8"
+  dependencies:
+    "@react-aria/utils": ^3.24.1
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: a7c172684a66611cd9396a9d3a95e6e6632686703eaf81aa55faae07c90d4b214e028b53cfb1a48ea87cfa1937e7fde36bd3fc341a7c1a04482c704a7e40ea8e
+  languageName: node
+  linkType: hard
+
+"@react-aria/link@npm:^3.7.1":
+  version: 3.7.1
+  resolution: "@react-aria/link@npm:3.7.1"
+  dependencies:
+    "@react-aria/focus": ^3.17.1
+    "@react-aria/interactions": ^3.21.3
+    "@react-aria/utils": ^3.24.1
+    "@react-types/link": ^3.5.5
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: dad513ae43fcba395cf2d8a57a569b0d6b8a16e9de3ef81cfb6f665b8dc76840721a9451c096762e3bd741c4a522a6126ad1868eaaf51a7cfaba9c7b48775c30
+  languageName: node
+  linkType: hard
+
+"@react-aria/listbox@npm:^3.12.1":
+  version: 3.12.1
+  resolution: "@react-aria/listbox@npm:3.12.1"
+  dependencies:
+    "@react-aria/interactions": ^3.21.3
+    "@react-aria/label": ^3.7.8
+    "@react-aria/selection": ^3.18.1
+    "@react-aria/utils": ^3.24.1
+    "@react-stately/collections": ^3.10.7
+    "@react-stately/list": ^3.10.5
+    "@react-types/listbox": ^3.4.9
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 0267482dd756fc9fa782d9ab35d55d09cfee72ad52ec4e9f8904d446f2a2f86dd18ec1740634010f1b7f3539b8960ecba602adc0a5a97f5ffaeea31f9457376b
+  languageName: node
+  linkType: hard
+
+"@react-aria/live-announcer@npm:^3.3.4":
+  version: 3.3.4
+  resolution: "@react-aria/live-announcer@npm:3.3.4"
   dependencies:
     "@swc/helpers": ^0.5.0
-  checksum: 99e46a37dfa621168ab7108ee4cf13ddbc36dcbc3d75030985ab9c2f78ec4eb5e992cd9a6a8e57f61abde3291b9b51efd32551a1adcfb43691df2b8dac70f922
+  checksum: 69c86b75686a2c4108da3f959da4c5739b0130ff370468c6d8ea3aaf594315c6ac1577c5b7bdb56629073ad19852d2bef18e412fd7acfd6c390201291ac9dcf9
   languageName: node
   linkType: hard
 
-"@react-aria/spinbutton@npm:^3.6.4":
+"@react-aria/menu@npm:^3.14.1":
+  version: 3.14.1
+  resolution: "@react-aria/menu@npm:3.14.1"
+  dependencies:
+    "@react-aria/focus": ^3.17.1
+    "@react-aria/i18n": ^3.11.1
+    "@react-aria/interactions": ^3.21.3
+    "@react-aria/overlays": ^3.22.1
+    "@react-aria/selection": ^3.18.1
+    "@react-aria/utils": ^3.24.1
+    "@react-stately/collections": ^3.10.7
+    "@react-stately/menu": ^3.7.1
+    "@react-stately/tree": ^3.8.1
+    "@react-types/button": ^3.9.4
+    "@react-types/menu": ^3.9.9
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: b770ab1a61ca7818995c67e5b67e3262041744c2c9e22f6b010204dc31a9856e435789d6bdca807bb61c70a2bd9cde2ec85badba4309743a0b687e7c579f31cb
+  languageName: node
+  linkType: hard
+
+"@react-aria/meter@npm:^3.4.13":
+  version: 3.4.13
+  resolution: "@react-aria/meter@npm:3.4.13"
+  dependencies:
+    "@react-aria/progress": ^3.4.13
+    "@react-types/meter": ^3.4.1
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 209361cd280cbd44088fd150271e0dc0ad833329043f1cc0a625cd637b1a1065ab94c88808d752db731a156020010e9b7a8a70eca61777568a48406c09be47cf
+  languageName: node
+  linkType: hard
+
+"@react-aria/numberfield@npm:^3.11.3":
+  version: 3.11.3
+  resolution: "@react-aria/numberfield@npm:3.11.3"
+  dependencies:
+    "@react-aria/i18n": ^3.11.1
+    "@react-aria/interactions": ^3.21.3
+    "@react-aria/spinbutton": ^3.6.5
+    "@react-aria/textfield": ^3.14.5
+    "@react-aria/utils": ^3.24.1
+    "@react-stately/form": ^3.0.3
+    "@react-stately/numberfield": ^3.9.3
+    "@react-types/button": ^3.9.4
+    "@react-types/numberfield": ^3.8.3
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 6fdd36c200d50893215723a953b6055c6252b8b6b5e5d13f38df1e1b30b6d4e9e4e9b1f6e01268f108f7478aae78edfb4103e5bd1e597f5498ff85ea2a52b3fd
+  languageName: node
+  linkType: hard
+
+"@react-aria/overlays@npm:^3.22.1":
+  version: 3.22.1
+  resolution: "@react-aria/overlays@npm:3.22.1"
+  dependencies:
+    "@react-aria/focus": ^3.17.1
+    "@react-aria/i18n": ^3.11.1
+    "@react-aria/interactions": ^3.21.3
+    "@react-aria/ssr": ^3.9.4
+    "@react-aria/utils": ^3.24.1
+    "@react-aria/visually-hidden": ^3.8.12
+    "@react-stately/overlays": ^3.6.7
+    "@react-types/button": ^3.9.4
+    "@react-types/overlays": ^3.8.7
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: d8203fedb8f46c947be91f5d2bddc8b16176bbd9600186d66444808642894065e45e9575b3427312995ed70e59e3852b3e648242be82836fd9f66968ff94166b
+  languageName: node
+  linkType: hard
+
+"@react-aria/progress@npm:^3.4.13":
+  version: 3.4.13
+  resolution: "@react-aria/progress@npm:3.4.13"
+  dependencies:
+    "@react-aria/i18n": ^3.11.1
+    "@react-aria/label": ^3.7.8
+    "@react-aria/utils": ^3.24.1
+    "@react-types/progress": ^3.5.4
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 70d5fdf81bf2427ef3564ab676521a87a2cbf55dc2dc73b11b90ad7e4316d27eebbacb67eebc7611a67e44a239c84b1184bbc2f45e9de91acc7cfa6b46eba2d6
+  languageName: node
+  linkType: hard
+
+"@react-aria/radio@npm:^3.10.4":
+  version: 3.10.4
+  resolution: "@react-aria/radio@npm:3.10.4"
+  dependencies:
+    "@react-aria/focus": ^3.17.1
+    "@react-aria/form": ^3.0.5
+    "@react-aria/i18n": ^3.11.1
+    "@react-aria/interactions": ^3.21.3
+    "@react-aria/label": ^3.7.8
+    "@react-aria/utils": ^3.24.1
+    "@react-stately/radio": ^3.10.4
+    "@react-types/radio": ^3.8.1
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 06ea95b5bb5dbeb00fbdb0bc7a9274d44db077549cc30408f54f173f66ace521bc77b2861adb29bd404f14c2eeef9d6906581b18f58355e21c3afa56ffc16599
+  languageName: node
+  linkType: hard
+
+"@react-aria/searchfield@npm:^3.7.5":
+  version: 3.7.5
+  resolution: "@react-aria/searchfield@npm:3.7.5"
+  dependencies:
+    "@react-aria/i18n": ^3.11.1
+    "@react-aria/textfield": ^3.14.5
+    "@react-aria/utils": ^3.24.1
+    "@react-stately/searchfield": ^3.5.3
+    "@react-types/button": ^3.9.4
+    "@react-types/searchfield": ^3.5.5
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: e0f1d928a25c27333566eea1684356448dfb6fdcee23cda247bf28a68ac242dceda189999bec6ff547f3c3ed569623e0f2c3c5cbe15da2bdd8bdae703effaea5
+  languageName: node
+  linkType: hard
+
+"@react-aria/select@npm:^3.14.5":
+  version: 3.14.5
+  resolution: "@react-aria/select@npm:3.14.5"
+  dependencies:
+    "@react-aria/form": ^3.0.5
+    "@react-aria/i18n": ^3.11.1
+    "@react-aria/interactions": ^3.21.3
+    "@react-aria/label": ^3.7.8
+    "@react-aria/listbox": ^3.12.1
+    "@react-aria/menu": ^3.14.1
+    "@react-aria/selection": ^3.18.1
+    "@react-aria/utils": ^3.24.1
+    "@react-aria/visually-hidden": ^3.8.12
+    "@react-stately/select": ^3.6.4
+    "@react-types/button": ^3.9.4
+    "@react-types/select": ^3.9.4
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 9be826bb977ab083bdf7cd4ff95111f259c7a5bdbd368d8177fca21bc6b800d4fd4eae04a723ca20ec916fb41d56d843300469a51fb7e57146900d954721e088
+  languageName: node
+  linkType: hard
+
+"@react-aria/selection@npm:^3.18.1":
+  version: 3.18.1
+  resolution: "@react-aria/selection@npm:3.18.1"
+  dependencies:
+    "@react-aria/focus": ^3.17.1
+    "@react-aria/i18n": ^3.11.1
+    "@react-aria/interactions": ^3.21.3
+    "@react-aria/utils": ^3.24.1
+    "@react-stately/selection": ^3.15.1
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: ca14e68c9d70e6b361e2400178860183ef3fd2277dc4deb6e632ef47e8fcc5370b1ec50e9b38b3252718c645eaf40b39f68df09022e5140e1b1fa41c15daa9f8
+  languageName: node
+  linkType: hard
+
+"@react-aria/separator@npm:^3.3.13":
+  version: 3.3.13
+  resolution: "@react-aria/separator@npm:3.3.13"
+  dependencies:
+    "@react-aria/utils": ^3.24.1
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 005fd521f276cdee7467d97cb4b84f4f16018b3f44e6910780aaad9b1812a0df8b3350939a5bb04616cb14087f24ec736490432d6ea0c00c7ff947e088eba02b
+  languageName: node
+  linkType: hard
+
+"@react-aria/slider@npm:^3.7.8":
+  version: 3.7.8
+  resolution: "@react-aria/slider@npm:3.7.8"
+  dependencies:
+    "@react-aria/focus": ^3.17.1
+    "@react-aria/i18n": ^3.11.1
+    "@react-aria/interactions": ^3.21.3
+    "@react-aria/label": ^3.7.8
+    "@react-aria/utils": ^3.24.1
+    "@react-stately/slider": ^3.5.4
+    "@react-types/shared": ^3.23.1
+    "@react-types/slider": ^3.7.3
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 2322e3dbd63d8562752fc815760c08a2f415a5a3080166fa67a8e3ea44957984f3d0842cc959f76843b778eeb06da53781fb1e4a0bf50c5a396b1d1a5a6800a0
+  languageName: node
+  linkType: hard
+
+"@react-aria/spinbutton@npm:^3.6.5":
+  version: 3.6.5
+  resolution: "@react-aria/spinbutton@npm:3.6.5"
+  dependencies:
+    "@react-aria/i18n": ^3.11.1
+    "@react-aria/live-announcer": ^3.3.4
+    "@react-aria/utils": ^3.24.1
+    "@react-types/button": ^3.9.4
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 38327771960da0b6a6aa3082e3830c53463d3a661903a3d1cb709ad19cd079ba4ac489183a1c7a0aba066429c26544f49162520046352ec5c972d9cc6d9b3397
+  languageName: node
+  linkType: hard
+
+"@react-aria/ssr@npm:^3.9.4":
+  version: 3.9.4
+  resolution: "@react-aria/ssr@npm:3.9.4"
+  dependencies:
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: af94a553c260e3d1fb0eea79c9a494b75189ea39c71321bf1b7842397aaba24d54ab6fad98b40659fcc6f2b1e0638757eda1dcaef7140bd6dfdade4ab9ae3509
+  languageName: node
+  linkType: hard
+
+"@react-aria/switch@npm:^3.6.4":
   version: 3.6.4
-  resolution: "@react-aria/spinbutton@npm:3.6.4"
+  resolution: "@react-aria/switch@npm:3.6.4"
   dependencies:
-    "@react-aria/i18n": ^3.11.0
-    "@react-aria/live-announcer": ^3.3.3
-    "@react-aria/utils": ^3.24.0
-    "@react-types/button": ^3.9.3
-    "@react-types/shared": ^3.23.0
+    "@react-aria/toggle": ^3.10.4
+    "@react-stately/toggle": ^3.7.4
+    "@react-types/switch": ^3.5.3
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 61589f62852503136c48843095af13339febe5d8881d2e3e84198c0aa9d16576a1133b7186ff4b35ea2f70716bce3b4b7bab4067210e94ec4c1d3f80c3c597ab
+  languageName: node
+  linkType: hard
+
+"@react-aria/table@npm:^3.14.1":
+  version: 3.14.1
+  resolution: "@react-aria/table@npm:3.14.1"
+  dependencies:
+    "@react-aria/focus": ^3.17.1
+    "@react-aria/grid": ^3.9.1
+    "@react-aria/i18n": ^3.11.1
+    "@react-aria/interactions": ^3.21.3
+    "@react-aria/live-announcer": ^3.3.4
+    "@react-aria/utils": ^3.24.1
+    "@react-aria/visually-hidden": ^3.8.12
+    "@react-stately/collections": ^3.10.7
+    "@react-stately/flags": ^3.0.3
+    "@react-stately/table": ^3.11.8
+    "@react-stately/virtualizer": ^3.7.1
+    "@react-types/checkbox": ^3.8.1
+    "@react-types/grid": ^3.2.6
+    "@react-types/shared": ^3.23.1
+    "@react-types/table": ^3.9.5
     "@swc/helpers": ^0.5.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: 130aea4ce21e3d5eb840f116dfd76ff016696e8516d51f16febbd815aa8a2c0f71f4218b8cfe9e29fff151819b1172f7e5a253323ffeeff8533093de5a22688e
+  checksum: af6d75a02660f37eb847ff957269221f686cdd4bbf7eea82f622ae87425a4a7f583f50126f800a69b7ef7d932ea7c755f614d7c9899567eb7e653043f78bcc3c
   languageName: node
   linkType: hard
 
-"@react-aria/ssr@npm:^3.9.3":
-  version: 3.9.3
-  resolution: "@react-aria/ssr@npm:3.9.3"
+"@react-aria/tabs@npm:^3.9.1":
+  version: 3.9.1
+  resolution: "@react-aria/tabs@npm:3.9.1"
   dependencies:
+    "@react-aria/focus": ^3.17.1
+    "@react-aria/i18n": ^3.11.1
+    "@react-aria/selection": ^3.18.1
+    "@react-aria/utils": ^3.24.1
+    "@react-stately/tabs": ^3.6.6
+    "@react-types/shared": ^3.23.1
+    "@react-types/tabs": ^3.3.7
     "@swc/helpers": ^0.5.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: 3243c64390aba4a1fc25db02bb5a9794e767480bf01945834a61f2c1ec6e11dd9c3c8c20355264ec83a46d1004031be93b421bbbc23c7f0a71351a094cefc5e1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 1992c76e556dcd0a7430fa5b9e2818dbb0f061382a7f74254074b68ec5966242bf8f7c29666089b7b129d68a821d0b45df034b6e4f6342a4202b77e02c57ba59
   languageName: node
   linkType: hard
 
-"@react-aria/utils@npm:^3.24.0":
-  version: 3.24.0
-  resolution: "@react-aria/utils@npm:3.24.0"
+"@react-aria/tag@npm:^3.4.1":
+  version: 3.4.1
+  resolution: "@react-aria/tag@npm:3.4.1"
   dependencies:
-    "@react-aria/ssr": ^3.9.3
-    "@react-stately/utils": ^3.10.0
-    "@react-types/shared": ^3.23.0
+    "@react-aria/gridlist": ^3.8.1
+    "@react-aria/i18n": ^3.11.1
+    "@react-aria/interactions": ^3.21.3
+    "@react-aria/label": ^3.7.8
+    "@react-aria/selection": ^3.18.1
+    "@react-aria/utils": ^3.24.1
+    "@react-stately/list": ^3.10.5
+    "@react-types/button": ^3.9.4
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 1d0bbc3e5a708e7347a961f46f2a5d1a313301c08bcdebc9e04f0a1d69f56e614df0a6c5cedf4858539d8d5c2ef09ccb89099aba3468e5327c61478daa68abfb
+  languageName: node
+  linkType: hard
+
+"@react-aria/textfield@npm:^3.14.5":
+  version: 3.14.5
+  resolution: "@react-aria/textfield@npm:3.14.5"
+  dependencies:
+    "@react-aria/focus": ^3.17.1
+    "@react-aria/form": ^3.0.5
+    "@react-aria/label": ^3.7.8
+    "@react-aria/utils": ^3.24.1
+    "@react-stately/form": ^3.0.3
+    "@react-stately/utils": ^3.10.1
+    "@react-types/shared": ^3.23.1
+    "@react-types/textfield": ^3.9.3
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 3d5272170e4a0b98b041439d2ecdb62c35db8e4642b378a9c4690b1c3613337e1090e0f5b47987a3a7f72e2e1cd6ea12006a877fcd4cf7d383604b0ffcc9deaf
+  languageName: node
+  linkType: hard
+
+"@react-aria/toggle@npm:^3.10.4":
+  version: 3.10.4
+  resolution: "@react-aria/toggle@npm:3.10.4"
+  dependencies:
+    "@react-aria/focus": ^3.17.1
+    "@react-aria/interactions": ^3.21.3
+    "@react-aria/utils": ^3.24.1
+    "@react-stately/toggle": ^3.7.4
+    "@react-types/checkbox": ^3.8.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 2f514a86b37a006e97bfb083d7f8a58b9051294d3f008180464c644f2503eeba0264367061be540c0d225217dd436d32772e97414b638acc9df79207088a2297
+  languageName: node
+  linkType: hard
+
+"@react-aria/tooltip@npm:^3.7.4":
+  version: 3.7.4
+  resolution: "@react-aria/tooltip@npm:3.7.4"
+  dependencies:
+    "@react-aria/focus": ^3.17.1
+    "@react-aria/interactions": ^3.21.3
+    "@react-aria/utils": ^3.24.1
+    "@react-stately/tooltip": ^3.4.9
+    "@react-types/shared": ^3.23.1
+    "@react-types/tooltip": ^3.4.9
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: e1ef6d06deeb4f674d873eee2a8595f3cc5ec96e177d9cadf517cbf6ee0765ce08ed4b86702aefb5fb0242e894cc5292eeb444674dc440bb87a6a83776e55fed
+  languageName: node
+  linkType: hard
+
+"@react-aria/utils@npm:^3.24.1":
+  version: 3.24.1
+  resolution: "@react-aria/utils@npm:3.24.1"
+  dependencies:
+    "@react-aria/ssr": ^3.9.4
+    "@react-stately/utils": ^3.10.1
+    "@react-types/shared": ^3.23.1
     "@swc/helpers": ^0.5.0
     clsx: ^2.0.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: 8b79ee7a470032a598774d8ed45f0577cb21558e05188cd1c2628ade33082746d70b197fc6a0afb9ecaa924e6604eac649184031daeb9c2f763e296ffacdfad9
+  checksum: 06f96492ecd609956bfc303eb5572c949009348adbc2db1a4c6de4b5d3ed6b3af4439ba7f4430774658423402ee411978732b3b6de1d4acf9497c20c80041a32
   languageName: node
   linkType: hard
 
-"@react-stately/datepicker@npm:^3.5.0, @react-stately/datepicker@npm:^3.9.3":
+"@react-aria/visually-hidden@npm:^3.8.12":
+  version: 3.8.12
+  resolution: "@react-aria/visually-hidden@npm:3.8.12"
+  dependencies:
+    "@react-aria/interactions": ^3.21.3
+    "@react-aria/utils": ^3.24.1
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 0f61f52fbbb28f153a169b770b8e3b237a6e407fbeaca2dabdd4b19dfe42fb28e77d669731e7a271258ef61f8a86621fefb81fe1d248b110763070eb0c73c8ef
+  languageName: node
+  linkType: hard
+
+"@react-stately/calendar@npm:^3.5.1":
+  version: 3.5.1
+  resolution: "@react-stately/calendar@npm:3.5.1"
+  dependencies:
+    "@internationalized/date": ^3.5.4
+    "@react-stately/utils": ^3.10.1
+    "@react-types/calendar": ^3.4.6
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: a35b28dff7f6c6099b7b80077a3c367f986e7284b80903077570ea75ff0adef2f7f0c087e6ea71aed1850a33d11e15fdc561d5fcd8a9574b57460df0dae24308
+  languageName: node
+  linkType: hard
+
+"@react-stately/checkbox@npm:^3.6.5":
+  version: 3.6.5
+  resolution: "@react-stately/checkbox@npm:3.6.5"
+  dependencies:
+    "@react-stately/form": ^3.0.3
+    "@react-stately/utils": ^3.10.1
+    "@react-types/checkbox": ^3.8.1
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 3c1360d8797d49ecbc317b02adb433e3b8e68a9dd9e5de3ab8ad31efe69dd9ca9a64f7acce74c013d86dc4c260281367d619d944cc2c9b368320be0f0978056a
+  languageName: node
+  linkType: hard
+
+"@react-stately/collections@npm:^3.10.7":
+  version: 3.10.7
+  resolution: "@react-stately/collections@npm:3.10.7"
+  dependencies:
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: e60a04806f79fe0c303020c7686932de050181ee83eabd8873827fa6fae56cb4949c3b848aa1f4b0b4da60bf128a4df04fc0140c834e24e7841055e21006092f
+  languageName: node
+  linkType: hard
+
+"@react-stately/combobox@npm:^3.8.4":
+  version: 3.8.4
+  resolution: "@react-stately/combobox@npm:3.8.4"
+  dependencies:
+    "@react-stately/collections": ^3.10.7
+    "@react-stately/form": ^3.0.3
+    "@react-stately/list": ^3.10.5
+    "@react-stately/overlays": ^3.6.7
+    "@react-stately/select": ^3.6.4
+    "@react-stately/utils": ^3.10.1
+    "@react-types/combobox": ^3.11.1
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: a6fb71752a5d8e52917de43e150191e42d08b962fefa7a5fdf109135a7696a95463a538b42c9176dcedf499d07bd012a5d5e03c6e242567589eee9dc1a5e5521
+  languageName: node
+  linkType: hard
+
+"@react-stately/data@npm:^3.11.4":
+  version: 3.11.4
+  resolution: "@react-stately/data@npm:3.11.4"
+  dependencies:
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 9a45bb8d2ad756dbaf42de5ca8b52a0773a47b33d9b198f5b61ff8e8687dc32c4a4fc9c9068f8fe2d7c6bb8666aeaeded46aaf006a3bef459d5f8410242f1477
+  languageName: node
+  linkType: hard
+
+"@react-stately/datepicker@npm:^3.9.4":
+  version: 3.9.4
+  resolution: "@react-stately/datepicker@npm:3.9.4"
+  dependencies:
+    "@internationalized/date": ^3.5.4
+    "@internationalized/string": ^3.2.3
+    "@react-stately/form": ^3.0.3
+    "@react-stately/overlays": ^3.6.7
+    "@react-stately/utils": ^3.10.1
+    "@react-types/datepicker": ^3.7.4
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 3c54c4d5c6c14717ace2eab045fa4aa59e6e1c13aac9051db32002063754800a9f3b10e8780087ba9d6fab263118a08f3b1e6185d3363232a9e6e4b8ed3decf4
+  languageName: node
+  linkType: hard
+
+"@react-stately/dnd@npm:^3.3.1":
+  version: 3.3.1
+  resolution: "@react-stately/dnd@npm:3.3.1"
+  dependencies:
+    "@react-stately/selection": ^3.15.1
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: a1226e99136ce884282642f0b68e77abbba3bf2ad039752994f7baaf13626cb2f015f3b5bcfd70b0e7a2a4680873bfade99aa6ca4d0caa2665616b161cdde2a6
+  languageName: node
+  linkType: hard
+
+"@react-stately/flags@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "@react-stately/flags@npm:3.0.3"
+  dependencies:
+    "@swc/helpers": ^0.5.0
+  checksum: 314a5885e2060dc56a32d1bae892af1f7644e14e66aa3ae3f6c0b1b4a6a1a8ded0e03adcea24bcfb9df3b87cd77f2139fde8a3d1098a0e3ba3604c3c8916385e
+  languageName: node
+  linkType: hard
+
+"@react-stately/form@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "@react-stately/form@npm:3.0.3"
+  dependencies:
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: b2ddb7219116a9d6d467a34d59ab404c1cdec77ba3dfc1d4d7640a990e2bea19699e262962219d0c7bde2f67073faa10feaf65b111956b6c489d520e23dd794f
+  languageName: node
+  linkType: hard
+
+"@react-stately/grid@npm:^3.8.7":
+  version: 3.8.7
+  resolution: "@react-stately/grid@npm:3.8.7"
+  dependencies:
+    "@react-stately/collections": ^3.10.7
+    "@react-stately/selection": ^3.15.1
+    "@react-types/grid": ^3.2.6
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: effa2c29791f44239513d9f3857de58062329f4e50fb8a15e431cff81044a541481c8fb6a80d767924493a7ebf605d9a464f9a030a5774db9b574ccf85c2efe3
+  languageName: node
+  linkType: hard
+
+"@react-stately/list@npm:^3.10.5":
+  version: 3.10.5
+  resolution: "@react-stately/list@npm:3.10.5"
+  dependencies:
+    "@react-stately/collections": ^3.10.7
+    "@react-stately/selection": ^3.15.1
+    "@react-stately/utils": ^3.10.1
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: b5fd1c2d64f81b952a2602342c47d41315933e642594e55c5d9c436035d168f36b876570f0eb59f11153fc07dccbf3712eedce87217f581eda6827686382911e
+  languageName: node
+  linkType: hard
+
+"@react-stately/menu@npm:^3.7.1":
+  version: 3.7.1
+  resolution: "@react-stately/menu@npm:3.7.1"
+  dependencies:
+    "@react-stately/overlays": ^3.6.7
+    "@react-types/menu": ^3.9.9
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 9c6b5249a838d3edca9c9f3cb91180284f150faf0ae6b2a36c1101d2527eabdd549ba37ccb9e9bf8598f0a453dc7139aba378529089d81ebc9f2ee18f31bab74
+  languageName: node
+  linkType: hard
+
+"@react-stately/numberfield@npm:^3.9.3":
   version: 3.9.3
-  resolution: "@react-stately/datepicker@npm:3.9.3"
+  resolution: "@react-stately/numberfield@npm:3.9.3"
   dependencies:
-    "@internationalized/date": ^3.5.3
-    "@internationalized/string": ^3.2.2
-    "@react-stately/form": ^3.0.2
-    "@react-stately/overlays": ^3.6.6
-    "@react-stately/utils": ^3.10.0
-    "@react-types/datepicker": ^3.7.3
-    "@react-types/shared": ^3.23.0
+    "@internationalized/number": ^3.5.3
+    "@react-stately/form": ^3.0.3
+    "@react-stately/utils": ^3.10.1
+    "@react-types/numberfield": ^3.8.3
     "@swc/helpers": ^0.5.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: c523a72901422c942ec2e6926745d8984a3915427df476ff1ef2d59e9cefddb23b0292879d7f99bb91ed01026e3184941cabccc89f3231d84ebbed26987f1873
+  checksum: 8a05af44a94820ecf47db752fda04c5a0363761536166c11f2660d64402f9fa6ed11b55ff1d9fc71e5c66788e3cb6bf74a13e14a95b9f4a6348d15e469d0e5be
   languageName: node
   linkType: hard
 
-"@react-stately/form@npm:^3.0.2":
-  version: 3.0.2
-  resolution: "@react-stately/form@npm:3.0.2"
+"@react-stately/overlays@npm:^3.6.7":
+  version: 3.6.7
+  resolution: "@react-stately/overlays@npm:3.6.7"
   dependencies:
-    "@react-types/shared": ^3.23.0
+    "@react-stately/utils": ^3.10.1
+    "@react-types/overlays": ^3.8.7
     "@swc/helpers": ^0.5.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: 83f3174859e1199d87816c85d7e6ffc76af726ae63e413fd6d19bc588c6b649684d8af7f7903bf2e0649d320899e6ba22e02ef7106a4f08a9d803f63cec3c0d8
+  checksum: 3d19bf561f56fbfe12b309a51318f71c0d76bd94e971012cc3200b2eed8cc0cc7cd57853dbc6737dab3c37fead9f1e71b162ef7e0643ffb4ebab0591b6e6211f
   languageName: node
   linkType: hard
 
-"@react-stately/overlays@npm:^3.6.6":
+"@react-stately/radio@npm:^3.10.4":
+  version: 3.10.4
+  resolution: "@react-stately/radio@npm:3.10.4"
+  dependencies:
+    "@react-stately/form": ^3.0.3
+    "@react-stately/utils": ^3.10.1
+    "@react-types/radio": ^3.8.1
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 9ba3eb6bf54da949b11571f941595f69f201f5f6d1766faa9074f4a4a5cfdebf7cfd56057eecf0c31be7b91fc6edc9fe314d84423418541576270bd80044984f
+  languageName: node
+  linkType: hard
+
+"@react-stately/searchfield@npm:^3.5.3":
+  version: 3.5.3
+  resolution: "@react-stately/searchfield@npm:3.5.3"
+  dependencies:
+    "@react-stately/utils": ^3.10.1
+    "@react-types/searchfield": ^3.5.5
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 4e9042a53b55a6b7e1f9af93374848d426b200a0089ad8590151c4f9f665be0c31b403efdba7840622457d65ddcb6987d52284dc618d91d65a1dd8985158f5e5
+  languageName: node
+  linkType: hard
+
+"@react-stately/select@npm:^3.6.4":
+  version: 3.6.4
+  resolution: "@react-stately/select@npm:3.6.4"
+  dependencies:
+    "@react-stately/form": ^3.0.3
+    "@react-stately/list": ^3.10.5
+    "@react-stately/overlays": ^3.6.7
+    "@react-types/select": ^3.9.4
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 100b8badeb96e990328a81bd387b30b1d1c1ec57188fcc393012428c29a13f887224acaae37f9a8e4c8a6fd466f738076c3cb117a1884d05e4d6b3ba2519d2c3
+  languageName: node
+  linkType: hard
+
+"@react-stately/selection@npm:^3.15.1":
+  version: 3.15.1
+  resolution: "@react-stately/selection@npm:3.15.1"
+  dependencies:
+    "@react-stately/collections": ^3.10.7
+    "@react-stately/utils": ^3.10.1
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: aa893eb4fddd90f255904aa65ba81bf1a8228c516e08c2323dda01d2dd4a9899217b3ad5d8d404e708afcb5e4f218a5b83d7587324ae16637da8d6a57922e3c4
+  languageName: node
+  linkType: hard
+
+"@react-stately/slider@npm:^3.5.4":
+  version: 3.5.4
+  resolution: "@react-stately/slider@npm:3.5.4"
+  dependencies:
+    "@react-stately/utils": ^3.10.1
+    "@react-types/shared": ^3.23.1
+    "@react-types/slider": ^3.7.3
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 091cd15bc0ede49df7ff55d0bb696ce798df380a494d9b0f6ddbdc72c3c9d2ff68416f970aaac359960cfeb61c5f75e91241be7d1fc1c2694b65e73ac57e6ffa
+  languageName: node
+  linkType: hard
+
+"@react-stately/table@npm:^3.11.8":
+  version: 3.11.8
+  resolution: "@react-stately/table@npm:3.11.8"
+  dependencies:
+    "@react-stately/collections": ^3.10.7
+    "@react-stately/flags": ^3.0.3
+    "@react-stately/grid": ^3.8.7
+    "@react-stately/selection": ^3.15.1
+    "@react-stately/utils": ^3.10.1
+    "@react-types/grid": ^3.2.6
+    "@react-types/shared": ^3.23.1
+    "@react-types/table": ^3.9.5
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: af09c6a8fa42922157039517db09ec7183da7bf00d25eef42b793253ff7dbac27679b4168f62ec75586832ec20bc146d396929a0a9e49175bc2426529ed8ede3
+  languageName: node
+  linkType: hard
+
+"@react-stately/tabs@npm:^3.6.6":
   version: 3.6.6
-  resolution: "@react-stately/overlays@npm:3.6.6"
+  resolution: "@react-stately/tabs@npm:3.6.6"
   dependencies:
-    "@react-stately/utils": ^3.10.0
-    "@react-types/overlays": ^3.8.6
+    "@react-stately/list": ^3.10.5
+    "@react-types/shared": ^3.23.1
+    "@react-types/tabs": ^3.3.7
     "@swc/helpers": ^0.5.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: 1438bef13516d1c2a4957ca3a76a0a355ac821de803ee1dc6b0a7354dcab6c172d46fcf931d12f1a74be8c6af111cab77da5fa34af014a6b44f5cd6baa614228
+  checksum: f147905403e9feabeabfad889ddd7465fd8664506367b0375a88dc458019ad63d4fc96dbfe126c96e49edd9f19a63a33f117d97d6232caadd1df4785d6cce52f
   languageName: node
   linkType: hard
 
-"@react-stately/utils@npm:^3.10.0":
-  version: 3.10.0
-  resolution: "@react-stately/utils@npm:3.10.0"
+"@react-stately/toggle@npm:^3.7.4":
+  version: 3.7.4
+  resolution: "@react-stately/toggle@npm:3.7.4"
+  dependencies:
+    "@react-stately/utils": ^3.10.1
+    "@react-types/checkbox": ^3.8.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: ae7d482163d597a82bfbc56dc1a694cb68bd92295c110149df52d3e8c8297c8bc031434cb873564defb036f26df8b3677c5f443d3ff074430ff91efd818b905a
+  languageName: node
+  linkType: hard
+
+"@react-stately/tooltip@npm:^3.4.9":
+  version: 3.4.9
+  resolution: "@react-stately/tooltip@npm:3.4.9"
+  dependencies:
+    "@react-stately/overlays": ^3.6.7
+    "@react-types/tooltip": ^3.4.9
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: a5934c858fb23a25c3dd2594da8663cae0e13061f5b519804870e9599a82b55ed2f31dd3914eddf2b39c53206d4590a68d36d48dfee1f40af275470d4f794bf2
+  languageName: node
+  linkType: hard
+
+"@react-stately/tree@npm:^3.8.1":
+  version: 3.8.1
+  resolution: "@react-stately/tree@npm:3.8.1"
+  dependencies:
+    "@react-stately/collections": ^3.10.7
+    "@react-stately/selection": ^3.15.1
+    "@react-stately/utils": ^3.10.1
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: af29092b35d025150c9aece42407045241e225d37b4541a7543058c2b024879f84f3c94d835d3f846258bcbb1c1c09f7a8bf2e93f6ac4e115902d83a0eea9bd5
+  languageName: node
+  linkType: hard
+
+"@react-stately/utils@npm:^3.10.1":
+  version: 3.10.1
+  resolution: "@react-stately/utils@npm:3.10.1"
   dependencies:
     "@swc/helpers": ^0.5.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: 5d231c8393dba617c1ff84fb5fca0478af9474ccafec1012abd50c69c9f24c091ded6ec6a2f955a4f4d0fe130ea987728cd9b916e18831a2dab1d37ac2407967
+  checksum: 215eaeec22d592598186d61a801d0ec49794bb455b63ad95869453888f811bab5705a204c9e279c4bc7c4a33d0d0da4cfdecc1be75f7925f81a8753a5d930052
   languageName: node
   linkType: hard
 
-"@react-types/button@npm:^3.9.3":
-  version: 3.9.3
-  resolution: "@react-types/button@npm:3.9.3"
+"@react-stately/virtualizer@npm:^3.7.1":
+  version: 3.7.1
+  resolution: "@react-stately/virtualizer@npm:3.7.1"
   dependencies:
-    "@react-types/shared": ^3.23.0
+    "@react-aria/utils": ^3.24.1
+    "@react-types/shared": ^3.23.1
+    "@swc/helpers": ^0.5.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: 4447f16762573248f809f7602034da4562116a8d0e2d2213bb7eb91f0b23f161440959e482c280eb424c73013bfecc63b83cdd60939438852b3cb68c16073272
+  checksum: 40836488782b26e3028ece3a6e95da310dba3e51703288bcef9be35e06384bc0e98456b92e94016b05bba153db3d4968af7fd71a6d41159182d86fc886494aac
   languageName: node
   linkType: hard
 
-"@react-types/calendar@npm:^3.4.5":
-  version: 3.4.5
-  resolution: "@react-types/calendar@npm:3.4.5"
+"@react-types/breadcrumbs@npm:^3.7.5":
+  version: 3.7.5
+  resolution: "@react-types/breadcrumbs@npm:3.7.5"
   dependencies:
-    "@internationalized/date": ^3.5.3
-    "@react-types/shared": ^3.23.0
+    "@react-types/link": ^3.5.5
+    "@react-types/shared": ^3.23.1
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: 45e92fdbcbe72cf01acaab93bee1d8c44d8cbcb0dd4f771bed10217b562ed9fb4a61674dab0d7ad0145c71e4dda57891f3b43ffb5aece43c7982679a1ffd98ce
+  checksum: 90cc1b1a461aa75ce7e4bd8fe799c25b85ecaef2c2c6c1930c4b48a379ed162c5de3ea6df1675feed32d56566951867d4e1995f3030438d0738edd36dced0b83
   languageName: node
   linkType: hard
 
-"@react-types/datepicker@npm:^3.7.3":
+"@react-types/button@npm:^3.9.4":
+  version: 3.9.4
+  resolution: "@react-types/button@npm:3.9.4"
+  dependencies:
+    "@react-types/shared": ^3.23.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: f15b417d4baae0ef11a62e0eadffca40274b6771bcde778f3a1a5286e54f9645db76ebc3de4b58598c1ef694cd7a6d1c1558159a8301c5e5cdd152f7183d20a9
+  languageName: node
+  linkType: hard
+
+"@react-types/calendar@npm:^3.4.6":
+  version: 3.4.6
+  resolution: "@react-types/calendar@npm:3.4.6"
+  dependencies:
+    "@internationalized/date": ^3.5.4
+    "@react-types/shared": ^3.23.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: ac6ad25112a7c0f671ed61dd529c4df964fc7bb305a4689ac264444425cf4e1f2e8c4ac4168c5e979f6ff041553e9bfb3b9e298d6dcf9be5553c87655fccc708
+  languageName: node
+  linkType: hard
+
+"@react-types/checkbox@npm:^3.8.1":
+  version: 3.8.1
+  resolution: "@react-types/checkbox@npm:3.8.1"
+  dependencies:
+    "@react-types/shared": ^3.23.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: edca4836c33bc0b1fe74283d7cc0e7b6d2c1fe2b75bdf9177387ceb9b2439ecd555c971d19648eaac9062d5672befadef1ae8bd48234e7ac91ae96f2efd657d8
+  languageName: node
+  linkType: hard
+
+"@react-types/combobox@npm:^3.11.1":
+  version: 3.11.1
+  resolution: "@react-types/combobox@npm:3.11.1"
+  dependencies:
+    "@react-types/shared": ^3.23.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 418afac77e1272108a3df93482bf0a1d7820c5fca2caa062586e888592e3bf65cb908436fc3eed6443e19fbb1c1e4a14adb2aae72d232e76a96903928ae664e4
+  languageName: node
+  linkType: hard
+
+"@react-types/datepicker@npm:^3.7.4":
+  version: 3.7.4
+  resolution: "@react-types/datepicker@npm:3.7.4"
+  dependencies:
+    "@internationalized/date": ^3.5.4
+    "@react-types/calendar": ^3.4.6
+    "@react-types/overlays": ^3.8.7
+    "@react-types/shared": ^3.23.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: ec4face6299f6607950e827ba6901174d3b66e598c59bba35e54ca93a25fde12665f3af6330af3a6add8f09ccdb1f0c61eb55070c173743ff9c458e703d1d14d
+  languageName: node
+  linkType: hard
+
+"@react-types/dialog@npm:^3.5.10":
+  version: 3.5.10
+  resolution: "@react-types/dialog@npm:3.5.10"
+  dependencies:
+    "@react-types/overlays": ^3.8.7
+    "@react-types/shared": ^3.23.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 4cee4d47b4bef657f24bdb09c7fe83dcb54f24869525f4db163a3d071fe3e6fa6403f8415b92a860c3ed5e0c4f025673fc69f56842f284c2de3f6819b4c87bda
+  languageName: node
+  linkType: hard
+
+"@react-types/grid@npm:^3.2.6":
+  version: 3.2.6
+  resolution: "@react-types/grid@npm:3.2.6"
+  dependencies:
+    "@react-types/shared": ^3.23.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: ce38e769e80ee8e12fee8455a2723ce0f7f0b375aea03b683f5112ab41a4d7c3e9ef6d351d95640876681875a1c635a3bda5e6f686d61933aa96662091afe135
+  languageName: node
+  linkType: hard
+
+"@react-types/link@npm:^3.5.5":
+  version: 3.5.5
+  resolution: "@react-types/link@npm:3.5.5"
+  dependencies:
+    "@react-types/shared": ^3.23.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 1689892c01e605d9789f9a47b3f8e6546660482755d7fe23dc814b703312f071d85158bb4ca672df2b2f1563b18822d61fcfde38951610000765a992c1f6da3d
+  languageName: node
+  linkType: hard
+
+"@react-types/listbox@npm:^3.4.9":
+  version: 3.4.9
+  resolution: "@react-types/listbox@npm:3.4.9"
+  dependencies:
+    "@react-types/shared": ^3.23.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: f0ceb423f796df5918d2443e5507bf9bb61d4c73f99d98162ef5445b104346cec62f4446de856002f36ad95838d657c6e24faa16c68c2079c5cbe2650e88bb1f
+  languageName: node
+  linkType: hard
+
+"@react-types/menu@npm:^3.9.9":
+  version: 3.9.9
+  resolution: "@react-types/menu@npm:3.9.9"
+  dependencies:
+    "@react-types/overlays": ^3.8.7
+    "@react-types/shared": ^3.23.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: f57a570be8b18a3879780d05f45d6fd3d0aeb7c185bb5da54a8a0810dba4d8867fe4eb0f696a7e800480649c954e52d680fb7f29bb751f72790e32f5068ec8f0
+  languageName: node
+  linkType: hard
+
+"@react-types/meter@npm:^3.4.1":
+  version: 3.4.1
+  resolution: "@react-types/meter@npm:3.4.1"
+  dependencies:
+    "@react-types/progress": ^3.5.4
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 856b28a9097d4efd64cd4f80fb5f2bb24e2813d74d48a1dd8395cb0cb0c56cc24fe755bda3bc506e8cde31b634205ceb7aaa291c2660b5d3cdd7a1691b4524fc
+  languageName: node
+  linkType: hard
+
+"@react-types/numberfield@npm:^3.8.3":
+  version: 3.8.3
+  resolution: "@react-types/numberfield@npm:3.8.3"
+  dependencies:
+    "@react-types/shared": ^3.23.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: ef00bc842f1dcf209f1a735e996fd26e7df21dd72a43151a6bf45bb988572b2841a6cada59fcf672d0019a3cfeb0be888b700f881f1542391c06bc1f9fedfcaf
+  languageName: node
+  linkType: hard
+
+"@react-types/overlays@npm:^3.8.7":
+  version: 3.8.7
+  resolution: "@react-types/overlays@npm:3.8.7"
+  dependencies:
+    "@react-types/shared": ^3.23.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 8a3129065c37040b53707961a0182681289ea340a65ccb457c64e5eb444f351c1b735bef8ba85fdfbd20c0a1f08941a55d5db67a803d8362cc00eab41aa86c3f
+  languageName: node
+  linkType: hard
+
+"@react-types/progress@npm:^3.5.4":
+  version: 3.5.4
+  resolution: "@react-types/progress@npm:3.5.4"
+  dependencies:
+    "@react-types/shared": ^3.23.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 5a56ac1a075148f63013569086a0837ae63f2c2c933ddccc639c85c04c4d05f43c2e248103dc95bc5c5487e818062fa8bbeb6089a67245317fd9723870cddbed
+  languageName: node
+  linkType: hard
+
+"@react-types/radio@npm:^3.8.1":
+  version: 3.8.1
+  resolution: "@react-types/radio@npm:3.8.1"
+  dependencies:
+    "@react-types/shared": ^3.23.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 275215a891c2b1efc8346418b7ae59ee3d258a6cf906932cb763cba1fd9d755ac4ef88b92cf457a297c3ef9eb85a9b75b6b54446619a33a32494392469c4bd5e
+  languageName: node
+  linkType: hard
+
+"@react-types/searchfield@npm:^3.5.5":
+  version: 3.5.5
+  resolution: "@react-types/searchfield@npm:3.5.5"
+  dependencies:
+    "@react-types/shared": ^3.23.1
+    "@react-types/textfield": ^3.9.3
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: e365ebe1b8719d8dff1312d624d5b8bd14cef4094ba6ab09093d93b7d63f144125200f358828bfe827350c5e8130f56b975de84c3890a5b4269f64728783c8c7
+  languageName: node
+  linkType: hard
+
+"@react-types/select@npm:^3.9.4":
+  version: 3.9.4
+  resolution: "@react-types/select@npm:3.9.4"
+  dependencies:
+    "@react-types/shared": ^3.23.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: ff63c727704f3ac55883fbd71953e18cbe570dc0a2506d745f09ed3345a2a168c9c5ad701b8ea3807f8d9efe37c88433c7d165cd02aea3198c0ee564b023d720
+  languageName: node
+  linkType: hard
+
+"@react-types/shared@npm:^3.23.1":
+  version: 3.23.1
+  resolution: "@react-types/shared@npm:3.23.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 56f5f759c10f1d9391262b2045a469daaa8d3d55f8e99d9b97ac17e387c6bc819afd89a7a8321e11e7c97681cc40fbf3c905cc0d0fe902b9cf39a4918a963269
+  languageName: node
+  linkType: hard
+
+"@react-types/slider@npm:^3.7.3":
   version: 3.7.3
-  resolution: "@react-types/datepicker@npm:3.7.3"
+  resolution: "@react-types/slider@npm:3.7.3"
   dependencies:
-    "@internationalized/date": ^3.5.3
-    "@react-types/calendar": ^3.4.5
-    "@react-types/overlays": ^3.8.6
-    "@react-types/shared": ^3.23.0
+    "@react-types/shared": ^3.23.1
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: 1f001cb716c18a41490015bd413a6ea234d78af4e26554113e5ebd71785506cbf588bd8121f0a7eda9b9b9ccd9d5d867922fdcdf19b5391e5ca76e52c262abc3
+  checksum: 808cdb3dc722d8a431641bc846bd3a9233e10a942d70a5ad2eb87149b45342cef41ac36c2ecdabe88a151029de70bc517d5e1bd90c72f1bd1be57ac315712e17
   languageName: node
   linkType: hard
 
-"@react-types/dialog@npm:^3.5.9":
-  version: 3.5.9
-  resolution: "@react-types/dialog@npm:3.5.9"
+"@react-types/switch@npm:^3.5.3":
+  version: 3.5.3
+  resolution: "@react-types/switch@npm:3.5.3"
   dependencies:
-    "@react-types/overlays": ^3.8.6
-    "@react-types/shared": ^3.23.0
+    "@react-types/shared": ^3.23.1
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: a3c60c85c529e29932a5d7f9f56da21f6862c2869ce9898a34bd9a8e800212a135f873fbf1fdc5aaff9eab800a851069adfca988ccb50e09ae4eece02dd569db
+  checksum: ec846ce46adb6de023111a825d907a837fb42ea6bb856eb8ebe7e1eceaeadfcb80a9f7c1ce6d066c36144557aac0c5d43a33b013dce32d1cf44b69fbef9f8561
   languageName: node
   linkType: hard
 
-"@react-types/overlays@npm:^3.8.6":
-  version: 3.8.6
-  resolution: "@react-types/overlays@npm:3.8.6"
+"@react-types/table@npm:^3.9.5":
+  version: 3.9.5
+  resolution: "@react-types/table@npm:3.9.5"
   dependencies:
-    "@react-types/shared": ^3.23.0
+    "@react-types/grid": ^3.2.6
+    "@react-types/shared": ^3.23.1
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: d2efbe26c47254941195249e2f600ba0d0f85b326e120d7ad7b08665af3cbfc7f1cf223b18a2a0058c909bdc7f8a1fd466c71884b8de50e2aa76e5c8f685bd04
+  checksum: 43638a82c224e7ffbafa4b0605eb5db36cd03cf4ec26d5bfb32fb15a3aadbfb8e72cdc8247a5d346c54d23ce90f140c42ed2718cac245d67ba99162310797ecc
   languageName: node
   linkType: hard
 
-"@react-types/shared@npm:^3.23.0":
-  version: 3.23.0
-  resolution: "@react-types/shared@npm:3.23.0"
+"@react-types/tabs@npm:^3.3.7":
+  version: 3.3.7
+  resolution: "@react-types/tabs@npm:3.3.7"
+  dependencies:
+    "@react-types/shared": ^3.23.1
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: f2c76b51b065a277516d7342697bb06e3f0cb22204ddd034da699405c79acbf1752bfb005298ef9c7a79dc9a068d7c756cffcfb920bb591624803a7ab29ef7b6
+  checksum: a00c9d28eced52238e67c4b5b6d65af2ce0ac9f59746f95e4d23804e1f64484c13c6f1ac208419acd69416e4713107dbd02ff9b46758b249ba7b8856e4e4acec
+  languageName: node
+  linkType: hard
+
+"@react-types/textfield@npm:^3.9.3":
+  version: 3.9.3
+  resolution: "@react-types/textfield@npm:3.9.3"
+  dependencies:
+    "@react-types/shared": ^3.23.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 36a341a4b80694ac1cbdf5300424e20b35c655c6be827415aa30ec8b43804c1baa75ed483e5deaaead70b1944e5d545361cf41b2bedaffe2aac29347d7213b2f
+  languageName: node
+  linkType: hard
+
+"@react-types/tooltip@npm:^3.4.9":
+  version: 3.4.9
+  resolution: "@react-types/tooltip@npm:3.4.9"
+  dependencies:
+    "@react-types/overlays": ^3.8.7
+    "@react-types/shared": ^3.23.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 0214679d6662ae5fae492d3ffa0e7421f15c21f740a1fe7255147c34ea8f1dd161d9a9e176a02eabed841017f2fad4a13080297736fedd75a2f0c64450a028e2
   languageName: node
   linkType: hard
 
@@ -14934,7 +16011,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"date-fns@npm:^3.2.0":
+"date-fns@npm:^3.6.0":
   version: 3.6.0
   resolution: "date-fns@npm:3.6.0"
   checksum: 0b5fb981590ef2f8e5a3ba6cd6d77faece0ea7f7158948f2eaae7bbb7c80a8f63ae30b01236c2923cf89bb3719c33aeb150c715ea4fe4e86e37dcf06bed42fb6
@@ -24859,6 +25936,54 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-aria@npm:^3.33.1":
+  version: 3.33.1
+  resolution: "react-aria@npm:3.33.1"
+  dependencies:
+    "@internationalized/string": ^3.2.3
+    "@react-aria/breadcrumbs": ^3.5.13
+    "@react-aria/button": ^3.9.5
+    "@react-aria/calendar": ^3.5.8
+    "@react-aria/checkbox": ^3.14.3
+    "@react-aria/combobox": ^3.9.1
+    "@react-aria/datepicker": ^3.10.1
+    "@react-aria/dialog": ^3.5.14
+    "@react-aria/dnd": ^3.6.1
+    "@react-aria/focus": ^3.17.1
+    "@react-aria/gridlist": ^3.8.1
+    "@react-aria/i18n": ^3.11.1
+    "@react-aria/interactions": ^3.21.3
+    "@react-aria/label": ^3.7.8
+    "@react-aria/link": ^3.7.1
+    "@react-aria/listbox": ^3.12.1
+    "@react-aria/menu": ^3.14.1
+    "@react-aria/meter": ^3.4.13
+    "@react-aria/numberfield": ^3.11.3
+    "@react-aria/overlays": ^3.22.1
+    "@react-aria/progress": ^3.4.13
+    "@react-aria/radio": ^3.10.4
+    "@react-aria/searchfield": ^3.7.5
+    "@react-aria/select": ^3.14.5
+    "@react-aria/selection": ^3.18.1
+    "@react-aria/separator": ^3.3.13
+    "@react-aria/slider": ^3.7.8
+    "@react-aria/ssr": ^3.9.4
+    "@react-aria/switch": ^3.6.4
+    "@react-aria/table": ^3.14.1
+    "@react-aria/tabs": ^3.9.1
+    "@react-aria/tag": ^3.4.1
+    "@react-aria/textfield": ^3.14.5
+    "@react-aria/tooltip": ^3.7.4
+    "@react-aria/utils": ^3.24.1
+    "@react-aria/visually-hidden": ^3.8.12
+    "@react-types/shared": ^3.23.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: e6322ceddc14f2cc5af9ebae742f3db3678ff0df6147c953aa7f3592f200724f29860ce767072e6b93bf7faef7a54c433329599431a56042abef9712f3f80aa9
+  languageName: node
+  linkType: hard
+
 "react-colorful@npm:^5.1.2":
   version: 5.6.1
   resolution: "react-colorful@npm:5.6.1"
@@ -24887,16 +26012,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-day-picker@npm:^8.8.0":
-  version: 8.10.1
-  resolution: "react-day-picker@npm:8.10.1"
-  peerDependencies:
-    date-fns: ^2.28.0 || ^3.0.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: a0ff28c4b61b3882e6a825b19e5679e2fdf3256cf1be8eb0a0c028949815c1ae5a6561474c2c19d231c010c8e0e0b654d3a322610881e0655abca05a2e03d9df
-  languageName: node
-  linkType: hard
-
 "react-docgen-typescript@npm:^2.2.2":
   version: 2.2.2
   resolution: "react-docgen-typescript@npm:2.2.2"
@@ -25159,6 +26274,39 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-stately@npm:^3.31.1":
+  version: 3.31.1
+  resolution: "react-stately@npm:3.31.1"
+  dependencies:
+    "@react-stately/calendar": ^3.5.1
+    "@react-stately/checkbox": ^3.6.5
+    "@react-stately/collections": ^3.10.7
+    "@react-stately/combobox": ^3.8.4
+    "@react-stately/data": ^3.11.4
+    "@react-stately/datepicker": ^3.9.4
+    "@react-stately/dnd": ^3.3.1
+    "@react-stately/form": ^3.0.3
+    "@react-stately/list": ^3.10.5
+    "@react-stately/menu": ^3.7.1
+    "@react-stately/numberfield": ^3.9.3
+    "@react-stately/overlays": ^3.6.7
+    "@react-stately/radio": ^3.10.4
+    "@react-stately/searchfield": ^3.5.3
+    "@react-stately/select": ^3.6.4
+    "@react-stately/selection": ^3.15.1
+    "@react-stately/slider": ^3.5.4
+    "@react-stately/table": ^3.11.8
+    "@react-stately/tabs": ^3.6.6
+    "@react-stately/toggle": ^3.7.4
+    "@react-stately/tooltip": ^3.4.9
+    "@react-stately/tree": ^3.8.1
+    "@react-types/shared": ^3.23.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: b30fbf31615f6e2d0c58ccbbc086bcd06edc98ae4f7aabeb10ad990692ac50732307a893ad789264b76330cce671b8787bc8536b8265286767800fdd37c59b8d
+  languageName: node
+  linkType: hard
+
 "react-style-singleton@npm:^2.2.1":
   version: 2.2.1
   resolution: "react-style-singleton@npm:2.2.1"
@@ -29267,6 +30415,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"upgrade@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "upgrade@npm:1.1.0"
+  checksum: 62303856b58d91660db5fcaec6871eac7cabad3ac805d1da9ea3964c320a3e2dbb768627fbc09c1cd0e60719885f884128fd4246c14fbb6aa6b65f3e9e3d44d3
+  languageName: node
+  linkType: hard
+
 "uri-js@npm:^4.2.2, uri-js@npm:^4.4.1":
   version: 4.4.1
   resolution: "uri-js@npm:4.4.1"
@@ -30362,6 +31517,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yarn@npm:^1.22.22":
+  version: 1.22.22
+  resolution: "yarn@npm:1.22.22"
+  bin:
+    yarn: bin/yarn.js
+    yarnpkg: bin/yarn.js
+  checksum: 8c77198c93d7542e7f4e131c63b66de357b7076ecfbcfe709ec0d674115c2dd9edaa45196e5510e6e9366d368707a802579e3402071002e1c9d9a99d491478de
+  languageName: node
+  linkType: hard
+
 "yauzl@npm:^2.10.0":
   version: 2.10.0
   resolution: "yauzl@npm:2.10.0"