Feat/update deps

app/components/daterange-filter.tsx

@@ -2,7 +2,7 @@ import { format, Locale } from 'date-fns'
 import { de, enGB } from 'date-fns/locale'
 import { CalendarIcon } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
-import { type DateRange } from 'react-day-picker'
+import { type DateRange } from '@daypicker/react'
 import { useLoaderData, useSearchParams } from 'react-router'
 
 import { Badge } from './ui/badge'

app/components/ui/calendar.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react'
 import * as React from 'react'
-import { DayPicker } from 'react-day-picker'
+import { DayPicker } from '@daypicker/react'
 
 import { buttonVariants } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
@@ -22,45 +22,59 @@ function Calendar({
 			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',
+				month_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(
+				button_previous: cn(
 					buttonVariants({ variant: 'outline' }),
-					'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+					'absolute left-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
 				),
-				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:
+				button_next: cn(
+					buttonVariants({ variant: 'outline' }),
+					'absolute right-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+				),
+				month_grid: 'w-full border-collapse space-y-1',
+				weekdays: 'flex',
+				weekday:
 					'text-slate-500 rounded-md w-9 font-normal text-[0.8rem] dark:text-slate-400',
-				row: 'flex w-full mt-2',
-				cell: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-slate-100/50 [&:has([aria-selected])]:bg-slate-100 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 dark:[&:has([aria-selected].day-outside)]:bg-slate-800/50 dark:[&:has([aria-selected])]:bg-slate-800',
-				day: cn(
+				week: 'flex w-full mt-2',
+				day: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-slate-100/50 [&:has([aria-selected])]:bg-slate-100 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 dark:[&:has([aria-selected].day-outside)]:bg-slate-800/50 dark:[&:has([aria-selected])]:bg-slate-800',
+				day_button: cn(
 					buttonVariants({ variant: 'ghost' }),
 					'h-9 w-9 p-0 font-normal aria-selected:opacity-100',
 				),
-				day_range_end: 'day-range-end',
-				day_selected:
+				range_end: 'day-range-end',
+				selected:
 					'bg-slate-900 text-slate-50 hover:bg-slate-900 hover:text-slate-50 focus:bg-slate-900 focus:text-slate-50 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50 dark:hover:text-slate-900 dark:focus:bg-slate-50 dark:focus:text-slate-900',
-				day_today:
+				today:
 					'bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-slate-50',
-				day_outside:
+				outside:
 					'day-outside text-slate-500 aria-selected:bg-slate-100/50 aria-selected:text-slate-500 dark:text-slate-400 dark:aria-selected:bg-slate-800/50 dark:aria-selected:text-slate-400',
-				day_disabled: 'text-slate-500 opacity-50 dark:text-slate-400',
-				day_range_middle:
+				disabled: 'text-slate-500 opacity-50 dark:text-slate-400',
+				range_middle:
 					'aria-selected:bg-slate-100 aria-selected:text-slate-900 dark:aria-selected:bg-slate-800 dark:aria-selected:text-slate-50',
-				day_hidden: 'invisible',
+				hidden: 'invisible',
 				...classNames,
 			}}
 			components={{
-				Chevron: ({ className, ...props }) =>
-					props.orientation === 'left' ? (
-						<ChevronLeft className={cn('h-4 w-4', className)} {...props} />
-					) : (
-						<ChevronRight className={cn('h-4 w-4', className)} {...props} />
-					),
+				Chevron: ({ className, orientation, size, disabled, style }) => {
+					const Icon =
+						orientation === 'left'
+							? ChevronLeft
+							: orientation === 'up'
+								? ChevronUp
+								: orientation === 'down'
+									? ChevronDown
+									: ChevronRight
+
+					return (
+						<Icon
+							className={cn('h-4 w-4', disabled && 'opacity-50', className)}
+							size={size}
+							style={style}
+						/>
+					)
+				},
 			}}
 			{...props}
 		/>

app/components/ui/range-picker.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react'
 import { addDays, format } from 'date-fns'
 import { CalendarIcon } from 'lucide-react'
-import { type DateRange } from 'react-day-picker'
+import { type DateRange } from '@daypicker/react'
 
 import { Button } from '@/components/ui/button'
 import { Calendar } from '@/components/ui/calendar'