@redis-ui/components 44.1.0 → 46.1.2

package/dist/node_modules/react-day-picker/dist/index.esm.js

@@ -1,1569 +1,2092 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { createContext, forwardRef, useContext, useState, useEffect, useLayoutEffect, useRef } from "react";
-import { isSameDay } from "../../date-fns/isSameDay.js";
-import { subDays } from "../../date-fns/subDays.js";
-import { addDays } from "../../date-fns/addDays.js";
-import { differenceInCalendarDays } from "../../date-fns/differenceInCalendarDays.js";
-import { startOfMonth } from "../../date-fns/startOfMonth.js";
-import { endOfMonth } from "../../date-fns/endOfMonth.js";
-import { startOfDay } from "../../date-fns/startOfDay.js";
-import { addMonths } from "../../date-fns/addMonths.js";
-import { differenceInCalendarMonths } from "../../date-fns/differenceInCalendarMonths.js";
-import { isSameMonth } from "../../date-fns/isSameMonth.js";
-import { isBefore } from "../../date-fns/isBefore.js";
-import { isAfter } from "../../date-fns/isAfter.js";
-import { getUnixTime } from "../../date-fns/getUnixTime.js";
-import { getWeeksInMonth } from "../../date-fns/getWeeksInMonth.js";
-import { addWeeks } from "../../date-fns/addWeeks.js";
-import { enUS } from "../../date-fns/locale/en-US.js";
-import { isSameYear } from "../../date-fns/isSameYear.js";
-import { setMonth } from "../../date-fns/setMonth.js";
-import { setYear } from "../../date-fns/setYear.js";
-import { startOfYear } from "../../date-fns/startOfYear.js";
-import { max } from "../../date-fns/max.js";
-import { min } from "../../date-fns/min.js";
-import { endOfISOWeek } from "../../date-fns/endOfISOWeek.js";
-import { endOfWeek } from "../../date-fns/endOfWeek.js";
-import { startOfISOWeek } from "../../date-fns/startOfISOWeek.js";
-import { startOfWeek } from "../../date-fns/startOfWeek.js";
-import { getISOWeek } from "../../date-fns/getISOWeek.js";
-import { getWeek } from "../../date-fns/getWeek.js";
-import { formatDate as format } from "../../date-fns/format.js";
-import { isDate } from "../../date-fns/isDate.js";
-import { addYears } from "../../date-fns/addYears.js";
+import addDays from "../../date-fns/addDays.js";
+import addMonths from "../../date-fns/addMonths.js";
+import startOfWeek from "../../date-fns/startOfWeek.js";
+import startOfISOWeek from "../../date-fns/startOfISOWeek.js";
+import startOfDay from "../../date-fns/startOfDay.js";
+import differenceInCalendarDays from "../../date-fns/differenceInCalendarDays.js";
+import addWeeks from "../../date-fns/addWeeks.js";
+import addYears from "../../date-fns/addYears.js";
+import max from "../../date-fns/max.js";
+import min from "../../date-fns/min.js";
+import isSameDay from "../../date-fns/isSameDay.js";
+import isDate from "../../date-fns/isDate.js";
+import differenceInCalendarMonths from "../../date-fns/differenceInCalendarMonths.js";
+import endOfMonth from "../../date-fns/endOfMonth.js";
+import startOfMonth from "../../date-fns/startOfMonth.js";
+import startOfYear from "../../date-fns/startOfYear.js";
+import endOfWeek from "../../date-fns/endOfWeek.js";
+import endOfISOWeek from "../../date-fns/endOfISOWeek.js";
+import enUS from "../../date-fns/locale/en-US.js";
+import getISOWeek from "../../date-fns/getISOWeek.js";
+import getWeek from "../../date-fns/getWeek.js";
+import format from "../../date-fns/format.js";
+import getUnixTime from "../../date-fns/getUnixTime.js";
+import getWeeksInMonth from "../../date-fns/getWeeksInMonth.js";
+import isAfter from "../../date-fns/isAfter.js";
+import isBefore from "../../date-fns/isBefore.js";
+import isSameMonth from "../../date-fns/isSameMonth.js";
+import isSameYear from "../../date-fns/isSameYear.js";
+import subDays from "../../date-fns/subDays.js";
+import setMonth from "../../date-fns/setMonth.js";
+import setYear from "../../date-fns/setYear.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+//#region ../../node_modules/react-day-picker/dist/index.esm.js
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
 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];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
+	__assign = Object.assign || function __assign(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];
+		}
+		return t;
+	};
+	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;
+	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];
-    }
-  }
-  return to.concat(ar || Array.prototype.slice.call(from));
-}
-typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
-  var e = new Error(message);
-  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
+	if (pack || arguments.length === 2) {
+		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];
+		}
+	}
+	return to.concat(ar || Array.prototype.slice.call(from));
+}
+/** Returns true when the props are of type {@link DayPickerMultipleProps}. */
 function isDayPickerMultiple(props) {
-  return props.mode === "multiple";
+	return props.mode === "multiple";
 }
+/** Returns true when the props are of type {@link DayPickerRangeProps}. */
 function isDayPickerRange(props) {
-  return props.mode === "range";
+	return props.mode === "range";
 }
+/** Returns true when the props are of type {@link DayPickerSingleProps}. */
 function isDayPickerSingle(props) {
-  return props.mode === "single";
+	return props.mode === "single";
 }
+/**
+* The name of the default CSS classes.
+*/
 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"
+	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"
 };
+/**
+* The default formatter for the caption.
+*/
 function formatCaption(month, options) {
-  return format(month, "LLLL y", options);
+	return format(month, "LLLL y", options);
 }
+/**
+* The default formatter for the Day button.
+*/
 function formatDay(day, options) {
-  return format(day, "d", options);
+	return format(day, "d", options);
 }
+/**
+* The default formatter for the Month caption.
+*/
 function formatMonthCaption(month, options) {
-  return format(month, "LLLL", options);
+	return format(month, "LLLL", options);
 }
+/**
+* The default formatter for the week number.
+*/
 function formatWeekNumber(weekNumber) {
-  return "".concat(weekNumber);
+	return "".concat(weekNumber);
 }
+/**
+* The default formatter for the name of the weekday.
+*/
 function formatWeekdayName(weekday, options) {
-  return format(weekday, "cccccc", options);
+	return format(weekday, "cccccc", options);
 }
+/**
+* The default formatter for the Year caption.
+*/
 function formatYearCaption(year, options) {
-  return format(year, "yyyy", options);
+	return format(year, "yyyy", options);
 }
 var formatters = /* @__PURE__ */ Object.freeze({
-  __proto__: null,
-  formatCaption,
-  formatDay,
-  formatMonthCaption,
-  formatWeekNumber,
-  formatWeekdayName,
-  formatYearCaption
+	__proto__: null,
+	formatCaption,
+	formatDay,
+	formatMonthCaption,
+	formatWeekNumber,
+	formatWeekdayName,
+	formatYearCaption
 });
+/**
+* The default ARIA label for the day button.
+*/
 var labelDay = function(day, activeModifiers, options) {
-  return format(day, "do MMMM (EEEE)", options);
+	return format(day, "do MMMM (EEEE)", options);
 };
+/**
+* The default ARIA label for the WeekNumber element.
+*/
 var labelMonthDropdown = function() {
-  return "Month: ";
+	return "Month: ";
 };
+/**
+* The default ARIA label for next month button in navigation
+*/
 var labelNext = function() {
-  return "Go to next month";
+	return "Go to next month";
 };
+/**
+* The default ARIA label for previous month button in navigation
+*/
 var labelPrevious = function() {
-  return "Go to previous month";
+	return "Go to previous month";
 };
+/**
+* The default ARIA label for the Weekday element.
+*/
 var labelWeekday = function(day, options) {
-  return format(day, "cccc", options);
+	return format(day, "cccc", options);
 };
+/**
+* The default ARIA label for the WeekNumber element.
+*/
 var labelWeekNumber = function(n) {
-  return "Week n. ".concat(n);
+	return "Week n. ".concat(n);
 };
+/**
+* The default ARIA label for the WeekNumber element.
+*/
 var labelYearDropdown = function() {
-  return "Year: ";
+	return "Year: ";
 };
 var labels = /* @__PURE__ */ Object.freeze({
-  __proto__: null,
-  labelDay,
-  labelMonthDropdown,
-  labelNext,
-  labelPrevious,
-  labelWeekNumber,
-  labelWeekday,
-  labelYearDropdown
+	__proto__: null,
+	labelDay,
+	labelMonthDropdown,
+	labelNext,
+	labelPrevious,
+	labelWeekNumber,
+	labelWeekday,
+	labelYearDropdown
 });
