react-day-picker 8.0.7 → 8.1.0

package/dist/index.esm.js

@@ -1,4 +1,5 @@
-import React, { useLayoutEffect, useEffect, useState, createContext, useContext, forwardRef, useRef } from 'react';
+import * as React from 'react';
+import React__default, { createContext, useContext, useState, forwardRef, useEffect, useRef } from 'react';
 import enUS from 'date-fns/locale/en-US';
 import format from 'date-fns/format';
 import endOfMonth from 'date-fns/endOfMonth';
@@ -26,7 +27,7 @@ import getWeeksInMonth from 'date-fns/getWeeksInMonth';
 import getWeek from 'date-fns/getWeek';
 import parse from 'date-fns/parse';
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -74,147 +75,6 @@ function __spreadArray(to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 }
 
-function canUseDOM() {
-  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 = /*#__PURE__*/canUseDOM() ? useLayoutEffect : useEffect;
-
-/*
- * Welcome to @reach/auto-id!
-
- * Let's see if we can make sense of why this hook exists and its
- * implementation.
- *
- * Some background:
- *   1. Accessibility APIs rely heavily on element IDs
- *   2. Requiring developers to put IDs on every element in Reach UI is both
- *      cumbersome and error-prone
- *   3. With a component model, we can generate IDs for them!
- *
- * Solution 1: Generate random IDs.
- *
- * This works great as long as you don't server render your app. When React (in
- * the client) tries to reuse the markup from the server, the IDs won't match
- * and React will then recreate the entire DOM tree.
- *
- * Solution 2: Increment an integer
- *
- * This sounds great. Since we're rendering the exact same tree on the server
- * and client, we can increment a counter and get a deterministic result between
- * client and server. Also, JS integers can go up to nine-quadrillion. I'm
- * pretty sure the tab will be closed before an app never needs
- * 10 quadrillion IDs!
- *
- * Problem solved, right?
- *
- * Ah, but there's a catch! React's concurrent rendering makes this approach
- * non-deterministic. While the client and server will end up with the same
- * elements in the end, depending on suspense boundaries (and possibly some user
- * input during the initial render) the incrementing integers won't always match
- * up.
- *
- * Solution 3: Don't use IDs at all on the server; patch after first render.
- *
- * What we've done here is solution 2 with some tricks. With this approach, the
- * ID returned is an empty string on the first render. This way the server and
- * client have the same markup no matter how wild the concurrent rendering may
- * have gotten.
- *
- * After the render, we patch up the components with an incremented ID. This
- * causes a double render on any components with `useId`. Shouldn't be a problem
- * since the components using this hook should be small, and we're only updating
- * the ID attribute on the DOM, nothing big is happening.
- *
- * It doesn't have to be an incremented number, though--we could do generate
- * random strings instead, but incrementing a number is probably the cheapest
- * thing we can do.
- *
- * Additionally, we only do this patchup on the very first client render ever.
- * Any calls to `useId` that happen dynamically in the client will be
- * populated immediately with a value. So, we only get the double render after
- * server hydration and never again, SO BACK OFF ALRIGHT?
- */
-var serverHandoffComplete = false;
-var id = 0;
-
-var genId = function genId() {
-  return ++id;
-};
-/**
- * useId
- *
- * Autogenerate IDs to facilitate WAI-ARIA and server rendering.
- *
- * Note: The returned ID will initially be `null` and will update after a
- * component mounts. Users may need to supply their own ID if they need
- * consistent values for SSR.
- *
- * @see Docs https://reach.tech/auto-id
- */
-
-
-function useId(idFromProps) {
-  /*
-   * If this instance isn't part of the initial render, we don't have to do the
-   * double render/patch-up dance. We can just generate the ID and return it.
-   */
-  var initialId = idFromProps || (serverHandoffComplete ? genId() : null);
-
-  var _React$useState = useState(initialId),
-      id = _React$useState[0],
-      setId = _React$useState[1];
-
-  useIsomorphicLayoutEffect(function () {
-    if (id === null) {
-      /*
-       * Patch the ID after render. We do this in `useLayoutEffect` to avoid any
-       * rendering flicker, though it'll make the first render slower (unlikely
-       * to matter, but you're welcome to measure your app and let us know if
-       * it's a problem).
-       */
-      setId(genId());
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, []);
-  useEffect(function () {
-    if (serverHandoffComplete === false) {
-      /*
-       * Flag all future uses of `useId` to skip the update dance. This is in
-       * `useEffect` because it goes after `useLayoutEffect`, ensuring we don't
-       * accidentally bail out of the patch-up dance prematurely.
-       */
-      serverHandoffComplete = true;
-    }
-  }, []);
-  return id != null ? String(id) : undefined;
-}
-
 /**
  * The name of the default CSS classes.
  */
@@ -425,16 +285,15 @@ function parseFromToProps(props) {
 }
 
 /**
- * The DayPicker Context shares the props passed to DayPicker within internal
+ * 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.
  *
- * Developers may access this context from the [[useDayPicker]] hook when
- * using custom components.
+ * Access to this context from the {@link useDayPicker} hook.
  */
 var DayPickerContext = createContext(undefined);
 /**
- * The provider for the [[DayPickerContext]], assigning the defaults from the
+ * The provider for the {@link DayPickerContext}, assigning the defaults from the
  * initial DayPicker props.
  */
 function DayPickerProvider(props) {
@@ -497,14 +356,14 @@ function DayPickerProvider(props) {
         today: (_d = initialProps.today) !== null && _d !== void 0 ? _d : defaults.today,
         weekStartsOn: initialProps.weekStartsOn
     };
-    return (React.createElement(DayPickerContext.Provider, { value: value }, props.children));
+    return (React__default.createElement(DayPickerContext.Provider, { value: value }, props.children));
 }
 
 /**
- * Hook to access the [[DayPickerContext]].
+ * Hook to access the {@link DayPickerContextValue}.
  *
- * To use this hook make sure to wrap the components with a one
- * [[DayPickerProvider]].
+ * Use the DayPicker context to access to the props passed to DayPicker inside
+ * internal or custom components.
  */
 function useDayPicker() {
     var context = useContext(DayPickerContext);
@@ -517,15 +376,15 @@ function useDayPicker() {
 /** 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, formatCaption = _a.formatters.formatCaption;
-    return (React.createElement("h2", { className: classNames.caption_label, style: styles.caption_label, "aria-live": "polite", "aria-atomic": "true", id: props.id }, formatCaption(props.displayMonth, { locale: locale })));
+    return (React__default.createElement("h2", { className: classNames.caption_label, style: styles.caption_label, "aria-live": "polite", "aria-atomic": "true", id: props.id }, formatCaption(props.displayMonth, { locale: locale })));
 }
 
 /**
  * Render the icon in the styled drop-down.
  */
 function IconDropdown(props) {
-    return (React.createElement("svg", __assign({ width: "8px", height: "8px", viewBox: "0 0 120 120", "data-testid": "iconDropdown" }, props),
-        React.createElement("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 (React__default.createElement("svg", __assign({ width: "8px", height: "8px", viewBox: "0 0 120 120", "data-testid": "iconDropdown" }, props),
+        React__default.createElement("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" })));
 }
 
 /**
@@ -537,12 +396,12 @@ function Dropdown(props) {
     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 (React.createElement("div", { className: className, style: style },
-        React.createElement("span", { className: dayPicker.classNames.vhidden }, props['aria-label']),
-        React.createElement("select", { "aria-label": props['aria-label'], className: dayPicker.classNames.dropdown, style: dayPicker.styles.dropdown, value: value, onChange: onChange }, children),
-        React.createElement("div", { className: dayPicker.classNames.caption_label, style: dayPicker.styles.caption_label, "aria-hidden": "true" },
+    return (React__default.createElement("div", { className: className, style: style },
+        React__default.createElement("span", { className: dayPicker.classNames.vhidden }, props['aria-label']),
+        React__default.createElement("select", { "aria-label": props['aria-label'], className: dayPicker.classNames.dropdown, style: dayPicker.styles.dropdown, value: value, onChange: onChange }, children),
+        React__default.createElement("div", { className: dayPicker.classNames.caption_label, style: dayPicker.styles.caption_label, "aria-hidden": "true" },
             caption,
-            React.createElement(IconDropdownComponent, { className: dayPicker.classNames.dropdown_icon, style: dayPicker.styles.dropdown_icon }))));
+            React__default.createElement(IconDropdownComponent, { className: dayPicker.classNames.dropdown_icon, style: dayPicker.styles.dropdown_icon }))));
 }
 
 /** Render the dropdown to navigate between months. */
@@ -551,9 +410,9 @@ function MonthsDropdown(props) {
     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;
     // Dropdown should appear only when both from/toDate is set
     if (!fromDate)
-        return React.createElement(React.Fragment, null);
+        return React__default.createElement(React__default.Fragment, null);
     if (!toDate)
-        return React.createElement(React.Fragment, null);
+        return React__default.createElement(React__default.Fragment, null);
     var dropdownMonths = [];
     if (isSameYear(fromDate, toDate)) {
         // only display the months included in the range
@@ -575,7 +434,7 @@ function MonthsDropdown(props) {
         props.onChange(newMonth);
     };
     var DropdownComponent = (_a = components === null || components === void 0 ? void 0 : components.Dropdown) !== null && _a !== void 0 ? _a : Dropdown;
-    return (React.createElement(DropdownComponent, { "aria-label": labelMonthDropdown(), className: classNames.dropdown_month, style: styles.dropdown_month, onChange: handleChange, value: props.displayMonth.getMonth(), caption: formatMonthCaption(props.displayMonth, { locale: locale }) }, dropdownMonths.map(function (m) { return (React.createElement("option", { key: m.getMonth(), value: m.getMonth() }, formatMonthCaption(m, { locale: locale }))); })));
+    return (React__default.createElement(DropdownComponent, { "aria-label": labelMonthDropdown(), className: classNames.dropdown_month, style: styles.dropdown_month, onChange: handleChange, value: props.displayMonth.getMonth(), caption: formatMonthCaption(props.displayMonth, { locale: locale }) }, dropdownMonths.map(function (m) { return (React__default.createElement("option", { key: m.getMonth(), value: m.getMonth() }, formatMonthCaption(m, { locale: locale }))); })));
 }
 
 /**
@@ -589,9 +448,9 @@ function YearsDropdown(props) {
     var years = [];
     // Dropdown should appear only when both from/toDate is set
     if (!fromDate)
-        return React.createElement(React.Fragment, null);
+        return React__default.createElement(React__default.Fragment, null);
     if (!toDate)
-        return React.createElement(React.Fragment, null);
+        return React__default.createElement(React__default.Fragment, null);
     var fromYear = fromDate.getFullYear();
     var toYear = toDate.getFullYear();
     for (var year = fromYear; year <= toYear; year++) {
@@ -602,7 +461,7 @@ function YearsDropdown(props) {
         props.onChange(newMonth);
     };
     var DropdownComponent = (_a = components === null || components === void 0 ? void 0 : components.Dropdown) !== null && _a !== void 0 ? _a : Dropdown;
-    return (React.createElement(DropdownComponent, { "aria-label": labelYearDropdown(), className: classNames.dropdown_year, style: styles.dropdown_year, onChange: handleChange, value: displayMonth.getFullYear(), caption: formatYearCaption(displayMonth, { locale: locale }) }, years.map(function (year) { return (React.createElement("option", { key: year.getFullYear(), value: year.getFullYear() }, formatYearCaption(year, { locale: locale }))); })));
+    return (React__default.createElement(DropdownComponent, { "aria-label": labelYearDropdown(), className: classNames.dropdown_year, style: styles.dropdown_year, onChange: handleChange, value: displayMonth.getFullYear(), caption: formatYearCaption(displayMonth, { locale: locale }) }, years.map(function (year) { return (React__default.createElement("option", { key: year.getFullYear(), value: year.getFullYear() }, formatYearCaption(year, { locale: locale }))); })));
 }
 
 /**
@@ -727,12 +586,11 @@ function getPreviousMonth(startingMonth, options) {
 }
 
 /**
- * The Navigation context shares details about the months being navigated in DayPicker.
- *
- * Access this context from the [[useNavigation]] hook.
+ * The Navigation context shares details and methods to navigate the months in DayPicker.
+ * Access this context from the {@link useNavigation} hook.
  */
 var NavigationContext = createContext(undefined);
-/** Provides the values for the [[NavigationContext]]. */
+/** Provides the values for the {@link NavigationContext}. */
 function NavigationProvider(props) {
     var dayPicker = useDayPicker();
     var _a = useNavigationState(), currentMonth = _a[0], goToMonth = _a[1];
@@ -764,10 +622,15 @@ function NavigationProvider(props) {
         nextMonth: nextMonth,
         isDateDisplayed: isDateDisplayed
     };
-    return (React.createElement(NavigationContext.Provider, { value: value }, props.children));
+    return (React__default.createElement(NavigationContext.Provider, { value: value }, props.children));
 }
 
-/** Hook to access the [[NavigationContext]]. */
+/**
+ * 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) {
@@ -788,27 +651,27 @@ function CaptionDropdowns(props) {
         onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(newMonth);
     };
     var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
-    var captionLabel = (React.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
-    return (React.createElement("div", { className: classNames.caption_dropdowns, style: styles.caption_dropdowns },
-        React.createElement("div", { className: classNames.vhidden }, captionLabel),
-        React.createElement(MonthsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth }),
-        React.createElement(YearsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth })));
+    var captionLabel = (React__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
+    return (React__default.createElement("div", { className: classNames.caption_dropdowns, style: styles.caption_dropdowns },
+        React__default.createElement("div", { className: classNames.vhidden }, captionLabel),
+        React__default.createElement(MonthsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth }),
+        React__default.createElement(YearsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth })));
 }
 
 /**
  * Render the "previous month" button in the navigation.
  */
 function IconLeft(props) {
-    return (React.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
-        React.createElement("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 (React__default.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
+        React__default.createElement("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 (React.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
-        React.createElement("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 (React__default.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
+        React__default.createElement("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" })));
 }
 
 /**
@@ -825,7 +688,7 @@ var Button = forwardRef(function (props, ref) {
     if (props.style) {
         Object.assign(style, props.style);
     }
-    return (React.createElement("button", __assign({}, props, { ref: ref, type: "button", className: className, style: style })));
+    return (React__default.createElement("button", __assign({}, props, { ref: ref, type: "button", className: className, style: style })));
 });
 
 /** A component rendering the navigation buttons or the drop-downs. */
@@ -833,7 +696,7 @@ function Navigation(props) {
     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 React.createElement(React.Fragment, null);
+        return React__default.createElement(React__default.Fragment, null);
     }
     var previousLabel = labelPrevious(props.previousMonth, { locale: locale });
     var previousClassName = [
@@ -847,9 +710,9 @@ function Navigation(props) {
     ].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 (React.createElement("div", { className: classNames.nav, style: styles.nav },
-        !props.hidePrevious && (React.createElement(Button, { "aria-label": previousLabel, className: previousClassName, style: styles.nav_button_previous, "aria-disabled": !props.previousMonth, onClick: props.onPreviousClick }, dir === 'rtl' ? (React.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })))),
-        !props.hideNext && (React.createElement(Button, { "aria-label": nextLabel, className: nextClassName, style: styles.nav_button_next, "aria-disabled": !props.nextMonth, onClick: props.onNextClick }, dir === 'rtl' ? (React.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon }))))));
+    return (React__default.createElement("div", { className: classNames.nav, style: styles.nav },
+        !props.hidePrevious && (React__default.createElement(Button, { "aria-label": previousLabel, className: previousClassName, style: styles.nav_button_previous, disabled: !props.previousMonth, onClick: props.onPreviousClick }, dir === 'rtl' ? (React__default.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React__default.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })))),
+        !props.hideNext && (React__default.createElement(Button, { "aria-label": nextLabel, className: nextClassName, style: styles.nav_button_next, disabled: !props.nextMonth, onClick: props.onNextClick }, dir === 'rtl' ? (React__default.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React__default.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon }))))));
 }
 
 /**
@@ -883,15 +746,15 @@ function CaptionNavigation(props) {
         onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(nextMonth);
     };
     var CaptionLabelComponent = (_b = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _b !== void 0 ? _b : CaptionLabel;
-    var captionLabel = (React.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
-    return (React.createElement(React.Fragment, null,
+    var captionLabel = (React__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
+    return (React__default.createElement(React__default.Fragment, null,
         captionLabel,
-        React.createElement(Navigation, { displayMonth: props.displayMonth, hideNext: hideNext, hidePrevious: hidePrevious, nextMonth: nextMonth, previousMonth: previousMonth, onPreviousClick: handlePreviousClick, onNextClick: handleNextClick })));
+        React__default.createElement(Navigation, { displayMonth: props.displayMonth, hideNext: hideNext, hidePrevious: hidePrevious, nextMonth: nextMonth, previousMonth: previousMonth, onPreviousClick: handlePreviousClick, onNextClick: handleNextClick })));
 }
 
 /**
  * Render the caption of a month. The caption has a different layout when
- * setting the [[DayPickerProps.captionLayout]] prop.
+ * setting the {@link DayPickerBase.captionLayout} prop.
  */
 function Caption(props) {
     var _a;
@@ -899,25 +762,25 @@ function Caption(props) {
     var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
     var caption;
     if (disableNavigation) {
-        caption = (React.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
+        caption = (React__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
     }
     else if (captionLayout === 'dropdown') {
-        caption = (React.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }));
+        caption = (React__default.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }));
     }
     else {
-        caption = (React.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id }));
+        caption = (React__default.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id }));
     }
