chore: consolidate calendar pickers (#40052)

* chore: update react-day-picker

* fix(design system): date picker demos

* refactor(date picker): change logs date picker to use react-day-picker

* refactor(date pickers): change remaining date pickers to use react-day-picker

* cleanup(date pickers): minor code cleanup

* fix(date picker): fix behavior for single day selection

apps/design-system/package.json

@@ -29,6 +29,7 @@
     "next-contentlayer2": "0.4.6",
     "next-themes": "^0.3.0",
     "react": "catalog:",
+    "react-day-picker": "^9.11.1",
     "react-docgen": "^7.0.3",
     "react-dom": "catalog:",
     "react-hook-form": "^7.45.0",
@@ -53,8 +54,8 @@
     "@types/lodash.template": "4.5.0",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
-    "config": "workspace:^",
     "concurrently": "^8.2.2",
+    "config": "workspace:^",
     "mdast-util-toc": "^6.1.1",
     "postcss": "^8.5.3",
     "rimraf": "^4.1.3",

apps/design-system/registry/default/example/date-picker-demo.tsx

@@ -1,13 +1,17 @@
 'use client'
 
-import * as React from 'react'
 import { format } from 'date-fns'
 import { Calendar as CalendarIcon } from 'lucide-react'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
-import { Button } from 'ui'
-import { Calendar } from 'ui'
-import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+import {
+  Button,
+  Calendar,
+  Popover_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
+} from 'ui'
 
 export default function DatePickerDemo() {
   const [date, setDate] = React.useState<Date>()
@@ -21,8 +25,8 @@ export default function DatePickerDemo() {
             'w-[280px] justify-start text-left font-normal',
             !date && 'text-muted-foreground'
           )}
+          icon={<CalendarIcon className="h-4 w-4" />}
         >
-          <CalendarIcon className="mr-2 h-4 w-4" />
           {date ? format(date, 'PPP') : <span>Pick a date</span>}
         </Button>
       </PopoverTrigger_Shadcn_>

apps/design-system/registry/default/example/date-picker-form.tsx

@@ -62,9 +62,9 @@ export default function DatePickerForm() {
                         'w-[240px] pl-3 text-left font-normal',
                         !field.value && 'text-muted-foreground'
                       )}
+                      icon={<CalendarIcon className="h-4 w-4 opacity-50" />}
                     >
                       {field.value ? format(field.value, 'PPP') : <span>Pick a date</span>}
-                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                     </Button>
                   </FormControl_Shadcn_>
                 </PopoverTrigger_Shadcn_>

apps/design-system/registry/default/example/date-picker-with-presets.tsx

@@ -1,14 +1,16 @@
 'use client'
 
-import * as React from 'react'
 import { addDays, format } from 'date-fns'
 import { Calendar as CalendarIcon } from 'lucide-react'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
-import { Button } from 'ui'
-import { Calendar } from 'ui'
-import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
 import {
+  Button,
+  Calendar,
+  Popover_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
   Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectItem_Shadcn_,
@@ -28,8 +30,8 @@ export default function DatePickerWithPresets() {
             'w-[280px] justify-start text-left font-normal',
             !date && 'text-muted-foreground'
           )}
+          icon={<CalendarIcon className="h-4 w-4" />}
         >
-          <CalendarIcon className="mr-2 h-4 w-4" />
           {date ? format(date, 'PPP') : <span>Pick a date</span>}
         </Button>
       </PopoverTrigger_Shadcn_>

apps/design-system/registry/default/example/date-picker-with-range.tsx

@@ -1,14 +1,18 @@
 'use client'
 
-import * as React from 'react'
 import { addDays, format } from 'date-fns'
 import { Calendar as CalendarIcon } from 'lucide-react'
-// @ts-expect-error
+import * as React from 'react'
 import { DateRange } from 'react-day-picker'
+
 import { cn } from '@/lib/utils'
