@helsenorge/datepicker 9.4.3 → 10.0.0-beta.0

package/components/DatePicker/index.js

@@ -1,6 +1,6 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { createContext, forwardRef, useContext, useState, useEffect, useLayoutEffect, useRef } from "react";
-import { isSameDay, subDays, addDays, differenceInCalendarDays, startOfMonth, endOfMonth, startOfDay, addMonths, differenceInCalendarMonths, isSameMonth, isBefore, isAfter, getUnixTime, getWeeksInMonth, addWeeks, isSameYear, setMonth, setYear, startOfYear, max, min, endOfISOWeek, endOfWeek, startOfISOWeek, startOfWeek, getISOWeek, getWeek, format, isDate, addYears, isValid, parse, isWithinInterval } from "date-fns";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import React, { createContext, useContext, useState, useEffect, useMemo, useCallback, useRef } from "react";
+import { addDays, addMonths, addWeeks, addYears, differenceInCalendarDays, differenceInCalendarMonths, endOfISOWeek, endOfMonth, endOfWeek, endOfYear, format, getISOWeek, 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 Button$1 from "@helsenorge/designsystem-react/components/Button";
 import Icon from "@helsenorge/designsystem-react/components/Icon";
@@ -14,6 +14,7 @@ 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 { useFocusTrap } from "@helsenorge/designsystem-react/hooks/useFocusTrap";
 import { useInterval } from "@helsenorge/designsystem-react/hooks/useInterval";
@@ -25,788 +26,1117 @@ import styles from "./styles.module.scss";
 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 __assign = function() {
-  __assign = Object.assign || function __assign2(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+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 = {}));
+const FIVE_WEEKS = 5;
+const FOUR_WEEKS = 4;
+function getBroadcastWeeksInMonth(month, dateLib) {
+  const firstDayOfMonth = dateLib.startOfMonth(month);
+  const firstDayOfWeek = firstDayOfMonth.getDay() > 0 ? firstDayOfMonth.getDay() : 7;
+  const broadcastStartDate = dateLib.addDays(month, -firstDayOfWeek + 1);
+  const lastDateOfLastWeek = dateLib.addDays(broadcastStartDate, FIVE_WEEKS * 7 - 1);
+  const numberOfWeeks = month.getMonth() === lastDateOfLastWeek.getMonth() ? FIVE_WEEKS : FOUR_WEEKS;
+  return numberOfWeeks;
+}
+function startOfBroadcastWeek(date, dateLib) {
+  const firstOfMonth = dateLib.startOfMonth(date);
+  const dayOfWeek = firstOfMonth.getDay();
+  if (dayOfWeek === 1) {
+    return firstOfMonth;
+  } else if (dayOfWeek === 0) {
+    return dateLib.addDays(firstOfMonth, -1 * 6);
+  } else {
+    return dateLib.addDays(firstOfMonth, -1 * (dayOfWeek - 1));
+  }
+}
+function endOfBroadcastWeek(date, dateLib) {
+  const startDate = startOfBroadcastWeek(date, dateLib);
+  const numberOfWeeks = getBroadcastWeeksInMonth(date, dateLib);
+  const endDate = dateLib.addDays(startDate, numberOfWeeks * 7 - 1);
+  return endDate;
+}
+class DateLib {
+  /**
+   * Creates an instance of DateLib.
+   *
+   * @param options The options for the date library.
+   * @param overrides Overrides for the date library functions.
+   */
+  constructor(options, overrides) {
+    this.Date = Date;
+    this.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;
+      return ((_a = this.overrides) == null ? void 0 : _a.addMonths) ? this.overrides.addMonths(date, amount) : addMonths(date, amount);
+    };
+    this.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;
+      return ((_a = this.overrides) == null ? void 0 : _a.addYears) ? this.overrides.addYears(date, amount) : addYears(date, amount);
+    };
+    this.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;
+      return ((_a = this.overrides) == null ? void 0 : _a.differenceInCalendarMonths) ? this.overrides.differenceInCalendarMonths(dateLeft, dateRight) : differenceInCalendarMonths(dateLeft, dateRight);
+    };
+    this.endOfBroadcastWeek = (date) => {
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.endOfBroadcastWeek) ? this.overrides.endOfBroadcastWeek(date, this) : endOfBroadcastWeek(date, this);
+    };
+    this.endOfISOWeek = (date) => {
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.endOfISOWeek) ? this.overrides.endOfISOWeek(date) : endOfISOWeek(date);
+    };
+    this.endOfMonth = (date) => {
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.endOfMonth) ? this.overrides.endOfMonth(date) : endOfMonth(date);
+    };
+    this.endOfWeek = (date) => {
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.endOfWeek) ? this.overrides.endOfWeek(date, this.options) : endOfWeek(date, this.options);
+    };
+    this.endOfYear = (date) => {
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.endOfYear) ? this.overrides.endOfYear(date) : endOfYear(date);
+    };
+    this.format = (date, formatStr) => {
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.format) ? this.overrides.format(date, formatStr, this.options) : format(date, formatStr, this.options);
+    };
+    this.getISOWeek = (date) => {
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.getISOWeek) ? this.overrides.getISOWeek(date) : getISOWeek(date);
+    };
+    this.getWeek = (date) => {
+      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;
+      return ((_a = this.overrides) == null ? void 0 : _a.isAfter) ? this.overrides.isAfter(date, dateToCompare) : isAfter(date, dateToCompare);
+    };
+    this.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;
+      return ((_a = this.overrides) == null ? void 0 : _a.isDate) ? this.overrides.isDate(value) : isDate(value);
+    };
+    this.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;
+      return ((_a = this.overrides) == null ? void 0 : _a.isSameMonth) ? this.overrides.isSameMonth(dateLeft, dateRight) : isSameMonth(dateLeft, dateRight);
+    };
+    this.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;
+      return ((_a = this.overrides) == null ? void 0 : _a.max) ? this.overrides.max(dates) : max(dates);
+    };
+    this.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;
+      return ((_a = this.overrides) == null ? void 0 : _a.setMonth) ? this.overrides.setMonth(date, month) : setMonth(date, month);
+    };
+    this.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) => {
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.startOfBroadcastWeek) ? this.overrides.startOfBroadcastWeek(date, this) : startOfBroadcastWeek(date, this);
+    };
+    this.startOfDay = (date) => {
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.startOfDay) ? this.overrides.startOfDay(date) : startOfDay(date);
+    };
+    this.startOfISOWeek = (date) => {
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.startOfISOWeek) ? this.overrides.startOfISOWeek(date) : startOfISOWeek(date);
+    };
+    this.startOfMonth = (date) => {
+      var _a;
+      return ((_a = this.overrides) == null ? void 0 : _a.startOfMonth) ? this.overrides.startOfMonth(date) : startOfMonth(date);
+    };
+    this.startOfWeek = (date) => {
+      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;
+      return ((_a = this.overrides) == null ? void 0 : _a.startOfYear) ? this.overrides.startOfYear(date) : startOfYear(date);
+    };
+    this.options = { locale: enUS, ...options };
+    this.overrides = overrides;
+  }
+}
+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 t;
+    return previousValue;
+  }, [classNames2[UI.Day]]);
+  return modifierClassNames;
+}
+function Button(props) {
+  return React.createElement("button", { ...props });
+}
+function CaptionLabel(props) {
+  return React.createElement("span", { ...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" })
+  );
+}
+function Day(props) {
+  const { day, modifiers, ...tdProps } = props;
+  return React.createElement("td", { ...tdProps });
+}
+function DayButton(props) {
+  const { day, modifiers, ...buttonProps } = props;
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    var _a;
+    if (modifiers.focused)
+      (_a = ref.current) == null ? void 0 : _a.focus();
+  }, [modifiers.focused]);
+  return React.createElement("button", { ref, ...buttonProps });
+}
+function Dropdown(props) {
+  const { options, className, components: components2, classNames: classNames2, ...selectProps } = props;
+  const cssClassSelect = [classNames2[UI.Dropdown], className].join(" ");
+  const selectedOption = options == null ? void 0 : options.find(({ value }) => value === selectProps.value);
+  return React.createElement(
+    "span",
+    { "data-disabled": selectProps.disabled, className: classNames2[UI.DropdownRoot] },
+    React.createElement(components2.Select, { className: cssClassSelect, ...selectProps }, options == null ? void 0 : options.map(({ value, label, disabled }) => React.createElement(components2.Option, { key: value, value, disabled }, label))),
+    React.createElement(
+      "span",
+      { className: classNames2[UI.CaptionLabel], "aria-hidden": true },
+      selectedOption == null ? void 0 : selectedOption.label,
+      React.createElement(components2.Chevron, { orientation: "down", size: 18, className: classNames2[UI.Chevron] })
+    )
+  );
+}
+function DropdownNav(props) {
+  return React.createElement("div", { ...props });
+}
+function Footer(props) {
+  return React.createElement("div", { ...props });
+}
+function Month(props) {
+  const { calendarMonth, displayIndex, ...divProps } = props;
+  return React.createElement("div", { ...divProps }, props.children);
+}
+function MonthCaption(props) {
+  const { calendarMonth, displayIndex, ...divProps } = props;
+  return React.createElement("div", { ...divProps });
+}
+function MonthGrid(props) {
+  return React.createElement("table", { ...props });
+}
+function Months(props) {
+  return React.createElement("div", { ...props });
+}
+const dayPickerContext = createContext(void 0);
+function useDayPicker() {
+  const context = useContext(dayPickerContext);
+  if (context === void 0) {
+    throw new Error("useDayPicker() must be used within a custom component.");
+  }
+  return context;
+}
+function MonthsDropdown(props) {
+  const { components: components2 } = useDayPicker();
+  return React.createElement(components2.Dropdown, { ...props });
+}
+function Nav(props) {
+  const { onPreviousClick, onNextClick, previousMonth, nextMonth, ...navProps } = props;
+  const { components: components2, classNames: classNames2, labels: { labelPrevious: labelPrevious2, labelNext: labelNext2 } } = useDayPicker();
+  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 },
+      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 },
+      React.createElement(components2.Chevron, { disabled: nextMonth ? void 0 : true, orientation: "right", className: classNames2[UI.Chevron] })
+    )
+  );
+}
+function NextMonthButton(props) {
+  const { components: components2 } = useDayPicker();
+  return React.createElement(components2.Button, { ...props });
+}
+function Option(props) {
+  return React.createElement("option", { ...props });
+}
+function PreviousMonthButton(props) {
+  const { components: components2 } = useDayPicker();
+  return React.createElement(components2.Button, { ...props });
+}
+function Root(props) {
+  return React.createElement("div", { ...props });
+}
+function Select(props) {
+  return React.createElement("select", { ...props });
+}
+function Week(props) {
+  const { week, ...trProps } = props;
+  return React.createElement("tr", { ...trProps });
+}
+function Weekday(props) {
+  return React.createElement("th", { ...props });
+}
+function Weekdays(props) {
+  return React.createElement(
+    "thead",
+    { "aria-hidden": true },
+    React.createElement("tr", { ...props })
+  );
+}
+function WeekNumber(props) {
+  const { week, ...thProps } = props;
+  return React.createElement("th", { ...thProps });
+}
+function WeekNumberHeader(props) {
+  return React.createElement("th", { ...props });
+}
+function Weeks(props) {
+  return React.createElement("tbody", { ...props });
+}
+function YearsDropdown(props) {
+  const { components: components2 } = useDayPicker();
+  return React.createElement(components2.Dropdown, { ...props });
+}
+const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Button,
+  CaptionLabel,
+  Chevron,
+  Day,
+  DayButton,
+  Dropdown,
+  DropdownNav,
+  Footer,
+  Month,
+  MonthCaption,
+  MonthGrid,
+  Months,
+  MonthsDropdown,
+  Nav,
+  NextMonthButton,
+  Option,
+  PreviousMonthButton,
+  Root,
+  Select,
+  Week,
+  WeekNumber,
+  WeekNumberHeader,
+  Weekday,
+  Weekdays,
+  Weeks,
+  YearsDropdown
+}, Symbol.toStringTag, { value: "Module" }));
+function getComponents(customComponents) {
+  return {
+    ...components,
+    ...customComponents
   };
-  return __assign.apply(this, arguments);
-};
-function __rest(s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-    t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function")
-    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-        t[p[i]] = s[p[i]];
-    }
-  return t;
 }
