@helsenorge/datepicker 12.0.0-beta.2 → 12.0.2

package/components/DatePicker/index.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import React, { createContext, useContext, useState, useEffect, useMemo, useCallback, useRef } from "react";
+import React, { createContext, useContext, useCallback, useRef, useLayoutEffect, useState, useEffect, useMemo } from "react";
 import { addDays, addMonths, addWeeks, addYears, differenceInCalendarDays, differenceInCalendarMonths, eachMonthOfInterval, endOfISOWeek, endOfMonth, endOfWeek, endOfYear, format, getISOWeek, getMonth, getYear, getWeek, isAfter, isBefore, isDate, isSameDay, isSameMonth, isSameYear, max, min, setMonth, setYear, startOfDay, startOfISOWeek, startOfMonth, startOfWeek, startOfYear, isValid, parse, isWithinInterval } from "date-fns";
-import { enUS, nb } from "date-fns/locale";
+import { nb } from "date-fns/locale";
 import Button$1 from "@helsenorge/designsystem-react/components/Button";
 import Icon from "@helsenorge/designsystem-react/components/Icon";
 import Calendar from "@helsenorge/designsystem-react/components/Icons/Calendar";
@@ -14,7 +14,6 @@ import { usePseudoClasses } from "@helsenorge/designsystem-react/hooks/usePseudo
 import { isMobileUA } from "@helsenorge/designsystem-react/utils/mobile";
 import { isMutableRefObject, mergeRefs } from "@helsenorge/designsystem-react/utils/refs";
 import classNames from "classnames";
-import { enUS as enUS$1 } from "date-fns/locale/en-US";
 import reactdaypickerstyles from "react-day-picker/dist/style.module.css";
 import { useInterval } from "@helsenorge/designsystem-react/hooks/useInterval";
 import { useIsVisible } from "@helsenorge/designsystem-react/hooks/useIsVisible";
@@ -22,61 +21,27 @@ import { useLayoutEvent } from "@helsenorge/designsystem-react/hooks/useLayoutEv
 import { useSize } from "@helsenorge/designsystem-react/hooks/useSize";
 import { getSpacer } from "@helsenorge/designsystem-react/theme/currys/spacing";
 import styles from "./styles.module.scss";
+import { enUS } from "date-fns/locale/en-US";
 import ErrorWrapper from "@helsenorge/designsystem-react/components/ErrorWrapper";
 import { useUuid } from "@helsenorge/designsystem-react/hooks/useUuid";
 import { isComponent } from "@helsenorge/designsystem-react/utils/component";
-var UI;
-(function(UI2) {
-  UI2["Root"] = "root";
-  UI2["Chevron"] = "chevron";
-  UI2["Day"] = "day";
-  UI2["DayButton"] = "day_button";
-  UI2["CaptionLabel"] = "caption_label";
-  UI2["Dropdowns"] = "dropdowns";
-  UI2["Dropdown"] = "dropdown";
-  UI2["DropdownRoot"] = "dropdown_root";
-  UI2["Footer"] = "footer";
-  UI2["MonthGrid"] = "month_grid";
-  UI2["MonthCaption"] = "month_caption";
-  UI2["MonthsDropdown"] = "months_dropdown";
-  UI2["Month"] = "month";
-  UI2["Months"] = "months";
-  UI2["Nav"] = "nav";
-  UI2["NextMonthButton"] = "button_next";
-  UI2["PreviousMonthButton"] = "button_previous";
-  UI2["Week"] = "week";
-  UI2["Weeks"] = "weeks";
-  UI2["Weekday"] = "weekday";
-  UI2["Weekdays"] = "weekdays";
-  UI2["WeekNumber"] = "week_number";
-  UI2["WeekNumberHeader"] = "week_number_header";
-  UI2["YearsDropdown"] = "years_dropdown";
-})(UI || (UI = {}));
-var DayFlag;
-(function(DayFlag2) {
-  DayFlag2["disabled"] = "disabled";
-  DayFlag2["hidden"] = "hidden";
-  DayFlag2["outside"] = "outside";
-  DayFlag2["focused"] = "focused";
-  DayFlag2["today"] = "today";
-})(DayFlag || (DayFlag = {}));
-var SelectionState;
-(function(SelectionState2) {
-  SelectionState2["range_end"] = "range_end";
-  SelectionState2["range_middle"] = "range_middle";
-  SelectionState2["range_start"] = "range_start";
-  SelectionState2["selected"] = "selected";
-})(SelectionState || (SelectionState = {}));
+function tzName(timeZone, date, format2 = "long") {
+  return new Intl.DateTimeFormat("en-US", {
+    // Enforces engine to render the time. Without the option JavaScriptCore omits it.
+    hour: "numeric",
+    timeZone,
+    timeZoneName: format2
+  }).format(date).split(/\s/g).slice(2).join(" ");
+}
 const offsetFormatCache = {};
 const offsetCache = {};
 function tzOffset(timeZone, date) {
   try {
-    const format2 = offsetFormatCache[timeZone] || (offsetFormatCache[timeZone] = new Intl.DateTimeFormat("en-GB", {
+    const format2 = offsetFormatCache[timeZone] || (offsetFormatCache[timeZone] = new Intl.DateTimeFormat("en-US", {
       timeZone,
-      hour: "numeric",
       timeZoneName: "longOffset"
     }).format);
-    const offsetStr = format2(date).split("GMT")[1] || "";
+    const offsetStr = format2(date).split("GMT")[1];
     if (offsetStr in offsetCache) return offsetCache[offsetStr];
     return calcOffset(offsetStr, offsetStr.split(":"));
   } catch {
@@ -88,9 +53,10 @@ function tzOffset(timeZone, date) {
 }
 const offsetRe = /([+-]\d\d):?(\d\d)?/;
 function calcOffset(cacheStr, values) {
-  const hours = +values[0];
+  const hours = +(values[0] || 0);
   const minutes = +(values[1] || 0);
-  return offsetCache[cacheStr] = hours > 0 ? hours * 60 + minutes : hours * 60 - minutes;
+  const seconds = +(values[2] || 0) / 60;
+  return offsetCache[cacheStr] = hours * 60 + minutes > 0 ? hours * 60 + minutes + seconds : hours * 60 - minutes - seconds;
 }
 class TZDateMini extends Date {
   //#region static
@@ -127,7 +93,8 @@ class TZDateMini extends Date {
     return new TZDateMini(+this, timeZone);
   }
   getTimezoneOffset() {
-    return -tzOffset(this.timeZone, this);
+    const offset = -tzOffset(this.timeZone, this);
+    return offset > 0 ? Math.floor(offset) : Math.ceil(offset);
   }
   //#endregion
   //#region time
@@ -167,7 +134,7 @@ Object.getOwnPropertyNames(Date.prototype).forEach((method) => {
 });
 function syncToInternal(date) {
   date.internal.setTime(+date);
-  date.internal.setUTCMinutes(date.internal.getUTCMinutes() - date.getTimezoneOffset());
+  date.internal.setUTCSeconds(date.internal.getUTCSeconds() - Math.round(-tzOffset(date.timeZone, date) * 60));
 }
 function syncFromInternal(date) {
   Date.prototype.setFullYear.call(date, date.internal.getUTCFullYear(), date.internal.getUTCMonth(), date.internal.getUTCDate());
@@ -175,7 +142,8 @@ function syncFromInternal(date) {
   adjustToSystemTZ(date);
 }
 function adjustToSystemTZ(date) {
-  const offset = tzOffset(date.timeZone, date);
+  const baseOffset = tzOffset(date.timeZone, date);
+  const offset = baseOffset > 0 ? Math.floor(baseOffset) : Math.ceil(baseOffset);
   const prevHour = /* @__PURE__ */ new Date(+date);
   prevHour.setUTCHours(prevHour.getUTCHours() - 1);
   const systemOffset = -(/* @__PURE__ */ new Date(+date)).getTimezoneOffset();
@@ -185,14 +153,24 @@ function adjustToSystemTZ(date) {
   if (systemDSTChange && dstShift) date.internal.setUTCMinutes(date.internal.getUTCMinutes() + systemDSTChange);
   const offsetDiff = systemOffset - offset;
   if (offsetDiff) Date.prototype.setUTCMinutes.call(date, Date.prototype.getUTCMinutes.call(date) + offsetDiff);
-  const postOffset = tzOffset(date.timeZone, date);
+  const systemDate = /* @__PURE__ */ new Date(+date);
+  systemDate.setUTCSeconds(0);
+  const systemSecondsOffset = systemOffset > 0 ? systemDate.getSeconds() : (systemDate.getSeconds() - 60) % 60;
+  const secondsOffset = Math.round(-(tzOffset(date.timeZone, date) * 60)) % 60;
+  if (secondsOffset || systemSecondsOffset) {
+    date.internal.setUTCSeconds(date.internal.getUTCSeconds() + secondsOffset);
+    Date.prototype.setUTCSeconds.call(date, Date.prototype.getUTCSeconds.call(date) + secondsOffset + systemSecondsOffset);
+  }
+  const postBaseOffset = tzOffset(date.timeZone, date);
+  const postOffset = postBaseOffset > 0 ? Math.floor(postBaseOffset) : Math.ceil(postBaseOffset);
   const postSystemOffset = -(/* @__PURE__ */ new Date(+date)).getTimezoneOffset();
   const postOffsetDiff = postSystemOffset - postOffset;
   const offsetChanged = postOffset !== offset;
   const postDiff = postOffsetDiff - offsetDiff;
   if (offsetChanged && postDiff) {
     Date.prototype.setUTCMinutes.call(date, Date.prototype.getUTCMinutes.call(date) + postDiff);
-    const newOffset = tzOffset(date.timeZone, date);
+    const newBaseOffset = tzOffset(date.timeZone, date);
+    const newOffset = newBaseOffset > 0 ? Math.floor(newBaseOffset) : Math.ceil(newBaseOffset);
     const offsetChange = postOffset - newOffset;
     if (offsetChange) {
       date.internal.setUTCMinutes(date.internal.getUTCMinutes() + offsetChange);
@@ -261,12 +239,6 @@ class TZDate extends TZDateMini {
   }
   //#endregion
 }
-function tzName(tz, date) {
-  return new Intl.DateTimeFormat("en-GB", {
-    timeZone: tz,
-    timeZoneName: "long"
-  }).format(date).slice(12);
-}
 const FIVE_WEEKS = 5;
 const FOUR_WEEKS = 4;
 function getBroadcastWeeksInMonth(month, dateLib) {
@@ -296,10 +268,10 @@ function endOfBroadcastWeek(date, dateLib) {
 }
 class DateLib {
   /**
-   * Creates an instance of DateLib.
+   * Creates an instance of `DateLib`.
    *
-   * @param options The options for the date library.
-   * @param overrides Overrides for the date library functions.
+   * @param options Configuration options for the date library.
+   * @param overrides Custom overrides for the date library functions.
    */
   constructor(options, overrides) {
     this.Date = Date;
@@ -324,148 +296,150 @@ class DateLib {
       return new Date(year, monthIndex, date);
     };
     this.addDays = (date, amount) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.addDays) == null ? void 0 : _b.call(_a, date, amount)) ?? addDays(date, amount);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.addDays) ? this.overrides.addDays(date, amount) : addDays(date, amount);
     };
     this.addMonths = (date, amount) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.addMonths) == null ? void 0 : _b.call(_a, date, amount)) ?? addMonths(date, amount);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.addMonths) ? this.overrides.addMonths(date, amount) : addMonths(date, amount);
     };
     this.addWeeks = (date, amount) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.addWeeks) == null ? void 0 : _b.call(_a, date, amount)) ?? addWeeks(date, amount);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.addWeeks) ? this.overrides.addWeeks(date, amount) : addWeeks(date, amount);
     };
     this.addYears = (date, amount) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.addYears) == null ? void 0 : _b.call(_a, date, amount)) ?? addYears(date, amount);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.addYears) ? this.overrides.addYears(date, amount) : addYears(date, amount);
     };
     this.differenceInCalendarDays = (dateLeft, dateRight) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.differenceInCalendarDays) == null ? void 0 : _b.call(_a, dateLeft, dateRight)) ?? differenceInCalendarDays(dateLeft, dateRight);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.differenceInCalendarDays) ? this.overrides.differenceInCalendarDays(dateLeft, dateRight) : differenceInCalendarDays(dateLeft, dateRight);
     };
     this.differenceInCalendarMonths = (dateLeft, dateRight) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.differenceInCalendarMonths) == null ? void 0 : _b.call(_a, dateLeft, dateRight)) ?? differenceInCalendarMonths(dateLeft, dateRight);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.differenceInCalendarMonths) ? this.overrides.differenceInCalendarMonths(dateLeft, dateRight) : differenceInCalendarMonths(dateLeft, dateRight);
     };
     this.eachMonthOfInterval = (interval) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.eachMonthOfInterval) == null ? void 0 : _b.call(_a, interval)) ?? eachMonthOfInterval(interval);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.eachMonthOfInterval) ? this.overrides.eachMonthOfInterval(interval) : eachMonthOfInterval(interval);
     };