-import { Button } from 'ui'
-import { Calendar } from 'ui'
-import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+import {
+  Button,
+  Calendar,
+  Popover_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
+} from 'ui'
 
 export default function DatePickerWithRange({ className }: React.HTMLAttributes<HTMLDivElement>) {
   const [date, setDate] = React.useState<DateRange | undefined>({
@@ -27,8 +31,8 @@ export default function DatePickerWithRange({ className }: React.HTMLAttributes<
               'w-[300px] justify-start text-left font-normal',
               !date && 'text-muted-foreground'
             )}
+            icon={<CalendarIcon className="h-4 w-4" />}
           >
-            <CalendarIcon className="mr-2 h-4 w-4" />
             {date?.from ? (
               date.to ? (
                 <>

apps/studio/components/interfaces/Account/AccessTokens/NewAccessTokenDialog.tsx

@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import dayjs from 'dayjs'
 import { ExternalLink } from 'lucide-react'
 import { useState } from 'react'
-import { type SubmitHandler, useForm } from 'react-hook-form'
+import { useForm, type SubmitHandler } from 'react-hook-form'
 import { toast } from 'sonner'
 import { z } from 'zod'
 
@@ -214,16 +214,13 @@ export const NewAccessTokenDialog = ({
                           selectsRange={false}
                           triggerButtonSize="small"
                           contentSide="top"
+                          to={customExpiryDate?.date}
                           minDate={new Date()}
                           maxDate={dayjs().add(1, 'year').toDate()}
                           onChange={(date) => {
                             if (date.to) handleCustomDateChange({ date: date.to })
                           }}
-                        >
-                          {customExpiryDate
-                            ? `${dayjs(customExpiryDate.date).format('DD MMM, HH:mm')}`
-                            : 'Select date'}
-                        </DatePicker>
+                        />
                       )}
                     </div>
                     {field.value === NON_EXPIRING_TOKEN_VALUE && (

apps/studio/components/interfaces/Database/Backups/PITR/PITRForm.tsx

@@ -1,12 +1,11 @@
-import { format } from 'date-fns'
 import dayjs from 'dayjs'
-import { ChevronLeft, ChevronRight, HelpCircle } from 'lucide-react'
+import { HelpCircle } from 'lucide-react'
 import { useMemo, useState } from 'react'
-import DatePicker from 'react-datepicker'
 
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { FormPanel } from 'components/ui/Forms/FormPanel'
 import InformationBox from 'components/ui/InformationBox'
+import { Calendar, cn } from 'ui'
 import { Timezone } from './PITR.types'
 import {
   constrainDateToRange,
@@ -41,6 +40,8 @@ export function PITRForm({
   const latestAvailableBackup = dayjs
     .unix(latestAvailableBackupUnix ?? 0)
     .tz(selectedTimezone.utc[0])
+  const earliestAvailableBackupAsDate = earliestAvailableBackup.toDate()
+  const latestAvailableBackupAsDate = latestAvailableBackup.toDate()
 
   const [selectedDateRaw, setSelectedDateRaw] = useState<Date>(latestAvailableBackup.toDate())
 
@@ -125,51 +126,25 @@ export function PITRForm({
       >
         <div className="flex justify-between px-4 md:px-10 py-6 space-x-10">
           <div className="w-1/3 space-y-2">
-            <DatePicker
-              inline
+            <Calendar
+              mode="single"
+              required={true}
               selected={selectedDateRaw}
-              onChange={onUpdateDate}
-              dayClassName={() => 'cursor-pointer'}
-              minDate={earliestAvailableBackup.toDate()}
-              maxDate={latestAvailableBackup.toDate()}
-              highlightDates={availableDates.map((date) => date.toDate())}
-              renderCustomHeader={({
-                date,
-                decreaseMonth,
-                increaseMonth,
-                prevMonthButtonDisabled,
-                nextMonthButtonDisabled,
-              }) => (
-                <div className="flex items-center justify-between px-2 py-2">
-                  <div className="flex w-full items-center justify-between">
-                    <button
-                      onClick={decreaseMonth}
-                      disabled={prevMonthButtonDisabled}
-                      type="button"
-                      className={`
-                            ${prevMonthButtonDisabled && 'cursor-not-allowed opacity-50'}
-                            text-foreground-light hover:text-foreground focus:outline-none
-                        `}
-                    >
-                      <ChevronLeft size={16} strokeWidth={2} />
-                    </button>
-                    <span className="text-foreground-light text-sm">
-                      {format(date, 'MMMM yyyy')}
-                    </span>
-                    <button
-                      onClick={increaseMonth}
-                      disabled={nextMonthButtonDisabled}
-                      type="button"
-                      className={`
-                            ${nextMonthButtonDisabled && 'cursor-not-allowed opacity-50'}
-                            text-foreground-light hover:text-foreground focus:outline-none
-                        `}
-                    >
-                      <ChevronRight size={16} strokeWidth={2} />
-                    </button>
-                  </div>
-                </div>
-              )}
+              onSelect={onUpdateDate}
+              defaultMonth={latestAvailableBackupAsDate}
+              startMonth={earliestAvailableBackupAsDate}
+              endMonth={latestAvailableBackupAsDate}
+              disabled={[
+                { before: earliestAvailableBackupAsDate },
+                { after: latestAvailableBackupAsDate },
+              ]}
+              classNames={{
+                day: cn(
+                  '[&:not(:has(:disabled))]:border [&:not(:has(:disabled))]:border-stronger [&:not(:last-child)]:border-r-0 [&:not(:has(:disabled))]:bg-overlay-hover',
+                  'rounded-none'
+                ),
+                selected: '!bg-brand-500',
+              }}
             />
             {availableDates.length > 1 && (
               <div className="flex items-center space-x-2">

apps/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx

@@ -1,8 +1,7 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import dayjs from 'dayjs'
-import { ChevronLeft, ChevronRight, Clock, HistoryIcon } from 'lucide-react'
-import { PropsWithChildren, useEffect, useRef, useState } from 'react'
-import DatePicker from 'react-datepicker'
+import { Clock, HistoryIcon } from 'lucide-react'
+import type { PropsWithChildren } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import { Badge } from '@ui/components/shadcn/ui/badge'
 import { Label } from '@ui/components/shadcn/ui/label'
@@ -13,6 +12,7 @@ import { useCurrentOrgPlan } from 'hooks/misc/useCurrentOrgPlan'
 import {
   Button,
   ButtonProps,
+  Calendar,
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
   Popover_Shadcn_,
@@ -50,13 +50,13 @@ export const LogsDatePicker = ({
 }: PropsWithChildren<LogsDatePickerProps>) => {
   const [open, setOpen] = useState(false)
 
-  const todayButtonRef = useRef<HTMLButtonElement>(null)
-
   // Reset the state when the popover closes
   useEffect(() => {
     if (!open) {
       setStartDate(value.from ? new Date(value.from) : null)
-      setEndDate(value.to ? new Date(value.to) : new Date())
+      const defaultEndDate = value.to ? new Date(value.to) : new Date()
+      setEndDate(defaultEndDate)
+      setCurrentMonth(new Date(defaultEndDate))
 
       const fromDate = value.from ? new Date(value.from) : null
       const toDate = value.to ? new Date(value.to) : null
@@ -96,6 +96,9 @@ export const LogsDatePicker = ({
 
   const [startDate, setStartDate] = useState<Date | null>(value.from ? new Date(value.from) : null)
   const [endDate, setEndDate] = useState<Date | null>(value.to ? new Date(value.to) : new Date())
+  const [currentMonth, setCurrentMonth] = useState<Date>(() =>
+    value.to ? new Date(value.to) : new Date()
+  )
 
   const [startTime, setStartTime] = useState({
     HH: startDate?.getHours().toString() || '00',
@@ -166,6 +169,7 @@ export const LogsDatePicker = ({
 
           setStartDate(fromDate)
           setEndDate(toDate)
+          setCurrentMonth(new Date(toDate))
 
           // Update time states
           setStartTime({
@@ -190,7 +194,7 @@ export const LogsDatePicker = ({
       })
   }
 
-  function handleCopy() {
+  const handleCopy = useCallback(() => {
     if (!startDate || !endDate) return
 
     const fromDate = new Date(startDate)
@@ -208,7 +212,7 @@ export const LogsDatePicker = ({
     )
 
     setCopied(true)
-  }
+  }, [startDate, endDate, startTime, endTime])
 
   useEffect(() => {
     if (pasted) {
@@ -227,7 +231,7 @@ export const LogsDatePicker = ({
       document.removeEventListener('paste', handlePaste)
       document.removeEventListener('copy', handleCopy)
     }
-  }, [open, startDate, endDate])
+  }, [open, startDate, endDate, handleCopy])
 
   const isLargeRange =
     Math.abs(dayjs(startDate).diff(dayjs(endDate), 'days')) >
@@ -340,54 +344,14 @@ export const LogsDatePicker = ({
             </div>
           </div>
           <div className="p-2 border-t">
-            <DatePicker
-              inline
-              selectsRange
-              todayButton={
-                <div className="sr-only">
-                  <Button type="text" size="tiny" ref={todayButtonRef}>
-                    Go to today
-                  </Button>
-                </div>
-              }
-              onChange={(dates) => {
-                handleDatePickerChange(dates)
+            <Calendar
+              mode="range"
+              month={currentMonth}
+              onMonthChange={(month) => setCurrentMonth(new Date(month))}
+              selected={{ from: startDate ?? undefined, to: endDate ?? undefined }}
+              onSelect={(range) => {
+                handleDatePickerChange([range?.from ?? null, range?.to ?? null])
               }}
-              dateFormat="MMMM d, yyyy h:mm aa"
-              dayClassName={() => 'cursor-pointer'}
-              startDate={startDate}
-              endDate={endDate}
-              renderCustomHeader={({
-                date,
-                decreaseMonth,
-                increaseMonth,
-                prevMonthButtonDisabled,
-                nextMonthButtonDisabled,
-              }) => (
-                <div className="flex items-center justify-between">
-                  <div className="flex w-full items-center justify-between">
-                    <Button
-                      onClick={decreaseMonth}
-                      disabled={prevMonthButtonDisabled}
-                      icon={<ChevronLeft size={14} strokeWidth={2} />}
-                      type="text"
-                      size="tiny"
-                      className="px-1.5"
-                    ></Button>
-                    <span className="text-sm text-foreground-light">
-                      {dayjs(date).format('MMMM YYYY')}
-                    </span>
-                    <Button
-                      onClick={increaseMonth}
-                      disabled={nextMonthButtonDisabled}
-                      icon={<ChevronRight size={14} strokeWidth={2} />}
-                      type="text"
-                      size="tiny"
-                      className="px-1.5"
-                    ></Button>
-                  </div>
-                </div>
-              )}
             />
           </div>
           {isLargeRange && !hideWarnings && (
@@ -412,12 +376,10 @@ export const LogsDatePicker = ({
             <Button
               type="default"
               onClick={() => {
-                // [Jordi]: Workaround so that if the user is in a different month, the datepicker will move the view to the current month
-                if (todayButtonRef.current) {
-                  todayButtonRef.current.click()
-                }
-                setStartDate(new Date())
-                setEndDate(new Date())
+                const today = new Date()
+                setCurrentMonth(today)
+                setStartDate(new Date(today))
+                setEndDate(new Date(today))
               }}
             >
               Today

apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterControls.tsx

@@ -70,12 +70,7 @@ export function DataTableFilterControls({ dateRangeDisabled }: DataTableFilterCo
                       return <DataTableFilterInput {...field} />
                     }
                     case 'timerange': {
-                      return (
-                        <DataTableFilterTimerange
-                          dateRangeDisabled={dateRangeDisabled}
-                          {...field}
-                        />
-                      )
+                      return <DataTableFilterTimerange {...field} />
                     }
                   }
                 })()}

apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterTimerange.tsx

@@ -1,11 +1,11 @@
 import { useMemo, useState } from 'react'
 import type { DateRange } from 'react-day-picker'
 
-import {
-  LogsDatePicker,
-  DatePickerValue,
-} from 'components/interfaces/Settings/Logs/Logs.DatePickers'
 import { REPORTS_DATEPICKER_HELPERS } from 'components/interfaces/Reports/Reports.constants'
+import {
+  DatePickerValue,
+  LogsDatePicker,
+} from 'components/interfaces/Settings/Logs/Logs.DatePickers'
 import { maybeShowUpgradePrompt } from 'components/interfaces/Settings/Logs/Logs.utils'
 import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
 import { useCurrentOrgPlan } from 'hooks/misc/useCurrentOrgPlan'
@@ -15,8 +15,6 @@ import { useDataTable } from '../providers/DataTableProvider'
 
 export function DataTableFilterTimerange<TData>({
   value: _value,
-  presets,
-  dateRangeDisabled,
 }: DataTableTimerangeFilterField<TData>) {
   const value = _value as string
   const { table, columnFilters } = useDataTable()

apps/studio/components/ui/DataTable/DatePickerWithRange.tsx

@@ -1,271 +0,0 @@
-import { format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-react'
-import { HTMLAttributes, useEffect, useState } from 'react'
-import type { DateRange } from 'react-day-picker'
-
-import {
-  Button,
-  Calendar,
-  cn,
-  Input,
-  Label_Shadcn_ as Label,
-  Popover_Shadcn_ as Popover,
-  PopoverContent_Shadcn_ as PopoverContent,
-  PopoverSeparator_Shadcn_ as PopoverSeparator,
-  PopoverTrigger_Shadcn_ as PopoverTrigger,
-  Select_Shadcn_ as Select,
-  SelectContent_Shadcn_ as SelectContent,
-  SelectGroup_Shadcn_ as SelectGroup,
-  SelectItem_Shadcn_ as SelectItem,
-  SelectLabel_Shadcn_ as SelectLabel,
-  SelectTrigger_Shadcn_ as SelectTrigger,
-  SelectValue_Shadcn_ as SelectValue,
-} from 'ui'
-import { presets as defaultPresets } from './DataTable.constants'
-import type { DatePreset, DateRangeDisabled } from './DataTable.types'
-import { useDebounce } from './hooks/useDebounce'
-import { kdbClassName } from './primitives/Kbd'
-
-interface DatePickerWithRangeProps extends HTMLAttributes<HTMLDivElement> {
-  date: DateRange | undefined
-  setDate: (date: DateRange | undefined) => void
-  presets?: DatePreset[]
-  dateRangeDisabled?: DateRangeDisabled
-}
-
-// [Joshen] This might be better placed in ui instead of DataTable since it could be reusable
-export function DatePickerWithRange({
-  className,
-  date,
-  setDate,
-  presets = defaultPresets,
-  dateRangeDisabled,
-}: DatePickerWithRangeProps) {
-  const [open, setOpen] = useState(false)
-
-  useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (!open) return
-
-      presets.map((preset) => {
-        if (preset.shortcut === e.key) {
-          setDate({ from: preset.from, to: preset.to })
-        }
-      })
-    }
-    document.addEventListener('keydown', down)
-    return () => document.removeEventListener('keydown', down)
-  }, [setDate, presets, open])
-
-  return (
-    <div className={cn('grid gap-2', className)}>
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            id="date"
-            type="outline"
-            size="small"
-            className={cn(
-              'max-w-full justify-start truncate text-left font-normal hover:bg-muted/50',
-              !date && 'text-muted-foreground'
-            )}
-            icon={<CalendarIcon className="mr-2 h-4 w-4" />}
-          >
-            {date?.from ? (
-              date.to ? (
-                <span className="truncate">
-                  {format(date.from, 'LLL dd, y')} - {format(date.to, 'LLL dd, y')}
-                </span>
-              ) : (
-                format(date.from, 'LLL dd, y')
-              )
-            ) : (
-              <span>Pick a date</span>
-            )}
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-auto p-0" align="start" portal={true}>
-          <div className="flex flex-col justify-between sm:flex-row">
-            <div className="hidden sm:block">
-              <DatePresets onSelect={setDate} selected={date} presets={presets} />
-            </div>
-            <div className="block p-3 sm:hidden">
-              <DatePresetsSelect onSelect={setDate} selected={date} presets={presets} />
-            </div>
-            <PopoverSeparator className="h-auto w-px" />
-            <Calendar
-              initialFocus
-              mode="range"
-              defaultMonth={date?.from}
-              selected={date}
-              onSelect={setDate}
-              numberOfMonths={1}
-              // @ts-ignore
-              disabled={dateRangeDisabled}
-            />
-          </div>
-          <PopoverSeparator />
-          <CustomDateRange onSelect={setDate} selected={date} />
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-}
-
-function DatePresets({
-  selected,
-  onSelect,
-  presets,
-}: {
-  selected: DateRange | undefined
-  onSelect: (date: DateRange | undefined) => void
-  presets: DatePreset[]
-}) {
-  return (
-    <div className="flex flex-col gap-2 p-3">
-      <p className="mx-3 text-xs uppercase text-muted-foreground">Date Range</p>
-      <div className="grid gap-1">
-        {presets.map(({ label, shortcut, from, to }) => {
-          const isActive = selected?.from === from && selected?.to === to
-          return (
-            <Button
-              key={label}
-              type={isActive ? 'secondary' : 'default'}
-              size="small"
-              onClick={() => onSelect({ from, to })}
-              className="text-left"
-            >
-              <div className="flex items-center justify-between gap-6">
-                <span className="mr-auto">{label}</span>
-                <span className={cn(kdbClassName, 'uppercase')}>{shortcut}</span>
-              </div>
-            </Button>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
-
-function DatePresetsSelect({
-  selected,
-  onSelect,
-  presets,
-}: {
-  selected: DateRange | undefined
-  onSelect: (date: DateRange | undefined) => void
-  presets: DatePreset[]
-}) {
-  function findPreset(from?: Date, to?: Date) {
-    return presets.find((p) => p.from === from && p.to === to)?.shortcut
-  }
-  const [value, setValue] = useState<string | undefined>(findPreset(selected?.from, selected?.to))
-
-  useEffect(() => {
-    const preset = findPreset(selected?.from, selected?.to)
-    if (preset === value) return
-    setValue(preset)
-  }, [selected, presets])
-
-  return (
-    <Select
-      value={value}
-      onValueChange={(v) => {
-        const preset = presets.find((p) => p.shortcut === v)
-        if (preset) {
-          onSelect({ from: preset.from, to: preset.to })
-        }
-      }}
-    >
-      <SelectTrigger>
-        <SelectValue placeholder="Date Presets" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectGroup>
-          <SelectLabel>Date Presets</SelectLabel>
-          {presets.map(({ label, shortcut }) => {
-            return (
-              <SelectItem
-                key={label}
-                value={shortcut}
-                className="flex items-center justify-between [&>span:last-child]:flex [&>span:last-child]:w-full [&>span:last-child]:justify-between"
-              >
-                <span>{label}</span>
-                <span className={cn(kdbClassName, 'ml-2 h-5 uppercase leading-snug')}>
-                  {shortcut}
-                </span>
-              </SelectItem>
-            )
-          })}
-        </SelectGroup>
-      </SelectContent>
-    </Select>
-  )
-}
-
-// REMINDER: We can add min max date range validation https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local#setting_maximum_and_minimum_dates_and_times
-function CustomDateRange({
-  selected,
-  onSelect,
-}: {
-  selected: DateRange | undefined
-  onSelect: (date: DateRange | undefined) => void
-}) {
-  const [dateFrom, setDateFrom] = useState<Date | undefined>(selected?.from)
-  const [dateTo, setDateTo] = useState<Date | undefined>(selected?.to)
-  const debounceDateFrom = useDebounce(dateFrom, 1000)
-  const debounceDateTo = useDebounce(dateTo, 1000)
-
-  const formatDateForInput = (date: Date | undefined): string => {
-    if (!date) return ''
-    const utcDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000)
-    return utcDate.toISOString().slice(0, 16)
-  }
-
-  useEffect(() => {
-    onSelect({ from: debounceDateFrom, to: debounceDateTo })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debounceDateFrom, debounceDateTo])
-
-  return (
-    <div className="flex flex-col gap-2 p-3">
-      <p className="text-xs uppercase text-muted-foreground">Custom Range</p>
-      <div className="grid gap-2 sm:grid-cols-2">
-        <div className="grid w-full gap-1.5">
-          <Label htmlFor="from">Start</Label>
-          <Input
-            key={formatDateForInput(selected?.from)}
-            type="datetime-local"
-            id="from"
-            name="from"
-            defaultValue={formatDateForInput(selected?.from)}
-            onChange={(e) => {
-              const newDate = new Date(e.target.value)
-              if (!Number.isNaN(newDate.getTime())) {
-                setDateFrom(newDate)
-              }
-            }}
-            disabled={!selected?.from}
-          />
-        </div>
-        <div className="grid w-full gap-1.5">
-          <Label htmlFor="to">End</Label>
-          <Input
-            key={formatDateForInput(selected?.to)}
-            type="datetime-local"
-            id="to"
-            name="to"
-            defaultValue={formatDateForInput(selected?.to)}
-            onChange={(e) => {
-              const newDate = new Date(e.target.value)
-              if (!Number.isNaN(newDate.getTime())) {
-                setDateTo(newDate)
-              }
-            }}
-            disabled={!selected?.to}
-          />
-        </div>
-      </div>
-    </div>
-  )
-}

apps/studio/components/ui/DatePicker/index.tsx

@@ -1,12 +1,12 @@
 import { format } from 'date-fns'
 import dayjs from 'dayjs'
-import { ArrowRight, Calendar, ChevronLeft, ChevronRight } from 'lucide-react'
-import { ReactNode, useEffect, useState } from 'react'
-import ReactDatePicker from 'react-datepicker'
+import { ArrowRight, Calendar } from 'lucide-react'
+import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 
 import type { DatePickerToFrom } from 'components/interfaces/Settings/Logs/Logs.types'
 import {
   Button,
+  Calendar as CalendarPicker,
   Popover,
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
@@ -39,6 +39,22 @@ const END_DATE_DEFAULT = new Date()
 const START_TIME_DEFAULT = { HH: '00', mm: '00', ss: '00' }
 const END_TIME_DEFAULT = { HH: '23', mm: '59', ss: '59' }
 
+const calculateDisabledDays = (minDate?: Date, maxDate?: Date) => {
+  const rules: Array<{ before: Date } | { after: Date }> = []
+
+  if (minDate) {
+    rules.push({ before: dayjs(minDate).startOf('day').toDate() })
+  }
+
+  if (maxDate) {
+    rules.push({ after: dayjs(maxDate).endOf('day').toDate() })
+  }
+
+  if (rules.length === 0) return undefined
+  if (rules.length === 1) return rules[0]
+  return rules
+}
+
 export function DatePicker({
   to,
   from,
@@ -64,6 +80,55 @@ export function DatePicker({
   const [startTime, setStartTime] = useState<any>(START_TIME_DEFAULT)
   const [endTime, setEndTime] = useState<any>(END_TIME_DEFAULT)
 
+  const disabledDays = useMemo(() => calculateDisabledDays(minDate, maxDate), [minDate, maxDate])
+
+  const clampDateToRange = useCallback(
+    (date: Date | null) => {
+      if (!date) return date
+
+      let nextDate = date
+
+      if (minDate && dayjs(nextDate).isBefore(minDate, 'day')) {
+        nextDate = dayjs(minDate).toDate()
+      }
+
+      if (maxDate && dayjs(nextDate).isAfter(maxDate, 'day')) {
+        nextDate = dayjs(maxDate).toDate()
+      }
+
+      return nextDate
+    },
+    [minDate, maxDate]
+  )
+
+  useEffect(() => {
+    if (!minDate && !maxDate) return
+
+    setStartDate((prev) => {
+      if (!prev) return prev
+      const clamped = clampDateToRange(prev)
+      return dayjs(clamped).isSame(prev) ? prev : clamped
+    })
+
+    setEndDate((prev) => {
+      if (!prev) return prev
+      const clamped = clampDateToRange(prev)
+      return dayjs(clamped).isSame(prev) ? prev : clamped
+    })
+
+    setAppliedStartDate((prev) => {
+      if (!prev) return prev
+      const clamped = clampDateToRange(prev)
+      return dayjs(clamped).isSame(prev) ? prev : clamped
+    })
+
+    setAppliedEndDate((prev) => {
+      if (!prev) return prev
+      const clamped = clampDateToRange(prev)
+      return dayjs(clamped).isSame(prev) ? prev : clamped
+    })
+  }, [minDate, maxDate, clampDateToRange])
+
   useEffect(() => {
     if (!from) {
       setAppliedStartDate(null)
@@ -145,7 +210,7 @@ export function DatePicker({
   }
 
   return (
-    <Popover_Shadcn_ open={open} onOpenChange={setOpen}>
+    <Popover_Shadcn_ modal open={open} onOpenChange={setOpen}>
       <PopoverTrigger_Shadcn_ asChild>
         <Button
           title={triggerButtonTitle}
@@ -218,57 +283,25 @@ export function DatePicker({
             </>
           )}
           <div className="p-2">
-            <ReactDatePicker
-              inline
-              selectsRange={selectsRange}
-              selected={startDate}
-              onChange={(dates) => {
-                handleDatePickerChange(dates)
-              }}
-              dateFormat="MMMM d, yyyy h:mm aa"
-              startDate={startDate}
-              endDate={endDate}
-              minDate={minDate}
-              maxDate={maxDate}
-              dayClassName={() => 'cursor-pointer'}
-              renderCustomHeader={({
-                date,
-                decreaseMonth,
-                increaseMonth,
-                prevMonthButtonDisabled,
-                nextMonthButtonDisabled,
-              }) => (
-                <div className="flex items-center justify-between">
-                  <div className="flex w-full items-center justify-between">
-                    <button
-                      onClick={decreaseMonth}
-                      disabled={prevMonthButtonDisabled}
-                      type="button"
-                      className={`
-                        ${prevMonthButtonDisabled && 'cursor-not-allowed opacity-50'}
-                        text-foreground-light hover:text-foreground focus:outline-none p-2
-                    `}
-                    >
-                      <ChevronLeft size={16} strokeWidth={2} />
-                    </button>
-                    <span className="text-sm text-foreground-light">
-                      {format(date, 'MMMM yyyy')}
-                    </span>
-                    <button
-                      onClick={increaseMonth}
-                      disabled={nextMonthButtonDisabled}
-                      type="button"
-                      className={`
-                        ${nextMonthButtonDisabled && 'cursor-not-allowed opacity-50'}
-                        text-foreground-light p-2 hover:text-foreground focus:outline-none
-                    `}
-                    >
-                      <ChevronRight size={16} strokeWidth={2} />
-                    </button>
-                  </div>
-                </div>
-              )}
-            />
+            {selectsRange ? (
+              <CalendarPicker
+                mode="range"
+                disabled={disabledDays}
+                selected={{ from: startDate ?? undefined, to: endDate ?? undefined }}
+                onSelect={(range) => {
+                  handleDatePickerChange([range?.from ?? null, range?.to ?? null])
+                }}
+              />
+            ) : (
+              <CalendarPicker
+                mode="single"
+                disabled={disabledDays}
+                selected={endDate ?? undefined}
+                onSelect={(date) => {
+                  handleDatePickerChange(date ?? null)
+                }}
+              />
+            )}
           </div>
           {renderFooter({
             from: startDate?.toISOString() || null,

apps/studio/components/ui/QueryBlock/ParametersPopover.tsx

@@ -1,164 +0,0 @@
-import { format } from 'date-fns'
-import { ArrowUpDown } from 'lucide-react'
-import { useEffect, useState } from 'react'
-
-import { DatePicker } from 'components/ui/DatePicker'
-import { Parameter } from 'lib/sql-parameters'
-import {
-  Button,
-  Input_Shadcn_,
-  Label_Shadcn_,
-  Popover_Shadcn_,
-  PopoverContent_Shadcn_,
-  PopoverTrigger_Shadcn_,
-  Select_Shadcn_,
-  SelectContent_Shadcn_,
-  SelectItem_Shadcn_,
-  SelectTrigger_Shadcn_,
-  SelectValue_Shadcn_,
-} from 'ui'
-
-interface ParametersPopoverProps {
-  parameters: Parameter[]
-  parameterValues?: Record<string, string>
-  onSubmit?: (parameters: Record<string, string>) => void
-  onChange?: (parameters: Record<string, string>) => void
-}
-
-export const ParametersPopover = ({
-  parameters,
-  parameterValues = {},
-  onSubmit,
-  onChange,
-}: ParametersPopoverProps) => {
-  const [tempParameters, setTempParameters] = useState<Record<string, string>>(
-    parameters.reduce(
-      (acc, param) => ({
-        ...acc,
-        [param.name]: parameterValues[param.name] ?? param.defaultValue ?? '',
-      }),
-      {}
-    )
-  )
-
-  // Update temp parameters when external parameters or values change
-  useEffect(() => {
-    setTempParameters(
-      parameters.reduce(
-        (acc, param) => ({
-          ...acc,
-          [param.name]: parameterValues[param.name] ?? param.defaultValue ?? '',
-        }),
-        {}
-      )
-    )
-  }, [parameters, parameterValues])
-
-  const handleParameterChange = (name: string, value: string) => {
-    const newParameters = {
-      ...tempParameters,
-      [name]: value,
-    }
-    setTempParameters(newParameters)
-    onChange?.(newParameters)
-  }
-
-  const renderInput = (param: Parameter) => {
-    const currentValue = tempParameters[param.name] ?? parameterValues[param.name] ?? ''
-
-    if (param.type === 'date') {
-      // Check if the current value is a valid date
-      const isValidDate = currentValue && !isNaN(new Date(currentValue).getTime())
-
-      if (isValidDate) {
-        return (
-          <DatePicker
-            selectsRange={false}
-            from={currentValue}
-            to={currentValue}
-            onChange={(date) => {
-              if (date && date.to) {
-                handleParameterChange(param.name, date.to)
-              } else {
-                handleParameterChange(param.name, '')
-              }
-            }}
-          >
-            <span>{currentValue ? format(new Date(currentValue), 'dd MMM') : 'Pick a date'}</span>
-          </DatePicker>
-        )
-      }
-
-      // Fallback to regular input if date is invalid
-      return (
-        <Input_Shadcn_
-          size="tiny"
-          value={currentValue}
-          onChange={(e) => handleParameterChange(param.name, e.target.value)}
-        />
-      )
-    }
-
-    if (param.type === 'enum' && param.possibleValues) {
-      return (
-        <Select_Shadcn_
-          value={currentValue}
-          onValueChange={(value) => handleParameterChange(param.name, value)}
-        >
-          <SelectTrigger_Shadcn_ className="h-8">
-            <SelectValue_Shadcn_ placeholder="Select value" />
-          </SelectTrigger_Shadcn_>
-          <SelectContent_Shadcn_>
-            {param.possibleValues.map((value) => (
-              <SelectItem_Shadcn_ key={value} value={value}>
-                {value}
-              </SelectItem_Shadcn_>
-            ))}
-          </SelectContent_Shadcn_>
-        </Select_Shadcn_>
-      )
-    }
-
-    return (
-      <Input_Shadcn_
-        size="tiny"
-        value={currentValue}
-        onChange={(e) => handleParameterChange(param.name, e.target.value)}
-      />
-    )
-  }
-
-  return (
-    <Popover_Shadcn_ modal={false}>
-      <PopoverTrigger_Shadcn_ asChild>
-        <Button icon={<ArrowUpDown size={14} />} type="text" size="tiny" className="w-7 h-7" />
-      </PopoverTrigger_Shadcn_>
-      <PopoverContent_Shadcn_ side="bottom" align="end" className="w-[300px] p-4">
-        <div className="space-y-4">
-          <div className="space-y-2">
-            {parameters.map((param) => (
-              <div key={param.name} className="grid gap-2">
-                <Label_Shadcn_ className="flex items-center gap-2">
-                  {param.name}
-                  {param.occurrences > 1 && (
-                    <span className="text-xs text-foreground-light">
-                      (used {param.occurrences} times)
-                    </span>
-                  )}
-                </Label_Shadcn_>
-                {renderInput(param)}
-              </div>
-            ))}
-          </div>
-          {onSubmit && (
-            <div className="flex justify-end">
-              <Button type="primary" size="tiny" onClick={() => onSubmit(tempParameters)}>
-                Apply changes
-              </Button>
-            </div>
-          )}
-        </div>
-      </PopoverContent_Shadcn_>
-    </Popover_Shadcn_>
-  )
-}

apps/studio/package.json

@@ -112,8 +112,7 @@
     "react-beautiful-dnd": "^13.1.0",
     "react-contexify": "^5.0.0",
     "react-data-grid": "7.0.0-beta.41",
-    "react-datepicker": "^4.18.0",
-    "react-day-picker": "^8.8.0",
+    "react-day-picker": "^9.11.1",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "catalog:",

apps/studio/pages/_app.tsx

@@ -1,7 +1,6 @@
 import 'react-data-grid/lib/styles.css'
 import 'styles/code.scss'
 import 'styles/contextMenu.scss'
-import 'styles/date-picker.scss'
 import 'styles/editor.scss'
 import 'styles/graphiql-base.scss'
 import 'styles/grid.scss'

apps/studio/styles/date-picker.scss

@@ -1,104 +0,0 @@
-/* // date picker */
-
-.react-datepicker__input-container input {
-  @apply block w-full text-base md:text-sm bg-white border border-background-surface-100 rounded shadow-sm;
-}
-
-.react-datepicker-popper {
-  @apply z-40 w-72 text-sm bg-surface-100 shadow px-3 py-2 border-2 border-background rounded;
-}
-
-.react-datepicker-left {
-  @apply absolute left-0 right-auto top-11 transform-none #{!important};
-}
-
-.react-datepicker-right {
-  @apply absolute right-0 left-auto top-11 transform-none #{!important};
-}
-
-.react-datepicker__portal {
-  @apply absolute z-10 w-72 text-sm transform-none bg-studio shadow px-3 py-2 top-12 right-0 border-2 border-background rounded;
-}
-
-.react-datepicker__month-container {
-  @apply flex flex-col;
-}
-
-.react-datepicker__month {
-  @apply flex flex-col;
-  @apply -space-y-px;
-}
-
-.react-datepicker__current-month {
-  @apply ml-2.5 text-lg font-semibold text-border-stronger;
-}
-
-.react-datepicker__week {
-  @apply flex -space-x-px;
-}
-
-.react-datepicker__day-names {
-  @apply flex -space-x-px text-foreground-lighter font-normal text-center text-xs;
-}
-
-.react-datepicker__day-name {
-  @apply w-10 h-10 flex items-center justify-center py-1 rounded-full;
-}
-
-.react-datepicker__navigation {
-  @apply absolute top-2;
-}
-
-.react-datepicker__navigation--previous {
-  @apply right-12 w-10 h-10 rounded transition flex items-center justify-center hover:bg-studio;
-}
-
-.react-datepicker__navigation--next {
-  @apply right-4 w-10 h-10 rounded transition flex items-center justify-center hover:bg-studio;
-}
-
-.react-datepicker__day {
-  @apply w-10 h-10 flex items-center font-normal justify-center text-sm leading-loose transition text-foreground-light cursor-pointer;
-  /* @apply mb-1 py-1; */
-  @apply -space-y-px;
-  @apply border border-default;
-}
-
-.react-datepicker__day--disabled {
-  @apply cursor-not-allowed opacity-40 hover:bg-transparent;
-}
-
-.react-datepicker__day--outside-month {
-  @apply text-border-stronger;
-}
-
-.react-datepicker__day--in-range {
-  @apply bg-brand-400 text-scale-fixed-100 border-brand-300 text-foreground;
-}
-
-.react-datepicker__day--in-selecting-range {
-  @apply bg-brand-400 text-scale-fixed-100 border-brand-400 text-foreground;
-}
-
-.react-datepicker__day--selecting-range-start,
-.react-datepicker__day--selecting-range-end {
-  @apply bg-brand-300 text-foreground hover:bg-brand-400;
-}
-
-.react-datepicker__day--selected,
-.react-datepicker__day--selected.react-datepicker__day--highlighted {
-  @apply bg-brand text-foreground;
-}
-
-.react-datepicker__day--range-start,
-.react-datepicker__day--range-end {
-  @apply bg-brand text-foreground;
-}
-
-.react-datepicker__day--highlighted {
-  @apply bg-overlay-hover text-foreground-light;
-}
-
-.react-datepicker__aria-live {
-  @apply sr-only;
-}

apps/studio/tests/features/logs/Logs.Datepickers.test.tsx

@@ -71,8 +71,8 @@ test('renders datepicker selected dates in local time', async () => {
     `${from.format('DD MMM')}, ${from.format('HH:mm')} - ${to.format('DD MMM')}, ${to.format('HH:mm')}`
   )
   // selected date should be in local time
-  await screen.findByText('25', { selector: "*[class*='--range-start'" })
-  await screen.findByText('27', { selector: "*[class*='--range-end'" })
+  await screen.findByText('25', { selector: "*[aria-label*='selected'" })
+  await screen.findByText('27', { selector: "*[aria-label*='selected'" })
 })
 
 test('datepicker onSubmit will return ISO string of selected dates', async () => {

packages/ui/package.json

@@ -66,7 +66,7 @@
     "react": "catalog:",
     "react-accessible-treeview": "^2.11.2",
     "react-copy-to-clipboard": "^5.1.0",
-    "react-day-picker": "^8.8.0",
+    "react-day-picker": "^9.11.1",
     "react-dom": "catalog:",
     "react-hook-form": "^7.45.0",
     "react-intersection-observer": "^9.8.2",

packages/ui/src/components/shadcn/ui/calendar.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { ChevronLeft, ChevronRight } from 'lucide-react'
-import * as React from 'react'
 import { DayPicker } from 'react-day-picker'
 
 import { cn } from '../../../lib/utils/cn'
@@ -10,53 +9,99 @@ import { buttonVariants } from './button'
 export type CalendarProps = React.ComponentProps<typeof DayPicker>
 
 function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
-  // [Joshen] Wondering if this is a bug with react-day-picker v8 whereby a single selected date
-  // has styles applied for both day_range_start and day_range_end. This might be fixed with the latest
-  // version of react-day-picker, but in case we can opt for a pure tailwind solution instead of JS
   const fullDateRangeSelected =
     props.mode === 'range' && !!props.selected?.from && !!props.selected?.to
 
+  const {
+    months,
+    month,
+    month_caption,
+    caption_label,
+    button_previous,
+    button_next,
+    month_grid,
+    weekdays,
+    weekday,
+    week,
+    day,
+    day_button,
+    selected,
+    today,
+    outside,
+    disabled,
+    range_start,
+    range_middle,
+    range_end,
+    hidden,
+    ...restClassNames
+  } = classNames ?? {}
+
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn('p-3', className)}
       classNames={{
-        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
-        month: 'space-y-4',
-        caption: 'flex justify-center pt-1 relative items-center',
-        caption_label: 'text-sm font-medium',
-        nav: 'space-x-1 flex items-center',
-        nav_button: cn(
+        months: cn(
+          'relative flex flex-col sm:flex-row space-y-4 sm:[&>*:not(nav)+*]:ml-4 sm:space-y-0',
+          months
+        ),
+        month: cn('space-y-4', month),
+        month_caption: cn('flex justify-center pt-1 relative items-center', month_caption),
+        caption_label: cn('text-sm font-medium', caption_label),
+        button_previous: cn(
           buttonVariants({ variant: 'outline' }),
-          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+          'z-[5]',
+          'aria-disabled:opacity-25 aria-disabled:hover:opacity-25 aria-disabled:cursor-not-allowed',
+          'absolute left-0 top-0',
+          button_previous
         ),
-        nav_button_previous: 'absolute left-1',
-        nav_button_next: 'absolute right-1',
-        table: 'w-full border-collapse space-y-1',
-        head_row: 'flex',
-        head_cell: 'text-foreground-muted rounded-md w-9 font-normal text-[0.8rem]',
-        row: 'flex w-full mt-2',
-        cell: cn(
-          'text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md',
-          'last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20'
+        button_next: cn(
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+          'z-[5]',
+          'aria-disabled:opacity-25 aria-disabled:hover:opacity-25 aria-disabled:cursor-not-allowed',
+          'absolute right-0 top-0',
+          button_next
         ),
+        month_grid: cn('w-full border-collapse space-y-1', month_grid),
+        weekdays: cn('flex', weekdays),
+        weekday: cn('text-foreground-muted rounded-md w-9 font-normal text-[0.8rem]', weekday),
+        week: cn('flex w-full mt-2', week),
         day: cn(
-          buttonVariants({ variant: 'ghost' }),
-          'h-9 w-9 p-0 font-normal aria-selected:opacity-100'
+          'text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md',
+          'last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
+          day
         ),
-        day_selected: 'bg-brand-500 text-foreground text-foreground',
-        day_today: 'bg-accent text-accent-foreground',
-        day_outside: 'text-foreground-muted opacity-50',
-        day_disabled: 'text-foreground-muted opacity-50',
-        day_range_start: cn(fullDateRangeSelected && 'bg-brand-500 rounded-r-none'),
-        day_range_middle: 'aria-selected:bg-brand-400 rounded-none',
-        day_range_end: cn(fullDateRangeSelected && 'bg-brand-500 rounded-l-none'),
-        day_hidden: 'invisible',
-        ...classNames,
+        day_button: cn(
+          buttonVariants({ variant: 'ghost' }),
+          'h-9 w-9 p-0 font-normal aria-selected:opacity-100',
+          day_button
+        ),
+        selected: cn('bg-brand-500 text-foreground text-foreground', selected),
+        today: cn('bg-accent text-accent-foreground', today),
+        outside: cn('text-foreground-muted opacity-50', outside),
+        disabled: cn('text-foreground-muted opacity-50', disabled),
+        range_start: cn(fullDateRangeSelected && 'bg-brand-500 rounded-r-none', range_start),
+        range_middle: cn('aria-selected:bg-brand-400 rounded-none', range_middle),
+        range_end: cn(fullDateRangeSelected && 'bg-brand-500 rounded-l-none', range_end),
+        hidden: cn('invisible', hidden),
+        ...restClassNames,
       }}
       components={{
-        IconLeft: () => <ChevronLeft className="h-4 w-4" />,
-        IconRight: () => <ChevronRight className="h-4 w-4" />,
+        Chevron: (props) => {
+          const { className, ...rest } = props
+
+          if (props.orientation === 'left') {
+            return (
+              <ChevronLeft className={cn('h-4 w-4 pointer-events-none', className)} {...rest} />
+            )
+          } else {
+            return (
+              <ChevronRight className={cn('h-4 w-4 pointer-events-none', className)} {...rest} />
+            )
+          }
+        },
       }}
       {...props}
     />

pnpm-lock.yaml

@@ -259,6 +259,9 @@ importers:
       react:
         specifier: 'catalog:'
         version: 18.3.1
+      react-day-picker:
+        specifier: ^9.11.1
+        version: 9.11.1(react@18.3.1)
       react-docgen:
         specifier: ^7.0.3
         version: 7.0.3(supports-color@8.1.1)
@@ -397,7 +400,7 @@ importers:
         version: 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@sentry/nextjs':
         specifier: ^10.3.0
-        version: 10.3.0(@opentelemetry/context-async-hooks@2.0.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.0.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.0.1(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@15.5.2(@babel/core@7.28.4(supports-color@8.1.1))(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react@18.3.1)(supports-color@8.1.1)(webpack@5.94.0)
+        version: 10.3.0(@opentelemetry/context-async-hooks@2.0.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.0.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.0.1(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@15.5.2(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react@18.3.1)(supports-color@8.1.1)(webpack@5.94.0)
       '@supabase/supabase-js':
         specifier: 'catalog:'
         version: 2.78.0
@@ -812,7 +815,7 @@ importers:
         version: 1.1.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@sentry/nextjs':
         specifier: ^10.3.0
-        version: 10.3.0(@opentelemetry/context-async-hooks@2.0.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.0.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.0.1(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@15.5.2(@babel/core@7.28.4(supports-color@8.1.1))(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react@18.3.1)(supports-color@8.1.1)(webpack@5.94.0)
+        version: 10.3.0(@opentelemetry/context-async-hooks@2.0.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.0.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.0.1(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@15.5.2(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react@18.3.1)(supports-color@8.1.1)(webpack@5.94.0)
       '@std/path':
         specifier: npm:@jsr/std__path@^1.0.8
         version: '@jsr/std__path@1.0.8'
@@ -990,12 +993,9 @@ importers:
       react-data-grid:
         specifier: 7.0.0-beta.41
         version: 7.0.0-beta.41(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-datepicker:
-        specifier: ^4.18.0
-        version: 4.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-day-picker:
-        specifier: ^8.8.0
-        version: 8.8.0(date-fns@2.30.0)(react@18.3.1)
+        specifier: ^9.11.1
+        version: 9.11.1(react@18.3.1)
       react-dnd:
         specifier: ^16.0.1
         version: 16.0.1(@types/hoist-non-react-statics@3.3.2)(@types/node@22.13.14)(@types/react@18.3.3)(react@18.3.1)
@@ -1474,7 +1474,7 @@ importers:
         version: 1.114.27(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@tanstack/react-start':
         specifier: ^1.114.25
-        version: 1.114.27(@electric-sql/pglite@0.2.15)(@tanstack/react-router@1.114.27(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/node@22.13.14)(aws4fetch@1.0.20)(babel-plugin-macros@3.1.0)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(encoding@0.1.13)(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(vite@7.1.11(@types/node@22.13.14)(jiti@2.5.1)(sass@1.77.4)(terser@5.39.0)(tsx@4.20.3)(yaml@2.8.1))(webpack@5.94.0(esbuild@0.25.2))(yaml@2.8.1)
+        version: 1.114.27(@electric-sql/pglite@0.2.15)(@tanstack/react-router@1.114.27(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/node@22.13.14)(aws4fetch@1.0.20)(babel-plugin-macros@3.1.0)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(vite@7.1.11(@types/node@22.13.14)(jiti@2.5.1)(sass@1.77.4)(terser@5.39.0)(tsx@4.20.3)(yaml@2.8.1))(webpack@5.94.0(esbuild@0.25.2))(yaml@2.8.1)
       '@types/common-tags':
         specifier: ^1.8.4
         version: 1.8.4
@@ -1576,7 +1576,7 @@ importers:
         version: 1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@sentry/nextjs':
         specifier: ^10
-        version: 10.3.0(@opentelemetry/context-async-hooks@2.0.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.0.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.0.1(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@15.5.2(@babel/core@7.28.4(supports-color@8.1.1))(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react@18.3.1)(supports-color@8.1.1)(webpack@5.94.0)
+        version: 10.3.0(@opentelemetry/context-async-hooks@2.0.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.0.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.0.1(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@15.5.2(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react@18.3.1)(supports-color@8.1.1)(webpack@5.94.0)
       '@supabase/supabase-js':
         specifier: 'catalog:'
         version: 2.78.0
@@ -2300,8 +2300,8 @@ importers:
         specifier: ^5.1.0
         version: 5.1.0(react@18.3.1)
       react-day-picker:
-        specifier: ^8.8.0
-        version: 8.8.0(date-fns@2.30.0)(react@18.3.1)
+        specifier: ^9.11.1
+        version: 9.11.1(react@18.3.1)
       react-dom:
         specifier: 'catalog:'
         version: 18.3.1(react@18.3.1)
@@ -3414,6 +3414,9 @@ packages:
   '@date-fns/tz@1.2.0':
     resolution: {integrity: sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg==}
 
+  '@date-fns/tz@1.4.1':
+    resolution: {integrity: sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==}
+
   '@deno/shim-deno-test@0.5.0':
     resolution: {integrity: sha512-4nMhecpGlPi0cSzT67L+Tm+GOJqvuk8gqHBziqcUQOarnuIax1z96/gJHCSIz2Z0zhxE6Rzwb3IZXPtFh51j+w==}
 
@@ -11446,6 +11449,9 @@ packages:
   dataloader@2.2.3:
     resolution: {integrity: sha512-y2krtASINtPFS1rSDjacrFgn1dcUuoREVabwlOGOe4SdxenREqwjwjElAdwvbGM7kgZz9a3KVicWR7vcz8rnzA==}
 
+  date-fns-jalali@4.1.0-0:
+    resolution: {integrity: sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==}
+
   date-fns@2.30.0:
     resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
     engines: {node: '>=0.11'}
@@ -16782,23 +16788,17 @@ packages:
       react: ^18.0
       react-dom: ^18.0
 
-  react-datepicker@4.18.0:
-    resolution: {integrity: sha512-0MYt3HmLbHVk1sw4v+RCbLAVg5TA3jWP7RyjZbo53PC+SEi+pjdgc92lB53ai/ENZaTOhbXmgni9GzvMrorMAw==}
-    peerDependencies:
-      react: ^16.9.0 || ^17 || ^18
-      react-dom: ^16.9.0 || ^17 || ^18
-
   react-datepicker@7.6.0:
     resolution: {integrity: sha512-9cQH6Z/qa4LrGhzdc3XoHbhrxNcMi9MKjZmYgF/1MNNaJwvdSjv3Xd+jjvrEEbKEf71ZgCA3n7fQbdwd70qCRw==}
     peerDependencies:
       react: ^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc
       react-dom: ^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc
 
-  react-day-picker@8.8.0:
-    resolution: {integrity: sha512-QIC3uOuyGGbtypbd5QEggsCSqVaPNu8kzUWquZ7JjW9fuWB9yv7WyixKmnaFelTLXFdq7h7zU6n/aBleBqe/dA==}
+  react-day-picker@9.11.1:
+    resolution: {integrity: sha512-l3ub6o8NlchqIjPKrRFUCkTUEq6KwemQlfv3XZzzwpUeGwmDJ+0u0Upmt38hJyd7D/vn2dQoOoLV/qAp0o3uUw==}
+    engines: {node: '>=18'}
     peerDependencies:
-      date-fns: ^2.28.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: '>=16.8.0'
 
   react-devtools-inline@4.4.0:
     resolution: {integrity: sha512-ES0GolSrKO8wsKbsEkVeiR/ZAaHQTY4zDh1UW8DImVmm8oaGLl3ijJDvSGe+qDRKPZdPRnDtWWnSvvrgxXdThQ==}
@@ -16933,12 +16933,6 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
 
-  react-onclickoutside@6.13.0:
-    resolution: {integrity: sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==}
-    peerDependencies:
-      react: ^15.5.x || ^16.x || ^17.x || ^18.x
-      react-dom: ^15.5.x || ^16.x || ^17.x || ^18.x
-
   react-popper@2.3.0:
     resolution: {integrity: sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==}
     peerDependencies:
@@ -21802,6 +21796,8 @@ snapshots:
 
   '@date-fns/tz@1.2.0': {}
 
+  '@date-fns/tz@1.4.1': {}
+
   '@deno/shim-deno-test@0.5.0': {}
 
   '@deno/shim-deno@0.19.2':
@@ -27570,7 +27566,7 @@ snapshots:
 
   '@sentry/core@10.3.0': {}
 
-  '@sentry/nextjs@10.3.0(@opentelemetry/context-async-hooks@2.0.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.0.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.0.1(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@15.5.2(@babel/core@7.28.4(supports-color@8.1.1))(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react@18.3.1)(supports-color@8.1.1)(webpack@5.94.0)':
+  '@sentry/nextjs@10.3.0(@opentelemetry/context-async-hooks@2.0.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.0.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.0.1(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@15.5.2(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react@18.3.1)(supports-color@8.1.1)(webpack@5.94.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/semantic-conventions': 1.36.0
@@ -28639,7 +28635,7 @@ snapshots:
       tiny-invariant: 1.3.3
       tiny-warning: 1.0.3
 
-  '@tanstack/react-start-client@1.114.27(@electric-sql/pglite@0.2.15)(@types/node@22.13.14)(aws4fetch@1.0.20)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(encoding@0.1.13)(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.1)':
+  '@tanstack/react-start-client@1.114.27(@electric-sql/pglite@0.2.15)(@types/node@22.13.14)(aws4fetch@1.0.20)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.1)':
     dependencies:
       '@tanstack/react-router': 1.114.27(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@tanstack/router-core': 1.114.25
@@ -28650,7 +28646,7 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
       tiny-invariant: 1.3.3
       tiny-warning: 1.0.3
-      vinxi: 0.5.3(@electric-sql/pglite@0.2.15)(@types/node@22.13.14)(aws4fetch@1.0.20)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(encoding@0.1.13)(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.1)
+      vinxi: 0.5.3(@electric-sql/pglite@0.2.15)(@types/node@22.13.14)(aws4fetch@1.0.20)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.1)
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -28694,7 +28690,7 @@ snapshots:
       - xml2js
       - yaml
 
-  '@tanstack/react-start-config@1.114.27(@electric-sql/pglite@0.2.15)(@tanstack/react-router@1.114.27(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/node@22.13.14)(aws4fetch@1.0.20)(babel-plugin-macros@3.1.0)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(encoding@0.1.13)(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(vite@7.1.11(@types/node@22.13.14)(jiti@2.5.1)(sass@1.77.4)(terser@5.39.0)(tsx@4.20.3)(yaml@2.8.1))(webpack@5.94.0(esbuild@0.25.2))(yaml@2.8.1)':
+  '@tanstack/react-start-config@1.114.27(@electric-sql/pglite@0.2.15)(@tanstack/react-router@1.114.27(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/node@22.13.14)(aws4fetch@1.0.20)(babel-plugin-macros@3.1.0)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(vite@7.1.11(@types/node@22.13.14)(jiti@2.5.1)(sass@1.77.4)(terser@5.39.0)(tsx@4.20.3)(yaml@2.8.1))(webpack@5.94.0(esbuild@0.25.2))(yaml@2.8.1)':
     dependencies:
       '@tanstack/react-start-plugin': 1.114.12(@types/node@22.13.14)(jiti@2.5.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(yaml@2.8.1)
       '@tanstack/router-core': 1.114.25
@@ -28704,11 +28700,11 @@ snapshots:
       '@tanstack/start-server-functions-handler': 1.114.25
       '@vitejs/plugin-react': 4.3.4(supports-color@8.1.1)(vite@7.1.11(@types/node@22.13.14)(jiti@2.5.1)(sass@1.77.4)(terser@5.39.0)(tsx@4.20.3)(yaml@2.8.1))
       import-meta-resolve: 4.1.0
-      nitropack: 2.11.7(@electric-sql/pglite@0.2.15)(aws4fetch@1.0.20)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(encoding@0.1.13)(supports-color@8.1.1)(typescript@5.9.2)
+      nitropack: 2.11.7(@electric-sql/pglite@0.2.15)(aws4fetch@1.0.20)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(supports-color@8.1.1)(typescript@5.9.2)
       ofetch: 1.4.1
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      vinxi: 0.5.3(@electric-sql/pglite@0.2.15)(@types/node@22.13.14)(aws4fetch@1.0.20)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(encoding@0.1.13)(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.1)
+      vinxi: 0.5.3(@electric-sql/pglite@0.2.15)(@types/node@22.13.14)(aws4fetch@1.0.20)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.1)
       vite: 7.1.11(@types/node@22.13.14)(jiti@2.5.1)(sass@1.77.4)(terser@5.39.0)(tsx@4.20.3)(yaml@2.8.1)
       zod: 3.25.76
     transitivePeerDependencies:
@@ -28786,11 +28782,11 @@ snapshots:
       - tsx
       - yaml
 
-  '@tanstack/react-start-router-manifest@1.114.25(@electric-sql/pglite@0.2.15)(@types/node@22.13.14)(aws4fetch@1.0.20)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(encoding@0.1.13)(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.1)':
+  '@tanstack/react-start-router-manifest@1.114.25(@electric-sql/pglite@0.2.15)(@types/node@22.13.14)(aws4fetch@1.0.20)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.1)':
     dependencies:
       '@tanstack/router-core': 1.114.25
       tiny-invariant: 1.3.3
-      vinxi: 0.5.3(@electric-sql/pglite@0.2.15)(@types/node@22.13.14)(aws4fetch@1.0.20)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(encoding@0.1.13)(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.1)
+      vinxi: 0.5.3(@electric-sql/pglite@0.2.15)(@types/node@22.13.14)(aws4fetch@1.0.20)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.1)
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -28849,13 +28845,13 @@ snapshots:
       tiny-warning: 1.0.3
       unctx: 2.4.1
 
-  '@tanstack/react-start@1.114.27(@electric-sql/pglite@0.2.15)(@tanstack/react-router@1.114.27(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/node@22.13.14)(aws4fetch@1.0.20)(babel-plugin-macros@3.1.0)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(encoding@0.1.13)(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(vite@7.1.11(@types/node@22.13.14)(jiti@2.5.1)(sass@1.77.4)(terser@5.39.0)(tsx@4.20.3)(yaml@2.8.1))(webpack@5.94.0(esbuild@0.25.2))(yaml@2.8.1)':
+  '@tanstack/react-start@1.114.27(@electric-sql/pglite@0.2.15)(@tanstack/react-router@1.114.27(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/node@22.13.14)(aws4fetch@1.0.20)(babel-plugin-macros@3.1.0)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(vite@7.1.11(@types/node@22.13.14)(jiti@2.5.1)(sass@1.77.4)(terser@5.39.0)(tsx@4.20.3)(yaml@2.8.1))(webpack@5.94.0(esbuild@0.25.2))(yaml@2.8.1)':
     dependencies:
-      '@tanstack/react-start-client': 1.114.27(@electric-sql/pglite@0.2.15)(@types/node@22.13.14)(aws4fetch@1.0.20)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(encoding@0.1.13)(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.1)
-      '@tanstack/react-start-config': 1.114.27(@electric-sql/pglite@0.2.15)(@tanstack/react-router@1.114.27(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/node@22.13.14)(aws4fetch@1.0.20)(babel-plugin-macros@3.1.0)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(encoding@0.1.13)(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(vite@7.1.11(@types/node@22.13.14)(jiti@2.5.1)(sass@1.77.4)(terser@5.39.0)(tsx@4.20.3)(yaml@2.8.1))(webpack@5.94.0(esbuild@0.25.2))(yaml@2.8.1)
-      '@tanstack/react-start-router-manifest': 1.114.25(@electric-sql/pglite@0.2.15)(@types/node@22.13.14)(aws4fetch@1.0.20)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(encoding@0.1.13)(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.1)
+      '@tanstack/react-start-client': 1.114.27(@electric-sql/pglite@0.2.15)(@types/node@22.13.14)(aws4fetch@1.0.20)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.1)
+      '@tanstack/react-start-config': 1.114.27(@electric-sql/pglite@0.2.15)(@tanstack/react-router@1.114.27(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/node@22.13.14)(aws4fetch@1.0.20)(babel-plugin-macros@3.1.0)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(vite@7.1.11(@types/node@22.13.14)(jiti@2.5.1)(sass@1.77.4)(terser@5.39.0)(tsx@4.20.3)(yaml@2.8.1))(webpack@5.94.0(esbuild@0.25.2))(yaml@2.8.1)
+      '@tanstack/react-start-router-manifest': 1.114.25(@electric-sql/pglite@0.2.15)(@types/node@22.13.14)(aws4fetch@1.0.20)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.1)
       '@tanstack/react-start-server': 1.114.27(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@tanstack/start-api-routes': 1.114.25(@electric-sql/pglite@0.2.15)(@types/node@22.13.14)(aws4fetch@1.0.20)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(encoding@0.1.13)(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.1)
+      '@tanstack/start-api-routes': 1.114.25(@electric-sql/pglite@0.2.15)(@types/node@22.13.14)(aws4fetch@1.0.20)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.1)
       '@tanstack/start-server-functions-client': 1.114.25(@types/node@22.13.14)(babel-plugin-macros@3.1.0)(jiti@2.5.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(yaml@2.8.1)
       '@tanstack/start-server-functions-handler': 1.114.25
       '@tanstack/start-server-functions-server': 1.114.12(@types/node@22.13.14)(babel-plugin-macros@3.1.0)(jiti@2.5.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(yaml@2.8.1)
@@ -29006,11 +29002,11 @@ snapshots:
       - tsx
       - yaml
 
-  '@tanstack/start-api-routes@1.114.25(@electric-sql/pglite@0.2.15)(@types/node@22.13.14)(aws4fetch@1.0.20)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(encoding@0.1.13)(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.1)':
+  '@tanstack/start-api-routes@1.114.25(@electric-sql/pglite@0.2.15)(@types/node@22.13.14)(aws4fetch@1.0.20)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.1)':
     dependencies:
       '@tanstack/router-core': 1.114.25
       '@tanstack/start-server-core': 1.114.25
-      vinxi: 0.5.3(@electric-sql/pglite@0.2.15)(@types/node@22.13.14)(aws4fetch@1.0.20)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(encoding@0.1.13)(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.1)
+      vinxi: 0.5.3(@electric-sql/pglite@0.2.15)(@types/node@22.13.14)(aws4fetch@1.0.20)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.1)
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -29899,7 +29895,7 @@ snapshots:
     optionalDependencies:
       '@aws-sdk/credential-provider-web-identity': 3.830.0
 
-  '@vercel/nft@0.29.2(encoding@0.1.13)(rollup@4.50.2)(supports-color@8.1.1)':
+  '@vercel/nft@0.29.2(rollup@4.50.2)(supports-color@8.1.1)':
     dependencies:
       '@mapbox/node-pre-gyp': 2.0.0(encoding@0.1.13)(supports-color@8.1.1)
       '@rollup/pluginutils': 5.1.4(rollup@4.50.2)
@@ -31933,6 +31929,8 @@ snapshots:
 
   dataloader@2.2.3: {}
 
+  date-fns-jalali@4.1.0-0: {}
+
   date-fns@2.30.0:
     dependencies:
       '@babel/runtime': 7.26.10
@@ -36713,7 +36711,7 @@ snapshots:
 
   nice-try@1.0.5: {}
 
-  nitropack@2.11.7(@electric-sql/pglite@0.2.15)(aws4fetch@1.0.20)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(encoding@0.1.13)(supports-color@8.1.1)(typescript@5.9.2):
+  nitropack@2.11.7(@electric-sql/pglite@0.2.15)(aws4fetch@1.0.20)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(supports-color@8.1.1)(typescript@5.9.2):
     dependencies:
       '@cloudflare/kv-asset-handler': 0.4.0
       '@netlify/functions': 3.0.4
@@ -36724,7 +36722,7 @@ snapshots:
       '@rollup/plugin-node-resolve': 16.0.1(rollup@4.50.2)
       '@rollup/plugin-replace': 6.0.2(rollup@4.50.2)
       '@rollup/plugin-terser': 0.4.4(rollup@4.50.2)
-      '@vercel/nft': 0.29.2(encoding@0.1.13)(rollup@4.50.2)(supports-color@8.1.1)
+      '@vercel/nft': 0.29.2(rollup@4.50.2)(supports-color@8.1.1)
       archiver: 7.0.1
       c12: 3.0.2(magicast@0.3.5)
       chokidar: 4.0.3
@@ -38574,17 +38572,6 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  react-datepicker@4.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      '@popperjs/core': 2.11.8
-      classnames: 2.3.2
-      date-fns: 2.30.0
-      prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-onclickoutside: 6.13.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-popper: 2.3.0(@popperjs/core@2.11.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-
   react-datepicker@7.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@floating-ui/react': 0.27.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -38593,9 +38580,11 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  react-day-picker@8.8.0(date-fns@2.30.0)(react@18.3.1):
+  react-day-picker@9.11.1(react@18.3.1):
     dependencies:
-      date-fns: 2.30.0
+      '@date-fns/tz': 1.4.1
+      date-fns: 4.1.0
+      date-fns-jalali: 4.1.0-0
       react: 18.3.1
 
   react-devtools-inline@4.4.0:
@@ -38775,11 +38764,6 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  react-onclickoutside@6.13.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
   react-popper@2.3.0(@popperjs/core@2.11.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@popperjs/core': 2.11.8
@@ -41678,7 +41662,7 @@ snapshots:
       d3-time: 3.1.0
       d3-timer: 3.0.1
 
-  vinxi@0.5.3(@electric-sql/pglite@0.2.15)(@types/node@22.13.14)(aws4fetch@1.0.20)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(encoding@0.1.13)(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.1):
+  vinxi@0.5.3(@electric-sql/pglite@0.2.15)(@types/node@22.13.14)(aws4fetch@1.0.20)(db0@0.3.1(@electric-sql/pglite@0.2.15)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3)))(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(ioredis@5.6.0(supports-color@8.1.1))(jiti@2.5.1)(sass@1.77.4)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.1):
     dependencies:
       '@babel/core': 7.28.4(supports-color@8.1.1)
       '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.4(supports-color@8.1.1))
@@ -41700,7 +41684,7 @@ snapshots:
       hookable: 5.5.3
       http-proxy: 1.18.1
       micromatch: 4.0.8
-      nitropack: 2.11.7(@electric-sql/pglite@0.2.15)(aws4fetch@1.0.20)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(encoding@0.1.13)(supports-color@8.1.1)(typescript@5.9.2)
+      nitropack: 2.11.7(@electric-sql/pglite@0.2.15)(aws4fetch@1.0.20)(drizzle-orm@0.44.2(@electric-sql/pglite@0.2.15)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(pg@8.16.3))(supports-color@8.1.1)(typescript@5.9.2)
       node-fetch-native: 1.6.6
       path-to-regexp: 6.3.0
       pathe: 1.1.2