-function __spreadArray(to, from, pack) {
-  for (var i = 0, l = from.length, ar; i < l; i++) {
-    if (ar || !(i in from)) {
-      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-      ar[i] = from[i];
+function getDataAttributes(props) {
+  const dataAttributes = {
+    "data-mode": props.mode ?? void 0,
+    "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
+  };
+  Object.entries(props).forEach(([key, val]) => {
+    if (key.startsWith("data-")) {
+      dataAttributes[key] = val;
     }
+  });
+  return dataAttributes;
+}
+function getDefaultClassNames() {
+  const classNames2 = {};
+  for (const key in UI) {
+    classNames2[UI[key]] = `rdp-${UI[key]}`;
+  }
+  for (const key in DayFlag) {
+    classNames2[DayFlag[key]] = `rdp-${DayFlag[key]}`;
   }
-  return to.concat(ar || Array.prototype.slice.call(from));
+  for (const key in SelectionState) {
+    classNames2[SelectionState[key]] = `rdp-${SelectionState[key]}`;
+  }
+  return classNames2;
 }
-typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
-  var e = new Error(message);
-  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-function isDayPickerMultiple(props) {
-  return props.mode === "multiple";
-}
-function isDayPickerRange(props) {
-  return props.mode === "range";
-}
-function isDayPickerSingle(props) {
-  return props.mode === "single";
-}
-var defaultClassNames = {
-  root: "rdp",
-  multiple_months: "rdp-multiple_months",
-  with_weeknumber: "rdp-with_weeknumber",
-  vhidden: "rdp-vhidden",
-  button_reset: "rdp-button_reset",
-  button: "rdp-button",
-  caption: "rdp-caption",
-  caption_start: "rdp-caption_start",
-  caption_end: "rdp-caption_end",
-  caption_between: "rdp-caption_between",
-  caption_label: "rdp-caption_label",
-  caption_dropdowns: "rdp-caption_dropdowns",
-  dropdown: "rdp-dropdown",
-  dropdown_month: "rdp-dropdown_month",
-  dropdown_year: "rdp-dropdown_year",
-  dropdown_icon: "rdp-dropdown_icon",
-  months: "rdp-months",
-  month: "rdp-month",
-  table: "rdp-table",
-  tbody: "rdp-tbody",
-  tfoot: "rdp-tfoot",
-  head: "rdp-head",
-  head_row: "rdp-head_row",
-  head_cell: "rdp-head_cell",
-  nav: "rdp-nav",
-  nav_button: "rdp-nav_button",
-  nav_button_previous: "rdp-nav_button_previous",
-  nav_button_next: "rdp-nav_button_next",
-  nav_icon: "rdp-nav_icon",
-  row: "rdp-row",
-  weeknumber: "rdp-weeknumber",
-  cell: "rdp-cell",
-  day: "rdp-day",
-  day_today: "rdp-day_today",
-  day_outside: "rdp-day_outside",
-  day_selected: "rdp-day_selected",
-  day_disabled: "rdp-day_disabled",
-  day_hidden: "rdp-day_hidden",
-  day_range_start: "rdp-day_range_start",
-  day_range_end: "rdp-day_range_end",
-  day_range_middle: "rdp-day_range_middle"
-};
-function formatCaption(month, options) {
-  return format(month, "LLLL y", options);
+function formatCaption(month, options, dateLib) {
+  return (dateLib ?? new DateLib(options)).format(month, "LLLL y");
 }
-function formatDay(day, options) {
-  return format(day, "d", options);
+const formatMonthCaption = formatCaption;
+function formatDay(date, options, dateLib) {
+  return (dateLib ?? new DateLib(options)).format(date, "d");
 }
-function formatMonthCaption(month, options) {
-  return format(month, "LLLL", options);
+function formatMonthDropdown(monthNumber, locale) {
+  var _a;
+  return (_a = locale.localize) == null ? void 0 : _a.month(monthNumber);
 }
 function formatWeekNumber(weekNumber) {
-  return "".concat(weekNumber);
+  if (weekNumber < 10) {
+    return `0${weekNumber.toLocaleString()}`;
+  }
+  return `${weekNumber.toLocaleString()}`;
+}
+function formatWeekNumberHeader() {
+  return ``;
 }
-function formatWeekdayName(weekday, options) {
-  return format(weekday, "cccccc", options);
+function formatWeekdayName(weekday, options, dateLib) {
+  return (dateLib ?? new DateLib(options)).format(weekday, "cccccc");
 }
-function formatYearCaption(year, options) {
-  return format(year, "yyyy", options);
+function formatYearDropdown(year) {
+  return year.toString();
 }
-var formatters = /* @__PURE__ */ Object.freeze({
+const formatYearCaption = formatYearDropdown;
+const defaultFormatters = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   formatCaption,
   formatDay,
   formatMonthCaption,
+  formatMonthDropdown,
   formatWeekNumber,
+  formatWeekNumberHeader,
   formatWeekdayName,
-  formatYearCaption
-});
-var labelDay = function(day, activeModifiers, options) {
-  return format(day, "do MMMM (EEEE)", options);
-};
-var labelMonthDropdown = function() {
-  return "Month: ";
-};
-var labelNext = function() {
-  return "Go to next month";
-};
-var labelPrevious = function() {
-  return "Go to previous month";
-};
-var labelWeekday = function(day, options) {
-  return format(day, "cccc", options);
-};
-var labelWeekNumber = function(n) {
-  return "Week n. ".concat(n);
-};
-var labelYearDropdown = function() {
-  return "Year: ";
-};
-var labels = /* @__PURE__ */ Object.freeze({
-  __proto__: null,
-  labelDay,
-  labelMonthDropdown,
-  labelNext,
-  labelPrevious,
-  labelWeekNumber,
-  labelWeekday,
-  labelYearDropdown
-});
-function getDefaultContextValues() {
-  var captionLayout = "buttons";
-  var classNames2 = defaultClassNames;
-  var locale = enUS;
-  var modifiersClassNames = {};
-  var modifiers = {};
-  var numberOfMonths = 1;
-  var styles2 = {};
-  var today = /* @__PURE__ */ new Date();
+  formatYearCaption,
+  formatYearDropdown
+}, Symbol.toStringTag, { value: "Module" }));
+function getFormatters(customFormatters) {
+  if ((customFormatters == null ? void 0 : customFormatters.formatMonthCaption) && !customFormatters.formatCaption) {
+    customFormatters.formatCaption = customFormatters.formatMonthCaption;
+  }
+  if ((customFormatters == null ? void 0 : customFormatters.formatYearCaption) && !customFormatters.formatYearDropdown) {
+    customFormatters.formatYearDropdown = customFormatters.formatYearCaption;
+  }
   return {
-    captionLayout,
-    classNames: classNames2,
-    formatters,
-    labels,
-    locale,
-    modifiersClassNames,
-    modifiers,
-    numberOfMonths,
-    styles: styles2,
-    today,
-    mode: "default"
+    ...defaultFormatters,
+    ...customFormatters
   };
 }
-function parseFromToProps(props) {
-  var fromYear = props.fromYear, toYear = props.toYear, fromMonth = props.fromMonth, toMonth = props.toMonth;
-  var fromDate = props.fromDate, toDate = props.toDate;
-  if (fromMonth) {
-    fromDate = startOfMonth(fromMonth);
-  } else if (fromYear) {
-    fromDate = new Date(fromYear, 0, 1);
+function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {
+  if (!navStart)
+    return void 0;
+  if (!navEnd)
+    return void 0;
+  const { addMonths: addMonths2, startOfMonth: startOfMonth2 } = dateLib;
+  const year = displayMonth.getFullYear();
+  const months = [];
+  let month = navStart;
+  while (months.length < 12) {
+    months.push(month.getMonth());
+    month = addMonths2(month, 1);
+  }
+  const sortedMonths = months.sort((a, b) => {
+    return a - b;
+  });
+  const options = sortedMonths.map((value) => {
+    const label = formatters.formatMonthDropdown(value, dateLib.options.locale ?? enUS$1);
+    const month2 = dateLib.Date ? new dateLib.Date(year, value) : new Date(year, value);
+    const disabled = navStart && month2 < startOfMonth2(navStart) || navEnd && month2 > startOfMonth2(navEnd) || false;
+    return { value, label, disabled };
+  });
+  return options;
+}
+function getStyleForModifiers(dayModifiers, styles2 = {}, modifiersStyles = {}) {
+  let style = { ...styles2 == null ? void 0 : styles2[UI.Day] };
+  Object.entries(dayModifiers).filter(([, active]) => active === true).forEach(([modifier]) => {
+    style = {
+      ...style,
+      ...modifiersStyles == null ? void 0 : modifiersStyles[modifier]
+    };
+  });
+  return style;
+}
+const offsetFormatCache = {};
+const offsetCache = {};
+function tzOffset(timeZone, date) {
+  try {
+    const format2 = offsetFormatCache[timeZone] || (offsetFormatCache[timeZone] = new Intl.DateTimeFormat("en-GB", {
+      timeZone,
+      hour: "numeric",
+      timeZoneName: "longOffset"
+    }).format);
+    const offsetStr = format2(date).split("GMT")[1] || "";
+    if (offsetStr in offsetCache) return offsetCache[offsetStr];
+    return calcOffset(offsetStr, offsetStr.split(":"));
+  } catch {
+    if (timeZone in offsetCache) return offsetCache[timeZone];
+    const captures = timeZone == null ? void 0 : timeZone.match(offsetRe);
+    if (captures) return calcOffset(timeZone, captures.slice(1));
+    return NaN;
+  }
+}
+const offsetRe = /([+-]\d\d):?(\d\d)?/;
+function calcOffset(cacheStr, values) {
+  const hours = +values[0];
+  const minutes = +(values[1] || 0);
+  return offsetCache[cacheStr] = hours > 0 ? hours * 60 + minutes : hours * 60 - minutes;
+}
+class TZDateMini extends Date {
+  //#region static
+  constructor(...args) {
+    super();
+    if (args.length > 1 && typeof args[args.length - 1] === "string") {
+      this.timeZone = args.pop();
+    }
+    this.internal = /* @__PURE__ */ new Date();
+    if (isNaN(tzOffset(this.timeZone, this))) {
+      this.setTime(NaN);
+    } else {
+      if (!args.length) {
+        this.setTime(Date.now());
+      } else if (typeof args[0] === "number" && (args.length === 1 || args.length === 2 && typeof args[1] !== "number")) {
+        this.setTime(args[0]);
+      } else if (typeof args[0] === "string") {
+        this.setTime(+new Date(args[0]));
+      } else if (args[0] instanceof Date) {
+        this.setTime(+args[0]);
+      } else {
+        this.setTime(+new Date(...args));
+        adjustToSystemTZ(this);
+        syncToInternal(this);
+      }
+    }
   }
-  if (toMonth) {
-    toDate = endOfMonth(toMonth);
-  } else if (toYear) {
-    toDate = new Date(toYear, 11, 31);
+  static tz(tz, ...args) {
+    return args.length ? new TZDateMini(...args, tz) : new TZDateMini(Date.now(), tz);
   }
-  return {
-    fromDate: fromDate ? startOfDay(fromDate) : void 0,
-    toDate: toDate ? startOfDay(toDate) : void 0
-  };
+  //#endregion
+  //#region time zone
+  withTimeZone(timeZone) {
+    return new TZDateMini(+this, timeZone);
+  }
+  getTimezoneOffset() {
+    return -tzOffset(this.timeZone, this);
+  }
+  //#endregion
+  //#region time
+  setTime(time) {
+    Date.prototype.setTime.apply(this, arguments);
+    syncToInternal(this);
+    return +this;
+  }
+  //#endregion
+  //#region date-fns integration
+  [Symbol.for("constructDateFrom")](date) {
+    return new TZDateMini(+new Date(date), this.timeZone);
+  }
+  //#endregion
 }
-var DayPickerContext = createContext(void 0);
-function DayPickerProvider(props) {
-  var _a;
-  var initialProps = props.initialProps;
-  var defaultContextValues = getDefaultContextValues();
-  var _b = parseFromToProps(initialProps), fromDate = _b.fromDate, toDate = _b.toDate;
-  var captionLayout = (_a = initialProps.captionLayout) !== null && _a !== void 0 ? _a : defaultContextValues.captionLayout;
-  if (captionLayout !== "buttons" && (!fromDate || !toDate)) {
-    captionLayout = "buttons";
+const re = /^(get|set)(?!UTC)/;
+Object.getOwnPropertyNames(Date.prototype).forEach((method) => {
+  if (!re.test(method)) return;
+  const utcMethod = method.replace(re, "$1UTC");
+  if (!TZDateMini.prototype[utcMethod]) return;
+  if (method.startsWith("get")) {
+    TZDateMini.prototype[method] = function() {
+      return this.internal[utcMethod]();
+    };
+  } else {
+    TZDateMini.prototype[method] = function() {
+      Date.prototype[utcMethod].apply(this.internal, arguments);
+      syncFromInternal(this);
+      return +this;
+    };
+    TZDateMini.prototype[utcMethod] = function() {
+      Date.prototype[utcMethod].apply(this, arguments);
+      syncToInternal(this);
+      return +this;
+    };
+  }
+});
+function syncToInternal(date) {
+  date.internal.setTime(+date);
+  date.internal.setUTCMinutes(date.internal.getUTCMinutes() - date.getTimezoneOffset());
+}
+function syncFromInternal(date) {
+  Date.prototype.setFullYear.call(date, date.internal.getUTCFullYear(), date.internal.getUTCMonth(), date.internal.getUTCDate());
+  Date.prototype.setHours.call(date, date.internal.getUTCHours(), date.internal.getUTCMinutes(), date.internal.getUTCSeconds(), date.internal.getUTCMilliseconds());
+  adjustToSystemTZ(date);
+}
+function adjustToSystemTZ(date) {
+  const offset = tzOffset(date.timeZone, date);
+  const prevHour = /* @__PURE__ */ new Date(+date);
+  prevHour.setUTCHours(prevHour.getUTCHours() - 1);
+  const systemOffset = -(/* @__PURE__ */ new Date(+date)).getTimezoneOffset();
+  const prevHourSystemOffset = -(/* @__PURE__ */ new Date(+prevHour)).getTimezoneOffset();
+  const systemDSTChange = systemOffset - prevHourSystemOffset;
+  const dstShift = Date.prototype.getHours.apply(date) !== date.internal.getUTCHours();
+  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 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 offsetChange = postOffset - newOffset;
+    if (offsetChange) {
+      date.internal.setUTCMinutes(date.internal.getUTCMinutes() + offsetChange);
+      Date.prototype.setUTCMinutes.call(date, Date.prototype.getUTCMinutes.call(date) + offsetChange);
+    }
+  }
+}
+class TZDate extends TZDateMini {
+  //#region static
+  static tz(tz, ...args) {
+    return args.length ? new TZDate(...args, tz) : new TZDate(Date.now(), tz);
+  }
+  //#endregion
+  //#region representation
+  toISOString() {
+    const [sign, hours, minutes] = this.tzComponents();
+    const tz = `${sign}${hours}:${minutes}`;
+    return this.internal.toISOString().slice(0, -1) + tz;
+  }
+  toString() {
+    return `${this.toDateString()} ${this.toTimeString()}`;
+  }
+  toDateString() {
+    const [day, date, month, year] = this.internal.toUTCString().split(" ");
+    return `${day == null ? void 0 : day.slice(0, -1)} ${month} ${date} ${year}`;
+  }
+  toTimeString() {
+    const time = this.internal.toUTCString().split(" ")[4];
+    const [sign, hours, minutes] = this.tzComponents();
+    return `${time} GMT${sign}${hours}${minutes} (${tzName(this.timeZone, this)})`;
+  }
+  toLocaleString(locales, options) {
+    return Date.prototype.toLocaleString.call(this, locales, {
+      ...options,
+      timeZone: (options == null ? void 0 : options.timeZone) || this.timeZone
+    });
   }
-  var onSelect;
-  if (isDayPickerSingle(initialProps) || isDayPickerMultiple(initialProps) || isDayPickerRange(initialProps)) {
-    onSelect = initialProps.onSelect;
+  toLocaleDateString(locales, options) {
+    return Date.prototype.toLocaleDateString.call(this, locales, {
+      ...options,
+      timeZone: (options == null ? void 0 : options.timeZone) || this.timeZone
+    });
   }
-  var value = __assign(__assign(__assign({}, defaultContextValues), initialProps), { captionLayout, classNames: __assign(__assign({}, defaultContextValues.classNames), initialProps.classNames), components: __assign({}, initialProps.components), formatters: __assign(__assign({}, defaultContextValues.formatters), initialProps.formatters), fromDate, labels: __assign(__assign({}, defaultContextValues.labels), initialProps.labels), mode: initialProps.mode || defaultContextValues.mode, modifiers: __assign(__assign({}, defaultContextValues.modifiers), initialProps.modifiers), modifiersClassNames: __assign(__assign({}, defaultContextValues.modifiersClassNames), initialProps.modifiersClassNames), onSelect, styles: __assign(__assign({}, defaultContextValues.styles), initialProps.styles), toDate });
-  return jsx(DayPickerContext.Provider, { value, children: props.children });
+  toLocaleTimeString(locales, options) {
+    return Date.prototype.toLocaleTimeString.call(this, locales, {
+      ...options,
+      timeZone: (options == null ? void 0 : options.timeZone) || this.timeZone
+    });
+  }
+  //#endregion
+  //#region private
+  tzComponents() {
+    const offset = this.getTimezoneOffset();
+    const sign = offset > 0 ? "-" : "+";
+    const hours = String(Math.floor(Math.abs(offset) / 60)).padStart(2, "0");
+    const minutes = String(Math.abs(offset) % 60).padStart(2, "0");
+    return [sign, hours, minutes];
+  }
+  //#endregion
+  withTimeZone(timeZone) {
+    return new TZDate(+this, timeZone);
+  }
+  //#region date-fns integration
+  [Symbol.for("constructDateFrom")](date) {
+    return new TZDate(+new Date(date), this.timeZone);
+  }
+  //#endregion
+}
+function tzName(tz, date) {
+  return new Intl.DateTimeFormat("en-GB", {
+    timeZone: tz,
+    timeZoneName: "long"
+  }).format(date).slice(12);
+}
+function getWeekdays(dateLib, ISOWeek, timeZone, broadcastCalendar) {
+  const date = timeZone ? TZDate.tz(timeZone) : dateLib.Date ? new dateLib.Date() : /* @__PURE__ */ new Date();
+  const start = ISOWeek ? dateLib.startOfISOWeek(date) : dateLib.startOfWeek(date);
+  const days = [];
+  for (let i = 0; i < 7; i++) {
+    const day = dateLib.addDays(start, i);
+    days.push(day);
+  }
+  return days;
 }
-function useDayPicker() {
-  var context = useContext(DayPickerContext);
-  if (!context) {
-    throw new Error("useDayPicker must be used within a DayPickerProvider.");
+function getYearOptions(navStart, navEnd, formatters, dateLib) {
+  if (!navStart)
+    return void 0;
+  if (!navEnd)
+    return void 0;
+  const { startOfYear: startOfYear2, endOfYear: endOfYear2, addYears: addYears2, isBefore: isBefore2, isSameYear: isSameYear2 } = dateLib;
+  const firstNavYear = startOfYear2(navStart);
+  const lastNavYear = endOfYear2(navEnd);
+  const years = [];
+  let year = firstNavYear;
+  while (isBefore2(year, lastNavYear) || isSameYear2(year, lastNavYear)) {
+    years.push(year.getFullYear());
+    year = addYears2(year, 1);
+  }
+  return years.map((value) => {
+    const label = formatters.formatYearDropdown(value);
+    return {
+      value,
+      label,
+      disabled: false
+    };
+  });
+}
+function labelGrid(date, options, dateLib) {
+  return (dateLib ?? new DateLib(options)).format(date, "LLLL y");
+}
+const labelCaption = labelGrid;
+function labelGridcell(date, modifiers, options, dateLib) {
+  let label = (dateLib ?? new DateLib(options)).format(date, "PPPP");
+  if (modifiers == null ? void 0 : modifiers.today) {
+    label = `Today, ${label}`;
   }
-  return context;
+  return label;
 }
-function CaptionLabel(props) {
-  var _a = useDayPicker(), locale = _a.locale, classNames2 = _a.classNames, styles2 = _a.styles, formatCaption2 = _a.formatters.formatCaption;
-  return jsx("div", { className: classNames2.caption_label, style: styles2.caption_label, "aria-live": "polite", role: "presentation", id: props.id, children: formatCaption2(props.displayMonth, { locale }) });
+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 IconDropdown(props) {
-  return jsx("svg", __assign({ width: "8px", height: "8px", viewBox: "0 0 120 120", "data-testid": "iconDropdown" }, props, { children: jsx("path", { d: "M4.22182541,48.2218254 C8.44222828,44.0014225 15.2388494,43.9273804 19.5496459,47.9996989 L19.7781746,48.2218254 L60,88.443 L100.221825,48.2218254 C104.442228,44.0014225 111.238849,43.9273804 115.549646,47.9996989 L115.778175,48.2218254 C119.998577,52.4422283 120.07262,59.2388494 116.000301,63.5496459 L115.778175,63.7781746 L67.7781746,111.778175 C63.5577717,115.998577 56.7611506,116.07262 52.4503541,112.000301 L52.2218254,111.778175 L4.22182541,63.7781746 C-0.0739418023,59.4824074 -0.0739418023,52.5175926 4.22182541,48.2218254 Z", fill: "currentColor", fillRule: "nonzero" }) }));
+const labelDay = labelDayButton;
+function labelNav() {
+  return "";
 }
-function Dropdown(props) {
-  var _a, _b;
-  var onChange = props.onChange, value = props.value, children = props.children, caption = props.caption, className = props.className, style = props.style;
-  var dayPicker = useDayPicker();
-  var IconDropdownComponent = (_b = (_a = dayPicker.components) === null || _a === void 0 ? void 0 : _a.IconDropdown) !== null && _b !== void 0 ? _b : IconDropdown;
-  return jsxs("div", { className, style, children: [jsx("span", { className: dayPicker.classNames.vhidden, children: props["aria-label"] }), jsx("select", { name: props.name, "aria-label": props["aria-label"], className: dayPicker.classNames.dropdown, style: dayPicker.styles.dropdown, value, onChange, children }), jsxs("div", { className: dayPicker.classNames.caption_label, style: dayPicker.styles.caption_label, "aria-hidden": "true", children: [caption, jsx(IconDropdownComponent, { className: dayPicker.classNames.dropdown_icon, style: dayPicker.styles.dropdown_icon })] })] });
+function labelMonthDropdown(options) {
+  return "Choose the Month";
 }
-function MonthsDropdown(props) {
-  var _a;
-  var _b = useDayPicker(), fromDate = _b.fromDate, toDate = _b.toDate, styles2 = _b.styles, locale = _b.locale, formatMonthCaption2 = _b.formatters.formatMonthCaption, classNames2 = _b.classNames, components = _b.components, labelMonthDropdown2 = _b.labels.labelMonthDropdown;
-  if (!fromDate)
-    return jsx(Fragment, {});
-  if (!toDate)
-    return jsx(Fragment, {});
-  var dropdownMonths = [];
-  if (isSameYear(fromDate, toDate)) {
-    var date = startOfMonth(fromDate);
-    for (var month = fromDate.getMonth(); month <= toDate.getMonth(); month++) {
-      dropdownMonths.push(setMonth(date, month));
-    }
-  } else {
-    var date = startOfMonth(/* @__PURE__ */ new Date());
-    for (var month = 0; month <= 11; month++) {
-      dropdownMonths.push(setMonth(date, month));
-    }
-  }
-  var handleChange = function(e) {
-    var selectedMonth = Number(e.target.value);
-    var newMonth = setMonth(startOfMonth(props.displayMonth), selectedMonth);
-    props.onChange(newMonth);
-  };
-  var DropdownComponent = (_a = components === null || components === void 0 ? void 0 : components.Dropdown) !== null && _a !== void 0 ? _a : Dropdown;
-  return jsx(DropdownComponent, { name: "months", "aria-label": labelMonthDropdown2(), className: classNames2.dropdown_month, style: styles2.dropdown_month, onChange: handleChange, value: props.displayMonth.getMonth(), caption: formatMonthCaption2(props.displayMonth, { locale }), children: dropdownMonths.map(function(m) {
-    return jsx("option", { value: m.getMonth(), children: formatMonthCaption2(m, { locale }) }, m.getMonth());
-  }) });
+function labelNext(month) {
+  return "Go to the Next Month";
 }
-function YearsDropdown(props) {
-  var _a;
-  var displayMonth = props.displayMonth;
-  var _b = useDayPicker(), fromDate = _b.fromDate, toDate = _b.toDate, locale = _b.locale, styles2 = _b.styles, classNames2 = _b.classNames, components = _b.components, formatYearCaption2 = _b.formatters.formatYearCaption, labelYearDropdown2 = _b.labels.labelYearDropdown;
-  var years = [];
-  if (!fromDate)
-    return jsx(Fragment, {});
-  if (!toDate)
-    return jsx(Fragment, {});
-  var fromYear = fromDate.getFullYear();
-  var toYear = toDate.getFullYear();
-  for (var year = fromYear; year <= toYear; year++) {
-    years.push(setYear(startOfYear(/* @__PURE__ */ new Date()), year));
-  }
-  var handleChange = function(e) {
-    var newMonth = setYear(startOfMonth(displayMonth), Number(e.target.value));
-    props.onChange(newMonth);
-  };
-  var DropdownComponent = (_a = components === null || components === void 0 ? void 0 : components.Dropdown) !== null && _a !== void 0 ? _a : Dropdown;
-  return jsx(DropdownComponent, { name: "years", "aria-label": labelYearDropdown2(), className: classNames2.dropdown_year, style: styles2.dropdown_year, onChange: handleChange, value: displayMonth.getFullYear(), caption: formatYearCaption2(displayMonth, { locale }), children: years.map(function(year2) {
-    return jsx("option", { value: year2.getFullYear(), children: formatYearCaption2(year2, { locale }) }, year2.getFullYear());
-  }) });
+function labelPrevious(month) {
+  return "Go to the Previous Month";
 }
-function useControlledValue(defaultValue, controlledValue) {
-  var _a = useState(defaultValue), uncontrolledValue = _a[0], setValue = _a[1];
-  var value = controlledValue === void 0 ? uncontrolledValue : controlledValue;
-  return [value, setValue];
+function labelWeekday(date, options, dateLib) {
+  return (dateLib ?? new DateLib(options)).format(date, "cccc");
 }
-function getInitialMonth(context) {
-  var month = context.month, defaultMonth = context.defaultMonth, today = context.today;
-  var initialMonth = month || defaultMonth || today || /* @__PURE__ */ new Date();
-  var toDate = context.toDate, fromDate = context.fromDate, _a = context.numberOfMonths, numberOfMonths = _a === void 0 ? 1 : _a;
-  if (toDate && differenceInCalendarMonths(toDate, initialMonth) < 0) {
-    var offset = -1 * (numberOfMonths - 1);
-    initialMonth = addMonths(toDate, offset);
-  }
-  if (fromDate && differenceInCalendarMonths(initialMonth, fromDate) < 0) {
-    initialMonth = fromDate;
-  }
-  return startOfMonth(initialMonth);
-}
-function useNavigationState() {
-  var context = useDayPicker();
-  var initialMonth = getInitialMonth(context);
-  var _a = useControlledValue(initialMonth, context.month), month = _a[0], setMonth2 = _a[1];
-  var goToMonth = function(date) {
-    var _a2;
-    if (context.disableNavigation)
-      return;
-    var month2 = startOfMonth(date);
-    setMonth2(month2);
-    (_a2 = context.onMonthChange) === null || _a2 === void 0 ? void 0 : _a2.call(context, month2);
-  };
-  return [month, goToMonth];
-}
-function getDisplayMonths(month, _a) {
-  var reverseMonths = _a.reverseMonths, numberOfMonths = _a.numberOfMonths;
-  var start = startOfMonth(month);
-  var end = startOfMonth(addMonths(start, numberOfMonths));
-  var monthsDiff = differenceInCalendarMonths(end, start);
-  var months = [];
-  for (var i = 0; i < monthsDiff; i++) {
-    var nextMonth = addMonths(start, i);
-    months.push(nextMonth);
-  }
-  if (reverseMonths)
-    months = months.reverse();
+function labelWeekNumber(weekNumber, options) {
+  return `Week ${weekNumber}`;
+}
+function labelWeekNumberHeader(options) {
+  return "Week Number";
+}
+function labelYearDropdown(options) {
+  return "Choose the Year";
+}
+const defaultLabels = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  labelCaption,
+  labelDay,
+  labelDayButton,
+  labelGrid,
+  labelGridcell,
+  labelMonthDropdown,
+  labelNav,
+  labelNext,
+  labelPrevious,
+  labelWeekNumber,
+  labelWeekNumberHeader,
+  labelWeekday,
+  labelYearDropdown
+}, Symbol.toStringTag, { value: "Module" }));
+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 nOfDays = differenceInCalendarDays2(endWeekLastDate, startWeekFirstDate);
+  const nOfMonths = differenceInCalendarMonths2(lastMonth, firstMonth) + 1;
+  const dates = [];
+  for (let i = 0; i <= nOfDays; i++) {
+    const date = addDays2(startWeekFirstDate, i);
+    if (maxDate && isAfter2(date, maxDate)) {
+      break;
+    }
+    dates.push(date);
+  }
+  const nrOfDaysWithFixedWeeks = broadcastCalendar ? 35 : 42;
+  const extraDates = nrOfDaysWithFixedWeeks * nOfMonths;
+  if (fixedWeeks && dates.length < extraDates) {
+    const daysToAdd = extraDates - dates.length;
+    for (let i = 0; i < daysToAdd; i++) {
+      const date = addDays2(dates[dates.length - 1], 1);
+      dates.push(date);
+    }
+  }
+  return dates;
+}
+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);
+}
+function getDisplayMonths(firstDisplayedMonth, calendarEndMonth, props, dateLib) {
+  const { numberOfMonths = 1 } = props;
+  const months = [];
+  for (let i = 0; i < numberOfMonths; i++) {
+    const month = dateLib.addMonths(firstDisplayedMonth, i);
+    if (calendarEndMonth && month > calendarEndMonth) {
+      break;
+    }
+    months.push(month);
+  }
   return months;
 }
-function getNextMonth(startingMonth, options) {
+function getInitialMonth(props, dateLib) {
+  const { month, defaultMonth, today = props.timeZone ? TZDate.tz(props.timeZone) : dateLib.Date ? new dateLib.Date() : /* @__PURE__ */ new Date(), numberOfMonths = 1, endMonth, startMonth } = props;
+  let initialMonth = month || defaultMonth || today;
+  const { differenceInCalendarMonths: differenceInCalendarMonths2, addMonths: addMonths2, startOfMonth: startOfMonth2 } = dateLib;
+  if (endMonth && differenceInCalendarMonths2(endMonth, initialMonth) < 0) {
+    const offset = -1 * (numberOfMonths - 1);
+    initialMonth = addMonths2(endMonth, offset);
+  }
+  if (startMonth && differenceInCalendarMonths2(initialMonth, startMonth) < 0) {
+    initialMonth = startMonth;
+  }
+  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 monthDates = dates.filter((date) => {
+      return date >= firstDateOfFirstWeek && date <= lastDateOfLastWeek;
+    });
+    const nrOfDaysWithFixedWeeks = props.broadcastCalendar ? 35 : 42;
+    if (props.fixedWeeks && monthDates.length < nrOfDaysWithFixedWeeks) {
+      const extraDates = dates.filter((date) => {
+        const daysToAdd = nrOfDaysWithFixedWeeks - monthDates.length;
+        return date > lastDateOfLastWeek && date <= addDays2(lastDateOfLastWeek, daysToAdd);
+      });
+      monthDates.push(...extraDates);
+    }
+    const weeks = monthDates.reduce((weeks2, date) => {
+      const weekNumber = props.ISOWeek ? getISOWeek2(date) : getWeek2(date);
+      const week = weeks2.find((week2) => week2.weekNumber === weekNumber);
+      const day = new CalendarDay(date, month, dateLib);
+      if (!week) {
+        weeks2.push(new CalendarWeek(weekNumber, [day]));
+      } else {
+        week.days.push(day);
+      }
+      return weeks2;
+    }, []);
+    const dayPickerMonth = new CalendarMonth(month, weeks);
+    months.push(dayPickerMonth);
+    return months;
+  }, []);
+  if (!props.reverseMonths) {
+    return dayPickerMonths;
+  } else {
+    return dayPickerMonths.reverse();
+  }
+}
+function getNavMonths(props, dateLib) {
+  var _a;
+  let { startMonth, endMonth } = props;
+  const { startOfYear: startOfYear2, startOfDay: startOfDay2, startOfMonth: startOfMonth2, endOfMonth: endOfMonth2, addYears: addYears2, endOfYear: endOfYear2 } = dateLib;
+  const { fromYear, toYear, fromMonth, toMonth } = props;
+  if (!startMonth && fromMonth) {
+    startMonth = fromMonth;
+  }
+  if (!startMonth && fromYear) {
+    startMonth = new Date(fromYear, 0, 1);
+  }
+  if (!endMonth && toMonth) {
+    endMonth = toMonth;
+  }
+  if (!endMonth && toYear) {
+    endMonth = new Date(toYear, 11, 31);
+  }
+  const hasDropdowns = (_a = props.captionLayout) == null ? void 0 : _a.startsWith("dropdown");
+  if (startMonth) {
+    startMonth = startOfMonth2(startMonth);
+  } else if (fromYear) {
+    startMonth = new Date(fromYear, 0, 1);
+  } else if (!startMonth && hasDropdowns) {
+    const today = props.today ?? (props.timeZone ? TZDate.tz(props.timeZone) : dateLib.Date ? new dateLib.Date() : /* @__PURE__ */ new Date());
+    startMonth = startOfYear2(addYears2(today, -100));
+  }
+  if (endMonth) {
+    endMonth = endOfMonth2(endMonth);
+  } else if (toYear) {
+    endMonth = new Date(toYear, 11, 31);
+  } else if (!endMonth && hasDropdowns) {
+    const today = props.today ?? (props.timeZone ? TZDate.tz(props.timeZone) : dateLib.Date ? new dateLib.Date() : /* @__PURE__ */ new Date());
+    endMonth = endOfYear2(today);
+  }
+  return [
+    startMonth ? startOfDay2(startMonth) : startMonth,
+    endMonth ? startOfDay2(endMonth) : endMonth
+  ];
+}
+function getNextMonth(firstDisplayedMonth, calendarEndMonth, options, dateLib) {
   if (options.disableNavigation) {
     return void 0;
   }
-  var toDate = options.toDate, pagedNavigation = options.pagedNavigation, _a = options.numberOfMonths, numberOfMonths = _a === void 0 ? 1 : _a;
-  var offset = pagedNavigation ? numberOfMonths : 1;
-  var month = startOfMonth(startingMonth);
-  if (!toDate) {
-    return addMonths(month, offset);
+  const { pagedNavigation, numberOfMonths = 1 } = options;
+  const { startOfMonth: startOfMonth2, addMonths: addMonths2, differenceInCalendarMonths: differenceInCalendarMonths2 } = dateLib;
+  const offset = pagedNavigation ? numberOfMonths : 1;
+  const month = startOfMonth2(firstDisplayedMonth);
+  if (!calendarEndMonth) {
+    return addMonths2(month, offset);
   }
-  var monthsDiff = differenceInCalendarMonths(toDate, startingMonth);
+  const monthsDiff = differenceInCalendarMonths2(calendarEndMonth, firstDisplayedMonth);
   if (monthsDiff < numberOfMonths) {
     return void 0;
   }
-  return addMonths(month, offset);
+  return addMonths2(month, offset);
 }
-function getPreviousMonth(startingMonth, options) {
+function getPreviousMonth(firstDisplayedMonth, calendarStartMonth, options, dateLib) {
   if (options.disableNavigation) {
     return void 0;
   }
-  var fromDate = options.fromDate, pagedNavigation = options.pagedNavigation, _a = options.numberOfMonths, numberOfMonths = _a === void 0 ? 1 : _a;
-  var offset = pagedNavigation ? numberOfMonths : 1;
-  var month = startOfMonth(startingMonth);
-  if (!fromDate) {
-    return addMonths(month, -offset);
+  const { pagedNavigation, numberOfMonths } = options;
+  const { startOfMonth: startOfMonth2, addMonths: addMonths2, differenceInCalendarMonths: differenceInCalendarMonths2 } = dateLib;
+  const offset = pagedNavigation ? numberOfMonths ?? 1 : 1;
+  const month = startOfMonth2(firstDisplayedMonth);
+  if (!calendarStartMonth) {
+    return addMonths2(month, -offset);
   }
-  var monthsDiff = differenceInCalendarMonths(month, fromDate);
+  const monthsDiff = differenceInCalendarMonths2(month, calendarStartMonth);
   if (monthsDiff <= 0) {
     return void 0;
   }
-  return addMonths(month, -offset);
-}
-var NavigationContext = createContext(void 0);
-function NavigationProvider(props) {
-  var dayPicker = useDayPicker();
-  var _a = useNavigationState(), currentMonth = _a[0], goToMonth = _a[1];
-  var displayMonths = getDisplayMonths(currentMonth, dayPicker);
-  var nextMonth = getNextMonth(currentMonth, dayPicker);
-  var previousMonth = getPreviousMonth(currentMonth, dayPicker);
-  var isDateDisplayed = function(date) {
-    return displayMonths.some(function(displayMonth) {
-      return isSameMonth(date, displayMonth);
-    });
-  };
-  var goToDate = function(date, refDate) {
-    if (isDateDisplayed(date)) {
-      return;
-    }
-    if (refDate && isBefore(date, refDate)) {
-      goToMonth(addMonths(date, 1 + dayPicker.numberOfMonths * -1));
-    } else {
-      goToMonth(date);
-    }
-  };
-  var value = {
-    currentMonth,
-    displayMonths,
-    goToMonth,
-    goToDate,
-    previousMonth,
-    nextMonth,
-    isDateDisplayed
-  };
-  return jsx(NavigationContext.Provider, { value, children: props.children });
-}
-function useNavigation() {
-  var context = useContext(NavigationContext);
-  if (!context) {
-    throw new Error("useNavigation must be used within a NavigationProvider");
-  }
-  return context;
-}
-function CaptionDropdowns(props) {
-  var _a;
-  var _b = useDayPicker(), classNames2 = _b.classNames, styles2 = _b.styles, components = _b.components;
-  var goToMonth = useNavigation().goToMonth;
-  var handleMonthChange = function(newMonth) {
-    goToMonth(addMonths(newMonth, props.displayIndex ? -props.displayIndex : 0));
-  };
-  var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
-  var captionLabel = jsx(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth });
-  return jsxs("div", { className: classNames2.caption_dropdowns, style: styles2.caption_dropdowns, children: [jsx("div", { className: classNames2.vhidden, children: captionLabel }), jsx(MonthsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth }), jsx(YearsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth })] });
-}
-function IconLeft(props) {
-  return jsx("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props, { children: jsx("path", { d: "M69.490332,3.34314575 C72.6145263,0.218951416 77.6798462,0.218951416 80.8040405,3.34314575 C83.8617626,6.40086786 83.9268205,11.3179931 80.9992143,14.4548388 L80.8040405,14.6568542 L35.461,60 L80.8040405,105.343146 C83.8617626,108.400868 83.9268205,113.317993 80.9992143,116.454839 L80.8040405,116.656854 C77.7463184,119.714576 72.8291931,119.779634 69.6923475,116.852028 L69.490332,116.656854 L18.490332,65.6568542 C15.4326099,62.5991321 15.367552,57.6820069 18.2951583,54.5451612 L18.490332,54.3431458 L69.490332,3.34314575 Z", fill: "currentColor", fillRule: "nonzero" }) }));
-}
-function IconRight(props) {
-  return jsx("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props, { children: jsx("path", { d: "M49.8040405,3.34314575 C46.6798462,0.218951416 41.6145263,0.218951416 38.490332,3.34314575 C35.4326099,6.40086786 35.367552,11.3179931 38.2951583,14.4548388 L38.490332,14.6568542 L83.8333725,60 L38.490332,105.343146 C35.4326099,108.400868 35.367552,113.317993 38.2951583,116.454839 L38.490332,116.656854 C41.5480541,119.714576 46.4651794,119.779634 49.602025,116.852028 L49.8040405,116.656854 L100.804041,65.6568542 C103.861763,62.5991321 103.926821,57.6820069 100.999214,54.5451612 L100.804041,54.3431458 L49.8040405,3.34314575 Z", fill: "currentColor" }) }));
-}
-var Button = forwardRef(function(props, ref) {
-  var _a = useDayPicker(), classNames2 = _a.classNames, styles2 = _a.styles;
-  var classNamesArr = [classNames2.button_reset, classNames2.button];
-  if (props.className) {
-    classNamesArr.push(props.className);
-  }
-  var className = classNamesArr.join(" ");
-  var style = __assign(__assign({}, styles2.button_reset), styles2.button);
-  if (props.style) {
-    Object.assign(style, props.style);
-  }
-  return jsx("button", __assign({}, props, { ref, type: "button", className, style }));
-});
-function Navigation(props) {
-  var _a, _b;
-  var _c = useDayPicker(), dir = _c.dir, locale = _c.locale, classNames2 = _c.classNames, styles2 = _c.styles, _d = _c.labels, labelPrevious2 = _d.labelPrevious, labelNext2 = _d.labelNext, components = _c.components;
-  if (!props.nextMonth && !props.previousMonth) {
-    return jsx(Fragment, {});
-  }
-  var previousLabel = labelPrevious2(props.previousMonth, { locale });
-  var previousClassName = [
-    classNames2.nav_button,
-    classNames2.nav_button_previous
-  ].join(" ");
-  var nextLabel = labelNext2(props.nextMonth, { locale });
-  var nextClassName = [
-    classNames2.nav_button,
-    classNames2.nav_button_next
-  ].join(" ");
-  var IconRightComponent = (_a = components === null || components === void 0 ? void 0 : components.IconRight) !== null && _a !== void 0 ? _a : IconRight;
-  var IconLeftComponent = (_b = components === null || components === void 0 ? void 0 : components.IconLeft) !== null && _b !== void 0 ? _b : IconLeft;
-  return jsxs("div", { className: classNames2.nav, style: styles2.nav, children: [!props.hidePrevious && jsx(Button, { name: "previous-month", "aria-label": previousLabel, className: previousClassName, style: styles2.nav_button_previous, disabled: !props.previousMonth, onClick: props.onPreviousClick, children: dir === "rtl" ? jsx(IconRightComponent, { className: classNames2.nav_icon, style: styles2.nav_icon }) : jsx(IconLeftComponent, { className: classNames2.nav_icon, style: styles2.nav_icon }) }), !props.hideNext && jsx(Button, { name: "next-month", "aria-label": nextLabel, className: nextClassName, style: styles2.nav_button_next, disabled: !props.nextMonth, onClick: props.onNextClick, children: dir === "rtl" ? jsx(IconLeftComponent, { className: classNames2.nav_icon, style: styles2.nav_icon }) : jsx(IconRightComponent, { className: classNames2.nav_icon, style: styles2.nav_icon }) })] });
-}
-function CaptionNavigation(props) {
-  var numberOfMonths = useDayPicker().numberOfMonths;
-  var _a = useNavigation(), previousMonth = _a.previousMonth, nextMonth = _a.nextMonth, goToMonth = _a.goToMonth, displayMonths = _a.displayMonths;
-  var displayIndex = displayMonths.findIndex(function(month) {
-    return isSameMonth(props.displayMonth, month);
-  });
-  var isFirst = displayIndex === 0;
-  var isLast = displayIndex === displayMonths.length - 1;
-  var hideNext = numberOfMonths > 1 && (isFirst || !isLast);
-  var hidePrevious = numberOfMonths > 1 && (isLast || !isFirst);
-  var handlePreviousClick = function() {
-    if (!previousMonth)
-      return;
-    goToMonth(previousMonth);
-  };
-  var handleNextClick = function() {
-    if (!nextMonth)
-      return;
-    goToMonth(nextMonth);
-  };
-  return jsx(Navigation, { displayMonth: props.displayMonth, hideNext, hidePrevious, nextMonth, previousMonth, onPreviousClick: handlePreviousClick, onNextClick: handleNextClick });
+  return addMonths2(month, -offset);
 }
-function Caption(props) {
-  var _a;
-  var _b = useDayPicker(), classNames2 = _b.classNames, disableNavigation = _b.disableNavigation, styles2 = _b.styles, captionLayout = _b.captionLayout, components = _b.components;
-  var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
-  var caption;
-  if (disableNavigation) {
-    caption = jsx(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth });
-  } else if (captionLayout === "dropdown") {
-    caption = jsx(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id });
-  } else if (captionLayout === "dropdown-buttons") {
-    caption = jsxs(Fragment, { children: [jsx(CaptionDropdowns, { displayMonth: props.displayMonth, displayIndex: props.displayIndex, id: props.id }), jsx(CaptionNavigation, { displayMonth: props.displayMonth, displayIndex: props.displayIndex, id: props.id })] });
-  } else {
-    caption = jsxs(Fragment, { children: [jsx(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth, displayIndex: props.displayIndex }), jsx(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id })] });
-  }
-  return jsx("div", { className: classNames2.caption, style: styles2.caption, children: caption });
+function getWeeks(months) {
+  const initialWeeks = [];
+  return months.reduce((weeks, month) => {
+    return [...weeks, ...month.weeks];
+  }, initialWeeks);
 }
-function Footer(props) {
-  var _a = useDayPicker(), footer = _a.footer, styles2 = _a.styles, tfoot = _a.classNames.tfoot;
-  if (!footer)
-    return jsx(Fragment, {});
-  return jsx("tfoot", { className: tfoot, style: styles2.tfoot, children: jsx("tr", { children: jsx("td", { colSpan: 8, children: footer }) }) });
-}
-function getWeekdays(locale, weekStartsOn, ISOWeek) {
-  var start = ISOWeek ? startOfISOWeek(/* @__PURE__ */ new Date()) : startOfWeek(/* @__PURE__ */ new Date(), { locale, weekStartsOn });
-  var days = [];
-  for (var i = 0; i < 7; i++) {
-    var day = addDays(start, i);
-    days.push(day);
-  }
-  return days;
-}
-function HeadRow() {
-  var _a = useDayPicker(), classNames2 = _a.classNames, styles2 = _a.styles, showWeekNumber = _a.showWeekNumber, locale = _a.locale, weekStartsOn = _a.weekStartsOn, ISOWeek = _a.ISOWeek, formatWeekdayName2 = _a.formatters.formatWeekdayName, labelWeekday2 = _a.labels.labelWeekday;
-  var weekdays = getWeekdays(locale, weekStartsOn, ISOWeek);
-  return jsxs("tr", { style: styles2.head_row, className: classNames2.head_row, children: [showWeekNumber && jsx("td", { style: styles2.head_cell, className: classNames2.head_cell }), weekdays.map(function(weekday, i) {
-    return jsx("th", { scope: "col", className: classNames2.head_cell, style: styles2.head_cell, "aria-label": labelWeekday2(weekday, { locale }), children: formatWeekdayName2(weekday, { locale }) }, i);
-  })] });
+function useControlledValue(defaultValue, controlledValue) {
+  const [uncontrolledValue, setValue] = useState(defaultValue);
+  const value = controlledValue === void 0 ? uncontrolledValue : controlledValue;
+  return [value, setValue];
 }
-function Head() {
-  var _a;
-  var _b = useDayPicker(), classNames2 = _b.classNames, styles2 = _b.styles, components = _b.components;
-  var HeadRowComponent = (_a = components === null || components === void 0 ? void 0 : components.HeadRow) !== null && _a !== void 0 ? _a : HeadRow;
-  return jsx("thead", { style: styles2.head, className: classNames2.head, children: jsx(HeadRowComponent, {}) });
-}
-function DayContent(props) {
-  var _a = useDayPicker(), locale = _a.locale, formatDay2 = _a.formatters.formatDay;
-  return jsx(Fragment, { children: formatDay2(props.date, { locale }) });
-}
-var SelectMultipleContext = createContext(void 0);
-function SelectMultipleProvider(props) {
-  if (!isDayPickerMultiple(props.initialProps)) {
-    var emptyContextValue = {
-      selected: void 0,
-      modifiers: {
-        disabled: []
-      }
-    };
-    return jsx(SelectMultipleContext.Provider, { value: emptyContextValue, children: props.children });
-  }
-  return jsx(SelectMultipleProviderInternal, { initialProps: props.initialProps, children: props.children });
-}
-function SelectMultipleProviderInternal(_a) {
-  var initialProps = _a.initialProps, children = _a.children;
-  var selected = initialProps.selected, min2 = initialProps.min, max2 = initialProps.max;
-  var onDayClick = function(day, activeModifiers, e) {
-    var _a2, _b;
-    (_a2 = initialProps.onDayClick) === null || _a2 === void 0 ? void 0 : _a2.call(initialProps, day, activeModifiers, e);
-    var isMinSelected = Boolean(activeModifiers.selected && min2 && (selected === null || selected === void 0 ? void 0 : selected.length) === min2);
-    if (isMinSelected) {
+function useCalendar(props, dateLib) {
+  const [navStart, navEnd] = getNavMonths(props, dateLib);
+  const { startOfMonth: startOfMonth2, endOfMonth: endOfMonth2 } = dateLib;
+  const initialMonth = getInitialMonth(props, dateLib);
+  const [firstMonth, setFirstMonth] = useControlledValue(initialMonth, props.month ? startOfMonth2(props.month) : void 0);
+  useEffect(() => {
+    const newInitialMonth = getInitialMonth(props, dateLib);
+    setFirstMonth(newInitialMonth);
+  }, [props.timeZone]);
+  const displayMonths = getDisplayMonths(firstMonth, navEnd, props, dateLib);
+  const dates = getDates(displayMonths, props.endMonth ? endOfMonth2(props.endMonth) : void 0, props, dateLib);
+  const months = getMonths(displayMonths, dates, props, dateLib);
+  const weeks = getWeeks(months);
+  const days = getDays(months);
+  const previousMonth = getPreviousMonth(firstMonth, navStart, props, dateLib);
+  const nextMonth = getNextMonth(firstMonth, navEnd, props, dateLib);
+  const { disableNavigation, onMonthChange } = props;
+  const isDayInCalendar = (day) => weeks.some((week) => week.days.some((d) => d.isEqualTo(day)));
+  const goToMonth = (date) => {
+    if (disableNavigation) {
       return;
     }
-    var isMaxSelected = Boolean(!activeModifiers.selected && max2 && (selected === null || selected === void 0 ? void 0 : selected.length) === max2);
-    if (isMaxSelected) {
-      return;
+    let newMonth = startOfMonth2(date);
+    if (navStart && newMonth < startOfMonth2(navStart)) {
+      newMonth = startOfMonth2(navStart);
     }
-    var selectedDays = selected ? __spreadArray([], selected) : [];
-    if (activeModifiers.selected) {
-      var index = selectedDays.findIndex(function(selectedDay) {
-        return isSameDay(day, selectedDay);
-      });
-      selectedDays.splice(index, 1);
-    } else {
-      selectedDays.push(day);
+    if (navEnd && newMonth > startOfMonth2(navEnd)) {
+      newMonth = startOfMonth2(navEnd);
     }
-    (_b = initialProps.onSelect) === null || _b === void 0 ? void 0 : _b.call(initialProps, selectedDays, day, activeModifiers, e);
-  };
-  var modifiers = {
-    disabled: []
+    setFirstMonth(newMonth);
+    onMonthChange == null ? void 0 : onMonthChange(newMonth);
   };
-  if (selected) {
-    modifiers.disabled.push(function(day) {
-      var isMaxSelected = max2 && selected.length > max2 - 1;
-      var isSelected = selected.some(function(selectedDay) {
-        return isSameDay(selectedDay, day);
-      });
-      return Boolean(isMaxSelected && !isSelected);
-    });
-  }
-  var contextValue = {
-    selected,
-    onDayClick,
-    modifiers
-  };
-  return jsx(SelectMultipleContext.Provider, { value: contextValue, children });
-}
-function useSelectMultiple() {
-  var context = useContext(SelectMultipleContext);
-  if (!context) {
-    throw new Error("useSelectMultiple must be used within a SelectMultipleProvider");
-  }
-  return context;
-}
-function addToRange(day, range) {
-  var _a = range || {}, from = _a.from, to = _a.to;
-  if (from && to) {
-    if (isSameDay(to, day) && isSameDay(from, day)) {
-      return void 0;
-    }
-    if (isSameDay(to, day)) {
-      return { from: to, to: void 0 };
-    }
-    if (isSameDay(from, day)) {
-      return void 0;
-    }
-    if (isAfter(from, day)) {
-      return { from: day, to };
-    }
-    return { from, to: day };
-  }
-  if (to) {
-    if (isAfter(day, to)) {
-      return { from: to, to: day };
-    }
-    return { from: day, to };
-  }
-  if (from) {
-    if (isBefore(day, from)) {
-      return { from: day, to: from };
+  const goToDay = (day) => {
+    if (isDayInCalendar(day)) {
+      return;
     }
-    return { from, to: day };
-  }
-  return { from: day, to: void 0 };
-}
-var SelectRangeContext = createContext(void 0);
-function SelectRangeProvider(props) {
-  if (!isDayPickerRange(props.initialProps)) {
-    var emptyContextValue = {
-      selected: void 0,
-      modifiers: {
-        range_start: [],
-        range_end: [],
-        range_middle: [],
-        disabled: []
-      }
-    };
-    return jsx(SelectRangeContext.Provider, { value: emptyContextValue, children: props.children });
-  }
-  return jsx(SelectRangeProviderInternal, { initialProps: props.initialProps, children: props.children });
-}
-function SelectRangeProviderInternal(_a) {
-  var initialProps = _a.initialProps, children = _a.children;
-  var selected = initialProps.selected;
-  var _b = selected || {}, selectedFrom = _b.from, selectedTo = _b.to;
-  var min2 = initialProps.min;
-  var max2 = initialProps.max;
-  var onDayClick = function(day, activeModifiers, e) {
-    var _a2, _b2;
-    (_a2 = initialProps.onDayClick) === null || _a2 === void 0 ? void 0 : _a2.call(initialProps, day, activeModifiers, e);
-    var newRange = addToRange(day, selected);
-    (_b2 = initialProps.onSelect) === null || _b2 === void 0 ? void 0 : _b2.call(initialProps, newRange, day, activeModifiers, e);
+    goToMonth(day.date);
   };
-  var modifiers = {
-    range_start: [],
-    range_end: [],
-    range_middle: [],
-    disabled: []
+  const calendar = {
+    months,
+    weeks,
+    days,
+    navStart,
+    navEnd,
+    previousMonth,
+    nextMonth,
+    goToMonth,
+    goToDay
   };
-  if (selectedFrom) {
-    modifiers.range_start = [selectedFrom];
-    if (!selectedTo) {
-      modifiers.range_end = [selectedFrom];
-    } else {
-      modifiers.range_end = [selectedTo];
-      if (!isSameDay(selectedFrom, selectedTo)) {
-        modifiers.range_middle = [
-          {
-            after: selectedFrom,
-            before: selectedTo
-          }
-        ];
+  return calendar;
+}
+function calculateFocusTarget(days, getModifiers, isSelected, lastFocused) {
+  let focusTarget;
+  let index = 0;
+  let found = false;
+  while (index < days.length && !found) {
+    const day = days[index];
+    const modifiers = getModifiers(day);
+    if (!modifiers[DayFlag.disabled] && !modifiers[DayFlag.hidden] && !modifiers[DayFlag.outside]) {
+      if (modifiers[DayFlag.focused]) {
+        focusTarget = day;
+        found = true;
+      } else if (lastFocused == null ? void 0 : lastFocused.isEqualTo(day)) {
+        focusTarget = day;
+        found = true;
+      } else if (isSelected(day.date)) {
+        focusTarget = day;
+        found = true;
+      } else if (modifiers[DayFlag.today]) {
+        focusTarget = day;
+        found = true;
       }
     }
-  } else if (selectedTo) {
-    modifiers.range_start = [selectedTo];
-    modifiers.range_end = [selectedTo];
-  }
-  if (min2) {
-    if (selectedFrom && !selectedTo) {
-      modifiers.disabled.push({
-        after: subDays(selectedFrom, min2 - 1),
-        before: addDays(selectedFrom, min2 - 1)
-      });
-    }
-    if (selectedFrom && selectedTo) {
-      modifiers.disabled.push({
-        after: selectedFrom,
-        before: addDays(selectedFrom, min2 - 1)
-      });
-    }
-    if (!selectedFrom && selectedTo) {
-      modifiers.disabled.push({
-        after: subDays(selectedTo, min2 - 1),
-        before: addDays(selectedTo, min2 - 1)
-      });
-    }
+    index++;
   }
-  if (max2) {
-    if (selectedFrom && !selectedTo) {
-      modifiers.disabled.push({
-        before: addDays(selectedFrom, -max2 + 1)
-      });
-      modifiers.disabled.push({
-        after: addDays(selectedFrom, max2 - 1)
-      });
-    }
-    if (selectedFrom && selectedTo) {
-      var selectedCount = differenceInCalendarDays(selectedTo, selectedFrom) + 1;
-      var offset = max2 - selectedCount;
-      modifiers.disabled.push({
-        before: subDays(selectedFrom, offset)
-      });
-      modifiers.disabled.push({
-        after: addDays(selectedTo, offset)
-      });
-    }
-    if (!selectedFrom && selectedTo) {
-      modifiers.disabled.push({
-        before: addDays(selectedTo, -max2 + 1)
-      });
-      modifiers.disabled.push({
-        after: addDays(selectedTo, max2 - 1)
-      });
-    }
+  if (!focusTarget) {
+    focusTarget = days.find((day) => {
+      const m = getModifiers(day);
+      return !m[DayFlag.disabled] && !m[DayFlag.hidden] && !m[DayFlag.outside];
+    });
   }
-  return jsx(SelectRangeContext.Provider, { value: { selected, onDayClick, modifiers }, children });
+  return focusTarget;
 }
-function useSelectRange() {
-  var context = useContext(SelectRangeContext);
-  if (!context) {
-    throw new Error("useSelectRange must be used within a SelectRangeProvider");
+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;
   }
-  return context;
-}
-function matcherToArray(matcher) {
-  if (Array.isArray(matcher)) {
-    return __spreadArray([], matcher);
-  } else if (matcher !== void 0) {
-    return [matcher];
-  } else {
-    return [];
+  if (!excludeEnds && to) {
+    return isSameDay2(to, date);
   }
-}
-function getCustomModifiers(dayModifiers) {
-  var customModifiers = {};
-  Object.entries(dayModifiers).forEach(function(_a) {
-    var modifier = _a[0], matcher = _a[1];
-    customModifiers[modifier] = matcherToArray(matcher);
-  });
-  return customModifiers;
-}
-var InternalModifier;
-(function(InternalModifier2) {
-  InternalModifier2["Outside"] = "outside";
-  InternalModifier2["Disabled"] = "disabled";
-  InternalModifier2["Selected"] = "selected";
-  InternalModifier2["Hidden"] = "hidden";
-  InternalModifier2["Today"] = "today";
-  InternalModifier2["RangeStart"] = "range_start";
-  InternalModifier2["RangeEnd"] = "range_end";
-  InternalModifier2["RangeMiddle"] = "range_middle";
-})(InternalModifier || (InternalModifier = {}));
-var Selected = InternalModifier.Selected, Disabled = InternalModifier.Disabled, Hidden = InternalModifier.Hidden, Today = InternalModifier.Today, RangeEnd = InternalModifier.RangeEnd, RangeMiddle = InternalModifier.RangeMiddle, RangeStart = InternalModifier.RangeStart, Outside = InternalModifier.Outside;
-function getInternalModifiers(dayPicker, selectMultiple, selectRange) {
-  var _a;
-  var internalModifiers = (_a = {}, _a[Selected] = matcherToArray(dayPicker.selected), _a[Disabled] = matcherToArray(dayPicker.disabled), _a[Hidden] = matcherToArray(dayPicker.hidden), _a[Today] = [dayPicker.today], _a[RangeEnd] = [], _a[RangeMiddle] = [], _a[RangeStart] = [], _a[Outside] = [], _a);
-  if (dayPicker.fromDate) {
-    internalModifiers[Disabled].push({ before: dayPicker.fromDate });
-  }
-  if (dayPicker.toDate) {
-    internalModifiers[Disabled].push({ after: dayPicker.toDate });
-  }
-  if (isDayPickerMultiple(dayPicker)) {
-    internalModifiers[Disabled] = internalModifiers[Disabled].concat(selectMultiple.modifiers[Disabled]);
-  } else if (isDayPickerRange(dayPicker)) {
-    internalModifiers[Disabled] = internalModifiers[Disabled].concat(selectRange.modifiers[Disabled]);
-    internalModifiers[RangeStart] = selectRange.modifiers[RangeStart];
-    internalModifiers[RangeMiddle] = selectRange.modifiers[RangeMiddle];
-    internalModifiers[RangeEnd] = selectRange.modifiers[RangeEnd];
-  }
-  return internalModifiers;
-}
-var ModifiersContext = createContext(void 0);
-function ModifiersProvider(props) {
-  var dayPicker = useDayPicker();
-  var selectMultiple = useSelectMultiple();
-  var selectRange = useSelectRange();
-  var internalModifiers = getInternalModifiers(dayPicker, selectMultiple, selectRange);
-  var customModifiers = getCustomModifiers(dayPicker.modifiers);
-  var modifiers = __assign(__assign({}, internalModifiers), customModifiers);
-  return jsx(ModifiersContext.Provider, { value: modifiers, children: props.children });
-}
-function useModifiers() {
-  var context = useContext(ModifiersContext);
-  if (!context) {
-    throw new Error("useModifiers must be used within a ModifiersProvider");
+  if (!excludeEnds && from) {
+    return isSameDay2(from, date);
   }
-  return context;
+  return false;
 }
 function isDateInterval(matcher) {
   return Boolean(matcher && typeof matcher === "object" && "before" in matcher && "after" in matcher);
@@ -823,54 +1153,37 @@ function isDateBeforeType(value) {
 function isDayOfWeekType(value) {
   return Boolean(value && typeof value === "object" && "dayOfWeek" in value);
 }
-function isDateInRange(date, range) {
-  var _a;
-  var from = range.from, to = range.to;
-  if (from && to) {
-    var isRangeInverted = differenceInCalendarDays(to, from) < 0;
-    if (isRangeInverted) {
-      _a = [to, from], from = _a[0], to = _a[1];
-    }
-    var isInRange = differenceInCalendarDays(date, from) >= 0 && differenceInCalendarDays(to, date) >= 0;
-    return isInRange;
-  }
-  if (to) {
-    return isSameDay(to, date);
-  }
-  if (from) {
-    return isSameDay(from, date);
-  }
-  return false;
-}
-function isDateType(value) {
-  return isDate(value);
+function isDatesArray(value, dateLib) {
+  return Array.isArray(value) && value.every(dateLib.isDate);
 }
-function isArrayOfDates(value) {
-  return Array.isArray(value) && value.every(isDate);
-}
-function isMatch(day, matchers) {
-  return matchers.some(function(matcher) {
+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 (isDateType(matcher)) {
-      return isSameDay(day, matcher);
+    if (dateLib.isDate(matcher)) {
+      return isSameDay2(date, matcher);
     }
-    if (isArrayOfDates(matcher)) {
-      return matcher.includes(day);
+    if (isDatesArray(matcher, dateLib)) {
+      return matcher.includes(date);
     }
     if (isDateRange(matcher)) {
-      return isDateInRange(day, matcher);
+      return rangeIncludesDate(matcher, date, false, dateLib);
     }
     if (isDayOfWeekType(matcher)) {
-      return matcher.dayOfWeek.includes(day.getDay());
+      if (!Array.isArray(matcher.dayOfWeek)) {
+        return matcher.dayOfWeek === date.getDay();
+      }
+      return matcher.dayOfWeek.includes(date.getDay());
     }
     if (isDateInterval(matcher)) {
-      var diffBefore = differenceInCalendarDays(matcher.before, day);
-      var diffAfter = differenceInCalendarDays(matcher.after, day);
-      var isDayBefore = diffBefore > 0;
-      var isDayAfter = diffAfter < 0;
-      var isClosedInterval = isAfter(matcher.before, matcher.after);
+      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 {
@@ -878,633 +1191,568 @@ function isMatch(day, matchers) {
       }
     }
     if (isDateAfterType(matcher)) {
-      return differenceInCalendarDays(day, matcher.after) > 0;
+      return differenceInCalendarDays2(date, matcher.after) > 0;
     }
     if (isDateBeforeType(matcher)) {
-      return differenceInCalendarDays(matcher.before, day) > 0;
+      return differenceInCalendarDays2(matcher.before, date) > 0;
     }
     if (typeof matcher === "function") {
-      return matcher(day);
+      return matcher(date);
     }
     return false;
   });
 }
-function getActiveModifiers(day, modifiers, displayMonth) {
-  var matchedModifiers = Object.keys(modifiers).reduce(function(result, key) {
-    var modifier = modifiers[key];
-    if (isMatch(day, modifier)) {
-      result.push(key);
-    }
-    return result;
-  }, []);
-  var activeModifiers = {};
-  matchedModifiers.forEach(function(modifier) {
-    return activeModifiers[modifier] = true;
-  });
-  if (displayMonth && !isSameMonth(day, displayMonth)) {
-    activeModifiers.outside = true;
-  }
-  return activeModifiers;
-}
-function getInitialFocusTarget(displayMonths, modifiers) {
-  var firstDayInMonth = startOfMonth(displayMonths[0]);
-  var lastDayInMonth = endOfMonth(displayMonths[displayMonths.length - 1]);
-  var firstFocusableDay;
-  var today;
-  var date = firstDayInMonth;
-  while (date <= lastDayInMonth) {
-    var activeModifiers = getActiveModifiers(date, modifiers);
-    var isFocusable = !activeModifiers.disabled && !activeModifiers.hidden;
-    if (!isFocusable) {
-      date = addDays(date, 1);
-      continue;
-    }
-    if (activeModifiers.selected) {
-      return date;
-    }
-    if (activeModifiers.today && !today) {
-      today = date;
-    }
-    if (!firstFocusableDay) {
-      firstFocusableDay = date;
-    }
-    date = addDays(date, 1);
-  }
-  if (today) {
-    return today;
-  } else {
-    return firstFocusableDay;
-  }
-}
-var MAX_RETRY = 365;
-function getNextFocus(focusedDay, options) {
-  var moveBy = options.moveBy, direction = options.direction, context = options.context, modifiers = options.modifiers, _a = options.retry, retry = _a === void 0 ? { count: 0, lastFocused: focusedDay } : _a;
-  var weekStartsOn = context.weekStartsOn, fromDate = context.fromDate, toDate = context.toDate, locale = context.locale;
-  var moveFns = {
-    day: addDays,
-    week: addWeeks,
-    month: addMonths,
-    year: addYears,
-    startOfWeek: function(date) {
-      return context.ISOWeek ? startOfISOWeek(date) : startOfWeek(date, { locale, weekStartsOn });
-    },
-    endOfWeek: function(date) {
-      return context.ISOWeek ? endOfISOWeek(date) : endOfWeek(date, { locale, weekStartsOn });
-    }
+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;
+  const moveFns = {
+    day: addDays2,
+    week: addWeeks2,
+    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)
   };
-  var newFocusedDay = moveFns[moveBy](focusedDay, direction === "after" ? 1 : -1);
-  if (direction === "before" && fromDate) {
-    newFocusedDay = max([fromDate, newFocusedDay]);
-  } else if (direction === "after" && toDate) {
-    newFocusedDay = min([toDate, newFocusedDay]);
-  }
-  var isFocusable = true;
-  if (modifiers) {
-    var activeModifiers = getActiveModifiers(newFocusedDay, modifiers);
-    isFocusable = !activeModifiers.disabled && !activeModifiers.hidden;
-  }
-  if (isFocusable) {
-    return newFocusedDay;
-  } else {
-    if (retry.count > MAX_RETRY) {
-      return retry.lastFocused;
-    }
-    return getNextFocus(newFocusedDay, {
-      moveBy,
-      direction,
-      context,
-      modifiers,
-      retry: __assign(__assign({}, retry), { count: retry.count + 1 })
-    });
+  let focusableDate = moveFns[moveBy](refDate, moveDir === "after" ? 1 : -1);
+  if (moveDir === "before" && navStart) {
+    focusableDate = max2([navStart, focusableDate]);
+  } else if (moveDir === "after" && navEnd) {
+    focusableDate = min2([navEnd, focusableDate]);
   }
+  return focusableDate;
 }
-var FocusContext = createContext(void 0);
-function FocusProvider(props) {
-  var navigation = useNavigation();
-  var modifiers = useModifiers();
-  var _a = useState(), focusedDay = _a[0], setFocusedDay = _a[1];
-  var _b = useState(), lastFocused = _b[0], setLastFocused = _b[1];
-  var initialFocusTarget = getInitialFocusTarget(navigation.displayMonths, modifiers);
-  var focusTarget = (focusedDay !== null && focusedDay !== void 0 ? focusedDay : lastFocused && navigation.isDateDisplayed(lastFocused)) ? lastFocused : initialFocusTarget;
-  var blur = function() {
+function getNextFocus(moveBy, moveDir, refDay, calendarStartMonth, calendarEndMonth, props, dateLib, attempt = 0) {
+  if (attempt > 365) {
+    return void 0;
+  }
+  const focusableDate = getFocusableDate(
+    moveBy,
+    moveDir,
+    refDay.date,
+    // should be refDay? or 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;
+  const focusDay = new CalendarDay(focusableDate, targetMonth, dateLib);
+  if (!isDisabled && !isHidden) {
+    return focusDay;
+  }
+  return getNextFocus(moveBy, moveDir, focusDay, calendarStartMonth, calendarEndMonth, props, dateLib, attempt + 1);
+}
+function useFocus(props, calendar, getModifiers, isSelected, dateLib) {
+  const { autoFocus } = props;
+  const [lastFocused, setLastFocused] = useState();
+  const focusTarget = calculateFocusTarget(calendar.days, getModifiers, isSelected || (() => false), lastFocused);
+  const [focusedDay, setFocused] = useState(autoFocus ? focusTarget : void 0);
+  const blur = () => {
     setLastFocused(focusedDay);
-    setFocusedDay(void 0);
+    setFocused(void 0);
   };
-  var focus = function(date) {
-    setFocusedDay(date);
-  };
-  var context = useDayPicker();
-  var moveFocus = function(moveBy, direction) {
+  const moveFocus = (moveBy, moveDir) => {
     if (!focusedDay)
       return;
-    var nextFocused = getNextFocus(focusedDay, {
-      moveBy,
-      direction,
-      context,
-      modifiers
-    });
-    if (isSameDay(focusedDay, nextFocused))
-      return void 0;
-    navigation.goToDate(nextFocused, focusedDay);
-    focus(nextFocused);
+    const nextFocus = getNextFocus(moveBy, moveDir, focusedDay, calendar.navStart, calendar.navEnd, props, dateLib);
+    if (!nextFocus)
+      return;
+    calendar.goToDay(nextFocus);
+    setFocused(nextFocus);
   };
-  var value = {
-    focusedDay,
-    focusTarget,
+  const isFocusTarget = (day) => {
+    return Boolean(focusTarget == null ? void 0 : focusTarget.isEqualTo(day));
+  };
+  const useFocus2 = {
+    isFocusTarget,
+    setFocused,
+    focused: focusedDay,
     blur,
-    focus,
-    focusDayAfter: function() {
-      return moveFocus("day", "after");
-    },
-    focusDayBefore: function() {
-      return moveFocus("day", "before");
-    },
-    focusWeekAfter: function() {
-      return moveFocus("week", "after");
-    },
-    focusWeekBefore: function() {
-      return moveFocus("week", "before");
-    },
-    focusMonthBefore: function() {
-      return moveFocus("month", "before");
-    },
-    focusMonthAfter: function() {
-      return moveFocus("month", "after");
-    },
-    focusYearBefore: function() {
-      return moveFocus("year", "before");
-    },
-    focusYearAfter: function() {
-      return moveFocus("year", "after");
-    },
-    focusStartOfWeek: function() {
-      return moveFocus("startOfWeek", "before");
-    },
-    focusEndOfWeek: function() {
-      return moveFocus("endOfWeek", "after");
-    }
+    moveFocus
   };
-  return jsx(FocusContext.Provider, { value, children: props.children });
-}
-function useFocusContext() {
-  var context = useContext(FocusContext);
-  if (!context) {
-    throw new Error("useFocusContext must be used within a FocusProvider");
+  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 ?? (props.timeZone ? TZDate.tz(props.timeZone) : dateLib.Date ? new dateLib.Date() : /* @__PURE__ */ new Date()));
+    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 context;
-}
-function useActiveModifiers(day, displayMonth) {
-  var modifiers = useModifiers();
-  var activeModifiers = getActiveModifiers(day, modifiers, displayMonth);
-  return activeModifiers;
-}
-var SelectSingleContext = createContext(void 0);
-function SelectSingleProvider(props) {
-  if (!isDayPickerSingle(props.initialProps)) {
-    var emptyContextValue = {
-      selected: void 0
+  return (day) => {
+    const dayFlags = {
+      [DayFlag.focused]: false,
+      [DayFlag.disabled]: false,
+      [DayFlag.hidden]: false,
+      [DayFlag.outside]: false,
+      [DayFlag.today]: false
     };
-    return jsx(SelectSingleContext.Provider, { value: emptyContextValue, children: props.children });
-  }
-  return jsx(SelectSingleProviderInternal, { initialProps: props.initialProps, children: props.children });
-}
-function SelectSingleProviderInternal(_a) {
-  var initialProps = _a.initialProps, children = _a.children;
-  var onDayClick = function(day, activeModifiers, e) {
-    var _a2, _b, _c;
-    (_a2 = initialProps.onDayClick) === null || _a2 === void 0 ? void 0 : _a2.call(initialProps, day, activeModifiers, e);
-    if (activeModifiers.selected && !initialProps.required) {
-      (_b = initialProps.onSelect) === null || _b === void 0 ? void 0 : _b.call(initialProps, void 0, day, activeModifiers, e);
-      return;
+    const customModifiers = {};
+    for (const name in internalModifiersMap) {
+      const days2 = internalModifiersMap[name];
+      dayFlags[name] = days2.some((d) => d === day);
     }
-    (_c = initialProps.onSelect) === null || _c === void 0 ? void 0 : _c.call(initialProps, day, day, activeModifiers, e);
-  };
-  var contextValue = {
-    selected: initialProps.selected,
-    onDayClick
+    for (const name in customModifiersMap) {
+      customModifiers[name] = customModifiersMap[name].some((d) => d === day);
+    }
+    return {
+      ...dayFlags,
+      // custom modifiers should override all the previous ones
+      ...customModifiers
+    };
   };
-  return jsx(SelectSingleContext.Provider, { value: contextValue, children });
 }
-function useSelectSingle() {
-  var context = useContext(SelectSingleContext);
-  if (!context) {
-    throw new Error("useSelectSingle must be used within a SelectSingleProvider");
-  }
-  return context;
-}
-function useDayEventHandlers(date, activeModifiers) {
-  var dayPicker = useDayPicker();
-  var single = useSelectSingle();
-  var multiple = useSelectMultiple();
-  var range = useSelectRange();
-  var _a = useFocusContext(), focusDayAfter = _a.focusDayAfter, focusDayBefore = _a.focusDayBefore, focusWeekAfter = _a.focusWeekAfter, focusWeekBefore = _a.focusWeekBefore, blur = _a.blur, focus = _a.focus, focusMonthBefore = _a.focusMonthBefore, focusMonthAfter = _a.focusMonthAfter, focusYearBefore = _a.focusYearBefore, focusYearAfter = _a.focusYearAfter, focusStartOfWeek = _a.focusStartOfWeek, focusEndOfWeek = _a.focusEndOfWeek;
-  var onClick = function(e) {
-    var _a2, _b, _c, _d;
-    if (isDayPickerSingle(dayPicker)) {
-      (_a2 = single.onDayClick) === null || _a2 === void 0 ? void 0 : _a2.call(single, date, activeModifiers, e);
-    } else if (isDayPickerMultiple(dayPicker)) {
-      (_b = multiple.onDayClick) === null || _b === void 0 ? void 0 : _b.call(multiple, date, activeModifiers, e);
-    } else if (isDayPickerRange(dayPicker)) {
-      (_c = range.onDayClick) === null || _c === void 0 ? void 0 : _c.call(range, date, activeModifiers, e);
+function useMulti(props, dateLib) {
+  const { selected: initiallySelected, required, onSelect } = props;
+  const [internallySelected, setSelected] = useControlledValue(initiallySelected, onSelect ? initiallySelected : void 0);
+  const selected = !onSelect ? internallySelected : initiallySelected;
+  const { isSameDay: isSameDay2 } = dateLib;
+  const isSelected = (date) => {
+    return (selected == null ? void 0 : selected.some((d) => isSameDay2(d, date))) ?? false;
+  };
+  const { min: min2, max: max2 } = props;
+  const select = (triggerDate, modifiers, e) => {
+    let newDates = [...selected ?? []];
+    if (isSelected(triggerDate)) {
+      if ((selected == null ? void 0 : selected.length) === min2) {
+        return;
+      }
+      if (required && (selected == null ? void 0 : selected.length) === 1) {
+        return;
+      }
+      newDates = selected == null ? void 0 : selected.filter((d) => !isSameDay2(d, triggerDate));
     } else {
-      (_d = dayPicker.onDayClick) === null || _d === void 0 ? void 0 : _d.call(dayPicker, date, activeModifiers, e);
+      if ((selected == null ? void 0 : selected.length) === max2) {
+        newDates = [triggerDate];
+      } else {
+        newDates = [...newDates, triggerDate];
+      }
     }
+    if (!onSelect) {
+      setSelected(newDates);
+    }
+    onSelect == null ? void 0 : onSelect(newDates, triggerDate, modifiers, e);
+    return newDates;
   };
-  var onFocus = function(e) {
-    var _a2;
-    focus(date);
-    (_a2 = dayPicker.onDayFocus) === null || _a2 === void 0 ? void 0 : _a2.call(dayPicker, date, activeModifiers, e);
-  };
-  var onBlur = function(e) {
-    var _a2;
-    blur();
-    (_a2 = dayPicker.onDayBlur) === null || _a2 === void 0 ? void 0 : _a2.call(dayPicker, date, activeModifiers, e);
-  };
-  var onMouseEnter = function(e) {
-    var _a2;
-    (_a2 = dayPicker.onDayMouseEnter) === null || _a2 === void 0 ? void 0 : _a2.call(dayPicker, date, activeModifiers, e);
-  };
-  var onMouseLeave = function(e) {
-    var _a2;
-    (_a2 = dayPicker.onDayMouseLeave) === null || _a2 === void 0 ? void 0 : _a2.call(dayPicker, date, activeModifiers, e);
-  };
-  var onPointerEnter = function(e) {
-    var _a2;
-    (_a2 = dayPicker.onDayPointerEnter) === null || _a2 === void 0 ? void 0 : _a2.call(dayPicker, date, activeModifiers, e);
-  };
-  var onPointerLeave = function(e) {
-    var _a2;
-    (_a2 = dayPicker.onDayPointerLeave) === null || _a2 === void 0 ? void 0 : _a2.call(dayPicker, date, activeModifiers, e);
-  };
-  var onTouchCancel = function(e) {
-    var _a2;
-    (_a2 = dayPicker.onDayTouchCancel) === null || _a2 === void 0 ? void 0 : _a2.call(dayPicker, date, activeModifiers, e);
-  };
-  var onTouchEnd = function(e) {
-    var _a2;
-    (_a2 = dayPicker.onDayTouchEnd) === null || _a2 === void 0 ? void 0 : _a2.call(dayPicker, date, activeModifiers, e);
-  };
-  var onTouchMove = function(e) {
-    var _a2;
-    (_a2 = dayPicker.onDayTouchMove) === null || _a2 === void 0 ? void 0 : _a2.call(dayPicker, date, activeModifiers, e);
-  };
-  var onTouchStart = function(e) {
-    var _a2;
-    (_a2 = dayPicker.onDayTouchStart) === null || _a2 === void 0 ? void 0 : _a2.call(dayPicker, date, activeModifiers, e);
-  };
-  var onKeyUp = function(e) {
-    var _a2;
-    (_a2 = dayPicker.onDayKeyUp) === null || _a2 === void 0 ? void 0 : _a2.call(dayPicker, date, activeModifiers, e);
-  };
-  var onKeyDown = function(e) {
-    var _a2;
-    switch (e.key) {
-      case "ArrowLeft":
-        e.preventDefault();
-        e.stopPropagation();
-        dayPicker.dir === "rtl" ? focusDayAfter() : focusDayBefore();
-        break;
-      case "ArrowRight":
-        e.preventDefault();
-        e.stopPropagation();
-        dayPicker.dir === "rtl" ? focusDayBefore() : focusDayAfter();
-        break;
-      case "ArrowDown":
-        e.preventDefault();
-        e.stopPropagation();
-        focusWeekAfter();
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        e.stopPropagation();
-        focusWeekBefore();
-        break;
-      case "PageUp":
-        e.preventDefault();
-        e.stopPropagation();
-        e.shiftKey ? focusYearBefore() : focusMonthBefore();
-        break;
-      case "PageDown":
-        e.preventDefault();
-        e.stopPropagation();
-        e.shiftKey ? focusYearAfter() : focusMonthAfter();
-        break;
-      case "Home":
-        e.preventDefault();
-        e.stopPropagation();
-        focusStartOfWeek();
-        break;
-      case "End":
-        e.preventDefault();
-        e.stopPropagation();
-        focusEndOfWeek();
-        break;
-    }
-    (_a2 = dayPicker.onDayKeyDown) === null || _a2 === void 0 ? void 0 : _a2.call(dayPicker, date, activeModifiers, e);
-  };
-  var eventHandlers = {
-    onClick,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    onKeyUp,
-    onMouseEnter,
-    onMouseLeave,
-    onPointerEnter,
-    onPointerLeave,
-    onTouchCancel,
-    onTouchEnd,
-    onTouchMove,
-    onTouchStart
+  return {
+    selected,
+    select,
+    isSelected
   };
-  return eventHandlers;
-}
-function useSelectedDays() {
-  var dayPicker = useDayPicker();
-  var single = useSelectSingle();
-  var multiple = useSelectMultiple();
-  var range = useSelectRange();
-  var selectedDays = isDayPickerSingle(dayPicker) ? single.selected : isDayPickerMultiple(dayPicker) ? multiple.selected : isDayPickerRange(dayPicker) ? range.selected : void 0;
-  return selectedDays;
-}
-function isInternalModifier(modifier) {
-  return Object.values(InternalModifier).includes(modifier);
-}
-function getDayClassNames(dayPicker, activeModifiers) {
-  var classNames2 = [dayPicker.classNames.day];
-  Object.keys(activeModifiers).forEach(function(modifier) {
-    var customClassName = dayPicker.modifiersClassNames[modifier];
-    if (customClassName) {
-      classNames2.push(customClassName);
-    } else if (isInternalModifier(modifier)) {
-      var internalClassName = dayPicker.classNames["day_".concat(modifier)];
-      if (internalClassName) {
-        classNames2.push(internalClassName);
+}
+function addToRange(date, initialRange, min2 = 0, max2 = 0, required = false, dateLib = defaultDateLib) {
+  const { from, to } = initialRange || {};
+  const { isSameDay: isSameDay2, isAfter: isAfter2, isBefore: isBefore2 } = dateLib;
+  let range;
+  if (!from && !to) {
+    range = { from: date, to: min2 > 0 ? void 0 : date };
+  } else if (from && !to) {
+    if (isSameDay2(from, date)) {
+      if (required) {
+        range = { from, to: void 0 };
+      } else {
+        range = void 0;
       }
+    } else if (isBefore2(date, from)) {
+      range = { from: date, to: from };
+    } else {
+      range = { from, to: date };
     }
-  });
-  return classNames2;
+  } else if (from && to) {
+    if (isSameDay2(from, date) && isSameDay2(to, date)) {
+      if (required) {
+        range = { from, to };
+      } else {
+        range = void 0;
+      }
+    } else if (isSameDay2(from, date)) {
+      range = { from, to: min2 > 0 ? void 0 : date };
+    } else if (isSameDay2(to, date)) {
+      range = { from: date, to: min2 > 0 ? void 0 : date };
+    } else if (isBefore2(date, from)) {
+      range = { from: date, to };
+    } else if (isAfter2(date, from)) {
+      range = { from, to: date };
+    } else if (isAfter2(date, to)) {
+      range = { from, to: date };
+    } else {
+      throw new Error("Invalid range");
+    }
+  }
+  if ((range == null ? void 0 : range.from) && (range == null ? void 0 : range.to)) {
+    const diff = dateLib.differenceInCalendarDays(range.to, range.from);
+    if (max2 > 0 && diff > max2) {
+      range = { from: date, to: void 0 };
+    } else if (min2 > 1 && diff < min2) {
+      range = { from: date, to: void 0 };
+    }
+  }
+  return range;
 }
-function getDayStyle(dayPicker, activeModifiers) {
-  var style = __assign({}, dayPicker.styles.day);
-  Object.keys(activeModifiers).forEach(function(modifier) {
-    var _a;
-    style = __assign(__assign({}, style), (_a = dayPicker.modifiersStyles) === null || _a === void 0 ? void 0 : _a[modifier]);
+function rangeContainsDayOfWeek(range, dayOfWeek, dateLib = defaultDateLib) {
+  const dayOfWeekArr = !Array.isArray(dayOfWeek) ? [dayOfWeek] : dayOfWeek;
+  let date = range.from;
+  const totalDays = dateLib.differenceInCalendarDays(range.to, range.from);
+  const totalDaysLimit = Math.min(totalDays, 6);
+  for (let i = 0; i <= totalDaysLimit; i++) {
+    if (dayOfWeekArr.includes(date.getDay())) {
+      return true;
+    }
+    date = dateLib.addDays(date, 1);
+  }
+  return false;
+}
+function rangeOverlaps(rangeLeft, rangeRight, dateLib = defaultDateLib) {
+  return rangeIncludesDate(rangeLeft, rangeRight.from, false, dateLib) || rangeIncludesDate(rangeLeft, rangeRight.to, false, dateLib) || rangeIncludesDate(rangeRight, rangeLeft.from, false, dateLib) || rangeIncludesDate(rangeRight, rangeLeft.to, false, dateLib);
+}
+function rangeContainsModifiers(range, modifiers, dateLib = defaultDateLib) {
+  const matchers = Array.isArray(modifiers) ? modifiers : [modifiers];
+  const nonFunctionMatchers = matchers.filter((matcher) => typeof matcher !== "function");
+  const nonFunctionMatchersResult = nonFunctionMatchers.some((matcher) => {
+    if (typeof matcher === "boolean")
+      return matcher;
+    if (dateLib.isDate(matcher)) {
+      return rangeIncludesDate(range, matcher, false, dateLib);
+    }
+    if (isDatesArray(matcher, dateLib)) {
+      return matcher.some((date) => rangeIncludesDate(range, date, false, dateLib));
+    }
+    if (isDateRange(matcher)) {
+      if (matcher.from && matcher.to) {
+        return rangeOverlaps(range, { from: matcher.from, to: matcher.to }, dateLib);
+      }
+      return false;
+    }
+    if (isDayOfWeekType(matcher)) {
+      return rangeContainsDayOfWeek(range, matcher.dayOfWeek, dateLib);
+    }
+    if (isDateInterval(matcher)) {
+      const isClosedInterval = dateLib.isAfter(matcher.before, matcher.after);
+      if (isClosedInterval) {
+        return rangeOverlaps(range, {
+          from: dateLib.addDays(matcher.after, 1),
+          to: dateLib.addDays(matcher.before, -1)
+        }, dateLib);
+      }
+      return dateMatchModifiers(range.from, matcher, dateLib) || dateMatchModifiers(range.to, matcher, dateLib);
+    }
+    if (isDateAfterType(matcher) || isDateBeforeType(matcher)) {
+      return dateMatchModifiers(range.from, matcher, dateLib) || dateMatchModifiers(range.to, matcher, dateLib);
+    }
+    return false;
   });
-  return style;
+  if (nonFunctionMatchersResult) {
+    return true;
+  }
+  const functionMatchers = matchers.filter((matcher) => typeof matcher === "function");
+  if (functionMatchers.length) {
+    let date = range.from;
+    const totalDays = dateLib.differenceInCalendarDays(range.to, range.from);
+    for (let i = 0; i <= totalDays; i++) {
+      if (functionMatchers.some((matcher) => matcher(date))) {
+        return true;
+      }
+      date = dateLib.addDays(date, 1);
+    }
+  }
+  return false;
 }
-function useDayRender(day, displayMonth, buttonRef) {
-  var _a;
-  var _b, _c;
-  var dayPicker = useDayPicker();
-  var focusContext = useFocusContext();
-  var activeModifiers = useActiveModifiers(day, displayMonth);
-  var eventHandlers = useDayEventHandlers(day, activeModifiers);
-  var selectedDays = useSelectedDays();
-  var isButton = Boolean(dayPicker.onDayClick || dayPicker.mode !== "default");
-  useEffect(function() {
-    var _a2;
-    if (activeModifiers.outside)
-      return;
-    if (!focusContext.focusedDay)
-      return;
-    if (!isButton)
-      return;
-    if (isSameDay(focusContext.focusedDay, day)) {
-      (_a2 = buttonRef.current) === null || _a2 === void 0 ? void 0 : _a2.focus();
+function useRange(props, dateLib) {
+  const { disabled, excludeDisabled, selected: initiallySelected, required, onSelect } = props;
+  const [internallySelected, setSelected] = useControlledValue(initiallySelected, onSelect ? initiallySelected : void 0);
+  const selected = !onSelect ? internallySelected : initiallySelected;
+  const isSelected = (date) => selected && rangeIncludesDate(selected, date, false, dateLib);
+  const select = (triggerDate, modifiers, e) => {
+    const { min: min2, max: max2 } = props;
+    const newRange = triggerDate ? addToRange(triggerDate, selected, min2, max2, required, dateLib) : void 0;
+    if (excludeDisabled && disabled && (newRange == null ? void 0 : newRange.from) && newRange.to) {
+      if (rangeContainsModifiers({ from: newRange.from, to: newRange.to }, disabled, dateLib)) {
+        newRange.from = triggerDate;
+        newRange.to = void 0;
+      }
     }
-  }, [
-    focusContext.focusedDay,
-    day,
-    buttonRef,
-    isButton,
-    activeModifiers.outside
-  ]);
-  var className = getDayClassNames(dayPicker, activeModifiers).join(" ");
-  var style = getDayStyle(dayPicker, activeModifiers);
-  var isHidden = Boolean(activeModifiers.outside && !dayPicker.showOutsideDays || activeModifiers.hidden);
-  var DayContentComponent = (_c = (_b = dayPicker.components) === null || _b === void 0 ? void 0 : _b.DayContent) !== null && _c !== void 0 ? _c : DayContent;
-  var children = jsx(DayContentComponent, { date: day, displayMonth, activeModifiers });
-  var divProps = {
-    style,
-    className,
-    children,
-    role: "gridcell"
+    if (!onSelect) {
+      setSelected(newRange);
+    }
+    onSelect == null ? void 0 : onSelect(newRange, triggerDate, modifiers, e);
+    return newRange;
   };
-  var isFocusTarget = focusContext.focusTarget && isSameDay(focusContext.focusTarget, day) && !activeModifiers.outside;
-  var isFocused = focusContext.focusedDay && isSameDay(focusContext.focusedDay, day);
-  var buttonProps = __assign(__assign(__assign({}, divProps), (_a = { disabled: activeModifiers.disabled, role: "gridcell" }, _a["aria-selected"] = activeModifiers.selected, _a.tabIndex = isFocused || isFocusTarget ? 0 : -1, _a)), eventHandlers);
-  var dayRender = {
-    isButton,
-    isHidden,
-    activeModifiers,
-    selectedDays,
-    buttonProps,
-    divProps
+  return {
+    selected,
+    select,
+    isSelected
   };
-  return dayRender;
-}
-function Day(props) {
-  var buttonRef = useRef(null);
-  var dayRender = useDayRender(props.date, props.displayMonth, buttonRef);
-  if (dayRender.isHidden) {
-    return jsx("div", { role: "gridcell" });
-  }
-  if (!dayRender.isButton) {
-    return jsx("div", __assign({}, dayRender.divProps));
-  }
-  return jsx(Button, __assign({ name: "day", ref: buttonRef }, dayRender.buttonProps));
 }
-function WeekNumber(props) {
-  var weekNumber = props.number, dates = props.dates;
-  var _a = useDayPicker(), onWeekNumberClick = _a.onWeekNumberClick, styles2 = _a.styles, classNames2 = _a.classNames, locale = _a.locale, labelWeekNumber2 = _a.labels.labelWeekNumber, formatWeekNumber2 = _a.formatters.formatWeekNumber;
-  var content = formatWeekNumber2(Number(weekNumber), { locale });
-  if (!onWeekNumberClick) {
-    return jsx("span", { className: classNames2.weeknumber, style: styles2.weeknumber, children: content });
-  }
-  var label = labelWeekNumber2(Number(weekNumber), { locale });
-  var handleClick = function(e) {
-    onWeekNumberClick(weekNumber, dates, e);
+function useSingle(props, dateLib) {
+  const { selected: initiallySelected, required, onSelect } = props;
+  const [internallySelected, setSelected] = useControlledValue(initiallySelected, onSelect ? initiallySelected : void 0);
+  const selected = !onSelect ? internallySelected : initiallySelected;
+  const { isSameDay: isSameDay2 } = dateLib;
+  const isSelected = (compareDate) => {
+    return selected ? isSameDay2(selected, compareDate) : false;
   };
-  return jsx(Button, { name: "week-number", "aria-label": label, className: classNames2.weeknumber, style: styles2.weeknumber, onClick: handleClick, children: content });
-}
-function Row(props) {
-  var _a, _b;
-  var _c = useDayPicker(), styles2 = _c.styles, classNames2 = _c.classNames, showWeekNumber = _c.showWeekNumber, components = _c.components;
-  var DayComponent = (_a = components === null || components === void 0 ? void 0 : components.Day) !== null && _a !== void 0 ? _a : Day;
-  var WeeknumberComponent = (_b = components === null || components === void 0 ? void 0 : components.WeekNumber) !== null && _b !== void 0 ? _b : WeekNumber;
-  var weekNumberCell;
-  if (showWeekNumber) {
-    weekNumberCell = jsx("td", { className: classNames2.cell, style: styles2.cell, children: jsx(WeeknumberComponent, { number: props.weekNumber, dates: props.dates }) });
-  }
-  return jsxs("tr", { className: classNames2.row, style: styles2.row, children: [weekNumberCell, props.dates.map(function(date) {
-    return jsx("td", { className: classNames2.cell, style: styles2.cell, role: "presentation", children: jsx(DayComponent, { displayMonth: props.displayMonth, date }) }, getUnixTime(date));
-  })] });
-}
-function daysToMonthWeeks(fromDate, toDate, options) {
-  var toWeek = (options === null || options === void 0 ? void 0 : options.ISOWeek) ? endOfISOWeek(toDate) : endOfWeek(toDate, options);
-  var fromWeek = (options === null || options === void 0 ? void 0 : options.ISOWeek) ? startOfISOWeek(fromDate) : startOfWeek(fromDate, options);
-  var nOfDays = differenceInCalendarDays(toWeek, fromWeek);
-  var days = [];
-  for (var i = 0; i <= nOfDays; i++) {
-    days.push(addDays(fromWeek, i));
-  }
-  var weeksInMonth = days.reduce(function(result, date) {
-    var weekNumber = (options === null || options === void 0 ? void 0 : options.ISOWeek) ? getISOWeek(date) : getWeek(date, options);
-    var existingWeek = result.find(function(value) {
-      return value.weekNumber === weekNumber;
-    });
-    if (existingWeek) {
-      existingWeek.dates.push(date);
-      return result;
+  const select = (triggerDate, modifiers, e) => {
+    let newDate = triggerDate;
+    if (!required && selected && selected && isSameDay2(triggerDate, selected)) {
+      newDate = void 0;
     }
-    result.push({
-      weekNumber,
-      dates: [date]
-    });
-    return result;
-  }, []);
-  return weeksInMonth;
-}
-function getMonthWeeks(month, options) {
-  var weeksInMonth = daysToMonthWeeks(startOfMonth(month), endOfMonth(month), options);
-  if (options === null || options === void 0 ? void 0 : options.useFixedWeeks) {
-    var nrOfMonthWeeks = getWeeksInMonth(month, options);
-    if (nrOfMonthWeeks < 6) {
-      var lastWeek = weeksInMonth[weeksInMonth.length - 1];
-      var lastDate = lastWeek.dates[lastWeek.dates.length - 1];
-      var toDate = addWeeks(lastDate, 6 - nrOfMonthWeeks);
-      var extraWeeks = daysToMonthWeeks(addWeeks(lastDate, 1), toDate, options);
-      weeksInMonth.push.apply(weeksInMonth, extraWeeks);
-    }
-  }
-  return weeksInMonth;
-}
-function Table(props) {
-  var _a, _b, _c;
-  var _d = useDayPicker(), locale = _d.locale, classNames2 = _d.classNames, styles2 = _d.styles, hideHead = _d.hideHead, fixedWeeks = _d.fixedWeeks, components = _d.components, weekStartsOn = _d.weekStartsOn, firstWeekContainsDate = _d.firstWeekContainsDate, ISOWeek = _d.ISOWeek;
-  var weeks = getMonthWeeks(props.displayMonth, {
-    useFixedWeeks: Boolean(fixedWeeks),
-    ISOWeek,
-    locale,
-    weekStartsOn,
-    firstWeekContainsDate
-  });
-  var HeadComponent = (_a = components === null || components === void 0 ? void 0 : components.Head) !== null && _a !== void 0 ? _a : Head;
-  var RowComponent = (_b = components === null || components === void 0 ? void 0 : components.Row) !== null && _b !== void 0 ? _b : Row;
-  var FooterComponent = (_c = components === null || components === void 0 ? void 0 : components.Footer) !== null && _c !== void 0 ? _c : Footer;
-  return jsxs("table", { id: props.id, className: classNames2.table, style: styles2.table, role: "grid", "aria-labelledby": props["aria-labelledby"], children: [!hideHead && jsx(HeadComponent, {}), jsx("tbody", { className: classNames2.tbody, style: styles2.tbody, children: weeks.map(function(week) {
-    return jsx(RowComponent, { displayMonth: props.displayMonth, dates: week.dates, weekNumber: week.weekNumber }, week.weekNumber);
-  }) }), jsx(FooterComponent, { displayMonth: props.displayMonth })] });
-}
-function canUseDOM() {
-  return !!(typeof window !== "undefined" && window.document && window.document.createElement);
-}
-var useIsomorphicLayoutEffect = canUseDOM() ? useLayoutEffect : useEffect;
-var serverHandoffComplete = false;
-var id = 0;
-function genId() {
-  return "react-day-picker-".concat(++id);
-}
-function useId(providedId) {
-  var _a;
-  var initialId = providedId !== null && providedId !== void 0 ? providedId : serverHandoffComplete ? genId() : null;
-  var _b = useState(initialId), id2 = _b[0], setId = _b[1];
-  useIsomorphicLayoutEffect(function() {
-    if (id2 === null) {
-      setId(genId());
+    if (!onSelect) {
+      setSelected(newDate);
     }
-  }, []);
-  useEffect(function() {
-    if (serverHandoffComplete === false) {
-      serverHandoffComplete = true;
+    if (required) {
+      onSelect == null ? void 0 : onSelect(newDate, triggerDate, modifiers, e);
+    } else {
+      onSelect == null ? void 0 : onSelect(newDate, triggerDate, modifiers, e);
     }
-  }, []);
-  return (_a = providedId !== null && providedId !== void 0 ? providedId : id2) !== null && _a !== void 0 ? _a : void 0;
+    return newDate;
+  };
+  return {
+    selected,
+    select,
+    isSelected
+  };
 }
-function Month(props) {
-  var _a;
-  var _b;
-  var dayPicker = useDayPicker();
-  var dir = dayPicker.dir, classNames2 = dayPicker.classNames, styles2 = dayPicker.styles, components = dayPicker.components;
-  var displayMonths = useNavigation().displayMonths;
-  var captionId = useId(dayPicker.id ? "".concat(dayPicker.id, "-").concat(props.displayIndex) : void 0);
-  var tableId = dayPicker.id ? "".concat(dayPicker.id, "-grid-").concat(props.displayIndex) : void 0;
-  var className = [classNames2.month];
-  var style = styles2.month;
-  var isStart = props.displayIndex === 0;
-  var isEnd = props.displayIndex === displayMonths.length - 1;
-  var isCenter = !isStart && !isEnd;
-  if (dir === "rtl") {
-    _a = [isStart, isEnd], isEnd = _a[0], isStart = _a[1];
-  }
-  if (isStart) {
-    className.push(classNames2.caption_start);
-    style = __assign(__assign({}, style), styles2.caption_start);
-  }
-  if (isEnd) {
-    className.push(classNames2.caption_end);
-    style = __assign(__assign({}, style), styles2.caption_end);
-  }
-  if (isCenter) {
-    className.push(classNames2.caption_between);
-    style = __assign(__assign({}, style), styles2.caption_between);
-  }
-  var CaptionComponent = (_b = components === null || components === void 0 ? void 0 : components.Caption) !== null && _b !== void 0 ? _b : Caption;
-  return jsxs("div", { className: className.join(" "), style, children: [jsx(CaptionComponent, { id: captionId, displayMonth: props.displayMonth, displayIndex: props.displayIndex }), jsx(Table, { id: tableId, "aria-labelledby": captionId, displayMonth: props.displayMonth })] }, props.displayIndex);
+function useSelection(props, dateLib) {
+  const single = useSingle(props, dateLib);
+  const multi = useMulti(props, dateLib);
+  const range = useRange(props, dateLib);
+  switch (props.mode) {
+    case "single":
+      return single;
+    case "multiple":
+      return multi;
+    case "range":
+      return range;
+    default:
+      return void 0;
+  }
 }
-function Months(props) {
-  var _a = useDayPicker(), classNames2 = _a.classNames, styles2 = _a.styles;
-  return jsx("div", { className: classNames2.months, style: styles2.months, children: props.children });
-}
-function Root(_a) {
-  var _b, _c;
-  var initialProps = _a.initialProps;
-  var dayPicker = useDayPicker();
-  var focusContext = useFocusContext();
-  var navigation = useNavigation();
-  var _d = useState(false), hasInitialFocus = _d[0], setHasInitialFocus = _d[1];
-  useEffect(function() {
-    if (!dayPicker.initialFocus)
-      return;
-    if (!focusContext.focusTarget)
-      return;
-    if (hasInitialFocus)
-      return;
-    focusContext.focus(focusContext.focusTarget);
-    setHasInitialFocus(true);
+function DayPicker(props) {
+  const { components: components2, formatters, labels, dateLib, locale, classNames: classNames2 } = useMemo(() => {
+    const locale2 = { ...enUS$1, ...props.locale };
+    const dateLib2 = new DateLib({
+      locale: locale2,
+      weekStartsOn: props.broadcastCalendar ? 1 : props.weekStartsOn,
+      firstWeekContainsDate: props.firstWeekContainsDate,
+      useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
+      useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens
+    }, props.dateLib);
+    return {
+      dateLib: dateLib2,
+      components: getComponents(props.components),
+      formatters: getFormatters(props.formatters),
+      labels: { ...defaultLabels, ...props.labels },
+      locale: locale2,
+      classNames: { ...getDefaultClassNames(), ...props.classNames }
+    };
   }, [
-    dayPicker.initialFocus,
-    hasInitialFocus,
-    focusContext.focus,
-    focusContext.focusTarget,
-    focusContext
+    props.classNames,
+    props.components,
+    props.dateLib,
+    props.firstWeekContainsDate,
+    props.formatters,
+    props.labels,
+    props.locale,
+    props.useAdditionalDayOfYearTokens,
+    props.useAdditionalWeekYearTokens,
+    props.weekStartsOn,
+    props.broadcastCalendar
   ]);
-  var classNames2 = [dayPicker.classNames.root, dayPicker.className];
-  if (dayPicker.numberOfMonths > 1) {
-    classNames2.push(dayPicker.classNames.multiple_months);
-  }
-  if (dayPicker.showWeekNumber) {
-    classNames2.push(dayPicker.classNames.with_weeknumber);
-  }
-  var style = __assign(__assign({}, dayPicker.styles.root), dayPicker.style);
-  var dataAttributes = Object.keys(initialProps).filter(function(key) {
-    return key.startsWith("data-");
-  }).reduce(function(attrs, key) {
-    var _a2;
-    return __assign(__assign({}, attrs), (_a2 = {}, _a2[key] = initialProps[key], _a2));
-  }, {});
-  var MonthsComponent = (_c = (_b = initialProps.components) === null || _b === void 0 ? void 0 : _b.Months) !== null && _c !== void 0 ? _c : Months;
-  return jsx("div", __assign({ className: classNames2.join(" "), style, dir: dayPicker.dir, id: dayPicker.id, nonce: initialProps.nonce, title: initialProps.title, lang: initialProps.lang }, dataAttributes, { children: jsx(MonthsComponent, { children: navigation.displayMonths.map(function(month, i) {
-    return jsx(Month, { displayIndex: i, displayMonth: month }, i);
-  }) }) }));
-}
-function RootProvider(props) {
-  var children = props.children, initialProps = __rest(props, ["children"]);
-  return jsx(DayPickerProvider, { initialProps, children: jsx(NavigationProvider, { children: jsx(SelectSingleProvider, { initialProps, children: jsx(SelectMultipleProvider, { initialProps, children: jsx(SelectRangeProvider, { initialProps, children: jsx(ModifiersProvider, { children: jsx(FocusProvider, { children }) }) }) }) }) }) });
-}
-function DayPicker(props) {
-  return jsx(RootProvider, __assign({}, props, { children: jsx(Root, { initialProps: props }) }));
+  const { captionLayout, mode, 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 { 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 weekdays = useMemo(() => getWeekdays(dateLib, props.ISOWeek, props.timeZone), [dateLib, props.ISOWeek, props.timeZone]);
+  const isInteractive = mode !== void 0 || onDayClick !== void 0;
+  const handlePreviousClick = useCallback(() => {
+    if (!previousMonth)
+      return;
+    goToMonth(previousMonth);
+    onPrevClick == null ? void 0 : onPrevClick(previousMonth);
+  }, [previousMonth, goToMonth, onPrevClick]);
+  const handleNextClick = useCallback(() => {
+    if (!nextMonth)
+      return;
+    goToMonth(nextMonth);
+    onNextClick == null ? void 0 : onNextClick(nextMonth);
+  }, [goToMonth, nextMonth, onNextClick]);
+  const handleDayClick = useCallback((day, m) => (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setFocused(day);
+    select == null ? void 0 : select(day.date, m, e);
+    onDayClick == null ? void 0 : onDayClick(day.date, m, e);
+  }, [select, onDayClick, setFocused]);
+  const handleDayFocus = useCallback((day, m) => (e) => {
+    setFocused(day);
+    onDayFocus == null ? void 0 : onDayFocus(day.date, m, e);
+  }, [onDayFocus, setFocused]);
+  const handleDayBlur = useCallback((day, m) => (e) => {
+    blur();
+    onDayBlur == null ? void 0 : onDayBlur(day.date, m, e);
+  }, [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"],
+      PageUp: [e.shiftKey ? "year" : "month", "before"],
+      PageDown: [e.shiftKey ? "year" : "month", "after"],
+      Home: ["startOfWeek", "before"],
+      End: ["endOfWeek", "after"]
+    };
+    if (keyMap[e.key]) {
+      e.preventDefault();
+      e.stopPropagation();
+      const [moveBy, moveDir] = keyMap[e.key];
+      moveFocus(moveBy, moveDir);
+    }
+    onDayKeyDown == null ? void 0 : onDayKeyDown(day.date, modifiers, e);
+  }, [moveFocus, onDayKeyDown, props.dir]);
+  const handleDayMouseEnter = useCallback((day, modifiers) => (e) => {
+    onDayMouseEnter == null ? void 0 : onDayMouseEnter(day.date, modifiers, e);
+  }, [onDayMouseEnter]);
+  const handleDayMouseLeave = useCallback((day, modifiers) => (e) => {
+    onDayMouseLeave == null ? void 0 : onDayMouseLeave(day.date, modifiers, e);
+  }, [onDayMouseLeave]);
+  const handleMonthChange = useCallback((date) => (e) => {
+    const selectedMonth = Number(e.target.value);
+    const month = dateLib.setMonth(dateLib.startOfMonth(date), selectedMonth);
+    goToMonth(month);
+  }, [dateLib, goToMonth]);
+  const handleYearChange = useCallback((date) => (e) => {
+    const selectedYear = Number(e.target.value);
+    const month = dateLib.setYear(dateLib.startOfMonth(date), selectedYear);
+    goToMonth(month);
+  }, [dateLib, goToMonth]);
+  const { className, style } = useMemo(() => ({
+    className: [classNames2[UI.Root], props.className].filter(Boolean).join(" "),
+    style: { ...styles2 == null ? void 0 : styles2[UI.Root], ...props.style }
+  }), [classNames2, props.className, props.style, styles2]);
+  const dataAttributes = getDataAttributes(props);
+  const contextValue = {
+    dayPickerProps: props,
+    selected: selectedValue,
+    select,
+    isSelected,
+    months,
+    nextMonth,
+    previousMonth,
+    goToMonth,
+    getModifiers,
+    components: components2,
+    classNames: classNames2,
+    styles: styles2,
+    labels,
+    formatters
+  };
+  return React.createElement(
+    dayPickerContext.Provider,
+    { 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 },
+      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 }),
+        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(
+              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: calendarMonth.date.getMonth() }) : React.createElement("span", { role: "status", "aria-live": "polite" }, formatMonthDropdown2(calendarMonth.date.getMonth(), locale)),
+              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: calendarMonth.date.getFullYear() }) : React.createElement("span", { role: "status", "aria-live": "polite" }, formatYearDropdown2(calendarMonth.date.getFullYear()))
+            ) : React.createElement(components2.CaptionLabel, { className: classNames2[UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption2(calendarMonth.date, dateLib.options, dateLib))),
+            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] },
+                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)))
+              ),
+              React.createElement(components2.Weeks, { className: classNames2[UI.Weeks], style: styles2 == null ? void 0 : styles2[UI.Weeks] }, calendarMonth.weeks.map((week, weekIndex) => {
+                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, {
+                    locale
+                  }), className: classNames2[UI.WeekNumber], scope: "row", role: "rowheader" }, formatWeekNumber2(week.weekNumber)),
+                  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);
+                    if (isDateRange(selectedValue)) {
+                      const { from, to } = selectedValue;
+                      modifiers[SelectionState.range_start] = Boolean(from && to && dateLib.isSameDay(date, from));
+                      modifiers[SelectionState.range_end] = Boolean(from && to && dateLib.isSameDay(date, to));
+                      modifiers[SelectionState.range_middle] = rangeIncludesDate(selectedValue, date, true, dateLib);
+                    }
+                    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));
+                  })
+                );
+              }))
+            )
+          );
+        })
+      ),
+      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)
+    )
+  );
 }
 const BUBBLE_WIDTH_PX = 329;
 const WINDOW_MARGIN_PX = 12;
@@ -1631,10 +1879,11 @@ const getArrowStyle = (bubbleStyle, controllerSize, verticalPosition) => {
 };
 const DatePickerPopup = (props) => {
   const { datepickerWrapperRef, footer, inputRef, testId, variant, zIndex, ...rest } = props;
+  const today = /* @__PURE__ */ new Date();
   const arrowRef = useRef(null);
   const [controllerSize, setControllerSize] = useState();
   const bubbleSize = useSize(datepickerWrapperRef);
-  const controllerisVisible = useIsVisible(inputRef, 0);
+  const controllerisVisible = useIsVisible(datepickerWrapperRef, 0);
   useFocusTrap(datepickerWrapperRef, true);
   const updateControllerSize = () => {
     var _a;
@@ -1664,14 +1913,20 @@ const DatePickerPopup = (props) => {
     /* @__PURE__ */ jsx("div", { className: datepickerPopupContainerClasses, "data-testid": testId, ref: datepickerWrapperRef, style: { ...bubbleStyle, zIndex }, children: /* @__PURE__ */ jsx(
       DayPicker,
       {
-        captionLayout: "dropdown-buttons",
+        captionLayout: "dropdown",
         classNames: datePickerClassNames,
         mode: "single",
         style: { "--rdp-cell-size": getSpacer("l") },
-        modifiersClassNames: { today: styles["day--today"], selected: styles["day_selected"], disabled: styles["day--disabled"] },
+        modifiersClassNames: {
+          today: styles["day--today"],
+          selected: styles["day--selected"],
+          disabled: styles["day--disabled"]
+        },
         footer: /* @__PURE__ */ jsx("span", { className: styles["footer-wrapper"], children: footer }),
         fixedWeeks: true,
-        ...rest
+        ...rest,
+        startMonth: props.startMonth ?? new Date(today.getFullYear() - 100, today.getMonth(), 1),
+        endMonth: props.endMonth ?? new Date(today.getFullYear() + 100, today.getMonth(), 1)
       }
     ) }),
     /* @__PURE__ */ jsx("div", { ref: arrowRef, className: popupArrowClasses, style: { ...arrowStyle, zIndex } })
@@ -1902,8 +2157,8 @@ const DatePicker = React.forwardRef((props, ref) => {
         disabled: disabledDays,
         datepickerWrapperRef,
         footer: footerContent,
-        fromDate: minDate,
-        toDate: maxDate,
+        startMonth: minDate,
+        endMonth: maxDate,
         inputRef: refObject,
         locale,
         month,