+/**
+* Returns the default values to use in the DayPickerContext, in case they are
+* not passed down with the DayPicker initial props.
+*/
 function getDefaultContextValues() {
-  var captionLayout = "buttons";
-  var classNames = defaultClassNames;
-  var locale = enUS;
-  var modifiersClassNames = {};
-  var modifiers = {};
-  var numberOfMonths = 1;
-  var styles = {};
-  var today = /* @__PURE__ */ new Date();
-  return {
-    captionLayout,
-    classNames,
-    formatters,
-    labels,
-    locale,
-    modifiersClassNames,
-    modifiers,
-    numberOfMonths,
-    styles,
-    today,
-    mode: "default"
-  };
-}
+	return {
+		captionLayout: "buttons",
+		classNames: defaultClassNames,
+		formatters,
+		labels,
+		locale: enUS,
+		modifiersClassNames: {},
+		modifiers: {},
+		numberOfMonths: 1,
+		styles: {},
+		today: /* @__PURE__ */ new Date(),
+		mode: "default"
+	};
+}
+/** Return the `fromDate` and `toDate` prop values values parsing the DayPicker props. */
 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);
-  }
-  if (toMonth) {
-    toDate = endOfMonth(toMonth);
-  } else if (toYear) {
-    toDate = new Date(toYear, 11, 31);
-  }
-  return {
-    fromDate: fromDate ? startOfDay(fromDate) : void 0,
-    toDate: toDate ? startOfDay(toDate) : void 0
-  };
-}
+	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);
+	if (toMonth) toDate = endOfMonth(toMonth);
+	else if (toYear) toDate = new Date(toYear, 11, 31);
+	return {
+		fromDate: fromDate ? startOfDay(fromDate) : void 0,
+		toDate: toDate ? startOfDay(toDate) : void 0
+	};
+}
+/**
+* The DayPicker context shares the props passed to DayPicker within internal
+* and custom components. It is used to set the default values and perform
+* one-time calculations required to render the days.
+*
+* Access to this context from the {@link useDayPicker} hook.
+*/
 var DayPickerContext = createContext(void 0);
+/**
+* The provider for the {@link DayPickerContext}, assigning the defaults from the
+* initial DayPicker props.
+*/
 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";
-  }
-  var onSelect;
-  if (isDayPickerSingle(initialProps) || isDayPickerMultiple(initialProps) || isDayPickerRange(initialProps)) {
-    onSelect = initialProps.onSelect;
-  }
-  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 });
-}
+	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";
+	var onSelect;
+	if (isDayPickerSingle(initialProps) || isDayPickerMultiple(initialProps) || isDayPickerRange(initialProps)) onSelect = initialProps.onSelect;
+	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
+	});
+}
+/**
+* Hook to access the {@link DayPickerContextValue}.
+*
+* Use the DayPicker context to access to the props passed to DayPicker inside
+* internal or custom components.
+*/
 function useDayPicker() {
-  var context = useContext(DayPickerContext);
-  if (!context) {
-    throw new Error("useDayPicker must be used within a DayPickerProvider.");
-  }
-  return context;
+	var context = useContext(DayPickerContext);
+	if (!context) throw new Error("useDayPicker must be used within a DayPickerProvider.");
+	return context;
 }
+/** Render the caption for the displayed month. This component is used when `captionLayout="buttons"`. */
 function CaptionLabel(props) {
-  var _a = useDayPicker(), locale = _a.locale, classNames = _a.classNames, styles = _a.styles, formatCaption2 = _a.formatters.formatCaption;
-  return jsx("div", { className: classNames.caption_label, style: styles.caption_label, "aria-live": "polite", role: "presentation", id: props.id, children: formatCaption2(props.displayMonth, { locale }) });
-}
+	var _a = useDayPicker(), locale = _a.locale, classNames = _a.classNames, styles = _a.styles, formatCaption = _a.formatters.formatCaption;
+	return jsx("div", {
+		className: classNames.caption_label,
+		style: styles.caption_label,
+		"aria-live": "polite",
+		role: "presentation",
+		id: props.id,
+		children: formatCaption(props.displayMonth, { locale })
+	});
+}
+/**
+* Render the icon in the styled drop-down.
+*/
 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" }) }));
-}
+	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"
+	}) }));
+}
+/**
+* Render a styled select component – displaying a caption and a custom
+* drop-down icon.
+*/
 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 })] })] });
-}
+	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
+				})]
+			})
+		]
+	});
+}
+/** Render the dropdown to navigate between months. */
 function MonthsDropdown(props) {
-  var _a;
-  var _b = useDayPicker(), fromDate = _b.fromDate, toDate = _b.toDate, styles = _b.styles, locale = _b.locale, formatMonthCaption2 = _b.formatters.formatMonthCaption, classNames = _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: classNames.dropdown_month, style: styles.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());
-  }) });
-}
+	var _a;
+	var _b = useDayPicker(), fromDate = _b.fromDate, toDate = _b.toDate, styles = _b.styles, locale = _b.locale, formatMonthCaption = _b.formatters.formatMonthCaption, classNames = _b.classNames, components = _b.components, labelMonthDropdown = _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);
+	};
+	return jsx((_a = components === null || components === void 0 ? void 0 : components.Dropdown) !== null && _a !== void 0 ? _a : Dropdown, {
+		name: "months",
+		"aria-label": labelMonthDropdown(),
+		className: classNames.dropdown_month,
+		style: styles.dropdown_month,
+		onChange: handleChange,
+		value: props.displayMonth.getMonth(),
+		caption: formatMonthCaption(props.displayMonth, { locale }),
+		children: dropdownMonths.map(function(m) {
+			return jsx("option", {
+				value: m.getMonth(),
+				children: formatMonthCaption(m, { locale })
+			}, m.getMonth());
+		})
+	});
+}
+/**
+* Render a dropdown to change the year. Take in account the `nav.fromDate` and
+* `toDate` from context.
+*/
 function YearsDropdown(props) {
-  var _a;
-  var displayMonth = props.displayMonth;
-  var _b = useDayPicker(), fromDate = _b.fromDate, toDate = _b.toDate, locale = _b.locale, styles = _b.styles, classNames = _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: classNames.dropdown_year, style: styles.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());
-  }) });
-}
+	var _a;
+	var displayMonth = props.displayMonth;
+	var _b = useDayPicker(), fromDate = _b.fromDate, toDate = _b.toDate, locale = _b.locale, styles = _b.styles, classNames = _b.classNames, components = _b.components, formatYearCaption = _b.formatters.formatYearCaption, labelYearDropdown = _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);
+	};
+	return jsx((_a = components === null || components === void 0 ? void 0 : components.Dropdown) !== null && _a !== void 0 ? _a : Dropdown, {
+		name: "years",
+		"aria-label": labelYearDropdown(),
+		className: classNames.dropdown_year,
+		style: styles.dropdown_year,
+		onChange: handleChange,
+		value: displayMonth.getFullYear(),
+		caption: formatYearCaption(displayMonth, { locale }),
+		children: years.map(function(year) {
+			return jsx("option", {
+				value: year.getFullYear(),
+				children: formatYearCaption(year, { locale })
+			}, year.getFullYear());
+		})
+	});
+}
+/**
+* Helper hook for using controlled/uncontrolled values from a component props.
+*
+* When the value is not controlled, pass `undefined` as `controlledValue` and
+* use the returned setter to update it.
+*
+* When the value is controlled, pass the controlled value as second
+* argument, which will be always returned as `value`.
+*/
 function useControlledValue(defaultValue, controlledValue) {
-  var _a = useState(defaultValue), uncontrolledValue = _a[0], setValue = _a[1];
-  var value = controlledValue === void 0 ? uncontrolledValue : controlledValue;
-  return [value, setValue];
+	var _a = useState(defaultValue), uncontrolledValue = _a[0], setValue = _a[1];
+	return [controlledValue === void 0 ? uncontrolledValue : controlledValue, setValue];
 }
+/** Return the initial month according to the given options. */
 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);
-}
+	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) initialMonth = addMonths(toDate, -1 * (numberOfMonths - 1));
+	if (fromDate && differenceInCalendarMonths(initialMonth, fromDate) < 0) initialMonth = fromDate;
+	return startOfMonth(initialMonth);
+}
+/** Controls the navigation state. */
 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];
-}
+	var context = useDayPicker();
+	var _a = useControlledValue(getInitialMonth(context), context.month), month = _a[0], setMonth = _a[1];
+	var goToMonth = function(date) {
+		var _a;
+		if (context.disableNavigation) return;
+		var month = startOfMonth(date);
+		setMonth(month);
+		(_a = context.onMonthChange) === null || _a === void 0 || _a.call(context, month);
+	};
+	return [month, goToMonth];
+}
+/**
+* Return the months to display in the component according to the number of
+* months and the from/to date.
+*/
 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();
