Update react-day-picker to 9.x (#18247)

* update react-day-picker to 9.x

* fix shadcn calendar component

* update review activity custom component for rdp

* fix colors

web/package-lock.json

@@ -25,7 +25,7 @@
         "@radix-ui/react-select": "^2.1.6",
         "@radix-ui/react-separator": "^1.1.2",
         "@radix-ui/react-slider": "^1.2.3",
-        "@radix-ui/react-slot": "^1.1.2",
+        "@radix-ui/react-slot": "^1.2.2",
         "@radix-ui/react-switch": "^1.1.3",
         "@radix-ui/react-tabs": "^1.1.3",
         "@radix-ui/react-toggle": "^1.1.2",
@@ -54,7 +54,7 @@
         "nosleep.js": "^0.12.0",
         "react": "^18.3.1",
         "react-apexcharts": "^1.4.1",
-        "react-day-picker": "^8.10.1",
+        "react-day-picker": "^9.7.0",
         "react-device-detect": "^2.2.3",
         "react-dom": "^18.3.1",
         "react-dropzone": "^14.3.8",
@@ -268,6 +268,12 @@
       "integrity": "sha512-U9DBDe5fxHmbwQww9rFxMLNI2Wlg7DhPzI7AVFpq8GehiUP7+NwuMPXpP4zAd52sgkxtOqOeMjgE5g0ZLnQZ0w==",
       "license": "MIT"
     },
+    "node_modules/@date-fns/tz": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.2.0.tgz",
+      "integrity": "sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg==",
+      "license": "MIT"
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.0",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.0.tgz",
@@ -1244,6 +1250,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-alert-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
+      "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.2.tgz",
@@ -1346,6 +1370,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
+      "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
@@ -1440,6 +1482,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
+      "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
@@ -1663,6 +1723,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
+      "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popover": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.6.tgz",
@@ -1700,6 +1778,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
+      "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.2.tgz",
@@ -1803,6 +1899,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
+      "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-radio-group": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.2.3.tgz",
@@ -1940,6 +2054,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
+      "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-separator": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.2.tgz",
@@ -1997,12 +2129,12 @@
       }
     },
     "node_modules/@radix-ui/react-slot": {
-      "version": "1.1.2",
+      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.2.tgz",
-      "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
+      "integrity": "sha512-y7TBO4xN4Y94FvcWIOIh18fM4R1A8S4q1jhoz4PNzOoHsFcN8pogcFmZrTYAm4F9VRUrWP/Mw7xSKybIeRI+CQ==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.1"
+        "@radix-ui/react-compose-refs": "1.1.2"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -2014,6 +2146,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-slot/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-switch": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.3.tgz",
@@ -2161,6 +2308,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
+      "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
@@ -4395,11 +4560,18 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
       "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/kossnocorp"
       }
     },
+    "node_modules/date-fns-jalali": {
+      "version": "4.1.0-0",
+      "resolved": "https://registry.npmjs.org/date-fns-jalali/-/date-fns-jalali-4.1.0-0.tgz",
+      "integrity": "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==",
+      "license": "MIT"
+    },
     "node_modules/date-fns-tz": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-3.2.0.tgz",