-    return (React.createElement("div", { className: classNames.caption, style: styles.caption }, caption));
+    return (React__default.createElement("div", { className: classNames.caption, style: styles.caption }, caption));
 }
 
 /** Render the Footer component (empty as default).*/
 function Footer() {
     var _a = useDayPicker(), footer = _a.footer, styles = _a.styles, tfoot = _a.classNames.tfoot;
     if (!footer)
-        return React.createElement(React.Fragment, null);
-    return (React.createElement("tfoot", { className: tfoot, style: styles.tfoot },
-        React.createElement("tr", null,
-            React.createElement("td", { colSpan: 8 }, footer))));
+        return React__default.createElement(React__default.Fragment, null);
+    return (React__default.createElement("tfoot", { className: tfoot, style: styles.tfoot },
+        React__default.createElement("tr", null,
+            React__default.createElement("td", { colSpan: 8 }, footer))));
 }
 
 /**
@@ -942,12 +805,12 @@ weekStartsOn) {
 function Head() {
     var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles, showWeekNumber = _a.showWeekNumber, locale = _a.locale, weekStartsOn = _a.weekStartsOn, formatWeekdayName = _a.formatters.formatWeekdayName, labelWeekday = _a.labels.labelWeekday;
     var weekdays = getWeekdays(locale, weekStartsOn);
-    return (React.createElement("thead", { style: styles.head, className: classNames.head },
-        React.createElement("tr", { style: styles.head_row, className: classNames.head_row },
-            showWeekNumber && (React.createElement("th", { scope: "col", style: styles.head_cell, className: classNames.head_cell })),
-            weekdays.map(function (weekday, i) { return (React.createElement("th", { key: i, scope: "col", className: classNames.head_cell, style: styles.head_cell },
-                React.createElement("span", { "aria-hidden": true }, formatWeekdayName(weekday, { locale: locale })),
-                React.createElement("span", { className: classNames.vhidden }, labelWeekday(weekday, { locale: locale })))); }))));
+    return (React__default.createElement("thead", { style: styles.head, className: classNames.head },
+        React__default.createElement("tr", { style: styles.head_row, className: classNames.head_row },
+            showWeekNumber && (React__default.createElement("th", { scope: "col", style: styles.head_cell, className: classNames.head_cell })),
+            weekdays.map(function (weekday, i) { return (React__default.createElement("th", { key: i, scope: "col", className: classNames.head_cell, style: styles.head_cell },
+                React__default.createElement("span", { "aria-hidden": true }, formatWeekdayName(weekday, { locale: locale })),
+                React__default.createElement("span", { className: classNames.vhidden }, labelWeekday(weekday, { locale: locale })))); }))));
 }
 
 /**
@@ -955,12 +818,12 @@ function Head() {
  */
 function DayContent(props) {
     var _a = useDayPicker(), locale = _a.locale, classNames = _a.classNames, styles = _a.styles, labelDay = _a.labels.labelDay, formatDay = _a.formatters.formatDay;
-    return (React.createElement(React.Fragment, null,
-        React.createElement("span", { "aria-hidden": "true" }, formatDay(props.date, { locale: locale })),
-        React.createElement("span", { className: classNames.vhidden, style: styles.vhidden }, labelDay(props.date, props.activeModifiers, { locale: locale }))));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("span", { "aria-hidden": "true" }, formatDay(props.date, { locale: locale })),
+        React__default.createElement("span", { className: classNames.vhidden, style: styles.vhidden }, labelDay(props.date, props.activeModifiers, { locale: locale }))));
 }
 