-  return months;
-}
+	var reverseMonths = _a.reverseMonths, numberOfMonths = _a.numberOfMonths;
+	var start = startOfMonth(month);
+	var monthsDiff = differenceInCalendarMonths(startOfMonth(addMonths(start, numberOfMonths)), start);
+	var months = [];
+	for (var i = 0; i < monthsDiff; i++) {
+		var nextMonth = addMonths(start, i);
+		months.push(nextMonth);
+	}
+	if (reverseMonths) months = months.reverse();
+	return months;
+}
+/**
+* Returns the next month the user can navigate to according to the given
+* options.
+*
+* Please note that the next month is not always the next calendar month:
+*
+* - if after the `toDate` range, is undefined;
+* - if the navigation is paged, is the number of months displayed ahead.
+*
+*/
 function getNextMonth(startingMonth, options) {
-  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);
-  }
-  var monthsDiff = differenceInCalendarMonths(toDate, startingMonth);
-  if (monthsDiff < numberOfMonths) {
-    return void 0;
-  }
-  return addMonths(month, offset);
-}
+	if (options.disableNavigation) return;
+	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);
+	if (differenceInCalendarMonths(toDate, startingMonth) < numberOfMonths) return;
+	return addMonths(month, offset);
+}
+/**
+* Returns the next previous the user can navigate to, according to the given
+* options.
+*
+* Please note that the previous month is not always the previous calendar
+* month:
+*
+* - if before the `fromDate` date, is `undefined`;
+* - if the navigation is paged, is the number of months displayed before.
+*
+*/
 function getPreviousMonth(startingMonth, options) {
-  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);
-  }
-  var monthsDiff = differenceInCalendarMonths(month, fromDate);
-  if (monthsDiff <= 0) {
-    return void 0;
-  }
-  return addMonths(month, -offset);
-}
+	if (options.disableNavigation) return;
+	var fromDate = options.fromDate, pagedNavigation = options.pagedNavigation, _a = options.numberOfMonths;
+	var offset = pagedNavigation ? _a === void 0 ? 1 : _a : 1;
+	var month = startOfMonth(startingMonth);
+	if (!fromDate) return addMonths(month, -offset);
+	if (differenceInCalendarMonths(month, fromDate) <= 0) return;
+	return addMonths(month, -offset);
+}
+/**
+* The Navigation context shares details and methods to navigate the months in DayPicker.
+* Access this context from the {@link useNavigation} hook.
+*/
 var NavigationContext = createContext(void 0);
+/** Provides the values for the {@link NavigationContext}. */
 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 });
-}
+	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
+	});
+}
+/**
+* Hook to access the {@link NavigationContextValue}. Use this hook to navigate
+* between months or years in DayPicker.
+*
+* This hook is meant to be used inside internal or custom components.
+*/
 function useNavigation() {
-  var context = useContext(NavigationContext);
-  if (!context) {
-    throw new Error("useNavigation must be used within a NavigationProvider");
-  }
-  return context;
+	var context = useContext(NavigationContext);
+	if (!context) throw new Error("useNavigation must be used within a NavigationProvider");
+	return context;
 }
+/**
+* Render a caption with the dropdowns to navigate between months and years.
+*/
 function CaptionDropdowns(props) {
-  var _a;
-  var _b = useDayPicker(), classNames = _b.classNames, styles = _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: classNames.caption_dropdowns, style: styles.caption_dropdowns, children: [jsx("div", { className: classNames.vhidden, children: captionLabel }), jsx(MonthsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth }), jsx(YearsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth })] });
-}
+	var _a;
+	var _b = useDayPicker(), classNames = _b.classNames, styles = _b.styles, components = _b.components;
+	var goToMonth = useNavigation().goToMonth;
+	var handleMonthChange = function(newMonth) {
+		goToMonth(addMonths(newMonth, props.displayIndex ? -props.displayIndex : 0));
+	};
+	var captionLabel = jsx((_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel, {
+		id: props.id,
+		displayMonth: props.displayMonth
+	});
+	return jsxs("div", {
+		className: classNames.caption_dropdowns,
+		style: styles.caption_dropdowns,
+		children: [
+			jsx("div", {
+				className: classNames.vhidden,
+				children: captionLabel
+			}),
+			jsx(MonthsDropdown, {
+				onChange: handleMonthChange,
+				displayMonth: props.displayMonth
+			}),
+			jsx(YearsDropdown, {
+				onChange: handleMonthChange,
+				displayMonth: props.displayMonth
+			})
+		]
+	});
+}
+/**
+* Render the "previous month" button in the navigation.
+*/
 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" }) }));
-}
+	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"
+	}) }));
+}
+/**
+* Render the "next month" button in the navigation.
+*/
 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" }) }));
-}
+	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"
+	}) }));
+}
+/** Render a button HTML element applying the reset class name. */
 var Button = forwardRef(function(props, ref) {
-  var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles;
-  var classNamesArr = [classNames.button_reset, classNames.button];
-  if (props.className) {
-    classNamesArr.push(props.className);
-  }
-  var className = classNamesArr.join(" ");
-  var style = __assign(__assign({}, styles.button_reset), styles.button);
-  if (props.style) {
-    Object.assign(style, props.style);
-  }
-  return jsx("button", __assign({}, props, { ref, type: "button", className, style }));
+	var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles;
+	var classNamesArr = [classNames.button_reset, classNames.button];
+	if (props.className) classNamesArr.push(props.className);
+	var className = classNamesArr.join(" ");
+	var style = __assign(__assign({}, styles.button_reset), styles.button);
+	if (props.style) Object.assign(style, props.style);
+	return jsx("button", __assign({}, props, {
+		ref,
+		type: "button",
+		className,
+		style
+	}));
 });
+/** A component rendering the navigation buttons or the drop-downs. */
 function Navigation(props) {
-  var _a, _b;
-  var _c = useDayPicker(), dir = _c.dir, locale = _c.locale, classNames = _c.classNames, styles = _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 = [
-    classNames.nav_button,
-    classNames.nav_button_previous
-  ].join(" ");
-  var nextLabel = labelNext2(props.nextMonth, { locale });
-  var nextClassName = [
-    classNames.nav_button,
-    classNames.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: classNames.nav, style: styles.nav, children: [!props.hidePrevious && jsx(Button, { name: "previous-month", "aria-label": previousLabel, className: previousClassName, style: styles.nav_button_previous, disabled: !props.previousMonth, onClick: props.onPreviousClick, children: dir === "rtl" ? jsx(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon }) : jsx(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon }) }), !props.hideNext && jsx(Button, { name: "next-month", "aria-label": nextLabel, className: nextClassName, style: styles.nav_button_next, disabled: !props.nextMonth, onClick: props.onNextClick, children: dir === "rtl" ? jsx(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon }) : jsx(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon }) })] });
-}
+	var _a, _b;
+	var _c = useDayPicker(), dir = _c.dir, locale = _c.locale, classNames = _c.classNames, styles = _c.styles, _d = _c.labels, labelPrevious = _d.labelPrevious, labelNext = _d.labelNext, components = _c.components;
+	if (!props.nextMonth && !props.previousMonth) return jsx(Fragment, {});
+	var previousLabel = labelPrevious(props.previousMonth, { locale });
+	var previousClassName = [classNames.nav_button, classNames.nav_button_previous].join(" ");
+	var nextLabel = labelNext(props.nextMonth, { locale });
+	var nextClassName = [classNames.nav_button, classNames.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: classNames.nav,
+		style: styles.nav,
+		children: [!props.hidePrevious && jsx(Button, {
+			name: "previous-month",
+			"aria-label": previousLabel,
+			className: previousClassName,
+			style: styles.nav_button_previous,
+			disabled: !props.previousMonth,
+			onClick: props.onPreviousClick,
+			children: dir === "rtl" ? jsx(IconRightComponent, {
+				className: classNames.nav_icon,
+				style: styles.nav_icon
+			}) : jsx(IconLeftComponent, {
+				className: classNames.nav_icon,
+				style: styles.nav_icon
+			})
+		}), !props.hideNext && jsx(Button, {
+			name: "next-month",
+			"aria-label": nextLabel,
+			className: nextClassName,
+			style: styles.nav_button_next,
+			disabled: !props.nextMonth,
+			onClick: props.onNextClick,
+			children: dir === "rtl" ? jsx(IconLeftComponent, {
+				className: classNames.nav_icon,
+				style: styles.nav_icon
+			}) : jsx(IconRightComponent, {
+				className: classNames.nav_icon,
+				style: styles.nav_icon
+			})
+		})]
+	});
+}
+/**
+* Render a caption with a button-based navigation.
+*/
 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 });
-}
+	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
+	});
+}
+/**
+* Render the caption of a month. The caption has a different layout when
+* setting the {@link DayPickerBase.captionLayout} prop.
+*/
 function Caption(props) {
-  var _a;
-  var _b = useDayPicker(), classNames = _b.classNames, disableNavigation = _b.disableNavigation, styles = _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: classNames.caption, style: styles.caption, children: caption });
-}
+	var _a;
+	var _b = useDayPicker(), classNames = _b.classNames, disableNavigation = _b.disableNavigation, styles = _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: classNames.caption,
+		style: styles.caption,
+		children: caption
+	});
+}
+/** Render the Footer component (empty as default).*/
 function Footer(props) {
-  var _a = useDayPicker(), footer = _a.footer, styles = _a.styles, tfoot = _a.classNames.tfoot;
-  if (!footer)
-    return jsx(Fragment, {});
-  return jsx("tfoot", { className: tfoot, style: styles.tfoot, children: jsx("tr", { children: jsx("td", { colSpan: 8, children: footer }) }) });
-}
+	var _a = useDayPicker(), footer = _a.footer, styles = _a.styles, tfoot = _a.classNames.tfoot;
+	if (!footer) return jsx(Fragment, {});
+	return jsx("tfoot", {
+		className: tfoot,
+		style: styles.tfoot,
+		children: jsx("tr", { children: jsx("td", {
+			colSpan: 8,
+			children: footer
+		}) })
+	});
+}
+/**
+* Generate a series of 7 days, starting from the week, to use for formatting
+* the weekday names (Monday, Tuesday, etc.).
+*/
 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;