-    this.endOfBroadcastWeek = (date, dateLib) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.endOfBroadcastWeek) == null ? void 0 : _b.call(_a, date, dateLib)) ?? endOfBroadcastWeek(date, this);
+    this.endOfBroadcastWeek = (date) => {
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.endOfBroadcastWeek) ? this.overrides.endOfBroadcastWeek(date) : endOfBroadcastWeek(date, this);
     };
     this.endOfISOWeek = (date) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.endOfISOWeek) == null ? void 0 : _b.call(_a, date)) ?? endOfISOWeek(date);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.endOfISOWeek) ? this.overrides.endOfISOWeek(date) : endOfISOWeek(date);
     };
     this.endOfMonth = (date) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.endOfMonth) == null ? void 0 : _b.call(_a, date)) ?? endOfMonth(date);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.endOfMonth) ? this.overrides.endOfMonth(date) : endOfMonth(date);
     };
     this.endOfWeek = (date, options2) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.endOfWeek) == null ? void 0 : _b.call(_a, date, options2 ?? this.options)) ?? endOfWeek(date, options2 ?? this.options);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.endOfWeek) ? this.overrides.endOfWeek(date, options2) : endOfWeek(date, this.options);
     };
     this.endOfYear = (date) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.endOfYear) == null ? void 0 : _b.call(_a, date)) ?? endOfYear(date);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.endOfYear) ? this.overrides.endOfYear(date) : endOfYear(date);
     };
-    this.format = (date, formatStr, options2) => {
-      var _a, _b;
-      const formatted = ((_b = (_a = this.overrides) == null ? void 0 : _a.format) == null ? void 0 : _b.call(_a, date, formatStr, options2 ?? this.options)) ?? format(date, formatStr, options2 ?? this.options);
+    this.format = (date, formatStr, _options) => {
+      var _a;
+      const formatted = ((_a = this.overrides) == null ? void 0 : _a.format) ? this.overrides.format(date, formatStr, this.options) : format(date, formatStr, this.options);
       if (this.options.numerals && this.options.numerals !== "latn") {
         return this.replaceDigits(formatted);
       }
       return formatted;
     };
     this.getISOWeek = (date) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.getISOWeek) == null ? void 0 : _b.call(_a, date)) ?? getISOWeek(date);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.getISOWeek) ? this.overrides.getISOWeek(date) : getISOWeek(date);
     };
-    this.getMonth = (date) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.getMonth) == null ? void 0 : _b.call(_a, date)) ?? getMonth(date);
+    this.getMonth = (date, _options) => {
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.getMonth) ? this.overrides.getMonth(date, this.options) : getMonth(date, this.options);
     };
-    this.getYear = (date) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.getYear) == null ? void 0 : _b.call(_a, date)) ?? getYear(date);
+    this.getYear = (date, _options) => {
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.getYear) ? this.overrides.getYear(date, this.options) : getYear(date, this.options);
     };
-    this.getWeek = (date, options2) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.getWeek) == null ? void 0 : _b.call(_a, date, options2 ?? this.options)) ?? getWeek(date, options2 ?? this.options);
+    this.getWeek = (date, _options) => {
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.getWeek) ? this.overrides.getWeek(date, this.options) : getWeek(date, this.options);
     };
     this.isAfter = (date, dateToCompare) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.isAfter) == null ? void 0 : _b.call(_a, date, dateToCompare)) ?? isAfter(date, dateToCompare);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.isAfter) ? this.overrides.isAfter(date, dateToCompare) : isAfter(date, dateToCompare);
     };
     this.isBefore = (date, dateToCompare) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.isBefore) == null ? void 0 : _b.call(_a, date, dateToCompare)) ?? isBefore(date, dateToCompare);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.isBefore) ? this.overrides.isBefore(date, dateToCompare) : isBefore(date, dateToCompare);
     };
     this.isDate = (value) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.isDate) == null ? void 0 : _b.call(_a, value)) ?? isDate(value);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.isDate) ? this.overrides.isDate(value) : isDate(value);
     };
     this.isSameDay = (dateLeft, dateRight) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.isSameDay) == null ? void 0 : _b.call(_a, dateLeft, dateRight)) ?? isSameDay(dateLeft, dateRight);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.isSameDay) ? this.overrides.isSameDay(dateLeft, dateRight) : isSameDay(dateLeft, dateRight);
     };
     this.isSameMonth = (dateLeft, dateRight) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.isSameMonth) == null ? void 0 : _b.call(_a, dateLeft, dateRight)) ?? isSameMonth(dateLeft, dateRight);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.isSameMonth) ? this.overrides.isSameMonth(dateLeft, dateRight) : isSameMonth(dateLeft, dateRight);
     };
     this.isSameYear = (dateLeft, dateRight) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.isSameYear) == null ? void 0 : _b.call(_a, dateLeft, dateRight)) ?? isSameYear(dateLeft, dateRight);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.isSameYear) ? this.overrides.isSameYear(dateLeft, dateRight) : isSameYear(dateLeft, dateRight);
     };
     this.max = (dates) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.max) == null ? void 0 : _b.call(_a, dates)) ?? max(dates);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.max) ? this.overrides.max(dates) : max(dates);
     };
     this.min = (dates) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.min) == null ? void 0 : _b.call(_a, dates)) ?? min(dates);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.min) ? this.overrides.min(dates) : min(dates);
     };
     this.setMonth = (date, month) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.setMonth) == null ? void 0 : _b.call(_a, date, month)) ?? setMonth(date, month);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.setMonth) ? this.overrides.setMonth(date, month) : setMonth(date, month);
     };
     this.setYear = (date, year) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.setYear) == null ? void 0 : _b.call(_a, date, year)) ?? setYear(date, year);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.setYear) ? this.overrides.setYear(date, year) : setYear(date, year);
     };
-    this.startOfBroadcastWeek = (date, dateLib) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.startOfBroadcastWeek) == null ? void 0 : _b.call(_a, date, dateLib ?? this)) ?? startOfBroadcastWeek(date, dateLib ?? this);
+    this.startOfBroadcastWeek = (date, _dateLib) => {
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.startOfBroadcastWeek) ? this.overrides.startOfBroadcastWeek(date, this) : startOfBroadcastWeek(date, this);
     };
     this.startOfDay = (date) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.startOfDay) == null ? void 0 : _b.call(_a, date)) ?? startOfDay(date);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.startOfDay) ? this.overrides.startOfDay(date) : startOfDay(date);
     };
     this.startOfISOWeek = (date) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.startOfISOWeek) == null ? void 0 : _b.call(_a, date)) ?? startOfISOWeek(date);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.startOfISOWeek) ? this.overrides.startOfISOWeek(date) : startOfISOWeek(date);
     };
     this.startOfMonth = (date) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.startOfMonth) == null ? void 0 : _b.call(_a, date)) ?? startOfMonth(date);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.startOfMonth) ? this.overrides.startOfMonth(date) : startOfMonth(date);
     };
-    this.startOfWeek = (date) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.startOfWeek) == null ? void 0 : _b.call(_a, date)) ?? startOfWeek(date, this.options);
+    this.startOfWeek = (date, _options) => {
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.startOfWeek) ? this.overrides.startOfWeek(date, this.options) : startOfWeek(date, this.options);
     };
     this.startOfYear = (date) => {
-      var _a, _b;
-      return ((_b = (_a = this.overrides) == null ? void 0 : _a.startOfYear) == null ? void 0 : _b.call(_a, date)) ?? startOfYear(date);
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.startOfYear) ? this.overrides.startOfYear(date) : startOfYear(date);
     };
     this.options = { locale: enUS, ...options };
     this.overrides = overrides;
   }
   /**
-   * Generate digit map dynamically using Intl.NumberFormat.
+   * Generates a mapping of Arabic digits (0-9) to the target numbering system
+   * digits.
    *
    * @since 9.5.0
+   * @returns A record mapping Arabic digits to the target numerals.
    */
   getDigitMap() {
     const { numerals = "latn" } = this.options;
@@ -479,38 +453,57 @@ class DateLib {
     return digitMap;
   }
   /**
-   * Replace Arabic digits with the target numbering system digits.
+   * Replaces Arabic digits in a string with the target numbering system digits.
    *
    * @since 9.5.0
+   * @param input The string containing Arabic digits.
+   * @returns The string with digits replaced.
    */
   replaceDigits(input) {
     const digitMap = this.getDigitMap();
     return input.replace(/\d/g, (digit) => digitMap[digit] || digit);
   }
   /**
-   * Format number using the custom numbering system.
+   * Formats a number using the configured numbering system.
    *
    * @since 9.5.0
    * @param value The number to format.
-   * @returns The formatted number.
+   * @returns The formatted number as a string.
    */
   formatNumber(value) {
     return this.replaceDigits(value.toString());
   }
 }
 const defaultDateLib = new DateLib();