@@ -7196,16 +7368,34 @@
       }
     },
     "node_modules/react-day-picker": {
-      "version": "8.10.1",
+      "version": "9.7.0",
-      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.10.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.7.0.tgz",
-      "integrity": "sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==",
+      "integrity": "sha512-urlK4C9XJZVpQ81tmVgd2O7lZ0VQldZeHzNejbwLWZSkzHH498KnArT0EHNfKBOWwKc935iMLGZdxXPRISzUxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@date-fns/tz": "1.2.0",
+        "date-fns": "4.1.0",
+        "date-fns-jalali": "4.1.0-0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
       "funding": {
         "type": "individual",
         "url": "https://github.com/sponsors/gpbl"
       },
       "peerDependencies": {
-        "date-fns": "^2.28.0 || ^3.0.0",
+        "react": ">=16.8.0"
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-day-picker/node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
       }
     },
     "node_modules/react-device-detect": {

web/package.json

@@ -31,7 +31,7 @@
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slider": "^1.2.3",
-    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-slot": "^1.2.2",
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-toggle": "^1.1.2",
@@ -60,7 +60,7 @@
     "nosleep.js": "^0.12.0",
     "react": "^18.3.1",
     "react-apexcharts": "^1.4.1",
-    "react-day-picker": "^8.10.1",
+    "react-day-picker": "^9.7.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.3.8",

web/src/components/overlay/ReviewActivityCalendar.tsx

@@ -1,9 +1,9 @@
 import { RecordingsSummary, ReviewSummary } from "@/types/review";
 import { Calendar } from "../ui/calendar";
-import { useMemo } from "react";
+import { ButtonHTMLAttributes, useEffect, useMemo, useRef } from "react";
 import { FaCircle } from "react-icons/fa";
 import { getUTCOffset } from "@/utils/dateUtil";
-import { type DayContentProps } from "react-day-picker";
+import { type DayButtonProps } from "react-day-picker";
 import { LAST_24_HOURS_KEY } from "@/types/filter";
 import { usePersistence } from "@/hooks/use-persistence";
 import { cn } from "@/lib/utils";
@@ -94,7 +94,7 @@ export default function ReviewActivityCalendar({
       onSelect={onSelect}
       modifiers={modifiers}
       components={{
-        DayContent: ReviewActivityDay,
+        DayButton: ReviewActivityDay,
       }}
       defaultMonth={selectedDay ?? new Date()}
       weekStartsOn={(weekStartsOn ?? 0) as WeekStartsOnType}
@@ -102,43 +102,61 @@ export default function ReviewActivityCalendar({
   );
 }
 
-function ReviewActivityDay({ date, activeModifiers }: DayContentProps) {
+function ReviewActivityDay({
+  day,
+  modifiers,
+  ...buttonProps
+}: DayButtonProps & ButtonHTMLAttributes<HTMLButtonElement>) {
+  const ref = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
   const dayActivity = useMemo(() => {
-    if (activeModifiers["alerts"]) {
+    if (modifiers["alerts"]) {
       return "alert";
-    } else if (activeModifiers["detections"]) {
+    } else if (modifiers["detections"]) {
       return "detection";
     } else {
       return "none";
     }
-  }, [activeModifiers]);
+  }, [modifiers]);
 
   return (
-    <div className={cn("flex flex-col items-center justify-center gap-0.5")}>
+    <button ref={ref} {...buttonProps}>
-      <span
+      <div className={cn("flex flex-col items-center justify-center gap-0.5")}>
-        className={cn(
+        <span
-          "w-4",
+          className={cn(
-          activeModifiers["recordings"]
+            modifiers["recordings"] ? "text-primary" : "text-primary/40",
-            ? "border-b border-primary/60 text-primary"
+          )}
-            : "text-primary/40",
+        >
-          activeModifiers.selected && "border-white text-white",
+          {day.date.getDate()}
-        )}
+        </span>
-      >
+        <div
-        {date.getDate()}
+          className={cn(
-      </span>
+            "w-4",
-      <div className="mt-0.5 flex h-2 flex-row gap-0.5">
+            modifiers["recordings"]
-        {dayActivity != "none" && (
+              ? "border-b border-primary/60 text-primary"
-          <FaCircle
+              : "text-primary/40",
-            size={6}
+            modifiers.selected && "border-white text-white",
-            className={cn(
+          )}
-              dayActivity == "alert"
+        />
-                ? "fill-severity_alert"
+
-                : "fill-severity_detection",
+        <div className="mt-0.5 flex h-2 flex-row gap-0.5">
-            )}
+          {dayActivity != "none" && (
-          />
+            <FaCircle
-        )}
+              size={6}
+              className={cn(
+                dayActivity == "alert"
+                  ? "fill-severity_alert"
+                  : "fill-severity_detection",
+              )}
+            />
+          )}
+        </div>
       </div>
-    </div>
+    </button>
   );
 }
 

web/src/components/ui/calendar.tsx

@@ -17,45 +17,59 @@ function Calendar({
   return (
     <DayPicker
       locale={locale}
+      navLayout={"around"}
       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",
+        month: "relative",
-        caption: "flex justify-center pt-1 relative items-center",
+        month_caption: "flex justify-center pt-1 relative items-center",
+        month_grid: "w-full border-collapse space-y-1 mt-4",
         caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
+        nav: "flex items-center justify-between",
-        nav_button: cn(
+        button_previous: cn(
           buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+          "h-7 w-7 absolute top-0 left-1 bg-transparent fill-primary p-0 opacity-50 hover:opacity-100 z-10",
         ),
-        nav_button_previous: "absolute left-1",
+        button_next: cn(
-        nav_button_next: "absolute right-1",
+          buttonVariants({ variant: "outline" }),
-        table: "w-full border-collapse space-y-1",
+          "h-7 w-7 absolute top-0 right-1 bg-transparent fill-primary p-0 opacity-50 hover:opacity-100 z-10",
-        head_row: "flex justify-center",
+        ),
-        head_cell:
+        weeks: "w-full border-collapse",
+        weekdays: "flex justify-center",
+        weekday:
           "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2 justify-center",
+        week: "flex w-full mt-2 justify-center",
-        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-accent/50 [&: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: "h-9 w-9 text-center text-sm p-0 relative aria-selected:opacity-100 first:aria-selected:rounded-l-md last:aria-selected:rounded-r-md",
-        day: cn(
+        day_button: cn(
           buttonVariants({ variant: "ghost" }),
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100",
+          "h-9 w-9 p-0 font-normal text-muted-foreground focus-within:relative focus-within:z-20",
         ),
-        day_range_end: "day-range-end",
+        range_start:
-        day_selected:
+          "day-range-start !bg-accent rounded-l-md [&>button]:bg-selected [&>button]:text-white [&>button]:hover:bg-selected [&>button]:hover:text-white",
-          "bg-selected text-white hover:bg-selected hover:text-white focus:bg-selected focus:text-white",
+        range_end:
-        day_today: "bg-muted text-muted-foreground",
+          "day-range-end !bg-accent rounded-r-md [&>button]:bg-selected [&>button]:text-white [&>button]:hover:bg-selected [&>button]:hover:text-white",
-        day_outside:
+        selected: cn(
-          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+          props.mode === "range"
-        day_disabled: "text-muted-foreground opacity-50",
+            ? " [&>button]:hover:bg-selected [&>button]:hover:text-white focus:bg-selected focus:text-white  [&>button]:aria-selected:text-primary"
-        day_range_middle:
+            : " [&>button]:bg-selected [&>button]:text-white  [&>button]:hover:bg-selected  [&>button]:hover:text-white focus:bg-selected focus:text-white rounded-md",
+        ),
+        today: "bg-muted text-muted-foreground !rounded-md",
+        outside:
+          "day-outside text-muted-foreground opacity-50 !aria-selected:bg-accent/50 !aria-selected:text-muted-foreground !aria-selected:opacity-30",
+        disabled: "text-muted-foreground opacity-50",
+        range_middle:
           "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
+        hidden: "invisible",
         ...classNames,
       }}
       components={{
-        IconLeft: () => <ChevronLeft className="h-4 w-4" />,
+        Chevron: ({ ...props }) =>
-        IconRight: () => <ChevronRight className="h-4 w-4" />,
+          props.orientation === "left" ? (
+            <ChevronLeft {...props} className="h-4 w-4" />
+          ) : (
+            <ChevronRight {...props} className="h-4 w-4" />
+          ),
       }}
       {...props}
     />