-}
+	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;
+}
+/**
+* Render the HeadRow component - i.e. the table head row with the weekday names.
+*/
 function HeadRow() {
-  var _a = useDayPicker(), classNames = _a.classNames, styles = _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: styles.head_row, className: classNames.head_row, children: [showWeekNumber && jsx("td", { style: styles.head_cell, className: classNames.head_cell }), weekdays.map(function(weekday, i) {
-    return jsx("th", { scope: "col", className: classNames.head_cell, style: styles.head_cell, "aria-label": labelWeekday2(weekday, { locale }), children: formatWeekdayName2(weekday, { locale }) }, i);
-  })] });
-}
+	var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles, showWeekNumber = _a.showWeekNumber, locale = _a.locale, weekStartsOn = _a.weekStartsOn, ISOWeek = _a.ISOWeek, formatWeekdayName = _a.formatters.formatWeekdayName, labelWeekday = _a.labels.labelWeekday;
+	var weekdays = getWeekdays(locale, weekStartsOn, ISOWeek);
+	return jsxs("tr", {
+		style: styles.head_row,
+		className: classNames.head_row,
+		children: [showWeekNumber && jsx("td", {
+			style: styles.head_cell,
+			className: classNames.head_cell
+		}), weekdays.map(function(weekday, i) {
+			return jsx("th", {
+				scope: "col",
+				className: classNames.head_cell,
+				style: styles.head_cell,
+				"aria-label": labelWeekday(weekday, { locale }),
+				children: formatWeekdayName(weekday, { locale })
+			}, i);
+		})]
+	});
+}
+/** Render the table head. */
 function Head() {
-  var _a;
-  var _b = useDayPicker(), classNames = _b.classNames, styles = _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: styles.head, className: classNames.head, children: jsx(HeadRowComponent, {}) });
-}
+	var _a;
+	var _b = useDayPicker(), classNames = _b.classNames, styles = _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: styles.head,
+		className: classNames.head,
+		children: jsx(HeadRowComponent, {})
+	});
+}
+/** Render the content of the day cell. */
 function DayContent(props) {
-  var _a = useDayPicker(), locale = _a.locale, formatDay2 = _a.formatters.formatDay;
-  return jsx(Fragment, { children: formatDay2(props.date, { locale }) });
-}
+	var _a = useDayPicker(), locale = _a.locale, formatDay = _a.formatters.formatDay;
+	return jsx(Fragment, { children: formatDay(props.date, { locale }) });
+}
+/**
+* The SelectMultiple context shares details about the selected days when in
+* multiple selection mode.
+*
+* Access this context from the {@link useSelectMultiple} hook.
+*/
 var SelectMultipleContext = createContext(void 0);
+/** Provides the values for the {@link SelectMultipleContext}. */
 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 });
+	if (!isDayPickerMultiple(props.initialProps)) return jsx(SelectMultipleContext.Provider, {
+		value: {
+			selected: void 0,
+			modifiers: { disabled: [] }
+		},
+		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) {
-      return;
-    }
-    var isMaxSelected = Boolean(!activeModifiers.selected && max2 && (selected === null || selected === void 0 ? void 0 : selected.length) === max2);
-    if (isMaxSelected) {
-      return;
-    }
-    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);
-    }
-    (_b = initialProps.onSelect) === null || _b === void 0 ? void 0 : _b.call(initialProps, selectedDays, day, activeModifiers, e);
-  };
-  var modifiers = {
-    disabled: []
-  };
-  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 });
-}
+	var initialProps = _a.initialProps, children = _a.children;
+	var selected = initialProps.selected, min = initialProps.min, max = initialProps.max;
+	var onDayClick = function(day, activeModifiers, e) {
+		var _a, _b;
+		(_a = initialProps.onDayClick) === null || _a === void 0 || _a.call(initialProps, day, activeModifiers, e);
+		if (Boolean(activeModifiers.selected && min && (selected === null || selected === void 0 ? void 0 : selected.length) === min)) return;
+		if (Boolean(!activeModifiers.selected && max && (selected === null || selected === void 0 ? void 0 : selected.length) === max)) return;
+		var selectedDays = selected ? __spreadArray([], selected, true) : [];
+		if (activeModifiers.selected) {
+			var index = selectedDays.findIndex(function(selectedDay) {
+				return isSameDay(day, selectedDay);
+			});
+			selectedDays.splice(index, 1);
+		} else selectedDays.push(day);
+		(_b = initialProps.onSelect) === null || _b === void 0 || _b.call(initialProps, selectedDays, day, activeModifiers, e);
+	};
+	var modifiers = { disabled: [] };
+	if (selected) modifiers.disabled.push(function(day) {
+		var isMaxSelected = max && selected.length > max - 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
+	});
+}
+/**
+* Hook to access the {@link SelectMultipleContextValue}.
+*
+* This hook is meant to be used inside internal or custom components.
+*/
 function useSelectMultiple() {
-  var context = useContext(SelectMultipleContext);
-  if (!context) {
-    throw new Error("useSelectMultiple must be used within a SelectMultipleProvider");
-  }
-  return context;
-}
+	var context = useContext(SelectMultipleContext);
+	if (!context) throw new Error("useSelectMultiple must be used within a SelectMultipleProvider");
+	return context;
+}
+/**
+* Add a day to an existing range.
+*
+* The returned range takes in account the `undefined` values and if the added
+* day is already present in the range.
+*/
 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 };
-    }
-    return { from, to: day };
-  }
-  return { from: day, to: void 0 };
-}
+	var _a = range || {}, from = _a.from, to = _a.to;
+	if (from && to) {
+		if (isSameDay(to, day) && isSameDay(from, day)) return;
+		if (isSameDay(to, day)) return {
+			from: to,
+			to: void 0
+		};
+		if (isSameDay(from, day)) return;
+		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
+		};
+		return {
+			from,
+			to: day
+		};
+	}
+	return {
+		from: day,
+		to: void 0
+	};
+}
+/**
+* The SelectRange context shares details about the selected days when in
+* range selection mode.
+*
+* Access this context from the {@link useSelectRange} hook.
+*/
 var SelectRangeContext = createContext(void 0);
+/** Provides the values for the {@link SelectRangeProvider}. */
 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 });
+	if (!isDayPickerRange(props.initialProps)) return jsx(SelectRangeContext.Provider, {
+		value: {
+			selected: void 0,
+			modifiers: {
+				range_start: [],
+				range_end: [],
+				range_middle: [],
+				disabled: []
+			}
+		},
+		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);
-  };
-  var modifiers = {
-    range_start: [],
-    range_end: [],
-    range_middle: [],
-    disabled: []
-  };
-  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
-          }
-        ];
-      }
-    }
-  } 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)
-      });
-    }
-  }
-  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)
-      });
-    }
-  }
-  return jsx(SelectRangeContext.Provider, { value: { selected, onDayClick, modifiers }, children });
-}
+	var initialProps = _a.initialProps, children = _a.children;
+	var selected = initialProps.selected;
+	var _b = selected || {}, selectedFrom = _b.from, selectedTo = _b.to;
+	var min = initialProps.min;
+	var max = initialProps.max;
+	var onDayClick = function(day, activeModifiers, e) {
+		var _a, _b;
+		(_a = initialProps.onDayClick) === null || _a === void 0 || _a.call(initialProps, day, activeModifiers, e);
+		var newRange = addToRange(day, selected);
+		(_b = initialProps.onSelect) === null || _b === void 0 || _b.call(initialProps, newRange, day, activeModifiers, e);
+	};
+	var modifiers = {
+		range_start: [],
+		range_end: [],
+		range_middle: [],
+		disabled: []
+	};
+	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
+			}];
+		}
+	} else if (selectedTo) {
+		modifiers.range_start = [selectedTo];
+		modifiers.range_end = [selectedTo];
+	}
+	if (min) {
+		if (selectedFrom && !selectedTo) modifiers.disabled.push({
+			after: subDays(selectedFrom, min - 1),
+			before: addDays(selectedFrom, min - 1)
+		});
+		if (selectedFrom && selectedTo) modifiers.disabled.push({
+			after: selectedFrom,
+			before: addDays(selectedFrom, min - 1)
+		});
+		if (!selectedFrom && selectedTo) modifiers.disabled.push({
+			after: subDays(selectedTo, min - 1),
+			before: addDays(selectedTo, min - 1)
+		});
+	}
+	if (max) {
+		if (selectedFrom && !selectedTo) {
+			modifiers.disabled.push({ before: addDays(selectedFrom, -max + 1) });
+			modifiers.disabled.push({ after: addDays(selectedFrom, max - 1) });
+		}
+		if (selectedFrom && selectedTo) {
+			var offset = max - (differenceInCalendarDays(selectedTo, selectedFrom) + 1);
+			modifiers.disabled.push({ before: subDays(selectedFrom, offset) });
+			modifiers.disabled.push({ after: addDays(selectedTo, offset) });
+		}
+		if (!selectedFrom && selectedTo) {
+			modifiers.disabled.push({ before: addDays(selectedTo, -max + 1) });
+			modifiers.disabled.push({ after: addDays(selectedTo, max - 1) });
+		}
+	}
+	return jsx(SelectRangeContext.Provider, {
+		value: {
+			selected,
+			onDayClick,
+			modifiers
+		},
+		children
+	});
+}
+/**
+* Hook to access the {@link SelectRangeContextValue}.
+*
+* This hook is meant to be used inside internal or custom components.
+*/
 function useSelectRange() {
-  var context = useContext(SelectRangeContext);
-  if (!context) {
-    throw new Error("useSelectRange must be used within a SelectRangeProvider");
-  }
-  return context;
+	var context = useContext(SelectRangeContext);
+	if (!context) throw new Error("useSelectRange must be used within a SelectRangeProvider");
+	return context;
 }