-/** Returns true when the props are of type [[DayPickerMultiple]]. */
+/** Returns true when the props are of type {@link DayPickerMultipleProps}. */
 function isDayPickerMultiple(props) {
     return props.mode === 'multiple';
 }
@@ -969,10 +832,10 @@ function isDayPickerMultiple(props) {
  * The SelectMultiple context shares details about the selected days when in
  * multiple selection mode.
  *
- * Access this context from the [[useSelectMultiple]] hook.
+ * Access this context from the {@link useSelectMultiple} hook.
  */
 var SelectMultipleContext = createContext(undefined);
-/** Provides the values for the [[SelectMultipleContext]]. */
+/** Provides the values for the {@link SelectMultipleContext}. */
 function SelectMultipleProvider(props) {
     if (!isDayPickerMultiple(props.initialProps)) {
         var emptyContextValue = {
@@ -981,9 +844,9 @@ function SelectMultipleProvider(props) {
                 disabled: []
             }
         };
-        return (React.createElement(SelectMultipleContext.Provider, { value: emptyContextValue }, props.children));
+        return (React__default.createElement(SelectMultipleContext.Provider, { value: emptyContextValue }, props.children));
     }
-    return (React.createElement(SelectMultipleProviderInternal, { initialProps: props.initialProps, children: props.children }));
+    return (React__default.createElement(SelectMultipleProviderInternal, { initialProps: props.initialProps, children: props.children }));
 }
 function SelectMultipleProviderInternal(_a) {
     var initialProps = _a.initialProps, children = _a.children;
@@ -1028,10 +891,14 @@ function SelectMultipleProviderInternal(_a) {
         onDayClick: onDayClick,
         modifiers: modifiers
     };
-    return (React.createElement(SelectMultipleContext.Provider, { value: contextValue }, children));
+    return (React__default.createElement(SelectMultipleContext.Provider, { value: contextValue }, children));
 }
 
-/** Hook to access the [[SelectMultipleContext]]. */
+/**
+ * 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) {
@@ -1040,7 +907,7 @@ function useSelectMultiple() {
     return context;
 }
 
-/** Returns true when the props are of type [[DayPickerRange]]. */
+/** Returns true when the props are of type {@link DayPickerRangeProps}. */
 function isDayPickerRange(props) {
     return props.mode === 'range';
 }
@@ -1084,10 +951,10 @@ function addToRange(day, range) {
  * The SelectRange context shares details about the selected days when in
  * range selection mode.
  *
- * Access this context from the [[useSelectRange]] hook.
+ * Access this context from the {@link useSelectRange} hook.
  */
 var SelectRangeContext = createContext(undefined);
-/** Provides the values for the [[SelectRangeProvider]]. */
+/** Provides the values for the {@link SelectRangeProvider}. */
 function SelectRangeProvider(props) {
     if (!isDayPickerRange(props.initialProps)) {
         var emptyContextValue = {
@@ -1099,9 +966,9 @@ function SelectRangeProvider(props) {
                 disabled: []
             }
         };
-        return (React.createElement(SelectRangeContext.Provider, { value: emptyContextValue }, props.children));
+        return (React__default.createElement(SelectRangeContext.Provider, { value: emptyContextValue }, props.children));
     }
-    return (React.createElement(SelectRangeProviderInternal, { initialProps: props.initialProps, children: props.children }));
+    return (React__default.createElement(SelectRangeProviderInternal, { initialProps: props.initialProps, children: props.children }));
 }
 function SelectRangeProviderInternal(_a) {
     var initialProps = _a.initialProps, children = _a.children;
@@ -1162,10 +1029,14 @@ function SelectRangeProviderInternal(_a) {
                     differenceInCalendarDays(date, selectedFrom) >= max));
         });
     }