-function getClassNamesForModifiers(modifiers, classNames2, modifiersClassNames = {}) {
-  const modifierClassNames = Object.entries(modifiers).filter(([, active]) => active === true).reduce((previousValue, [key]) => {
-    if (modifiersClassNames[key]) {
-      previousValue.push(modifiersClassNames[key]);
-    } else if (classNames2[DayFlag[key]]) {
-      previousValue.push(classNames2[DayFlag[key]]);
-    } else if (classNames2[SelectionState[key]]) {
-      previousValue.push(classNames2[SelectionState[key]]);
-    }
-    return previousValue;
-  }, [classNames2[UI.Day]]);
-  return modifierClassNames;
+class CalendarDay {
+  constructor(date, displayMonth, dateLib = defaultDateLib) {
+    this.date = date;
+    this.displayMonth = displayMonth;
+    this.outside = Boolean(displayMonth && !dateLib.isSameMonth(date, displayMonth));
+    this.dateLib = dateLib;
+  }
+  /**
+   * Checks if this day is equal to another `CalendarDay`, considering both the
+   * date and the displayed month.
+   *
+   * @param day The `CalendarDay` to compare with.
+   * @returns `true` if the days are equal, otherwise `false`.
+   */
+  isEqualTo(day) {
+    return this.dateLib.isSameDay(day.date, this.date) && this.dateLib.isSameMonth(day.displayMonth, this.displayMonth);
+  }
+}
+class CalendarMonth {
+  constructor(month, weeks) {
+    this.date = month;
+    this.weeks = weeks;
+  }
+}
+class CalendarWeek {
+  constructor(weekNumber, days) {
+    this.days = days;
+    this.weekNumber = weekNumber;
+  }
 }
 function Button(props) {
   return React.createElement("button", { ...props });
@@ -520,13 +513,16 @@ function CaptionLabel(props) {
 }
 function Chevron(props) {
   const { size = 24, orientation = "left", className } = props;
-  return React.createElement(
-    "svg",
-    { className, width: size, height: size, viewBox: "0 0 24 24" },
-    orientation === "up" && React.createElement("polygon", { points: "6.77 17 12.5 11.43 18.24 17 20 15.28 12.5 8 5 15.28" }),
-    orientation === "down" && React.createElement("polygon", { points: "6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72" }),
-    orientation === "left" && React.createElement("polygon", { points: "16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20" }),
-    orientation === "right" && React.createElement("polygon", { points: "8 18.612 14.1888889 12.5 8 6.37733333 9.91111111 4.5 18 12.5 9.91111111 20.5" })
+  return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: handled by the parent component
+    React.createElement(
+      "svg",
+      { className, width: size, height: size, viewBox: "0 0 24 24" },
+      orientation === "up" && React.createElement("polygon", { points: "6.77 17 12.5 11.43 18.24 17 20 15.28 12.5 8 5 15.28" }),
+      orientation === "down" && React.createElement("polygon", { points: "6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72" }),
+      orientation === "left" && React.createElement("polygon", { points: "16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20" }),
+      orientation === "right" && React.createElement("polygon", { points: "8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20" })
+    )
   );
 }
 function Day(props) {
@@ -543,6 +539,59 @@ function DayButton(props) {
   }, [modifiers.focused]);
   return React.createElement("button", { ref, ...buttonProps });
 }
+var UI;
+(function(UI2) {
+  UI2["Root"] = "root";
+  UI2["Chevron"] = "chevron";
+  UI2["Day"] = "day";
+  UI2["DayButton"] = "day_button";
+  UI2["CaptionLabel"] = "caption_label";
+  UI2["Dropdowns"] = "dropdowns";
+  UI2["Dropdown"] = "dropdown";
+  UI2["DropdownRoot"] = "dropdown_root";
+  UI2["Footer"] = "footer";
+  UI2["MonthGrid"] = "month_grid";
+  UI2["MonthCaption"] = "month_caption";
+  UI2["MonthsDropdown"] = "months_dropdown";
+  UI2["Month"] = "month";
+  UI2["Months"] = "months";
+  UI2["Nav"] = "nav";
+  UI2["NextMonthButton"] = "button_next";
+  UI2["PreviousMonthButton"] = "button_previous";
+  UI2["Week"] = "week";
+  UI2["Weeks"] = "weeks";
+  UI2["Weekday"] = "weekday";
+  UI2["Weekdays"] = "weekdays";
+  UI2["WeekNumber"] = "week_number";
+  UI2["WeekNumberHeader"] = "week_number_header";
+  UI2["YearsDropdown"] = "years_dropdown";
+})(UI || (UI = {}));
+var DayFlag;
+(function(DayFlag2) {
+  DayFlag2["disabled"] = "disabled";
+  DayFlag2["hidden"] = "hidden";
+  DayFlag2["outside"] = "outside";
+  DayFlag2["focused"] = "focused";
+  DayFlag2["today"] = "today";
+})(DayFlag || (DayFlag = {}));
+var SelectionState;
+(function(SelectionState2) {
+  SelectionState2["range_end"] = "range_end";
+  SelectionState2["range_middle"] = "range_middle";
+  SelectionState2["range_start"] = "range_start";
+  SelectionState2["selected"] = "selected";
+})(SelectionState || (SelectionState = {}));
+var Animation;
+(function(Animation2) {
+  Animation2["weeks_before_enter"] = "weeks_before_enter";
+  Animation2["weeks_before_exit"] = "weeks_before_exit";
+  Animation2["weeks_after_enter"] = "weeks_after_enter";
+  Animation2["weeks_after_exit"] = "weeks_after_exit";
+  Animation2["caption_after_enter"] = "caption_after_enter";
+  Animation2["caption_after_exit"] = "caption_after_exit";
+  Animation2["caption_before_enter"] = "caption_before_enter";
+  Animation2["caption_before_exit"] = "caption_before_exit";
+})(Animation || (Animation = {}));
 function Dropdown(props) {
   const { options, className, components: components2, classNames: classNames2, ...selectProps } = props;
   const cssClassSelect = [classNames2[UI.Dropdown], className].join(" ");
@@ -594,17 +643,27 @@ function MonthsDropdown(props) {
 function Nav(props) {
   const { onPreviousClick, onNextClick, previousMonth, nextMonth, ...navProps } = props;
   const { components: components2, classNames: classNames2, labels: { labelPrevious: labelPrevious2, labelNext: labelNext2 } } = useDayPicker();
+  const handleNextClick = useCallback((e) => {
+    if (nextMonth) {
+      onNextClick == null ? void 0 : onNextClick(e);
+    }
+  }, [nextMonth, onNextClick]);
+  const handlePreviousClick = useCallback((e) => {
+    if (previousMonth) {
+      onPreviousClick == null ? void 0 : onPreviousClick(e);
+    }
+  }, [previousMonth, onPreviousClick]);
   return React.createElement(
     "nav",
     { ...navProps },
     React.createElement(
       components2.PreviousMonthButton,
-      { type: "button", className: classNames2[UI.PreviousMonthButton], tabIndex: previousMonth ? void 0 : -1, disabled: previousMonth ? void 0 : true, "aria-label": labelPrevious2(previousMonth), onClick: props.onPreviousClick },
+      { type: "button", className: classNames2[UI.PreviousMonthButton], tabIndex: previousMonth ? void 0 : -1, "aria-disabled": previousMonth ? void 0 : true, "aria-label": labelPrevious2(previousMonth), onClick: handlePreviousClick },
       React.createElement(components2.Chevron, { disabled: previousMonth ? void 0 : true, className: classNames2[UI.Chevron], orientation: "left" })
     ),
     React.createElement(
       components2.NextMonthButton,
-      { type: "button", className: classNames2[UI.NextMonthButton], tabIndex: nextMonth ? void 0 : -1, disabled: nextMonth ? void 0 : true, "aria-label": labelNext2(nextMonth), onClick: props.onNextClick },
+      { type: "button", className: classNames2[UI.NextMonthButton], tabIndex: nextMonth ? void 0 : -1, "aria-disabled": nextMonth ? void 0 : true, "aria-label": labelNext2(nextMonth), onClick: handleNextClick },
       React.createElement(components2.Chevron, { disabled: nextMonth ? void 0 : true, orientation: "right", className: classNames2[UI.Chevron] })
     )
   );
@@ -621,7 +680,8 @@ function PreviousMonthButton(props) {
   return React.createElement(components2.Button, { ...props });
 }
 function Root(props) {
-  return React.createElement("div", { ...props });
+  const { rootRef, ...rest } = props;
+  return React.createElement("div", { ...rest, ref: rootRef });
 }
 function Select(props) {
   return React.createElement("select", { ...props });
@@ -683,6 +743,169 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   Weeks,
   YearsDropdown
 }, Symbol.toStringTag, { value: "Module" }));
+function rangeIncludesDate(range, date, excludeEnds = false, dateLib = defaultDateLib) {
+  let { from, to } = range;
+  const { differenceInCalendarDays: differenceInCalendarDays2, isSameDay: isSameDay2 } = dateLib;
+  if (from && to) {
+    const isRangeInverted = differenceInCalendarDays2(to, from) < 0;
+    if (isRangeInverted) {
+      [from, to] = [to, from];
+    }
+    const isInRange = differenceInCalendarDays2(date, from) >= (excludeEnds ? 1 : 0) && differenceInCalendarDays2(to, date) >= (excludeEnds ? 1 : 0);
+    return isInRange;
+  }
+  if (!excludeEnds && to) {
+    return isSameDay2(to, date);
+  }
+  if (!excludeEnds && from) {
+    return isSameDay2(from, date);
+  }
+  return false;
+}
+function isDateInterval(matcher) {
+  return Boolean(matcher && typeof matcher === "object" && "before" in matcher && "after" in matcher);
+}
+function isDateRange(value) {
+  return Boolean(value && typeof value === "object" && "from" in value);
+}
+function isDateAfterType(value) {
+  return Boolean(value && typeof value === "object" && "after" in value);
+}
+function isDateBeforeType(value) {
+  return Boolean(value && typeof value === "object" && "before" in value);
+}
+function isDayOfWeekType(value) {
+  return Boolean(value && typeof value === "object" && "dayOfWeek" in value);
+}
+function isDatesArray(value, dateLib) {
+  return Array.isArray(value) && value.every(dateLib.isDate);
+}
+function dateMatchModifiers(date, matchers, dateLib = defaultDateLib) {
+  const matchersArr = !Array.isArray(matchers) ? [matchers] : matchers;
+  const { isSameDay: isSameDay2, differenceInCalendarDays: differenceInCalendarDays2, isAfter: isAfter2 } = dateLib;
+  return matchersArr.some((matcher) => {
+    if (typeof matcher === "boolean") {
+      return matcher;
+    }
+    if (dateLib.isDate(matcher)) {
+      return isSameDay2(date, matcher);
+    }
+    if (isDatesArray(matcher, dateLib)) {
+      return matcher.includes(date);
+    }
+    if (isDateRange(matcher)) {
+      return rangeIncludesDate(matcher, date, false, dateLib);
+    }
+    if (isDayOfWeekType(matcher)) {
+      if (!Array.isArray(matcher.dayOfWeek)) {
+        return matcher.dayOfWeek === date.getDay();
+      }
+      return matcher.dayOfWeek.includes(date.getDay());
+    }
+    if (isDateInterval(matcher)) {
+      const diffBefore = differenceInCalendarDays2(matcher.before, date);
+      const diffAfter = differenceInCalendarDays2(matcher.after, date);
+      const isDayBefore = diffBefore > 0;
+      const isDayAfter = diffAfter < 0;
+      const isClosedInterval = isAfter2(matcher.before, matcher.after);
+      if (isClosedInterval) {
+        return isDayAfter && isDayBefore;
+      } else {
+        return isDayBefore || isDayAfter;
+      }
+    }
+    if (isDateAfterType(matcher)) {
+      return differenceInCalendarDays2(date, matcher.after) > 0;
+    }
+    if (isDateBeforeType(matcher)) {
+      return differenceInCalendarDays2(matcher.before, date) > 0;
+    }
+    if (typeof matcher === "function") {
+      return matcher(date);
+    }
+    return false;
+  });
+}
+function createGetModifiers(days, props, navStart, navEnd, dateLib) {
+  const { disabled, hidden, modifiers, showOutsideDays, broadcastCalendar, today } = props;
+  const { isSameDay: isSameDay2, isSameMonth: isSameMonth2, startOfMonth: startOfMonth2, isBefore: isBefore2, endOfMonth: endOfMonth2, isAfter: isAfter2 } = dateLib;
+  const computedNavStart = navStart && startOfMonth2(navStart);
+  const computedNavEnd = navEnd && endOfMonth2(navEnd);
+  const internalModifiersMap = {
+    [DayFlag.focused]: [],
+    [DayFlag.outside]: [],
+    [DayFlag.disabled]: [],
+    [DayFlag.hidden]: [],
+    [DayFlag.today]: []
+  };
+  const customModifiersMap = {};
+  for (const day of days) {
+    const { date, displayMonth } = day;
+    const isOutside = Boolean(displayMonth && !isSameMonth2(date, displayMonth));
+    const isBeforeNavStart = Boolean(computedNavStart && isBefore2(date, computedNavStart));
+    const isAfterNavEnd = Boolean(computedNavEnd && isAfter2(date, computedNavEnd));
+    const isDisabled = Boolean(disabled && dateMatchModifiers(date, disabled, dateLib));
+    const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) || isBeforeNavStart || isAfterNavEnd || // Broadcast calendar will show outside days as default
+    !broadcastCalendar && !showOutsideDays && isOutside || broadcastCalendar && showOutsideDays === false && isOutside;
+    const isToday = isSameDay2(date, today ?? dateLib.today());
+    if (isOutside)
+      internalModifiersMap.outside.push(day);
+    if (isDisabled)
+      internalModifiersMap.disabled.push(day);
+    if (isHidden)
+      internalModifiersMap.hidden.push(day);
+    if (isToday)
+      internalModifiersMap.today.push(day);
+    if (modifiers) {
+      Object.keys(modifiers).forEach((name) => {
+        const modifierValue = modifiers == null ? void 0 : modifiers[name];
+        const isMatch = modifierValue ? dateMatchModifiers(date, modifierValue, dateLib) : false;
+        if (!isMatch)
+          return;
+        if (customModifiersMap[name]) {
+          customModifiersMap[name].push(day);
+        } else {
+          customModifiersMap[name] = [day];
+        }
+      });
+    }
+  }
+  return (day) => {
+    const dayFlags = {
+      [DayFlag.focused]: false,
+      [DayFlag.disabled]: false,
+      [DayFlag.hidden]: false,
+      [DayFlag.outside]: false,
+      [DayFlag.today]: false
+    };
+    const customModifiers = {};
+    for (const name in internalModifiersMap) {
+      const days2 = internalModifiersMap[name];
+      dayFlags[name] = days2.some((d) => d === day);
+    }
+    for (const name in customModifiersMap) {
+      customModifiers[name] = customModifiersMap[name].some((d) => d === day);
+    }
+    return {
+      ...dayFlags,
+      // custom modifiers should override all the previous ones
+      ...customModifiers
+    };
+  };
+}
+function getClassNamesForModifiers(modifiers, classNames2, modifiersClassNames = {}) {
+  const modifierClassNames = Object.entries(modifiers).filter(([, active]) => active === true).reduce((previousValue, [key]) => {
+    if (modifiersClassNames[key]) {
+      previousValue.push(modifiersClassNames[key]);
+    } else if (classNames2[DayFlag[key]]) {
+      previousValue.push(classNames2[DayFlag[key]]);
+    } else if (classNames2[SelectionState[key]]) {
+      previousValue.push(classNames2[SelectionState[key]]);
+    }
+    return previousValue;
+  }, [classNames2[UI.Day]]);
+  return modifierClassNames;
+}
 function getComponents(customComponents) {
   return {
     ...components,
@@ -695,7 +918,8 @@ function getDataAttributes(props) {
     "data-required": "required" in props ? props.required : void 0,
     "data-multiple-months": props.numberOfMonths && props.numberOfMonths > 1 || void 0,
     "data-week-numbers": props.showWeekNumber || void 0,
-    "data-broadcast-calendar": props.broadcastCalendar || void 0
+    "data-broadcast-calendar": props.broadcastCalendar || void 0,
+    "data-nav-layout": props.navLayout || void 0
   };
   Object.entries(props).forEach(([key, val]) => {
     if (key.startsWith("data-")) {
@@ -715,6 +939,9 @@ function getDefaultClassNames() {
   for (const key in SelectionState) {
     classNames2[SelectionState[key]] = `rdp-${SelectionState[key]}`;
   }
+  for (const key in Animation) {
+    classNames2[Animation[key]] = `rdp-${Animation[key]}`;
+  }
   return classNames2;
 }
 function formatCaption(month, options, dateLib) {
@@ -727,18 +954,18 @@ function formatDay(date, options, dateLib) {
 function formatMonthDropdown(month, dateLib = defaultDateLib) {
   return dateLib.format(month, "LLLL");
 }
-function formatWeekNumber(weekNumber) {
+function formatWeekdayName(weekday, options, dateLib) {
+  return (dateLib ?? new DateLib(options)).format(weekday, "cccccc");
+}
+function formatWeekNumber(weekNumber, dateLib = defaultDateLib) {
   if (weekNumber < 10) {
-    return `0${weekNumber.toLocaleString()}`;
+    return dateLib.formatNumber(`0${weekNumber.toLocaleString()}`);
   }
-  return `${weekNumber.toLocaleString()}`;
+  return dateLib.formatNumber(`${weekNumber.toLocaleString()}`);
 }
 function formatWeekNumberHeader() {
   return ``;
 }
-function formatWeekdayName(weekday, options, dateLib) {
-  return (dateLib ?? new DateLib(options)).format(weekday, "cccccc");
-}
 function formatYearDropdown(year, dateLib = defaultDateLib) {
   return dateLib.format(year, "yyyy");
 }
@@ -801,7 +1028,7 @@ function getWeekdays(dateLib, ISOWeek, broadcastCalendar) {
   }
   return days;
 }
-function getYearOptions(navStart, navEnd, formatters, dateLib) {
+function getYearOptions(navStart, navEnd, formatters, dateLib, reverse = false) {
   if (!navStart)
     return void 0;
   if (!navEnd)
@@ -815,6 +1042,8 @@ function getYearOptions(navStart, navEnd, formatters, dateLib) {
     years.push(year);
     year = addYears2(year, 1);
   }
+  if (reverse)
+    years.reverse();
   return years.map((year2) => {
     const label = formatters.formatYearDropdown(year2, dateLib);
     return {
@@ -824,6 +1053,15 @@ function getYearOptions(navStart, navEnd, formatters, dateLib) {
     };
   });
 }
+function labelDayButton(date, modifiers, options, dateLib) {
+  let label = (dateLib ?? new DateLib(options)).format(date, "PPPP");
+  if (modifiers.today)
+    label = `Today, ${label}`;
+  if (modifiers.selected)
+    label = `${label}, selected`;
+  return label;
+}
+const labelDay = labelDayButton;
 function labelGrid(date, options, dateLib) {
   return (dateLib ?? new DateLib(options)).format(date, "LLLL y");
 }
@@ -835,37 +1073,28 @@ function labelGridcell(date, modifiers, options, dateLib) {
   }
   return label;
 }
-function labelDayButton(date, modifiers, options, dateLib) {
-  let label = (dateLib ?? new DateLib(options)).format(date, "PPPP");
-  if (modifiers.today)
-    label = `Today, ${label}`;
-  if (modifiers.selected)
-    label = `${label}, selected`;
-  return label;
+function labelMonthDropdown(_options) {
+  return "Choose the Month";
 }
-const labelDay = labelDayButton;
 function labelNav() {
   return "";
 }
-function labelMonthDropdown(options) {
-  return "Choose the Month";
-}
-function labelNext(month) {
+function labelNext(_month) {
   return "Go to the Next Month";
 }
-function labelPrevious(month) {
+function labelPrevious(_month) {
   return "Go to the Previous Month";
 }
 function labelWeekday(date, options, dateLib) {
   return (dateLib ?? new DateLib(options)).format(date, "cccc");
 }
-function labelWeekNumber(weekNumber, options) {
+function labelWeekNumber(weekNumber, _options) {
   return `Week ${weekNumber}`;
 }
-function labelWeekNumberHeader(options) {
+function labelWeekNumberHeader(_options) {
   return "Week Number";
 }
-function labelYearDropdown(options) {
+function labelYearDropdown(_options) {
   return "Choose the Year";
 }
 const defaultLabels = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -884,13 +1113,136 @@ const defaultLabels = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defin
   labelWeekday,
   labelYearDropdown
 }, Symbol.toStringTag, { value: "Module" }));
+const asHtmlElement = (element) => {
+  if (element instanceof HTMLElement)
+    return element;
+  return null;
+};
+const queryMonthEls = (element) => [
+  ...element.querySelectorAll("[data-animated-month]") ?? []
+];
+const queryMonthEl = (element) => asHtmlElement(element.querySelector("[data-animated-month]"));
+const queryCaptionEl = (element) => asHtmlElement(element.querySelector("[data-animated-caption]"));
+const queryWeeksEl = (element) => asHtmlElement(element.querySelector("[data-animated-weeks]"));
+const queryNavEl = (element) => asHtmlElement(element.querySelector("[data-animated-nav]"));
+const queryWeekdaysEl = (element) => asHtmlElement(element.querySelector("[data-animated-weekdays]"));
+function useAnimation(rootElRef, enabled, { classNames: classNames2, months, focused, dateLib }) {
+  const previousRootElSnapshotRef = useRef(null);
+  const previousMonthsRef = useRef(months);
+  const animatingRef = useRef(false);
+  useLayoutEffect(() => {
+    const previousMonths = previousMonthsRef.current;
+    previousMonthsRef.current = months;
+    if (!enabled || !rootElRef.current || // safety check because the ref can be set to anything by consumers
+    !(rootElRef.current instanceof HTMLElement) || // validation required for the animation to work as expected
+    months.length === 0 || previousMonths.length === 0 || months.length !== previousMonths.length) {
+      return;
+    }
+    const isSameMonth2 = dateLib.isSameMonth(months[0].date, previousMonths[0].date);
+    const isAfterPreviousMonth = dateLib.isAfter(months[0].date, previousMonths[0].date);
+    const captionAnimationClass = isAfterPreviousMonth ? classNames2[Animation.caption_after_enter] : classNames2[Animation.caption_before_enter];
+    const weeksAnimationClass = isAfterPreviousMonth ? classNames2[Animation.weeks_after_enter] : classNames2[Animation.weeks_before_enter];
+    const previousRootElSnapshot = previousRootElSnapshotRef.current;
+    const rootElSnapshot = rootElRef.current.cloneNode(true);
+    if (rootElSnapshot instanceof HTMLElement) {
+      const currentMonthElsSnapshot = queryMonthEls(rootElSnapshot);
+      currentMonthElsSnapshot.forEach((currentMonthElSnapshot) => {
+        if (!(currentMonthElSnapshot instanceof HTMLElement))
+          return;
+        const previousMonthElSnapshot = queryMonthEl(currentMonthElSnapshot);
+        if (previousMonthElSnapshot && currentMonthElSnapshot.contains(previousMonthElSnapshot)) {
+          currentMonthElSnapshot.removeChild(previousMonthElSnapshot);
+        }
+        const captionEl = queryCaptionEl(currentMonthElSnapshot);
+        if (captionEl) {
+          captionEl.classList.remove(captionAnimationClass);
+        }
+        const weeksEl = queryWeeksEl(currentMonthElSnapshot);
+        if (weeksEl) {
+          weeksEl.classList.remove(weeksAnimationClass);
+        }
+      });
+      previousRootElSnapshotRef.current = rootElSnapshot;
+    } else {
+      previousRootElSnapshotRef.current = null;
+    }
+    if (animatingRef.current || isSameMonth2 || // skip animation if a day is focused because it can cause issues to the animation and is better for a11y
+    focused) {
+      return;
+    }
+    const previousMonthEls = previousRootElSnapshot instanceof HTMLElement ? queryMonthEls(previousRootElSnapshot) : [];
+    const currentMonthEls = queryMonthEls(rootElRef.current);
+    if ((currentMonthEls == null ? void 0 : currentMonthEls.every((el) => el instanceof HTMLElement)) && previousMonthEls && previousMonthEls.every((el) => el instanceof HTMLElement)) {
+      animatingRef.current = true;
+      rootElRef.current.style.isolation = "isolate";
+      const navEl = queryNavEl(rootElRef.current);
+      if (navEl) {
+        navEl.style.zIndex = "1";
+      }
+      currentMonthEls.forEach((currentMonthEl, index) => {
+        const previousMonthEl = previousMonthEls[index];
+        if (!previousMonthEl) {
+          return;
+        }
+        currentMonthEl.style.position = "relative";
+        currentMonthEl.style.overflow = "hidden";
+        const captionEl = queryCaptionEl(currentMonthEl);
+        if (captionEl) {
+          captionEl.classList.add(captionAnimationClass);
+        }
+        const weeksEl = queryWeeksEl(currentMonthEl);
+        if (weeksEl) {
+          weeksEl.classList.add(weeksAnimationClass);
+        }
+        const cleanUp = () => {
+          animatingRef.current = false;
+          if (rootElRef.current) {
+            rootElRef.current.style.isolation = "";
+          }
+          if (navEl) {
+            navEl.style.zIndex = "";
+          }
+          if (captionEl) {
+            captionEl.classList.remove(captionAnimationClass);
+          }
+          if (weeksEl) {
+            weeksEl.classList.remove(weeksAnimationClass);
+          }
+          currentMonthEl.style.position = "";
+          currentMonthEl.style.overflow = "";
+          if (currentMonthEl.contains(previousMonthEl)) {
+            currentMonthEl.removeChild(previousMonthEl);
+          }
+        };
+        previousMonthEl.style.pointerEvents = "none";
+        previousMonthEl.style.position = "absolute";
+        previousMonthEl.style.overflow = "hidden";
+        previousMonthEl.setAttribute("aria-hidden", "true");
+        const previousWeekdaysEl = queryWeekdaysEl(previousMonthEl);
+        if (previousWeekdaysEl) {
+          previousWeekdaysEl.style.opacity = "0";
+        }
+        const previousCaptionEl = queryCaptionEl(previousMonthEl);
+        if (previousCaptionEl) {
+          previousCaptionEl.classList.add(isAfterPreviousMonth ? classNames2[Animation.caption_before_exit] : classNames2[Animation.caption_after_exit]);
+          previousCaptionEl.addEventListener("animationend", cleanUp);
+        }
+        const previousWeeksEl = queryWeeksEl(previousMonthEl);
+        if (previousWeeksEl) {
+          previousWeeksEl.classList.add(isAfterPreviousMonth ? classNames2[Animation.weeks_before_exit] : classNames2[Animation.weeks_after_exit]);
+        }
+        currentMonthEl.insertBefore(previousMonthEl, currentMonthEl.firstChild);
+      });
+    }
+  });
+}
 function getDates(displayMonths, maxDate, props, dateLib) {
   const firstMonth = displayMonths[0];
   const lastMonth = displayMonths[displayMonths.length - 1];
   const { ISOWeek, fixedWeeks, broadcastCalendar } = props ?? {};
   const { addDays: addDays2, differenceInCalendarDays: differenceInCalendarDays2, differenceInCalendarMonths: differenceInCalendarMonths2, endOfBroadcastWeek: endOfBroadcastWeek2, endOfISOWeek: endOfISOWeek2, endOfMonth: endOfMonth2, endOfWeek: endOfWeek2, isAfter: isAfter2, startOfBroadcastWeek: startOfBroadcastWeek2, startOfISOWeek: startOfISOWeek2, startOfWeek: startOfWeek2 } = dateLib;
   const startWeekFirstDate = broadcastCalendar ? startOfBroadcastWeek2(firstMonth, dateLib) : ISOWeek ? startOfISOWeek2(firstMonth) : startOfWeek2(firstMonth);
-  const endWeekLastDate = broadcastCalendar ? endOfBroadcastWeek2(lastMonth, dateLib) : ISOWeek ? endOfISOWeek2(endOfMonth2(lastMonth)) : endOfWeek2(endOfMonth2(lastMonth));
+  const endWeekLastDate = broadcastCalendar ? endOfBroadcastWeek2(lastMonth) : ISOWeek ? endOfISOWeek2(endOfMonth2(lastMonth)) : endOfWeek2(endOfMonth2(lastMonth));
   const nOfDays = differenceInCalendarDays2(endWeekLastDate, startWeekFirstDate);
   const nOfMonths = differenceInCalendarMonths2(lastMonth, firstMonth) + 1;
   const dates = [];
@@ -915,12 +1267,11 @@ function getDates(displayMonths, maxDate, props, dateLib) {
 function getDays(calendarMonths) {
   const initialDays = [];
   return calendarMonths.reduce((days, month) => {
-    const initialDays2 = [];
     const weekDays = month.weeks.reduce((weekDays2, week) => {
-      return [...weekDays2, ...week.days];
-    }, initialDays2);
-    return [...days, ...weekDays];
-  }, initialDays);
+      return weekDays2.concat(week.days.slice());
+    }, initialDays.slice());
+    return days.concat(weekDays.slice());
+  }, initialDays.slice());
 }
 function getDisplayMonths(firstDisplayedMonth, calendarEndMonth, props, dateLib) {
   const { numberOfMonths = 1 } = props;
@@ -934,51 +1285,24 @@ function getDisplayMonths(firstDisplayedMonth, calendarEndMonth, props, dateLib)
   }
   return months;
 }
-function getInitialMonth(props, dateLib) {
-  const { month, defaultMonth, today = dateLib.today(), numberOfMonths = 1, endMonth, startMonth } = props;
+function getInitialMonth(props, navStart, navEnd, dateLib) {
+  const { month, defaultMonth, today = dateLib.today(), numberOfMonths = 1 } = props;
   let initialMonth = month || defaultMonth || today;
   const { differenceInCalendarMonths: differenceInCalendarMonths2, addMonths: addMonths2, startOfMonth: startOfMonth2 } = dateLib;
-  if (endMonth && differenceInCalendarMonths2(endMonth, initialMonth) < 0) {
+  if (navEnd && differenceInCalendarMonths2(navEnd, initialMonth) < numberOfMonths - 1) {
     const offset = -1 * (numberOfMonths - 1);
-    initialMonth = addMonths2(endMonth, offset);
+    initialMonth = addMonths2(navEnd, offset);
   }
-  if (startMonth && differenceInCalendarMonths2(initialMonth, startMonth) < 0) {
-    initialMonth = startMonth;
+  if (navStart && differenceInCalendarMonths2(initialMonth, navStart) < 0) {
+    initialMonth = navStart;
   }
   return startOfMonth2(initialMonth);
 }
-class CalendarDay {
-  constructor(date, displayMonth, dateLib = defaultDateLib) {
-    this.date = date;
-    this.displayMonth = displayMonth;
-    this.outside = Boolean(displayMonth && !dateLib.isSameMonth(date, displayMonth));
-    this.dateLib = dateLib;
-  }
-  /**
-   * Check if the day is the same as the given day: considering if it is in the
-   * same display month.
-   */
-  isEqualTo(day) {
-    return this.dateLib.isSameDay(day.date, this.date) && this.dateLib.isSameMonth(day.displayMonth, this.displayMonth);
-  }
-}
-class CalendarMonth {
-  constructor(month, weeks) {
-    this.date = month;
-    this.weeks = weeks;
-  }
-}
-class CalendarWeek {
-  constructor(weekNumber, days) {
-    this.days = days;
-    this.weekNumber = weekNumber;
-  }
-}
 function getMonths(displayMonths, dates, props, dateLib) {
   const { addDays: addDays2, endOfBroadcastWeek: endOfBroadcastWeek2, endOfISOWeek: endOfISOWeek2, endOfMonth: endOfMonth2, endOfWeek: endOfWeek2, getISOWeek: getISOWeek2, getWeek: getWeek2, startOfBroadcastWeek: startOfBroadcastWeek2, startOfISOWeek: startOfISOWeek2, startOfWeek: startOfWeek2 } = dateLib;
   const dayPickerMonths = displayMonths.reduce((months, month) => {
     const firstDateOfFirstWeek = props.broadcastCalendar ? startOfBroadcastWeek2(month, dateLib) : props.ISOWeek ? startOfISOWeek2(month) : startOfWeek2(month);
-    const lastDateOfLastWeek = props.broadcastCalendar ? endOfBroadcastWeek2(month, dateLib) : props.ISOWeek ? endOfISOWeek2(endOfMonth2(month)) : endOfWeek2(endOfMonth2(month));
+    const lastDateOfLastWeek = props.broadcastCalendar ? endOfBroadcastWeek2(month) : props.ISOWeek ? endOfISOWeek2(endOfMonth2(month)) : endOfWeek2(endOfMonth2(month));
     const monthDates = dates.filter((date) => {
       return date >= firstDateOfFirstWeek && date <= lastDateOfLastWeek;
     });
@@ -1084,8 +1408,8 @@ function getPreviousMonth(firstDisplayedMonth, calendarStartMonth, options, date
 function getWeeks(months) {
   const initialWeeks = [];
   return months.reduce((weeks, month) => {
-    return [...weeks, ...month.weeks];
-  }, initialWeeks);
+    return weeks.concat(month.weeks.slice());
+  }, initialWeeks.slice());
 }
 function useControlledValue(defaultValue, controlledValue) {
   const [uncontrolledValue, setValue] = useState(defaultValue);
@@ -1095,14 +1419,14 @@ function useControlledValue(defaultValue, controlledValue) {
 function useCalendar(props, dateLib) {
   const [navStart, navEnd] = getNavMonths(props, dateLib);
   const { startOfMonth: startOfMonth2, endOfMonth: endOfMonth2 } = dateLib;
-  const initialMonth = getInitialMonth(props, dateLib);
+  const initialMonth = getInitialMonth(props, navStart, navEnd, dateLib);
   const [firstMonth, setFirstMonth] = useControlledValue(
     initialMonth,
     // initialMonth is always computed from props.month if provided
     props.month ? initialMonth : void 0
   );
   useEffect(() => {
-    const newInitialMonth = getInitialMonth(props, dateLib);
+    const newInitialMonth = getInitialMonth(props, navStart, navEnd, dateLib);
     setFirstMonth(newInitialMonth);
   }, [props.timeZone]);
   const displayMonths = getDisplayMonths(firstMonth, navEnd, props, dateLib);
@@ -1147,121 +1471,42 @@ function useCalendar(props, dateLib) {
   };
   return calendar;
 }
+var FocusTargetPriority;
+(function(FocusTargetPriority2) {
+  FocusTargetPriority2[FocusTargetPriority2["Today"] = 0] = "Today";
+  FocusTargetPriority2[FocusTargetPriority2["Selected"] = 1] = "Selected";
+  FocusTargetPriority2[FocusTargetPriority2["LastFocused"] = 2] = "LastFocused";
+  FocusTargetPriority2[FocusTargetPriority2["FocusedModifier"] = 3] = "FocusedModifier";
+})(FocusTargetPriority || (FocusTargetPriority = {}));
+function isFocusableDay(modifiers) {
+  return !modifiers[DayFlag.disabled] && !modifiers[DayFlag.hidden] && !modifiers[DayFlag.outside];
+}
 function calculateFocusTarget(days, getModifiers, isSelected, lastFocused) {
   let focusTarget;
-  let index = 0;
-  let found = false;
-  while (index < days.length && !found) {
-    const day = days[index];
+  let foundFocusTargetPriority = -1;
+  for (const day of days) {
     const modifiers = getModifiers(day);
-    if (!modifiers[DayFlag.disabled] && !modifiers[DayFlag.hidden] && !modifiers[DayFlag.outside]) {
-      if (modifiers[DayFlag.focused]) {
+    if (isFocusableDay(modifiers)) {
+      if (modifiers[DayFlag.focused] && foundFocusTargetPriority < FocusTargetPriority.FocusedModifier) {
         focusTarget = day;
-        found = true;
-      } else if (lastFocused == null ? void 0 : lastFocused.isEqualTo(day)) {
+        foundFocusTargetPriority = FocusTargetPriority.FocusedModifier;
+      } else if ((lastFocused == null ? void 0 : lastFocused.isEqualTo(day)) && foundFocusTargetPriority < FocusTargetPriority.LastFocused) {
         focusTarget = day;
-        found = true;
-      } else if (isSelected(day.date)) {
+        foundFocusTargetPriority = FocusTargetPriority.LastFocused;
+      } else if (isSelected(day.date) && foundFocusTargetPriority < FocusTargetPriority.Selected) {
         focusTarget = day;
-        found = true;
-      } else if (modifiers[DayFlag.today]) {
+        foundFocusTargetPriority = FocusTargetPriority.Selected;
+      } else if (modifiers[DayFlag.today] && foundFocusTargetPriority < FocusTargetPriority.Today) {
         focusTarget = day;
-        found = true;
+        foundFocusTargetPriority = FocusTargetPriority.Today;
       }
     }
-    index++;
   }
   if (!focusTarget) {
-    focusTarget = days.find((day) => {
-      const m = getModifiers(day);
-      return !m[DayFlag.disabled] && !m[DayFlag.hidden] && !m[DayFlag.outside];
-    });
+    focusTarget = days.find((day) => isFocusableDay(getModifiers(day)));
   }
   return focusTarget;
 }
-function rangeIncludesDate(range, date, excludeEnds = false, dateLib = defaultDateLib) {
-  let { from, to } = range;
-  const { differenceInCalendarDays: differenceInCalendarDays2, isSameDay: isSameDay2 } = dateLib;
-  if (from && to) {
-    const isRangeInverted = differenceInCalendarDays2(to, from) < 0;
-    if (isRangeInverted) {
-      [from, to] = [to, from];
-    }
-    const isInRange = differenceInCalendarDays2(date, from) >= (excludeEnds ? 1 : 0) && differenceInCalendarDays2(to, date) >= (excludeEnds ? 1 : 0);
-    return isInRange;
-  }
-  if (!excludeEnds && to) {
-    return isSameDay2(to, date);
-  }
-  if (!excludeEnds && from) {
-    return isSameDay2(from, date);
-  }
-  return false;
-}
-function isDateInterval(matcher) {
-  return Boolean(matcher && typeof matcher === "object" && "before" in matcher && "after" in matcher);
-}
-function isDateRange(value) {
-  return Boolean(value && typeof value === "object" && "from" in value);
-}
-function isDateAfterType(value) {
-  return Boolean(value && typeof value === "object" && "after" in value);
-}
-function isDateBeforeType(value) {
-  return Boolean(value && typeof value === "object" && "before" in value);
-}
-function isDayOfWeekType(value) {
-  return Boolean(value && typeof value === "object" && "dayOfWeek" in value);
-}
-function isDatesArray(value, dateLib) {
-  return Array.isArray(value) && value.every(dateLib.isDate);
-}
-function dateMatchModifiers(date, matchers, dateLib = defaultDateLib) {
-  const matchersArr = !Array.isArray(matchers) ? [matchers] : matchers;
-  const { isSameDay: isSameDay2, differenceInCalendarDays: differenceInCalendarDays2, isAfter: isAfter2 } = dateLib;
-  return matchersArr.some((matcher) => {
-    if (typeof matcher === "boolean") {
-      return matcher;
-    }
-    if (dateLib.isDate(matcher)) {
-      return isSameDay2(date, matcher);
-    }
-    if (isDatesArray(matcher, dateLib)) {
-      return matcher.includes(date);
-    }
-    if (isDateRange(matcher)) {
-      return rangeIncludesDate(matcher, date, false, dateLib);
-    }
-    if (isDayOfWeekType(matcher)) {
-      if (!Array.isArray(matcher.dayOfWeek)) {
-        return matcher.dayOfWeek === date.getDay();
-      }
-      return matcher.dayOfWeek.includes(date.getDay());
-    }
-    if (isDateInterval(matcher)) {
-      const diffBefore = differenceInCalendarDays2(matcher.before, date);
-      const diffAfter = differenceInCalendarDays2(matcher.after, date);
-      const isDayBefore = diffBefore > 0;
-      const isDayAfter = diffAfter < 0;
-      const isClosedInterval = isAfter2(matcher.before, matcher.after);
-      if (isClosedInterval) {
-        return isDayAfter && isDayBefore;
-      } else {
-        return isDayBefore || isDayAfter;
-      }
-    }
-    if (isDateAfterType(matcher)) {
-      return differenceInCalendarDays2(date, matcher.after) > 0;
-    }
-    if (isDateBeforeType(matcher)) {
-      return differenceInCalendarDays2(matcher.before, date) > 0;
-    }
-    if (typeof matcher === "function") {
-      return matcher(date);
-    }
-    return false;
-  });
-}
 function getFocusableDate(moveBy, moveDir, refDate, navStart, navEnd, props, dateLib) {
   const { ISOWeek, broadcastCalendar } = props;
   const { addDays: addDays2, addMonths: addMonths2, addWeeks: addWeeks2, addYears: addYears2, endOfBroadcastWeek: endOfBroadcastWeek2, endOfISOWeek: endOfISOWeek2, endOfWeek: endOfWeek2, max: max2, min: min2, startOfBroadcastWeek: startOfBroadcastWeek2, startOfISOWeek: startOfISOWeek2, startOfWeek: startOfWeek2 } = dateLib;
@@ -1271,7 +1516,7 @@ function getFocusableDate(moveBy, moveDir, refDate, navStart, navEnd, props, dat
     month: addMonths2,
     year: addYears2,
     startOfWeek: (date) => broadcastCalendar ? startOfBroadcastWeek2(date, dateLib) : ISOWeek ? startOfISOWeek2(date) : startOfWeek2(date),
-    endOfWeek: (date) => broadcastCalendar ? endOfBroadcastWeek2(date, dateLib) : ISOWeek ? endOfISOWeek2(date) : endOfWeek2(date)
+    endOfWeek: (date) => broadcastCalendar ? endOfBroadcastWeek2(date) : ISOWeek ? endOfISOWeek2(date) : endOfWeek2(date)
   };
   let focusableDate = moveFns[moveBy](refDate, moveDir === "after" ? 1 : -1);
   if (moveDir === "before" && navStart) {
@@ -1285,16 +1530,7 @@ function getNextFocus(moveBy, moveDir, refDay, calendarStartMonth, calendarEndMo
   if (attempt > 365) {
     return void 0;
   }
-  const focusableDate = getFocusableDate(
-    moveBy,
-    moveDir,
-    refDay.date,
-    // should be refDay? or refDay.date?
-    calendarStartMonth,
-    calendarEndMonth,
-    props,
-    dateLib
-  );
+  const focusableDate = getFocusableDate(moveBy, moveDir, refDay.date, calendarStartMonth, calendarEndMonth, props, dateLib);
   const isDisabled = Boolean(props.disabled && dateMatchModifiers(focusableDate, props.disabled, dateLib));
   const isHidden = Boolean(props.hidden && dateMatchModifiers(focusableDate, props.hidden, dateLib));
   const targetMonth = focusableDate;
@@ -1334,73 +1570,6 @@ function useFocus(props, calendar, getModifiers, isSelected, dateLib) {
   };
   return useFocus2;
 }
-function useGetModifiers(days, props, dateLib) {
-  const { disabled, hidden, modifiers, showOutsideDays, broadcastCalendar, today } = props;
-  const { isSameDay: isSameDay2, isSameMonth: isSameMonth2, startOfMonth: startOfMonth2, isBefore: isBefore2, endOfMonth: endOfMonth2, isAfter: isAfter2 } = dateLib;
-  const startMonth = props.startMonth && startOfMonth2(props.startMonth);
-  const endMonth = props.endMonth && endOfMonth2(props.endMonth);
-  const internalModifiersMap = {
-    [DayFlag.focused]: [],
-    [DayFlag.outside]: [],
-    [DayFlag.disabled]: [],
-    [DayFlag.hidden]: [],
-    [DayFlag.today]: []
-  };
-  const customModifiersMap = {};
-  for (const day of days) {
-    const { date, displayMonth } = day;
-    const isOutside = Boolean(displayMonth && !isSameMonth2(date, displayMonth));
-    const isBeforeStartMonth = Boolean(startMonth && isBefore2(date, startMonth));
-    const isAfterEndMonth = Boolean(endMonth && isAfter2(date, endMonth));
-    const isDisabled = Boolean(disabled && dateMatchModifiers(date, disabled, dateLib));
-    const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) || isBeforeStartMonth || isAfterEndMonth || // Broadcast calendar will show outside days as default
-    !broadcastCalendar && !showOutsideDays && isOutside || broadcastCalendar && showOutsideDays === false && isOutside;
-    const isToday = isSameDay2(date, today ?? dateLib.today());
-    if (isOutside)
-      internalModifiersMap.outside.push(day);
-    if (isDisabled)
-      internalModifiersMap.disabled.push(day);
-    if (isHidden)
-      internalModifiersMap.hidden.push(day);
-    if (isToday)
-      internalModifiersMap.today.push(day);
-    if (modifiers) {
-      Object.keys(modifiers).forEach((name) => {
-        const modifierValue = modifiers == null ? void 0 : modifiers[name];
-        const isMatch = modifierValue ? dateMatchModifiers(date, modifierValue, dateLib) : false;
-        if (!isMatch)
-          return;
-        if (customModifiersMap[name]) {
-          customModifiersMap[name].push(day);
-        } else {
-          customModifiersMap[name] = [day];
-        }
-      });
-    }
-  }
-  return (day) => {
-    const dayFlags = {
-      [DayFlag.focused]: false,
-      [DayFlag.disabled]: false,
-      [DayFlag.hidden]: false,
-      [DayFlag.outside]: false,
-      [DayFlag.today]: false
-    };
-    const customModifiers = {};
-    for (const name in internalModifiersMap) {
-      const days2 = internalModifiersMap[name];
-      dayFlags[name] = days2.some((d) => d === day);
-    }
-    for (const name in customModifiersMap) {
-      customModifiers[name] = customModifiersMap[name].some((d) => d === day);
-    }
-    return {
-      ...dayFlags,
-      // custom modifiers should override all the previous ones
-      ...customModifiers
-    };
-  };
-}
 function useMulti(props, dateLib) {
   const { selected: initiallySelected, required, onSelect } = props;
   const [internallySelected, setSelected] = useControlledValue(initiallySelected, onSelect ? initiallySelected : void 0);
@@ -1447,7 +1616,9 @@ function addToRange(date, initialRange, min2 = 0, max2 = 0, required = false, da
     range = { from: date, to: min2 > 0 ? void 0 : date };
   } else if (from && !to) {
     if (isSameDay2(from, date)) {
-      if (required) {
+      if (min2 === 0) {
+        range = { from, to: date };
+      } else if (required) {
         range = { from, to: void 0 };
       } else {
         range = void 0;
@@ -1626,9 +1797,41 @@ function useSelection(props, dateLib) {
       return void 0;
   }
 }
-function DayPicker(props) {
+function DayPicker(initialProps) {
+  var _a;
+  let props = initialProps;
+  if (props.timeZone) {
+    props = {
+      ...initialProps
+    };
+    if (props.today) {
+      props.today = new TZDate(props.today, props.timeZone);
+    }
+    if (props.month) {
+      props.month = new TZDate(props.month, props.timeZone);
+    }
+    if (props.defaultMonth) {
+      props.defaultMonth = new TZDate(props.defaultMonth, props.timeZone);
+    }
+    if (props.startMonth) {
+      props.startMonth = new TZDate(props.startMonth, props.timeZone);
+    }
+    if (props.endMonth) {
+      props.endMonth = new TZDate(props.endMonth, props.timeZone);
+    }
+    if (props.mode === "single" && props.selected) {
+      props.selected = new TZDate(props.selected, props.timeZone);
+    } else if (props.mode === "multiple" && props.selected) {
+      props.selected = (_a = props.selected) == null ? void 0 : _a.map((date) => new TZDate(date, props.timeZone));
+    } else if (props.mode === "range" && props.selected) {
+      props.selected = {
+        from: props.selected.from ? new TZDate(props.selected.from, props.timeZone) : void 0,
+        to: props.selected.to ? new TZDate(props.selected.to, props.timeZone) : void 0
+      };
+    }
+  }
   const { components: components2, formatters, labels, dateLib, locale, classNames: classNames2 } = useMemo(() => {
-    const locale2 = { ...enUS$1, ...props.locale };
+    const locale2 = { ...enUS, ...props.locale };
     const dateLib2 = new DateLib({
       locale: locale2,
       weekStartsOn: props.broadcastCalendar ? 1 : props.weekStartsOn,
@@ -1661,14 +1864,14 @@ function DayPicker(props) {
     props.labels,
     props.classNames
   ]);
-  const { captionLayout, mode, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onDayMouseEnter, onDayMouseLeave, onNextClick, onPrevClick, showWeekNumber, styles: styles2 } = props;
+  const { captionLayout, mode, navLayout, numberOfMonths = 1, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onDayMouseEnter, onDayMouseLeave, onNextClick, onPrevClick, showWeekNumber, styles: styles2 } = props;
   const { formatCaption: formatCaption2, formatDay: formatDay2, formatMonthDropdown: formatMonthDropdown2, formatWeekNumber: formatWeekNumber2, formatWeekNumberHeader: formatWeekNumberHeader2, formatWeekdayName: formatWeekdayName2, formatYearDropdown: formatYearDropdown2 } = formatters;
   const calendar = useCalendar(props, dateLib);
   const { days, months, navStart, navEnd, previousMonth, nextMonth, goToMonth } = calendar;
-  const getModifiers = useGetModifiers(days, props, dateLib);
+  const getModifiers = createGetModifiers(days, props, navStart, navEnd, dateLib);
   const { isSelected, select, selected: selectedValue } = useSelection(props, dateLib) ?? {};
   const { blur, focused, isFocusTarget, moveFocus, setFocused } = useFocus(props, calendar, getModifiers, isSelected ?? (() => false), dateLib);
-  const { labelDayButton: labelDayButton2, labelGridcell: labelGridcell2, labelGrid: labelGrid2, labelMonthDropdown: labelMonthDropdown2, labelNav: labelNav2, labelWeekday: labelWeekday2, labelWeekNumber: labelWeekNumber2, labelWeekNumberHeader: labelWeekNumberHeader2, labelYearDropdown: labelYearDropdown2 } = labels;
+  const { labelDayButton: labelDayButton2, labelGridcell: labelGridcell2, labelGrid: labelGrid2, labelMonthDropdown: labelMonthDropdown2, labelNav: labelNav2, labelPrevious: labelPrevious2, labelNext: labelNext2, labelWeekday: labelWeekday2, labelWeekNumber: labelWeekNumber2, labelWeekNumberHeader: labelWeekNumberHeader2, labelYearDropdown: labelYearDropdown2 } = labels;
   const weekdays = useMemo(() => getWeekdays(dateLib, props.ISOWeek), [dateLib, props.ISOWeek]);
   const isInteractive = mode !== void 0 || onDayClick !== void 0;
   const handlePreviousClick = useCallback(() => {
@@ -1700,10 +1903,16 @@ function DayPicker(props) {
   }, [blur, onDayBlur]);
   const handleDayKeyDown = useCallback((day, modifiers) => (e) => {
     const keyMap = {
-      ArrowLeft: ["day", props.dir === "rtl" ? "after" : "before"],
-      ArrowRight: ["day", props.dir === "rtl" ? "before" : "after"],
-      ArrowDown: ["week", "after"],
-      ArrowUp: ["week", "before"],
+      ArrowLeft: [
+        e.shiftKey ? "month" : "day",
+        props.dir === "rtl" ? "after" : "before"
+      ],
+      ArrowRight: [
+        e.shiftKey ? "month" : "day",
+        props.dir === "rtl" ? "before" : "after"
+      ],
+      ArrowDown: [e.shiftKey ? "year" : "week", "after"],
+      ArrowUp: [e.shiftKey ? "year" : "week", "before"],
       PageUp: [e.shiftKey ? "year" : "month", "before"],
       PageDown: [e.shiftKey ? "year" : "month", "after"],
       Home: ["startOfWeek", "before"],
@@ -1738,6 +1947,13 @@ function DayPicker(props) {
     style: { ...styles2 == null ? void 0 : styles2[UI.Root], ...props.style }
   }), [classNames2, props.className, props.style, styles2]);
   const dataAttributes = getDataAttributes(props);
+  const rootElRef = useRef(null);
+  useAnimation(rootElRef, Boolean(props.animate), {
+    classNames: classNames2,
+    months,
+    focused,
+    dateLib
+  });
   const contextValue = {
     dayPickerProps: props,
     selected: selectedValue,
@@ -1759,44 +1975,77 @@ function DayPicker(props) {
     { value: contextValue },
     React.createElement(
       components2.Root,
-      { className, style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], ...dataAttributes },
+      { rootRef: props.animate ? rootElRef : void 0, className, style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], ...dataAttributes },
       React.createElement(
         components2.Months,
         { className: classNames2[UI.Months], style: styles2 == null ? void 0 : styles2[UI.Months] },
-        !props.hideNavigation && React.createElement(components2.Nav, { className: classNames2[UI.Nav], style: styles2 == null ? void 0 : styles2[UI.Nav], "aria-label": labelNav2(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth, nextMonth }),
+        !props.hideNavigation && !navLayout && React.createElement(components2.Nav, { "data-animated-nav": props.animate ? "true" : void 0, className: classNames2[UI.Nav], style: styles2 == null ? void 0 : styles2[UI.Nav], "aria-label": labelNav2(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth, nextMonth }),
         months.map((calendarMonth, displayIndex) => {
-          const dropdownMonths = getMonthOptions(calendarMonth.date, navStart, navEnd, formatters, dateLib);
-          const dropdownYears = getYearOptions(navStart, navEnd, formatters, dateLib);
           return React.createElement(
             components2.Month,
-            { className: classNames2[UI.Month], style: styles2 == null ? void 0 : styles2[UI.Month], key: displayIndex, displayIndex, calendarMonth },
-            React.createElement(components2.MonthCaption, { className: classNames2[UI.MonthCaption], style: styles2 == null ? void 0 : styles2[UI.MonthCaption], calendarMonth, displayIndex }, (captionLayout == null ? void 0 : captionLayout.startsWith("dropdown")) ? React.createElement(
+            {
+              "data-animated-month": props.animate ? "true" : void 0,
+              className: classNames2[UI.Month],
+              style: styles2 == null ? void 0 : styles2[UI.Month],
+              // biome-ignore lint/suspicious/noArrayIndexKey: breaks animation
+              key: displayIndex,
+              displayIndex,
+              calendarMonth
+            },
+            navLayout === "around" && !props.hideNavigation && displayIndex === 0 && React.createElement(
+              components2.PreviousMonthButton,
+              { type: "button", className: classNames2[UI.PreviousMonthButton], tabIndex: previousMonth ? void 0 : -1, "aria-disabled": previousMonth ? void 0 : true, "aria-label": labelPrevious2(previousMonth), onClick: handlePreviousClick, "data-animated-button": props.animate ? "true" : void 0 },
+              React.createElement(components2.Chevron, { disabled: previousMonth ? void 0 : true, className: classNames2[UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" })
+            ),
+            React.createElement(components2.MonthCaption, { "data-animated-caption": props.animate ? "true" : void 0, className: classNames2[UI.MonthCaption], style: styles2 == null ? void 0 : styles2[UI.MonthCaption], calendarMonth, displayIndex }, (captionLayout == null ? void 0 : captionLayout.startsWith("dropdown")) ? React.createElement(
               components2.DropdownNav,
               { className: classNames2[UI.Dropdowns], style: styles2 == null ? void 0 : styles2[UI.Dropdowns] },
-              captionLayout === "dropdown" || captionLayout === "dropdown-months" ? React.createElement(components2.MonthsDropdown, { className: classNames2[UI.MonthsDropdown], "aria-label": labelMonthDropdown2(), classNames: classNames2, components: components2, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: dropdownMonths, style: styles2 == null ? void 0 : styles2[UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) }) : React.createElement("span", { role: "status", "aria-live": "polite" }, formatMonthDropdown2(calendarMonth.date, dateLib)),
-              captionLayout === "dropdown" || captionLayout === "dropdown-years" ? React.createElement(components2.YearsDropdown, { className: classNames2[UI.YearsDropdown], "aria-label": labelYearDropdown2(dateLib.options), classNames: classNames2, components: components2, disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date), options: dropdownYears, style: styles2 == null ? void 0 : styles2[UI.Dropdown], value: dateLib.getYear(calendarMonth.date) }) : React.createElement("span", { role: "status", "aria-live": "polite" }, formatYearDropdown2(calendarMonth.date, dateLib))
-            ) : React.createElement(components2.CaptionLabel, { className: classNames2[UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption2(calendarMonth.date, dateLib.options, dateLib))),
+              captionLayout === "dropdown" || captionLayout === "dropdown-months" ? React.createElement(components2.MonthsDropdown, { className: classNames2[UI.MonthsDropdown], "aria-label": labelMonthDropdown2(), classNames: classNames2, components: components2, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: getMonthOptions(calendarMonth.date, navStart, navEnd, formatters, dateLib), style: styles2 == null ? void 0 : styles2[UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) }) : React.createElement("span", null, formatMonthDropdown2(calendarMonth.date, dateLib)),
+              captionLayout === "dropdown" || captionLayout === "dropdown-years" ? React.createElement(components2.YearsDropdown, { className: classNames2[UI.YearsDropdown], "aria-label": labelYearDropdown2(dateLib.options), classNames: classNames2, components: components2, disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date), options: getYearOptions(navStart, navEnd, formatters, dateLib, Boolean(props.reverseYears)), style: styles2 == null ? void 0 : styles2[UI.Dropdown], value: dateLib.getYear(calendarMonth.date) }) : React.createElement("span", null, formatYearDropdown2(calendarMonth.date, dateLib)),
+              React.createElement("span", { role: "status", "aria-live": "polite", style: {
+                border: 0,
+                clip: "rect(0 0 0 0)",
+                height: "1px",
+                margin: "-1px",
+                overflow: "hidden",
+                padding: 0,
+                position: "absolute",
+                width: "1px",
+                whiteSpace: "nowrap",
+                wordWrap: "normal"
+              } }, formatCaption2(calendarMonth.date, dateLib.options, dateLib))
+            ) : (
+              // biome-ignore lint/a11y/useSemanticElements: breaking change
+              React.createElement(components2.CaptionLabel, { className: classNames2[UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption2(calendarMonth.date, dateLib.options, dateLib))
+            )),
+            navLayout === "around" && !props.hideNavigation && displayIndex === numberOfMonths - 1 && React.createElement(
+              components2.NextMonthButton,
+              { type: "button", className: classNames2[UI.NextMonthButton], tabIndex: nextMonth ? void 0 : -1, "aria-disabled": nextMonth ? void 0 : true, "aria-label": labelNext2(nextMonth), onClick: handleNextClick, "data-animated-button": props.animate ? "true" : void 0 },
+              React.createElement(components2.Chevron, { disabled: nextMonth ? void 0 : true, className: classNames2[UI.Chevron], orientation: props.dir === "rtl" ? "left" : "right" })
+            ),
+            displayIndex === numberOfMonths - 1 && navLayout === "after" && !props.hideNavigation && React.createElement(components2.Nav, { "data-animated-nav": props.animate ? "true" : void 0, className: classNames2[UI.Nav], style: styles2 == null ? void 0 : styles2[UI.Nav], "aria-label": labelNav2(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth, nextMonth }),
             React.createElement(
               components2.MonthGrid,
               { role: "grid", "aria-multiselectable": mode === "multiple" || mode === "range", "aria-label": labelGrid2(calendarMonth.date, dateLib.options, dateLib) || void 0, className: classNames2[UI.MonthGrid], style: styles2 == null ? void 0 : styles2[UI.MonthGrid] },
               !props.hideWeekdays && React.createElement(
                 components2.Weekdays,
-                { className: classNames2[UI.Weekdays], style: styles2 == null ? void 0 : styles2[UI.Weekdays] },
+                { "data-animated-weekdays": props.animate ? "true" : void 0, className: classNames2[UI.Weekdays], style: styles2 == null ? void 0 : styles2[UI.Weekdays] },
                 showWeekNumber && React.createElement(components2.WeekNumberHeader, { "aria-label": labelWeekNumberHeader2(dateLib.options), className: classNames2[UI.WeekNumberHeader], style: styles2 == null ? void 0 : styles2[UI.WeekNumberHeader], scope: "col" }, formatWeekNumberHeader2()),
-                weekdays.map((weekday, i) => React.createElement(components2.Weekday, { "aria-label": labelWeekday2(weekday, dateLib.options, dateLib), className: classNames2[UI.Weekday], key: i, style: styles2 == null ? void 0 : styles2[UI.Weekday], scope: "col" }, formatWeekdayName2(weekday, dateLib.options, dateLib)))
+                weekdays.map((weekday) => React.createElement(components2.Weekday, { "aria-label": labelWeekday2(weekday, dateLib.options, dateLib), className: classNames2[UI.Weekday], key: String(weekday), style: styles2 == null ? void 0 : styles2[UI.Weekday], scope: "col" }, formatWeekdayName2(weekday, dateLib.options, dateLib)))
               ),
-              React.createElement(components2.Weeks, { className: classNames2[UI.Weeks], style: styles2 == null ? void 0 : styles2[UI.Weeks] }, calendarMonth.weeks.map((week, weekIndex) => {
+              React.createElement(components2.Weeks, { "data-animated-weeks": props.animate ? "true" : void 0, className: classNames2[UI.Weeks], style: styles2 == null ? void 0 : styles2[UI.Weeks] }, calendarMonth.weeks.map((week) => {
                 return React.createElement(
                   components2.Week,
                   { className: classNames2[UI.Week], key: week.weekNumber, style: styles2 == null ? void 0 : styles2[UI.Week], week },
-                  showWeekNumber && React.createElement(components2.WeekNumber, { week, style: styles2 == null ? void 0 : styles2[UI.WeekNumber], "aria-label": labelWeekNumber2(week.weekNumber, {
+                  showWeekNumber && // biome-ignore lint/a11y/useSemanticElements: react component
+                  React.createElement(components2.WeekNumber, { week, style: styles2 == null ? void 0 : styles2[UI.WeekNumber], "aria-label": labelWeekNumber2(week.weekNumber, {
                     locale
-                  }), className: classNames2[UI.WeekNumber], scope: "row", role: "rowheader" }, formatWeekNumber2(week.weekNumber)),
+                  }), className: classNames2[UI.WeekNumber], scope: "row", role: "rowheader" }, formatWeekNumber2(week.weekNumber, dateLib)),
                   week.days.map((day) => {
                     const { date } = day;
                     const modifiers = getModifiers(day);
                     modifiers[DayFlag.focused] = !modifiers.hidden && Boolean(focused == null ? void 0 : focused.isEqualTo(day));
-                    modifiers[SelectionState.selected] = !modifiers.disabled && ((isSelected == null ? void 0 : isSelected(date)) || modifiers.selected);
+                    modifiers[SelectionState.selected] = (isSelected == null ? void 0 : isSelected(date)) || modifiers.selected;
                     if (isDateRange(selectedValue)) {
                       const { from, to } = selectedValue;
                       modifiers[SelectionState.range_start] = Boolean(from && to && dateLib.isSameDay(date, from));
@@ -1806,7 +2055,10 @@ function DayPicker(props) {
                     const style2 = getStyleForModifiers(modifiers, styles2, props.modifiersStyles);
                     const className2 = getClassNamesForModifiers(modifiers, classNames2, props.modifiersClassNames);
                     const ariaLabel = !isInteractive && !modifiers.hidden ? labelGridcell2(date, modifiers, dateLib.options, dateLib) : void 0;
-                    return React.createElement(components2.Day, { key: `${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`, day, modifiers, className: className2.join(" "), style: style2, role: "gridcell", "aria-selected": modifiers.selected || void 0, "aria-label": ariaLabel, "data-day": dateLib.format(date, "yyyy-MM-dd"), "data-month": day.outside ? dateLib.format(date, "yyyy-MM") : void 0, "data-selected": modifiers.selected || void 0, "data-disabled": modifiers.disabled || void 0, "data-hidden": modifiers.hidden || void 0, "data-outside": day.outside || void 0, "data-focused": modifiers.focused || void 0, "data-today": modifiers.today || void 0 }, !modifiers.hidden && isInteractive ? React.createElement(components2.DayButton, { className: classNames2[UI.DayButton], style: styles2 == null ? void 0 : styles2[UI.DayButton], type: "button", day, modifiers, disabled: modifiers.disabled || void 0, tabIndex: isFocusTarget(day) ? 0 : -1, "aria-label": labelDayButton2(date, modifiers, dateLib.options, dateLib), onClick: handleDayClick(day, modifiers), onBlur: handleDayBlur(day, modifiers), onFocus: handleDayFocus(day, modifiers), onKeyDown: handleDayKeyDown(day, modifiers), onMouseEnter: handleDayMouseEnter(day, modifiers), onMouseLeave: handleDayMouseLeave(day, modifiers) }, formatDay2(date, dateLib.options, dateLib)) : !modifiers.hidden && formatDay2(day.date, dateLib.options, dateLib));
+                    return (
+                      // biome-ignore lint/a11y/useSemanticElements: react component
+                      React.createElement(components2.Day, { key: `${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`, day, modifiers, className: className2.join(" "), style: style2, role: "gridcell", "aria-selected": modifiers.selected || void 0, "aria-label": ariaLabel, "data-day": dateLib.format(date, "yyyy-MM-dd"), "data-month": day.outside ? dateLib.format(date, "yyyy-MM") : void 0, "data-selected": modifiers.selected || void 0, "data-disabled": modifiers.disabled || void 0, "data-hidden": modifiers.hidden || void 0, "data-outside": day.outside || void 0, "data-focused": modifiers.focused || void 0, "data-today": modifiers.today || void 0 }, !modifiers.hidden && isInteractive ? React.createElement(components2.DayButton, { className: classNames2[UI.DayButton], style: styles2 == null ? void 0 : styles2[UI.DayButton], type: "button", day, modifiers, disabled: modifiers.disabled || void 0, tabIndex: isFocusTarget(day) ? 0 : -1, "aria-label": labelDayButton2(date, modifiers, dateLib.options, dateLib), onClick: handleDayClick(day, modifiers), onBlur: handleDayBlur(day, modifiers), onFocus: handleDayFocus(day, modifiers), onKeyDown: handleDayKeyDown(day, modifiers), onMouseEnter: handleDayMouseEnter(day, modifiers), onMouseLeave: handleDayMouseLeave(day, modifiers) }, formatDay2(date, dateLib.options, dateLib)) : !modifiers.hidden && formatDay2(day.date, dateLib.options, dateLib))
+                    );
                   })
                 );
               }))
@@ -1814,7 +2066,8 @@ function DayPicker(props) {
           );
         })
       ),
-      props.footer && React.createElement(components2.Footer, { className: classNames2[UI.Footer], style: styles2 == null ? void 0 : styles2[UI.Footer], role: "status", "aria-live": "polite" }, props.footer)
+      props.footer && // biome-ignore lint/a11y/useSemanticElements: react component
+      React.createElement(components2.Footer, { className: classNames2[UI.Footer], style: styles2 == null ? void 0 : styles2[UI.Footer], role: "status", "aria-live": "polite" }, props.footer)
     )
   );
 }
@@ -2101,7 +2354,7 @@ const DatePicker = React.forwardRef((props, ref) => {
     }
   }, [returnInputFocus]);
   const handleEscapeKeyDown = () => {
-    (refObject == null ? void 0 : refObject.current) && refObject.current.focus();
+    if (refObject == null ? void 0 : refObject.current) refObject.current.focus();
     setDatePickerOpen(false);
   };
   useKeyboardEvent(datepickerWrapperRef, handleEscapeKeyDown, [KeyboardEventKey.Escape]);
@@ -2115,7 +2368,7 @@ const DatePicker = React.forwardRef((props, ref) => {
     } else {
       setDateState(void 0);
     }
-    onChange && onChange(event, event.currentTarget.value);
+    if (onChange) onChange(event, event.currentTarget.value);
   };
   const handleInputFocus = () => {
     if (!returnInputFocus) {
@@ -2135,9 +2388,9 @@ const DatePicker = React.forwardRef((props, ref) => {
       setInputValue(format(date, dateFormat));
       setDatePickerOpen(false);
     }
-    onChange && onChange(e, date);
+    if (onChange) onChange(e, date);
     triggerSyntheticInputEvents(refObject, format(date, dateFormat), date);
-    onDatePopupClosed && onDatePopupClosed(date);
+    if (onDatePopupClosed) onDatePopupClosed(date);
   };
   const triggerSyntheticInputEvents = (inputRef, value, date, _onChange) => {
     if (inputRef.current) {
@@ -2163,7 +2416,7 @@ const DatePicker = React.forwardRef((props, ref) => {
   };
   const handleInputBlur = (e) => {
     if (!datePickerOpen && (typeof onDatePopupClosed === "undefined" || isTyping.current)) {
-      onBlur && onBlur(e);
+      if (onBlur) onBlur(e);
     }
     isTyping.current = false;
   };
@@ -2191,7 +2444,7 @@ const DatePicker = React.forwardRef((props, ref) => {
   const handleMobileInputChange = (e) => {
     handleInputChange(e, "yyyy-MM-dd");
     if (!isTyping.current) {
-      onDatePopupClosed && onDatePopupClosed(dateState);
+      if (onDatePopupClosed) onDatePopupClosed(dateState);
     }
   };
   const renderMobile = /* @__PURE__ */ jsx(
@@ -2311,14 +2564,14 @@ const DateTime = React.forwardRef((props, ref) => {
     const value2 = event.target.value;
     if (isNumericString(value2)) {
       setInputValue(value2);
-      onChange && onChange(event);
+      if (onChange) onChange(event);
     }
   };
   const handleInputBlur = (event) => {
     const formattedValue = formatAsTwoDigits(event.target.value);
     setInputValue(formattedValue);
-    onChange && onChange(event);
-    onBlur && onBlur(event);
+    if (onChange) onChange(event);
+    if (onBlur) onBlur(event);
   };
   const handleInputOnKeyDown = (event) => {
     const validChars = /[0-9]/;