+/** Normalize to array a matcher input. */
 function matcherToArray(matcher) {
-  if (Array.isArray(matcher)) {
-    return __spreadArray([], matcher);
-  } else if (matcher !== void 0) {
-    return [matcher];
-  } else {
-    return [];
-  }
+	if (Array.isArray(matcher)) return __spreadArray([], matcher, true);
+	else if (matcher !== void 0) return [matcher];
+	else return [];
 }
+/** Create CustomModifiers from dayModifiers */
 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 customModifiers = {};
+	Object.entries(dayModifiers).forEach(function(_a) {
+		var modifier = _a[0], matcher = _a[1];
+		customModifiers[modifier] = matcherToArray(matcher);
+	});
+	return customModifiers;
+}
+/** The name of the modifiers that are used internally by DayPicker. */
 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";
+(function(InternalModifier) {
+	InternalModifier["Outside"] = "outside";
+	/** Name of the modifier applied to the disabled days, using the `disabled` prop. */
+	InternalModifier["Disabled"] = "disabled";
+	/** Name of the modifier applied to the selected days using the `selected` prop). */
+	InternalModifier["Selected"] = "selected";
+	/** Name of the modifier applied to the hidden days using the `hidden` prop). */
+	InternalModifier["Hidden"] = "hidden";
+	/** Name of the modifier applied to the day specified using the `today` prop). */
+	InternalModifier["Today"] = "today";
+	/** The modifier applied to the day starting a selected range, when in range selection mode.  */
+	InternalModifier["RangeStart"] = "range_start";
+	/** The modifier applied to the day ending a selected range, when in range selection mode.  */
+	InternalModifier["RangeEnd"] = "range_end";
+	/** The modifier applied to the days between the start and the end of a selected range, when in range selection mode.  */
+	InternalModifier["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;
+/** Return the {@link InternalModifiers} from the DayPicker and select contexts. */
 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 _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;
+}
+/** The Modifiers context store the modifiers used in DayPicker. To access the value of this context, use {@link useModifiers}. */
 var ModifiersContext = createContext(void 0);
+/** Provide the value for the {@link ModifiersContext}. */
 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 });
-}
+	var dayPicker = useDayPicker();
+	var internalModifiers = getInternalModifiers(dayPicker, useSelectMultiple(), useSelectRange());
+	var customModifiers = getCustomModifiers(dayPicker.modifiers);
+	var modifiers = __assign(__assign({}, internalModifiers), customModifiers);
+	return jsx(ModifiersContext.Provider, {
+		value: modifiers,
+		children: props.children
+	});
+}
+/**
+* Return the modifiers used by DayPicker.
+*
+* This hook is meant to be used inside internal or custom components.
+* Requires to be wrapped into {@link ModifiersProvider}.
+*
+*/
 function useModifiers() {
-  var context = useContext(ModifiersContext);
-  if (!context) {
-    throw new Error("useModifiers must be used within a ModifiersProvider");
-  }
-  return context;
+	var context = useContext(ModifiersContext);
+	if (!context) throw new Error("useModifiers must be used within a ModifiersProvider");
+	return context;
 }
+/** Returns true if `matcher` is of type {@link DateInterval}. */
 function isDateInterval(matcher) {
-  return Boolean(matcher && typeof matcher === "object" && "before" in matcher && "after" in matcher);
+	return Boolean(matcher && typeof matcher === "object" && "before" in matcher && "after" in matcher);
 }
+/** Returns true if `value` is a {@link DateRange} type. */
 function isDateRange(value) {
-  return Boolean(value && typeof value === "object" && "from" in value);
+	return Boolean(value && typeof value === "object" && "from" in value);
 }
+/** Returns true if `value` is of type {@link DateAfter}. */
 function isDateAfterType(value) {
-  return Boolean(value && typeof value === "object" && "after" in value);
+	return Boolean(value && typeof value === "object" && "after" in value);
 }
+/** Returns true if `value` is of type {@link DateBefore}. */
 function isDateBeforeType(value) {
-  return Boolean(value && typeof value === "object" && "before" in value);
+	return Boolean(value && typeof value === "object" && "before" in value);
 }
+/** Returns true if `value` is a {@link DayOfWeek} type. */
 function isDayOfWeekType(value) {
-  return Boolean(value && typeof value === "object" && "dayOfWeek" in value);
+	return Boolean(value && typeof value === "object" && "dayOfWeek" in value);
 }
+/** Return `true` whether `date` is inside `range`. */
 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;
-}
+	var _a;
+	var from = range.from, to = range.to;
+	if (from && to) {
+		if (differenceInCalendarDays(to, from) < 0) _a = [to, from], from = _a[0], to = _a[1];
+		return differenceInCalendarDays(date, from) >= 0 && differenceInCalendarDays(to, date) >= 0;
+	}
+	if (to) return isSameDay(to, date);
+	if (from) return isSameDay(from, date);
+	return false;
+}
+/** Returns true if `value` is a Date type. */
 function isDateType(value) {
-  return isDate(value);
+	return isDate(value);
 }
+/** Returns true if `value` is an array of valid dates. */
 function isArrayOfDates(value) {
-  return Array.isArray(value) && value.every(isDate);
-}
+	return Array.isArray(value) && value.every(isDate);
+}
+/**
+* Returns whether a day matches against at least one of the given Matchers.
+*
+* ```
+* const day = new Date(2022, 5, 19);
+* const matcher1: DateRange = {
+*    from: new Date(2021, 12, 21),
+*    to: new Date(2021, 12, 30)
+* }
+* const matcher2: DateRange = {
+*    from: new Date(2022, 5, 1),
+*    to: new Date(2022, 5, 23)
+* }
+*
+* const isMatch(day, [matcher1, matcher2]); // true, since day is in the matcher1 range.
+* ```
+* */
 function isMatch(day, matchers) {
-  return matchers.some(function(matcher) {
-    if (typeof matcher === "boolean") {
-      return matcher;
-    }
-    if (isDateType(matcher)) {
-      return isSameDay(day, matcher);
-    }
-    if (isArrayOfDates(matcher)) {
-      return matcher.includes(day);
-    }
-    if (isDateRange(matcher)) {
-      return isDateInRange(day, matcher);
-    }
-    if (isDayOfWeekType(matcher)) {
-      return matcher.dayOfWeek.includes(day.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);
-      if (isClosedInterval) {
-        return isDayAfter && isDayBefore;
-      } else {
-        return isDayBefore || isDayAfter;
-      }
-    }
-    if (isDateAfterType(matcher)) {
-      return differenceInCalendarDays(day, matcher.after) > 0;
-    }
-    if (isDateBeforeType(matcher)) {
-      return differenceInCalendarDays(matcher.before, day) > 0;
-    }
-    if (typeof matcher === "function") {
-      return matcher(day);
-    }
-    return false;
-  });
-}
+	return matchers.some(function(matcher) {
+		if (typeof matcher === "boolean") return matcher;
+		if (isDateType(matcher)) return isSameDay(day, matcher);
+		if (isArrayOfDates(matcher)) return matcher.includes(day);
+		if (isDateRange(matcher)) return isDateInRange(day, matcher);
+		if (isDayOfWeekType(matcher)) return matcher.dayOfWeek.includes(day.getDay());
+		if (isDateInterval(matcher)) {
+			var diffBefore = differenceInCalendarDays(matcher.before, day);
+			var diffAfter = differenceInCalendarDays(matcher.after, day);
+			var isDayBefore = diffBefore > 0;
+			var isDayAfter = diffAfter < 0;
+			if (isAfter(matcher.before, matcher.after)) return isDayAfter && isDayBefore;
+			else return isDayBefore || isDayAfter;
+		}
+		if (isDateAfterType(matcher)) return differenceInCalendarDays(day, matcher.after) > 0;
+		if (isDateBeforeType(matcher)) return differenceInCalendarDays(matcher.before, day) > 0;
+		if (typeof matcher === "function") return matcher(day);
+		return false;
+	});
+}
+/** Return the active modifiers for the given day. */
 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;
-}
+	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;
+}
+/**
+* Returns the day that should be the target of the focus when DayPicker is
+* rendered the first time.
+*
+* TODO: this function doesn't consider if the day is outside the month. We
+* implemented this check in `useDayRender` but it should probably go here. See
+* https://github.com/gpbl/react-day-picker/pull/1576
+*/
 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 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);
+		if (!(!activeModifiers.disabled && !activeModifiers.hidden)) {
+			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;
+/** Return the next date to be focused. */
 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 });