-    return (React.createElement(SelectRangeContext.Provider, { value: { selected: selected, onDayClick: onDayClick, modifiers: modifiers } }, children));
+    return (React__default.createElement(SelectRangeContext.Provider, { value: { selected: selected, onDayClick: onDayClick, modifiers: modifiers } }, children));
 }
 
-/** Hook to access the [[SelectRangeContext]]. */
+/**
+ * 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) {
@@ -1218,7 +1089,7 @@ var InternalModifier;
 })(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 [[InternalModifiers]] from the DayPicker and select contexts. */
+/** Return the {@link InternalModifiers} from the DayPicker and select contexts. */
 function getInternalModifiers(dayPicker, selectMultiple, selectRange) {
     var _a;
     var internalModifiers = (_a = {},
@@ -1249,9 +1120,9 @@ function getInternalModifiers(dayPicker, selectMultiple, selectRange) {
     return internalModifiers;
 }
 
-/** The Modifiers context store the modifiers used in DayPicker. To access the value of this context, use [[useModifiers]]. */
+/** The Modifiers context store the modifiers used in DayPicker. To access the value of this context, use {@link useModifiers}. */
 var ModifiersContext = createContext(undefined);
-/** Provide the value for the [[ModifiersContext]]. */
+/** Provide the value for the {@link ModifiersContext}. */
 function ModifiersProvider(props) {
     var dayPicker = useDayPicker();
     var selectMultiple = useSelectMultiple();
@@ -1259,13 +1130,16 @@ function ModifiersProvider(props) {
     var internalModifiers = getInternalModifiers(dayPicker, selectMultiple, selectRange);
     var customModifiers = getCustomModifiers(dayPicker.modifiers);
     var modifiers = __assign(__assign({}, internalModifiers), customModifiers);
-    return (React.createElement(ModifiersContext.Provider, { value: modifiers }, props.children));
+    return (React__default.createElement(ModifiersContext.Provider, { value: modifiers }, props.children));
 }
 
 /**
  * Return the modifiers used by DayPicker.
  *
- * Requires to be wrapped into [[ModifiersProvider]]. */
+ * 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) {
@@ -1274,26 +1148,26 @@ function useModifiers() {
     return context;
 }
 
-/** Returns true if `matcher` is of type [[DateInterval]]. */
+/** Returns true if `matcher` is of type {@link DateInterval}. */
 function isDateInterval(matcher) {
     return Boolean(matcher &&
         typeof matcher === 'object' &&
         'before' in matcher &&
         'after' in matcher);
 }
-/** Returns true if `value` is a [[DateRange]] type. */
+/** Returns true if `value` is a {@link DateRange} type. */
 function isDateRange(value) {
     return Boolean(value && typeof value === 'object' && 'from' in value);
 }
-/** Returns true if `value` is of type [[DateAfter]]. */
+/** Returns true if `value` is of type {@link DateAfter}. */
 function isDateAfterType(value) {
     return Boolean(value && typeof value === 'object' && 'after' in value);
 }
-/** Returns true if `value` is of type [[DateBefore]]. */
+/** Returns true if `value` is of type {@link DateBefore}. */
 function isDateBeforeType(value) {
     return Boolean(value && typeof value === 'object' && 'before' in value);
 }
-/** Returns true if `value` is a [[DayOfWeek]] type. */
+/** Returns true if `value` is a {@link DayOfWeek} type. */
 function isDayOfWeekType(value) {
     return Boolean(value && typeof value === 'object' && 'dayOfWeek' in value);
 }
@@ -1437,16 +1311,17 @@ function getInitialFocusTarget(displayMonths, modifiers) {
 /**
  * The Focus context shares details about the focused day for the keyboard
  *
- * Access this context from the [[useFocus]] hook.
+ * Access this context from the {@link useFocusContext} hook.
  */
 var FocusContext = createContext(undefined);
-/** The provider for the [[FocusContext]]. */
+/** 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 weekStartsOn = useDayPicker().weekStartsOn;
     // TODO: cleanup and test obscure code below
     var focusTarget = (focusedDay !== null && focusedDay !== void 0 ? focusedDay : (lastFocused && navigation.isDateDisplayed(lastFocused)))
         ? lastFocused
@@ -1489,14 +1364,14 @@ function FocusProvider(props) {
     var focusStartOfWeek = function () {
         if (!focusedDay)
             return;
-        var dayToFocus = startOfWeek(focusedDay);
+        var dayToFocus = startOfWeek(focusedDay, { weekStartsOn: weekStartsOn });
         navigation.goToDate(dayToFocus, focusedDay);
         focus(dayToFocus);
     };
     var focusEndOfWeek = function () {
         if (!focusedDay)
             return;
-        var dayToFocus = endOfWeek(focusedDay);
+        var dayToFocus = endOfWeek(focusedDay, { weekStartsOn: weekStartsOn });
         navigation.goToDate(dayToFocus, focusedDay);
         focus(dayToFocus);
     };
@@ -1544,10 +1419,15 @@ function FocusProvider(props) {
         focusStartOfWeek: focusStartOfWeek,
         focusEndOfWeek: focusEndOfWeek
     };
-    return (React.createElement(FocusContext.Provider, { value: value }, props.children));
+    return (React__default.createElement(FocusContext.Provider, { value: value }, props.children));
 }
 
-/** Hook to access the [[FocusContext]]. */
+/**
+ * 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) {
@@ -1559,17 +1439,23 @@ function useFocusContext() {
 /**
  * Return the active modifiers for the specified day.
  *
+ * This hook is meant to be used inside internal or custom components.
+ *
  * @param day
- * @param displayMonth The month where the date is displayed. If not the same as
- * `date`, the day is an "outside day".
+ * @param displayMonth
  */
-function useActiveModifiers(day, displayMonth) {
+function useActiveModifiers(day, 
+/**
+ * The month where the date is displayed. If not the same as `date`, the day
+ * is an "outside day".
+ */
+displayMonth) {
     var modifiers = useModifiers();
     var activeModifiers = getActiveModifiers(day, modifiers, displayMonth);
     return activeModifiers;
 }
 
-/** Returns true when the props are of type [[DayPickerSingle]]. */
+/** Returns true when the props are of type {@link DayPickerSingleProps}. */
 function isDayPickerSingle(props) {
     return props.mode === 'single';
 }
@@ -1578,18 +1464,18 @@ function isDayPickerSingle(props) {
  * The SelectSingle context shares details about the selected days when in
  * single selection mode.
  *
- * Access this context from the [[useSelectSingle]] hook.
+ * Access this context from the {@link useSelectSingle} hook.
  */
 var SelectSingleContext = createContext(undefined);
-/** Provides the values for the [[SelectSingleProvider]]. */
+/** Provides the values for the {@link SelectSingleProvider}. */
 function SelectSingleProvider(props) {
     if (!isDayPickerSingle(props.initialProps)) {
         var emptyContextValue = {
             selected: undefined
         };
-        return (React.createElement(SelectSingleContext.Provider, { value: emptyContextValue }, props.children));
+        return (React__default.createElement(SelectSingleContext.Provider, { value: emptyContextValue }, props.children));
     }
-    return (React.createElement(SelectSingleProviderInternal, { initialProps: props.initialProps, children: props.children }));
+    return (React__default.createElement(SelectSingleProviderInternal, { initialProps: props.initialProps, children: props.children }));
 }
 function SelectSingleProviderInternal(_a) {
     var initialProps = _a.initialProps, children = _a.children;
@@ -1606,10 +1492,14 @@ function SelectSingleProviderInternal(_a) {
         selected: initialProps.selected,
         onDayClick: onDayClick
     };
-    return (React.createElement(SelectSingleContext.Provider, { value: contextValue }, children));
+    return (React__default.createElement(SelectSingleContext.Provider, { value: contextValue }, children));
 }
 
-/** Hook to access the [[SelectSingleContext]]. */
+/**
+ * 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) {
@@ -1633,9 +1523,9 @@ function useSelectSingle() {
  *
  * ### Usage
  *
- * Use this hook to customize the behavior of the [[Day]] component. Create a
+ * 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 [[Day]] can be a good starting point.
+ * The source of {@link Day} can be a good starting point.
  *
  */
 function useDayEventHandlers(date, activeModifiers) {
@@ -1758,9 +1648,11 @@ function useDayEventHandlers(date, activeModifiers) {
 }
 
 /**
- * Return the current selected days when DayPicker is in selection mode.
+ * 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.
  *
- * Days selected by the custom selection mode are not returned.
  */
 function useSelectedDays() {
     var dayPicker = useDayPicker();
@@ -1815,25 +1707,18 @@ function getDayStyle(dayPicker, activeModifiers) {
 }
 
 /**
- * Return props and data used to render the [[Day]] component.
+ * 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.
- *
- * Each Day in DayPicker should render one of the following, according to the return
- * value:
- *
- * - an empty `React.Fragment`, to render if `isHidden` is true
- * - a `button` element, when the day is interactive, e.g. is selectable
- * - a `div` element, whe the day is not interactive
- *
- * @param day The date to render
- * @param displayMonth The month where the date is displayed (if not the same as
- * `date`, it means it is an "outside" day)
- * @param buttonRef A ref to the button element that will be target of focus
- * when rendered (if required).
  */
-function useDayRender(day, displayMonth, buttonRef) {
+function useDayRender(
+/** The date to render. */
+day, 
+/** The month where the date is displayed (if not the same as `date`, it means it is an "outside" day). */
+displayMonth, 
+/** A ref to the button element that will be target of focus when rendered (if required). */
+buttonRef) {
     var _a;
     var _b, _c;
     var dayPicker = useDayPicker();
@@ -1866,14 +1751,14 @@ function useDayRender(day, displayMonth, buttonRef) {
     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 = (React.createElement(DayContentComponent, { date: day, displayMonth: displayMonth, activeModifiers: activeModifiers }));
+    var children = (React__default.createElement(DayContentComponent, { date: day, displayMonth: displayMonth, activeModifiers: activeModifiers }));
     var divProps = {
         style: style,
         className: className,
         children: children
     };
     var isFocusTarget = Boolean(focusContext.focusTarget && isSameDay(focusContext.focusTarget, day));
-    var buttonProps = __assign(__assign(__assign({}, divProps), (_a = {}, _a['aria-disabled'] = activeModifiers.disabled, _a['aria-pressed'] = activeModifiers.selected, _a.tabIndex = isFocusTarget ? 0 : -1, _a)), eventHandlers);
+    var buttonProps = __assign(__assign(__assign({}, divProps), (_a = { disabled: activeModifiers.disabled }, _a['aria-pressed'] = activeModifiers.selected, _a.tabIndex = isFocusTarget ? 0 : -1, _a)), eventHandlers);
     var dayRender = {
         isButton: isButton,
         isHidden: isHidden,
@@ -1893,12 +1778,12 @@ function Day(props) {
     var buttonRef = useRef(null);
     var dayRender = useDayRender(props.date, props.displayMonth, buttonRef);
     if (dayRender.isHidden) {
-        return React.createElement(React.Fragment, null);
+        return React__default.createElement(React__default.Fragment, null);
     }
     if (!dayRender.isButton) {
-        return React.createElement("div", __assign({}, dayRender.divProps));
+        return React__default.createElement("div", __assign({}, dayRender.divProps));
     }
-    return React.createElement(Button, __assign({ ref: buttonRef }, dayRender.buttonProps));
+    return React__default.createElement(Button, __assign({ ref: buttonRef }, dayRender.buttonProps));
 }
 
 /**
@@ -1910,13 +1795,13 @@ function WeekNumber(props) {
     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: locale });
     if (!onWeekNumberClick) {
-        return (React.createElement("span", { className: classNames.weeknumber, style: styles.weeknumber }, content));
+        return (React__default.createElement("span", { className: classNames.weeknumber, style: styles.weeknumber }, content));
     }
     var label = labelWeekNumber(Number(weekNumber), { locale: locale });
     var handleClick = function (e) {
         onWeekNumberClick(weekNumber, dates, e);
     };
-    return (React.createElement(Button, { "aria-label": label, className: classNames.weeknumber, style: styles.weeknumber, onClick: handleClick }, content));
+    return (React__default.createElement(Button, { "aria-label": label, className: classNames.weeknumber, style: styles.weeknumber, onClick: handleClick }, content));
 }
 
 /** Render a row in the calendar, with the days and the week number. */
@@ -1927,13 +1812,13 @@ function Row(props) {
     var WeeknumberComponent = (_b = components === null || components === void 0 ? void 0 : components.WeekNumber) !== null && _b !== void 0 ? _b : WeekNumber;
     var weekNumberCell;
     if (showWeekNumber) {
-        weekNumberCell = (React.createElement("td", { className: classNames.cell, style: styles.cell },
-            React.createElement(WeeknumberComponent, { number: props.weekNumber, dates: props.dates })));
+        weekNumberCell = (React__default.createElement("td", { className: classNames.cell, style: styles.cell },
+            React__default.createElement(WeeknumberComponent, { number: props.weekNumber, dates: props.dates })));
     }
-    return (React.createElement("tr", { className: classNames.row, style: styles.row },
+    return (React__default.createElement("tr", { className: classNames.row, style: styles.row },
         weekNumberCell,
-        props.dates.map(function (date) { return (React.createElement("td", { className: classNames.cell, style: styles.cell, key: getUnixTime(date) },
-            React.createElement(DayComponent, { displayMonth: props.displayMonth, date: date }))); })));
+        props.dates.map(function (date) { return (React__default.createElement("td", { className: classNames.cell, style: styles.cell, key: getUnixTime(date) },
+            React__default.createElement(DayComponent, { displayMonth: props.displayMonth, date: date }))); })));
 }
 
 /** Return the weeks between two dates.  */
@@ -1995,10 +1880,87 @@ function Table(props) {
     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 (React.createElement("table", { className: classNames.table, style: styles.table, role: "grid", "aria-labelledby": props['aria-labelledby'] },
-        !hideHead && React.createElement(HeadComponent, null),
-        React.createElement("tbody", { className: classNames.tbody, style: styles.tbody }, weeks.map(function (week) { return (React.createElement(RowComponent, { displayMonth: props.displayMonth, key: week.weekNumber, dates: week.dates, weekNumber: week.weekNumber })); })),
-        React.createElement(FooterComponent, null)));
+    return (React__default.createElement("table", { className: classNames.table, style: styles.table, role: "grid", "aria-labelledby": props['aria-labelledby'] },
+        !hideHead && React__default.createElement(HeadComponent, null),
+        React__default.createElement("tbody", { className: classNames.tbody, style: styles.tbody }, weeks.map(function (week) { return (React__default.createElement(RowComponent, { displayMonth: props.displayMonth, key: week.weekNumber, dates: week.dates, weekNumber: week.weekNumber })); })),
+        React__default.createElement(FooterComponent, null)));
+}
+
+/*
+The MIT License (MIT)
+
+Copyright (c) 2018-present, React Training LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+function canUseDOM() {
+    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()
+    ? React.useLayoutEffect
+    : React.useEffect;
+var serverHandoffComplete = false;
+var id = 0;
+function genId() {
+    return "react-day-picker-".concat(++id);
+}
+function useId(providedId) {
+    // TODO: Remove error flag when updating internal deps to React 18. None of
+    // our tricks will play well with concurrent rendering anyway.
+    var _a;
+    // If this instance isn't part of the initial render, we don't have to do the
+    // double render/patch-up dance. We can just generate the ID and return it.
+    var initialId = providedId !== null && providedId !== void 0 ? providedId : (serverHandoffComplete ? genId() : null);
+    var _b = React.useState(initialId), id = _b[0], setId = _b[1];
+    useIsomorphicLayoutEffect(function () {
+        if (id === null) {
+            // Patch the ID after render. We do this in `useLayoutEffect` to avoid any
+            // rendering flicker, though it'll make the first render slower (unlikely
+            // to matter, but you're welcome to measure your app and let us know if
+            // it's a problem).
+            setId(genId());
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    React.useEffect(function () {
+        if (serverHandoffComplete === false) {
+            // Flag all future uses of `useId` to skip the update dance. This is in
+            // `useEffect` because it goes after `useLayoutEffect`, ensuring we don't
+            // accidentally bail out of the patch-up dance prematurely.
+            serverHandoffComplete = true;
+        }
+    }, []);
+    return (_a = providedId !== null && providedId !== void 0 ? providedId : id) !== null && _a !== void 0 ? _a : undefined;
 }
 
 /** Render a month. */
@@ -2030,9 +1992,9 @@ function Month(props) {
         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 (React.createElement("div", { key: props.displayIndex, className: className.join(' '), style: style },
-        React.createElement(CaptionComponent, { id: captionId, displayMonth: props.displayMonth }),
-        React.createElement(Table, { "aria-labelledby": captionId, displayMonth: props.displayMonth })));
+    return (React__default.createElement("div", { key: props.displayIndex, className: className.join(' '), style: style },
+        React__default.createElement(CaptionComponent, { id: captionId, displayMonth: props.displayMonth }),
+        React__default.createElement(Table, { "aria-labelledby": captionId, displayMonth: props.displayMonth })));
 }
 
 /** Render the container with the months according to the number of months to display. */
@@ -2068,25 +2030,112 @@ function Root() {
         classNames.push(dayPicker.classNames.with_weeknumber);
     }
     var style = __assign(__assign({}, dayPicker.styles.root), dayPicker.style);
-    return (React.createElement("div", { className: classNames.join(' '), style: style, dir: dayPicker.dir },
-        React.createElement("div", { className: dayPicker.classNames.months, style: dayPicker.styles.months }, navigation.displayMonths.map(function (month, i) { return (React.createElement(Month, { key: i, displayIndex: i, displayMonth: month })); }))));
+    return (React__default.createElement("div", { className: classNames.join(' '), style: style, dir: dayPicker.dir },
+        React__default.createElement("div", { className: dayPicker.classNames.months, style: dayPicker.styles.months }, navigation.displayMonths.map(function (month, i) { return (React__default.createElement(Month, { key: i, displayIndex: i, displayMonth: month })); }))));
 }
 
 /** Provide the value for all the context providers. */
 function RootProvider(props) {
     var children = props.children, initialProps = __rest(props, ["children"]);
-    return (React.createElement(DayPickerProvider, { initialProps: initialProps },
-        React.createElement(NavigationProvider, null,
-            React.createElement(SelectSingleProvider, { initialProps: initialProps },
-                React.createElement(SelectMultipleProvider, { initialProps: initialProps },
-                    React.createElement(SelectRangeProvider, { initialProps: initialProps },
-                        React.createElement(ModifiersProvider, null,
-                            React.createElement(FocusProvider, null, children))))))));
+    return (React__default.createElement(DayPickerProvider, { initialProps: initialProps },
+        React__default.createElement(NavigationProvider, null,
+            React__default.createElement(SelectSingleProvider, { initialProps: initialProps },
+                React__default.createElement(SelectMultipleProvider, { initialProps: initialProps },
+                    React__default.createElement(SelectRangeProvider, { initialProps: initialProps },
+                        React__default.createElement(ModifiersProvider, null,
+                            React__default.createElement(FocusProvider, null, 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/es';
+ * <DayPicker locale={es} />
+ * ```
+ */
 function DayPicker(props) {
-    return (React.createElement(RootProvider, __assign({}, props),
-        React.createElement(Root, null)));
+    return (React__default.createElement(RootProvider, __assign({}, props),
+        React__default.createElement(Root, null)));
 }
 
 /** @private */
@@ -2186,10 +2235,10 @@ function useInput(options) {
     return { dayPickerProps: dayPickerProps, inputProps: inputProps, reset: reset, setSelected: setSelected };
 }
 
-/** Returns true when the props are of type [[DayPickerDefault]]. */
+/** Returns true when the props are of type {@link DayPickerDefaultProps}. */
 function isDayPickerDefault(props) {
     return props.mode === undefined || props.mode === 'default';
 }
 
-export { Button, Caption, CaptionDropdowns, CaptionLabel, CaptionNavigation, Day, DayContent, DayPicker, DayPickerContext, DayPickerProvider, Dropdown, FocusContext, FocusProvider, Footer, Head, IconDropdown, IconLeft, IconRight, InternalModifier, NavigationContext, NavigationProvider, RootProvider, Row, SelectMultipleContext, SelectMultipleProvider, SelectMultipleProviderInternal, SelectRangeContext, SelectRangeProvider, SelectRangeProviderInternal, SelectSingleContext, SelectSingleProvider, SelectSingleProviderInternal, WeekNumber, isDateAfterType, isDateBeforeType, isDateInterval, isDateRange, isDayOfWeekType, isDayPickerDefault, isDayPickerMultiple, isDayPickerRange, isDayPickerSingle, isMatch, useActiveModifiers, useDayPicker, useDayRender, useFocusContext, useInput, useNavigation, useSelectMultiple, useSelectRange, useSelectSingle };
+export { Button, Caption, CaptionDropdowns, CaptionLabel, CaptionNavigation, Day, DayContent, DayPicker, DayPickerContext, DayPickerProvider, Dropdown, FocusContext, FocusProvider, Footer, Head, IconDropdown, IconLeft, IconRight, InternalModifier, NavigationContext, NavigationProvider, RootProvider, Row, SelectMultipleContext, SelectMultipleProvider, SelectMultipleProviderInternal, SelectRangeContext, SelectRangeProvider, SelectRangeProviderInternal, SelectSingleContext, SelectSingleProvider, SelectSingleProviderInternal, WeekNumber, addToRange, isDateAfterType, isDateBeforeType, isDateInterval, isDateRange, isDayOfWeekType, isDayPickerDefault, isDayPickerMultiple, isDayPickerRange, isDayPickerSingle, isMatch, useActiveModifiers, useDayPicker, useDayRender, useFocusContext, useInput, useNavigation, useSelectMultiple, useSelectRange, useSelectSingle };
 //# sourceMappingURL=index.esm.js.map