-    }
-  };
-  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 })
-    });
-  }
-}
+	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 newFocusedDay = {
+		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
+			});
+		}
+	}[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 })
+		});
+	}
+}
+/**
+* The Focus context shares details about the focused day for the keyboard
+*
+* Access this context from the {@link useFocusContext} hook.
+*/
 var FocusContext = createContext(void 0);
+/** The provider for the {@link FocusContext}. */
 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() {
-    setLastFocused(focusedDay);
-    setFocusedDay(void 0);
-  };
-  var focus = function(date) {
-    setFocusedDay(date);
-  };
-  var context = useDayPicker();
-  var moveFocus = function(moveBy, direction) {
-    if (!focusedDay)
-      return;
-    var nextFocused = getNextFocus(focusedDay, {
-      moveBy,
-      direction,
-      context,
-      modifiers
-    });
-    if (isSameDay(focusedDay, nextFocused))
-      return void 0;
-    navigation.goToDate(nextFocused, focusedDay);
-    focus(nextFocused);
-  };
-  var value = {
-    focusedDay,
-    focusTarget,
-    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");
-    }
-  };
-  return jsx(FocusContext.Provider, { value, children: props.children });
-}
+	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() {
+		setLastFocused(focusedDay);
+		setFocusedDay(void 0);
+	};
+	var focus = function(date) {
+		setFocusedDay(date);
+	};
+	var context = useDayPicker();
+	var moveFocus = function(moveBy, direction) {
+		if (!focusedDay) return;
+		var nextFocused = getNextFocus(focusedDay, {
+			moveBy,
+			direction,
+			context,
+			modifiers
+		});
+		if (isSameDay(focusedDay, nextFocused)) return void 0;
+		navigation.goToDate(nextFocused, focusedDay);
+		focus(nextFocused);
+	};
+	var value = {
+		focusedDay,
+		focusTarget,
+		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");
+		}
+	};
+	return jsx(FocusContext.Provider, {
+		value,
+		children: props.children
+	});
+}
+/**
+* Hook to access the {@link FocusContextValue}. Use this hook to handle the
+* focus state of the elements.
+*
+* This hook is meant to be used inside internal or custom components.
+*/
 function useFocusContext() {
-  var context = useContext(FocusContext);
-  if (!context) {
-    throw new Error("useFocusContext must be used within a FocusProvider");
-  }
-  return context;
-}
+	var context = useContext(FocusContext);
+	if (!context) throw new Error("useFocusContext must be used within a FocusProvider");
+	return context;
+}
+/**
+* Return the active modifiers for the specified day.
+*
+* This hook is meant to be used inside internal or custom components.
+*
+* @param day
+* @param displayMonth
+*/
 function useActiveModifiers(day, displayMonth) {
-  var modifiers = useModifiers();
-  var activeModifiers = getActiveModifiers(day, modifiers, displayMonth);
-  return activeModifiers;
-}
+	return getActiveModifiers(day, useModifiers(), displayMonth);
+}
+/**
+* The SelectSingle context shares details about the selected days when in
+* single selection mode.
+*
+* Access this context from the {@link useSelectSingle} hook.
+*/
 var SelectSingleContext = createContext(void 0);
+/** Provides the values for the {@link SelectSingleProvider}. */
 function SelectSingleProvider(props) {
-  if (!isDayPickerSingle(props.initialProps)) {
-    var emptyContextValue = {
-      selected: void 0
-    };
-    return jsx(SelectSingleContext.Provider, { value: emptyContextValue, children: props.children });
-  }
-  return jsx(SelectSingleProviderInternal, { initialProps: props.initialProps, children: props.children });
+	if (!isDayPickerSingle(props.initialProps)) return jsx(SelectSingleContext.Provider, {
+		value: { selected: void 0 },
+		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;
-    }
-    (_c = initialProps.onSelect) === null || _c === void 0 ? void 0 : _c.call(initialProps, day, day, activeModifiers, e);
-  };
-  var contextValue = {
-    selected: initialProps.selected,
-    onDayClick
-  };
-  return jsx(SelectSingleContext.Provider, { value: contextValue, children });
-}
+	var initialProps = _a.initialProps, children = _a.children;
+	var onDayClick = function(day, activeModifiers, e) {
+		var _a, _b, _c;
+		(_a = initialProps.onDayClick) === null || _a === void 0 || _a.call(initialProps, day, activeModifiers, e);
+		if (activeModifiers.selected && !initialProps.required) {
+			(_b = initialProps.onSelect) === null || _b === void 0 || _b.call(initialProps, void 0, day, activeModifiers, e);
+			return;
+		}
+		(_c = initialProps.onSelect) === null || _c === void 0 || _c.call(initialProps, day, day, activeModifiers, e);
+	};
+	var contextValue = {
+		selected: initialProps.selected,
+		onDayClick
+	};
+	return jsx(SelectSingleContext.Provider, {
+		value: contextValue,
+		children
+	});
+}
+/**
+* Hook to access the {@link SelectSingleContextValue}.
+*
+* This hook is meant to be used inside internal or custom components.
+*/
 function useSelectSingle() {
-  var context = useContext(SelectSingleContext);
-  if (!context) {
-    throw new Error("useSelectSingle must be used within a SelectSingleProvider");
-  }
-  return context;
-}
+	var context = useContext(SelectSingleContext);
+	if (!context) throw new Error("useSelectSingle must be used within a SelectSingleProvider");
+	return context;
+}
+/**
+* This hook returns details about the content to render in the day cell.
+*
+*
+* When a day cell is rendered in the table, DayPicker can either:
+*
+* - render nothing: when the day is outside the month or has matched the
+*   "hidden" modifier.
+* - render a button when `onDayClick` or a selection mode is set.
+* - render a non-interactive element: when no selection mode is set, the day
+*   cell shouldn’t respond to any interaction. DayPicker should render a `div`
+*   or a `span`.
+*
+* ### Usage
+*
+* Use this hook to customize the behavior of the {@link Day} component. Create a
+* new `Day` component using this hook and pass it to the `components` prop.
+* The source of {@link Day} can be a good starting point.
+*
+*/
 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);
-    } else {
-      (_d = dayPicker.onDayClick) === null || _d === void 0 ? void 0 : _d.call(dayPicker, date, activeModifiers, e);
-    }
-  };
-  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 eventHandlers;
-}
+	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 _a, _b, _c, _d;
+		if (isDayPickerSingle(dayPicker)) (_a = single.onDayClick) === null || _a === void 0 || _a.call(single, date, activeModifiers, e);
+		else if (isDayPickerMultiple(dayPicker)) (_b = multiple.onDayClick) === null || _b === void 0 || _b.call(multiple, date, activeModifiers, e);
+		else if (isDayPickerRange(dayPicker)) (_c = range.onDayClick) === null || _c === void 0 || _c.call(range, date, activeModifiers, e);
+		else (_d = dayPicker.onDayClick) === null || _d === void 0 || _d.call(dayPicker, date, activeModifiers, e);
+	};
+	var onFocus = function(e) {
+		var _a;
+		focus(date);
+		(_a = dayPicker.onDayFocus) === null || _a === void 0 || _a.call(dayPicker, date, activeModifiers, e);
+	};
+	var onBlur = function(e) {
+		var _a;
+		blur();
+		(_a = dayPicker.onDayBlur) === null || _a === void 0 || _a.call(dayPicker, date, activeModifiers, e);
+	};
+	var onMouseEnter = function(e) {
+		var _a;
+		(_a = dayPicker.onDayMouseEnter) === null || _a === void 0 || _a.call(dayPicker, date, activeModifiers, e);
+	};
+	var onMouseLeave = function(e) {
+		var _a;
+		(_a = dayPicker.onDayMouseLeave) === null || _a === void 0 || _a.call(dayPicker, date, activeModifiers, e);
+	};
+	var onPointerEnter = function(e) {
+		var _a;
+		(_a = dayPicker.onDayPointerEnter) === null || _a === void 0 || _a.call(dayPicker, date, activeModifiers, e);
+	};
+	var onPointerLeave = function(e) {
+		var _a;
+		(_a = dayPicker.onDayPointerLeave) === null || _a === void 0 || _a.call(dayPicker, date, activeModifiers, e);
+	};
+	var onTouchCancel = function(e) {
+		var _a;
+		(_a = dayPicker.onDayTouchCancel) === null || _a === void 0 || _a.call(dayPicker, date, activeModifiers, e);
+	};
+	var onTouchEnd = function(e) {
+		var _a;
+		(_a = dayPicker.onDayTouchEnd) === null || _a === void 0 || _a.call(dayPicker, date, activeModifiers, e);
+	};
+	var onTouchMove = function(e) {
+		var _a;
+		(_a = dayPicker.onDayTouchMove) === null || _a === void 0 || _a.call(dayPicker, date, activeModifiers, e);
+	};
+	var onTouchStart = function(e) {
+		var _a;
+		(_a = dayPicker.onDayTouchStart) === null || _a === void 0 || _a.call(dayPicker, date, activeModifiers, e);
+	};
+	var onKeyUp = function(e) {
+		var _a;
+		(_a = dayPicker.onDayKeyUp) === null || _a === void 0 || _a.call(dayPicker, date, activeModifiers, e);
+	};
+	var onKeyDown = function(e) {
+		var _a;
+		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;
+		}
+		(_a = dayPicker.onDayKeyDown) === null || _a === void 0 || _a.call(dayPicker, date, activeModifiers, e);
+	};
+	return {
+		onClick,
+		onFocus,
+		onBlur,
+		onKeyDown,
+		onKeyUp,
+		onMouseEnter,
+		onMouseLeave,
+		onPointerEnter,
+		onPointerLeave,
+		onTouchCancel,
+		onTouchEnd,
+		onTouchMove,
+		onTouchStart
+	};
+}
+/**
+* Return the current selected days when DayPicker is in selection mode. Days
+* selected by the custom selection mode are not returned.
+*
+* This hook is meant to be used inside internal or custom components.
+*
+*/
 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;
+	var dayPicker = useDayPicker();
+	var single = useSelectSingle();
+	var multiple = useSelectMultiple();
+	var range = useSelectRange();
+	return isDayPickerSingle(dayPicker) ? single.selected : isDayPickerMultiple(dayPicker) ? multiple.selected : isDayPickerRange(dayPicker) ? range.selected : void 0;
 }
 function isInternalModifier(modifier) {
-  return Object.values(InternalModifier).includes(modifier);
-}
+	return Object.values(InternalModifier).includes(modifier);
+}
+/**
+* Return the class names for the Day element, according to the given active
+* modifiers.
+*
+* Custom class names are set via `modifiersClassNames` or `classNames`,
+* where the first have the precedence.
+*/
 function getDayClassNames(dayPicker, activeModifiers) {
-  var classNames = [dayPicker.classNames.day];
-  Object.keys(activeModifiers).forEach(function(modifier) {
-    var customClassName = dayPicker.modifiersClassNames[modifier];
-    if (customClassName) {
-      classNames.push(customClassName);
-    } else if (isInternalModifier(modifier)) {
-      var internalClassName = dayPicker.classNames["day_".concat(modifier)];
-      if (internalClassName) {
-        classNames.push(internalClassName);
-      }
-    }
-  });
-  return classNames;
-}
+	var classNames = [dayPicker.classNames.day];
+	Object.keys(activeModifiers).forEach(function(modifier) {
+		var customClassName = dayPicker.modifiersClassNames[modifier];
+		if (customClassName) classNames.push(customClassName);
+		else if (isInternalModifier(modifier)) {
+			var internalClassName = dayPicker.classNames["day_".concat(modifier)];
+			if (internalClassName) classNames.push(internalClassName);
+		}
+	});
+	return classNames;
+}
+/** Return the style for the Day element, according to the given active modifiers. */
 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]);
-  });
-  return style;
-}
+	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]);
+	});
+	return style;
+}
+/**
+* Return props and data used to render the {@link Day} component.
+*
+* Use this hook when creating a component to replace the built-in `Day`
+* component.
+*/
 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();
-    }
-  }, [
-    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"
-  };
-  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 dayRender;
-}
+	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 _a;
+		if (activeModifiers.outside) return;
+		if (!focusContext.focusedDay) return;
+		if (!isButton) return;
+		if (isSameDay(focusContext.focusedDay, day)) (_a = buttonRef.current) === null || _a === void 0 || _a.focus();
+	}, [
+		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 divProps = {
+		style,
+		className,
+		children: jsx((_c = (_b = dayPicker.components) === null || _b === void 0 ? void 0 : _b.DayContent) !== null && _c !== void 0 ? _c : DayContent, {
+			date: day,
+			displayMonth,
+			activeModifiers
+		}),
+		role: "gridcell"
+	};
+	var isFocusTarget = focusContext.focusTarget && isSameDay(focusContext.focusTarget, day) && !activeModifiers.outside;
+	var isFocused = focusContext.focusedDay && isSameDay(focusContext.focusedDay, day);
+	return {
+		isButton,
+		isHidden,
+		activeModifiers,
+		selectedDays,
+		buttonProps: __assign(__assign(__assign({}, divProps), (_a = {
+			disabled: activeModifiers.disabled,
+			role: "gridcell"
+		}, _a["aria-selected"] = activeModifiers.selected, _a.tabIndex = isFocused || isFocusTarget ? 0 : -1, _a)), eventHandlers),
+		divProps
+	};
+}
+/**
+* The content of a day cell – as a button or span element according to its
+* modifiers.
+*/
 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));
-}
+	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));
+}
+/**
+* Render the week number element. If `onWeekNumberClick` is passed to DayPicker, it
+* renders a button, otherwise a span element.
+*/
 function WeekNumber(props) {
-  var weekNumber = props.number, dates = props.dates;
-  var _a = useDayPicker(), onWeekNumberClick = _a.onWeekNumberClick, styles = _a.styles, classNames = _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: classNames.weeknumber, style: styles.weeknumber, children: content });
-  }
-  var label = labelWeekNumber2(Number(weekNumber), { locale });
-  var handleClick = function(e) {
-    onWeekNumberClick(weekNumber, dates, e);
-  };
-  return jsx(Button, { name: "week-number", "aria-label": label, className: classNames.weeknumber, style: styles.weeknumber, onClick: handleClick, children: content });
-}
+	var weekNumber = props.number, dates = props.dates;
+	var _a = useDayPicker(), onWeekNumberClick = _a.onWeekNumberClick, styles = _a.styles, classNames = _a.classNames, locale = _a.locale, labelWeekNumber = _a.labels.labelWeekNumber, formatWeekNumber = _a.formatters.formatWeekNumber;
+	var content = formatWeekNumber(Number(weekNumber), { locale });
+	if (!onWeekNumberClick) return jsx("span", {
+		className: classNames.weeknumber,
+		style: styles.weeknumber,
+		children: content
+	});
+	var label = labelWeekNumber(Number(weekNumber), { locale });
+	var handleClick = function(e) {
+		onWeekNumberClick(weekNumber, dates, e);
+	};
+	return jsx(Button, {
+		name: "week-number",
+		"aria-label": label,
+		className: classNames.weeknumber,
+		style: styles.weeknumber,
+		onClick: handleClick,
+		children: content
+	});
+}
+/** Render a row in the calendar, with the days and the week number. */
 function Row(props) {
-  var _a, _b;
-  var _c = useDayPicker(), styles = _c.styles, classNames = _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: classNames.cell, style: styles.cell, children: jsx(WeeknumberComponent, { number: props.weekNumber, dates: props.dates }) });
-  }
-  return jsxs("tr", { className: classNames.row, style: styles.row, children: [weekNumberCell, props.dates.map(function(date) {
-    return jsx("td", { className: classNames.cell, style: styles.cell, role: "presentation", children: jsx(DayComponent, { displayMonth: props.displayMonth, date }) }, getUnixTime(date));
-  })] });
-}
+	var _a, _b;
+	var _c = useDayPicker(), styles = _c.styles, classNames = _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: classNames.cell,
+		style: styles.cell,
+		children: jsx(WeeknumberComponent, {
+			number: props.weekNumber,
+			dates: props.dates
+		})
+	});
+	return jsxs("tr", {
+		className: classNames.row,
+		style: styles.row,
+		children: [weekNumberCell, props.dates.map(function(date) {
+			return jsx("td", {
+				className: classNames.cell,
+				style: styles.cell,
+				role: "presentation",
+				children: jsx(DayComponent, {
+					displayMonth: props.displayMonth,
+					date
+				})
+			}, getUnixTime(date));
+		})]
+	});
+}
+/** Return the weeks between two dates.  */
 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;
-    }
-    result.push({
-      weekNumber,
-      dates: [date]
-    });
-    return result;
-  }, []);
-  return weeksInMonth;
-}
+	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));
+	return 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;
+		}
+		result.push({
+			weekNumber,
+			dates: [date]
+		});
+		return result;
+	}, []);
+}
+/**
+* Return the weeks belonging to the given month, adding the "outside days" to
+* the first and last week.
+*/
 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;
-}
+	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;
+}
+/** Render the table with the calendar. */
 function Table(props) {
-  var _a, _b, _c;
-  var _d = useDayPicker(), locale = _d.locale, classNames = _d.classNames, styles = _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: classNames.table, style: styles.table, role: "grid", "aria-labelledby": props["aria-labelledby"], children: [!hideHead && jsx(HeadComponent, {}), jsx("tbody", { className: classNames.tbody, style: styles.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 })] });
+	var _a, _b, _c;
+	var _d = useDayPicker(), locale = _d.locale, classNames = _d.classNames, styles = _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: classNames.table,
+		style: styles.table,
+		role: "grid",
+		"aria-labelledby": props["aria-labelledby"],
+		children: [
+			!hideHead && jsx(HeadComponent, {}),
+			jsx("tbody", {
+				className: classNames.tbody,
+				style: styles.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);
-}
+	return !!(typeof window !== "undefined" && window.document && window.document.createElement);
+}
+/**
+* React currently throws a warning when using useLayoutEffect on the server. To
+* get around it, we can conditionally useEffect on the server (no-op) and
+* useLayoutEffect in the browser. We occasionally need useLayoutEffect to
+* ensure we don't get a render flash for certain operations, but we may also
+* need affected components to render on the server. One example is when setting
+* a component's descendants to retrieve their index values.
+*
+* Important to note that using this hook as an escape hatch will break the
+* eslint dependency warnings unless you rename the import to `useLayoutEffect`.
+* Use sparingly only when the effect won't effect the rendered HTML to avoid
+* any server/client mismatch.
+*
+* If a useLayoutEffect is needed and the result would create a mismatch, it's
+* likely that the component in question shouldn't be rendered on the server at
+* all, so a better approach would be to lazily render those in a parent
+* component after client-side hydration.
+*
+* https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+* https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js
+*
+* @param effect
+* @param deps
+*/
 var useIsomorphicLayoutEffect = canUseDOM() ? useLayoutEffect : useEffect;
 var serverHandoffComplete = false;
 var id = 0;
 function genId() {
-  return "react-day-picker-".concat(++id);
+	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());
-    }
-  }, []);
-  useEffect(function() {
-    if (serverHandoffComplete === false) {
-      serverHandoffComplete = true;
-    }
-  }, []);
-  return (_a = providedId !== null && providedId !== void 0 ? providedId : id2) !== null && _a !== void 0 ? _a : void 0;
-}
+	var _a;
+	var _b = useState(providedId !== null && providedId !== void 0 ? providedId : serverHandoffComplete ? genId() : null), id = _b[0], setId = _b[1];
+	useIsomorphicLayoutEffect(function() {
+		if (id === null) setId(genId());
+	}, []);
+	useEffect(function() {
+		if (serverHandoffComplete === false) serverHandoffComplete = true;
+	}, []);
+	return (_a = providedId !== null && providedId !== void 0 ? providedId : id) !== null && _a !== void 0 ? _a : void 0;
+}
+/** Render a month. */
 function Month(props) {
-  var _a;
-  var _b;
-  var dayPicker = useDayPicker();
-  var dir = dayPicker.dir, classNames = dayPicker.classNames, styles = 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 = [classNames.month];
-  var style = styles.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(classNames.caption_start);
-    style = __assign(__assign({}, style), styles.caption_start);
-  }
-  if (isEnd) {
-    className.push(classNames.caption_end);
-    style = __assign(__assign({}, style), styles.caption_end);
-  }
-  if (isCenter) {
-    className.push(classNames.caption_between);
-    style = __assign(__assign({}, style), styles.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);
-}
+	var _a;
+	var _b;
+	var dayPicker = useDayPicker();
+	var dir = dayPicker.dir, classNames = dayPicker.classNames, styles = 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 = [classNames.month];
+	var style = styles.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(classNames.caption_start);
+		style = __assign(__assign({}, style), styles.caption_start);
+	}
+	if (isEnd) {
+		className.push(classNames.caption_end);
+		style = __assign(__assign({}, style), styles.caption_end);
+	}
+	if (isCenter) {
+		className.push(classNames.caption_between);
+		style = __assign(__assign({}, style), styles.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);
+}
+/**
+* Render the wrapper for the month grids.
+*/
 function Months(props) {
-  var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles;
-  return jsx("div", { className: classNames.months, style: styles.months, children: props.children });
-}
+	var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles;
+	return jsx("div", {
+		className: classNames.months,
+		style: styles.months,
+		children: props.children
+	});
+}
+/** Render the container with the months according to the number of months to display. */
 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);
-  }, [
-    dayPicker.initialFocus,
-    hasInitialFocus,
-    focusContext.focus,
-    focusContext.focusTarget,
-    focusContext
-  ]);
-  var classNames = [dayPicker.classNames.root, dayPicker.className];
-  if (dayPicker.numberOfMonths > 1) {
-    classNames.push(dayPicker.classNames.multiple_months);
-  }
-  if (dayPicker.showWeekNumber) {
-    classNames.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: classNames.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);
-  }) }) }));
-}
+	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);
+	}, [
+		dayPicker.initialFocus,
+		hasInitialFocus,
+		focusContext.focus,
+		focusContext.focusTarget,
+		focusContext
+	]);
+	var classNames = [dayPicker.classNames.root, dayPicker.className];
+	if (dayPicker.numberOfMonths > 1) classNames.push(dayPicker.classNames.multiple_months);
+	if (dayPicker.showWeekNumber) classNames.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 _a;
+		return __assign(__assign({}, attrs), (_a = {}, _a[key] = initialProps[key], _a));
+	}, {});
+	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: classNames.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);
+	}) }) }));
+}
+/** Provide the value for all the context providers. */
 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 }) }) }) }) }) }) });
-}
+	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 }) })
+				})
+			})
+		}) })
+	});
+}
+/**
+* DayPicker render a date picker component to let users pick dates from a
+* calendar. See http://react-day-picker.js.org for updated documentation and
+* examples.
+*
+* ### Customization
+*
+* DayPicker offers different customization props. For example,
+*
+* - show multiple months using `numberOfMonths`
+* - display a dropdown to navigate the months via `captionLayout`
+* - display the week numbers with `showWeekNumbers`
+* - disable or hide days with `disabled` or `hidden`
+*
+* ### Controlling the months
+*
+* Change the initially displayed month using the `defaultMonth` prop. The
+* displayed months are controlled by DayPicker and stored in its internal
+* state. To control the months yourself, use `month` instead of `defaultMonth`
+* and use the `onMonthChange` event to set it.
+*
+* To limit the months the user can navigate to, use
+* `fromDate`/`fromMonth`/`fromYear` or `toDate`/`toMonth`/`toYear`.
+*
+* ### Selection modes
+*
+* DayPicker supports different selection mode that can be toggled using the
+* `mode` prop:
+*
+* - `mode="single"`: only one day can be selected. Use `required` to make the
+*   selection required. Use the `onSelect` event handler to get the selected
+*   days.
+* - `mode="multiple"`: users can select one or more days. Limit the amount of
+*   days that can be selected with the `min` or the `max` props.
+* - `mode="range"`: users can select a range of days. Limit the amount of days
+*   in the range with the `min` or the `max` props.
+* - `mode="default"` (default): the built-in selections are disabled. Implement
+*   your own selection mode with `onDayClick`.
+*
+* The selection modes should cover the most common use cases. In case you
+* need a more refined way of selecting days, use `mode="default"`. Use the
+* `selected` props and add the day event handlers to add/remove days from the
+* selection.
+*
+* ### Modifiers
+*
+* A _modifier_ represents different styles or states for the days displayed in
+* the calendar (like "selected" or "disabled"). Define custom modifiers using
+* the `modifiers` prop.
+*
+* ### Formatters and custom component
+*
+* You can customize how the content is displayed in the date picker by using
+* either the formatters or replacing the internal components.
+*
+* For the most common cases you want to use the `formatters` prop to change how
+* the content is formatted in the calendar. Use the `components` prop to
+* replace the internal components, like the navigation icons.
+*
+* ### Styling
+*
+* DayPicker comes with a default, basic style in `react-day-picker/style` – use
+* it as template for your own style.
+*
+* If you are using CSS modules, pass the imported styles object the
+* `classNames` props.
+*
+* You can also style the elements via inline styles using the `styles` prop.
+*
+* ### Form fields
+*
+* If you need to bind the date picker to a form field, you can use the
+* `useInput` hooks for a basic behavior. See the `useInput` source as an
+* example to bind the date picker with form fields.
+*
+* ### Localization
+*
+* To localize DayPicker, import the locale from `date-fns` package and use the
+* `locale` prop.
+*
+* For example, to use Spanish locale:
+*
+* ```
+* import { es } from 'date-fns/locale';
+* <DayPicker locale={es} />
+* ```
+*/
 function DayPicker(props) {
-  return jsx(RootProvider, __assign({}, props, { children: jsx(Root, { initialProps: props }) }));
-}
-export {
-  Button,
-  Caption,
-  CaptionDropdowns,
-  CaptionLabel,
-  CaptionNavigation,
-  Day,
-  DayContent,
-  DayPicker,
-  DayPickerContext,
-  DayPickerProvider,
-  Dropdown,
-  FocusContext,
-  FocusProvider,
-  Footer,
-  Head,
-  HeadRow,
-  IconDropdown,
-  IconLeft,
-  IconRight,
-  InternalModifier,
-  Months,
-  NavigationContext,
-  NavigationProvider,
-  RootProvider,
-  Row,
-  SelectMultipleContext,
-  SelectMultipleProvider,
-  SelectMultipleProviderInternal,
-  SelectRangeContext,
-  SelectRangeProvider,
-  SelectRangeProviderInternal,
-  SelectSingleContext,
-  SelectSingleProvider,
-  SelectSingleProviderInternal,
-  WeekNumber,
-  addToRange,
-  isDateAfterType,
-  isDateBeforeType,
-  isDateInterval,
-  isDateRange,
-  isDayOfWeekType,
-  isDayPickerMultiple,
-  isDayPickerRange,
-  isDayPickerSingle,
-  isMatch,
-  useActiveModifiers,
-  useDayPicker,
-  useDayRender,
-  useFocusContext,
-  useNavigation,
-  useSelectMultiple,
-  useSelectRange,
-  useSelectSingle
-};
+	return jsx(RootProvider, __assign({}, props, { children: jsx(Root, { initialProps: props }) }));
+}
+//#endregion
+export { DayPicker, useNavigation };