react-day-picker 8.3.5 → 8.3.6

package/dist/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var enUS = require('date-fns/locale/en-US');
 var format = require('date-fns/format');
@@ -37,10 +35,7 @@ var getISOWeek = require('date-fns/getISOWeek');
 var getWeek = require('date-fns/getWeek');
 var parse = require('date-fns/parse');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
     var n = Object.create(null);
     if (e) {
         Object.keys(e).forEach(function (k) {
@@ -53,44 +48,11 @@ function _interopNamespace(e) {
             }
         });
     }
-    n["default"] = e;
+    n.default = e;
     return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var enUS__default = /*#__PURE__*/_interopDefaultLegacy(enUS);
-var format__default = /*#__PURE__*/_interopDefaultLegacy(format);
-var endOfMonth__default = /*#__PURE__*/_interopDefaultLegacy(endOfMonth);
-var startOfDay__default = /*#__PURE__*/_interopDefaultLegacy(startOfDay);
-var startOfMonth__default = /*#__PURE__*/_interopDefaultLegacy(startOfMonth);
-var isSameYear__default = /*#__PURE__*/_interopDefaultLegacy(isSameYear);
-var setMonth__default = /*#__PURE__*/_interopDefaultLegacy(setMonth);
-var setYear__default = /*#__PURE__*/_interopDefaultLegacy(setYear);
-var startOfYear__default = /*#__PURE__*/_interopDefaultLegacy(startOfYear);
-var addMonths__default = /*#__PURE__*/_interopDefaultLegacy(addMonths);
-var isBefore__default = /*#__PURE__*/_interopDefaultLegacy(isBefore);
-var isSameMonth__default = /*#__PURE__*/_interopDefaultLegacy(isSameMonth);
-var differenceInCalendarMonths__default = /*#__PURE__*/_interopDefaultLegacy(differenceInCalendarMonths);
-var addDays__default = /*#__PURE__*/_interopDefaultLegacy(addDays);
-var startOfISOWeek__default = /*#__PURE__*/_interopDefaultLegacy(startOfISOWeek);
-var startOfWeek__default = /*#__PURE__*/_interopDefaultLegacy(startOfWeek);
-var getUnixTime__default = /*#__PURE__*/_interopDefaultLegacy(getUnixTime);
-var isSameDay__default = /*#__PURE__*/_interopDefaultLegacy(isSameDay);
-var differenceInCalendarDays__default = /*#__PURE__*/_interopDefaultLegacy(differenceInCalendarDays);
-var subDays__default = /*#__PURE__*/_interopDefaultLegacy(subDays);
-var isAfter__default = /*#__PURE__*/_interopDefaultLegacy(isAfter);
-var isDate__default = /*#__PURE__*/_interopDefaultLegacy(isDate);
-var addWeeks__default = /*#__PURE__*/_interopDefaultLegacy(addWeeks);
-var addYears__default = /*#__PURE__*/_interopDefaultLegacy(addYears);
-var endOfISOWeek__default = /*#__PURE__*/_interopDefaultLegacy(endOfISOWeek);
-var endOfWeek__default = /*#__PURE__*/_interopDefaultLegacy(endOfWeek);
-var max__default = /*#__PURE__*/_interopDefaultLegacy(max);
-var min__default = /*#__PURE__*/_interopDefaultLegacy(min);
-var getWeeksInMonth__default = /*#__PURE__*/_interopDefaultLegacy(getWeeksInMonth);
-var getISOWeek__default = /*#__PURE__*/_interopDefaultLegacy(getISOWeek);
-var getWeek__default = /*#__PURE__*/_interopDefaultLegacy(getWeek);
-var parse__default = /*#__PURE__*/_interopDefaultLegacy(parse);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -206,21 +168,21 @@ var defaultClassNames = {
  * The default formatter for the caption.
  */
 function formatCaption(month, options) {
-    return format__default["default"](month, 'LLLL y', options);
+    return format(month, 'LLLL y', options);
 }
 
 /**
  * The default formatter for the Day button.
  */
 function formatDay(day, options) {
-    return format__default["default"](day, 'd', options);
+    return format(day, 'd', options);
 }
 
 /**
  * The default formatter for the Month caption.
  */
 function formatMonthCaption(month, options) {
-    return format__default["default"](month, 'LLLL', options);
+    return format(month, 'LLLL', options);
 }
 
 /**
@@ -234,14 +196,14 @@ function formatWeekNumber(weekNumber) {
  * The default formatter for the name of the weekday.
  */
 function formatWeekdayName(weekday, options) {
-    return format__default["default"](weekday, 'cccccc', options);
+    return format(weekday, 'cccccc', options);
 }
 
 /**
  * The default formatter for the Year caption.
  */
 function formatYearCaption(year, options) {
-    return format__default["default"](year, 'yyyy', options);
+    return format(year, 'yyyy', options);
 }
 
 var formatters = /*#__PURE__*/Object.freeze({
@@ -258,7 +220,7 @@ var formatters = /*#__PURE__*/Object.freeze({
  * The default ARIA label for the day button.
  */
 var labelDay = function (day, activeModifiers, options) {
-    return format__default["default"](day, 'do MMMM (EEEE)', options);
+    return format(day, 'do MMMM (EEEE)', options);
 };
 
 /**
@@ -286,7 +248,7 @@ var labelPrevious = function () {
  * The default ARIA label for the Weekday element.
  */
 var labelWeekday = function (day, options) {
-    return format__default["default"](day, 'cccc', options);
+    return format(day, 'cccc', options);
 };
 
 /**
@@ -321,7 +283,7 @@ var labels = /*#__PURE__*/Object.freeze({
 function getDefaultContextValues() {
     var captionLayout = 'buttons';
     var classNames = defaultClassNames;
-    var locale = enUS__default["default"];
+    var locale = enUS;
     var modifiersClassNames = {};
     var modifiers = {};
     var numberOfMonths = 1;
@@ -347,20 +309,20 @@ 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__default["default"](fromMonth);
+        fromDate = startOfMonth(fromMonth);
     }
     else if (fromYear) {
         fromDate = new Date(fromYear, 0, 1);
     }
     if (toMonth) {
-        toDate = endOfMonth__default["default"](toMonth);
+        toDate = endOfMonth(toMonth);
     }
     else if (toYear) {
         toDate = new Date(toYear, 11, 31);
     }
     return {
-        fromDate: fromDate ? startOfDay__default["default"](fromDate) : undefined,
-        toDate: toDate ? startOfDay__default["default"](toDate) : undefined
+        fromDate: fromDate ? startOfDay(fromDate) : undefined,
+        toDate: toDate ? startOfDay(toDate) : undefined
     };
 }
 
@@ -393,7 +355,7 @@ function DayPickerProvider(props) {
         onSelect = initialProps.onSelect;
     }
     var value = __assign(__assign(__assign({}, defaultContextValues), initialProps), { captionLayout: captionLayout, classNames: __assign(__assign({}, defaultContextValues.classNames), initialProps.classNames), components: __assign({}, initialProps.components), formatters: __assign(__assign({}, defaultContextValues.formatters), initialProps.formatters), fromDate: 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: onSelect, styles: __assign(__assign({}, defaultContextValues.styles), initialProps.styles), toDate: toDate });
-    return (React__default["default"].createElement(DayPickerContext.Provider, { value: value }, props.children));
+    return (React.createElement(DayPickerContext.Provider, { value: value }, props.children));
 }
 /**
  * Hook to access the {@link DayPickerContextValue}.
@@ -412,15 +374,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__default["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 })));
+    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 })));
 }
 
 /**
  * Render the icon in the styled drop-down.
  */
 function IconDropdown(props) {
-    return (React__default["default"].createElement("svg", __assign({ width: "8px", height: "8px", viewBox: "0 0 120 120", "data-testid": "iconDropdown" }, props),
-        React__default["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" })));
+    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" })));
 }
 
 /**
@@ -432,12 +394,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__default["default"].createElement("div", { className: className, style: style },
-        React__default["default"].createElement("span", { className: dayPicker.classNames.vhidden }, props['aria-label']),
-        React__default["default"].createElement("select", { name: props.name, "aria-label": props['aria-label'], className: dayPicker.classNames.dropdown, style: dayPicker.styles.dropdown, value: value, onChange: onChange }, children),
-        React__default["default"].createElement("div", { className: dayPicker.classNames.caption_label, style: dayPicker.styles.caption_label, "aria-hidden": "true" },
+    return (React.createElement("div", { className: className, style: style },
+        React.createElement("span", { className: dayPicker.classNames.vhidden }, props['aria-label']),
+        React.createElement("select", { name: props.name, "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" },
             caption,
-            React__default["default"].createElement(IconDropdownComponent, { className: dayPicker.classNames.dropdown_icon, style: dayPicker.styles.dropdown_icon }))));
+            React.createElement(IconDropdownComponent, { className: dayPicker.classNames.dropdown_icon, style: dayPicker.styles.dropdown_icon }))));
 }
 
 /** Render the dropdown to navigate between months. */
@@ -446,31 +408,31 @@ 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__default["default"].createElement(React__default["default"].Fragment, null);
+        return React.createElement(React.Fragment, null);
     if (!toDate)
-        return React__default["default"].createElement(React__default["default"].Fragment, null);
+        return React.createElement(React.Fragment, null);
     var dropdownMonths = [];
-    if (isSameYear__default["default"](fromDate, toDate)) {
+    if (isSameYear(fromDate, toDate)) {
         // only display the months included in the range
-        var date = startOfMonth__default["default"](fromDate);
+        var date = startOfMonth(fromDate);
         for (var month = fromDate.getMonth(); month <= toDate.getMonth(); month++) {
-            dropdownMonths.push(setMonth__default["default"](date, month));
+            dropdownMonths.push(setMonth(date, month));
         }
     }
     else {
         // display all the 12 months
-        var date = startOfMonth__default["default"](new Date()); // Any date should be OK, as we just need the year
+        var date = startOfMonth(new Date()); // Any date should be OK, as we just need the year
         for (var month = 0; month <= 11; month++) {
-            dropdownMonths.push(setMonth__default["default"](date, month));
+            dropdownMonths.push(setMonth(date, month));
         }
     }
     var handleChange = function (e) {
         var selectedMonth = Number(e.target.value);
-        var newMonth = setMonth__default["default"](startOfMonth__default["default"](props.displayMonth), selectedMonth);
+        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 (React__default["default"].createElement(DropdownComponent, { name: "months", "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["default"].createElement("option", { key: m.getMonth(), value: m.getMonth() }, formatMonthCaption(m, { locale: locale }))); })));
+    return (React.createElement(DropdownComponent, { name: "months", "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 }))); })));
 }
 
 /**
@@ -484,20 +446,20 @@ function YearsDropdown(props) {
     var years = [];
     // Dropdown should appear only when both from/toDate is set
     if (!fromDate)
-        return React__default["default"].createElement(React__default["default"].Fragment, null);
+        return React.createElement(React.Fragment, null);
     if (!toDate)
-        return React__default["default"].createElement(React__default["default"].Fragment, null);
+        return React.createElement(React.Fragment, null);
     var fromYear = fromDate.getFullYear();
     var toYear = toDate.getFullYear();
     for (var year = fromYear; year <= toYear; year++) {
-        years.push(setYear__default["default"](startOfYear__default["default"](new Date()), year));
+        years.push(setYear(startOfYear(new Date()), year));
     }
     var handleChange = function (e) {
-        var newMonth = setYear__default["default"](startOfMonth__default["default"](displayMonth), Number(e.target.value));
+        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 (React__default["default"].createElement(DropdownComponent, { name: "years", "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["default"].createElement("option", { key: year.getFullYear(), value: year.getFullYear() }, formatYearCaption(year, { locale: locale }))); })));
+    return (React.createElement(DropdownComponent, { name: "years", "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 }))); })));
 }
 
 /**
@@ -521,15 +483,15 @@ function getInitialMonth(context) {
     var initialMonth = month || defaultMonth || today || new Date();
     var toDate = context.toDate, fromDate = context.fromDate, _a = context.numberOfMonths, numberOfMonths = _a === void 0 ? 1 : _a;
     // Fix the initialMonth if is after the to-date
-    if (toDate && differenceInCalendarMonths__default["default"](toDate, initialMonth) < 0) {
+    if (toDate && differenceInCalendarMonths(toDate, initialMonth) < 0) {
         var offset = -1 * (numberOfMonths - 1);
-        initialMonth = addMonths__default["default"](toDate, offset);
+        initialMonth = addMonths(toDate, offset);
     }
     // Fix the initialMonth if is before the from-date
-    if (fromDate && differenceInCalendarMonths__default["default"](initialMonth, fromDate) < 0) {
+    if (fromDate && differenceInCalendarMonths(initialMonth, fromDate) < 0) {
         initialMonth = fromDate;
     }
-    return startOfMonth__default["default"](initialMonth);
+    return startOfMonth(initialMonth);
 }
 
 /** Controls the navigation state. */
@@ -541,7 +503,7 @@ function useNavigationState() {
         var _a;
         if (context.disableNavigation)
             return;
-        var month = startOfMonth__default["default"](date);
+        var month = startOfMonth(date);
         setMonth(month);
         (_a = context.onMonthChange) === null || _a === void 0 ? void 0 : _a.call(context, month);
     };
@@ -554,12 +516,12 @@ function useNavigationState() {
  */
 function getDisplayMonths(month, _a) {
     var reverseMonths = _a.reverseMonths, numberOfMonths = _a.numberOfMonths;
-    var start = startOfMonth__default["default"](month);
-    var end = startOfMonth__default["default"](addMonths__default["default"](start, numberOfMonths));
-    var monthsDiff = differenceInCalendarMonths__default["default"](end, start);
+    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__default["default"](start, i);
+        var nextMonth = addMonths(start, i);
         months.push(nextMonth);
     }
     if (reverseMonths)
@@ -583,16 +545,16 @@ function getNextMonth(startingMonth, options) {
     }
     var toDate = options.toDate, pagedNavigation = options.pagedNavigation, _a = options.numberOfMonths, numberOfMonths = _a === void 0 ? 1 : _a;
     var offset = pagedNavigation ? numberOfMonths : 1;
-    var month = startOfMonth__default["default"](startingMonth);
+    var month = startOfMonth(startingMonth);
     if (!toDate) {
-        return addMonths__default["default"](month, offset);
+        return addMonths(month, offset);
     }
-    var monthsDiff = differenceInCalendarMonths__default["default"](toDate, startingMonth);
+    var monthsDiff = differenceInCalendarMonths(toDate, startingMonth);
     if (monthsDiff < numberOfMonths) {
         return undefined;
     }
     // Jump forward as the number of months when paged navigation
-    return addMonths__default["default"](month, offset);
+    return addMonths(month, offset);
 }
 
 /**
@@ -612,16 +574,16 @@ function getPreviousMonth(startingMonth, options) {
     }
     var fromDate = options.fromDate, pagedNavigation = options.pagedNavigation, _a = options.numberOfMonths, numberOfMonths = _a === void 0 ? 1 : _a;
     var offset = pagedNavigation ? numberOfMonths : 1;
-    var month = startOfMonth__default["default"](startingMonth);
+    var month = startOfMonth(startingMonth);
     if (!fromDate) {
-        return addMonths__default["default"](month, -offset);
+        return addMonths(month, -offset);
     }
-    var monthsDiff = differenceInCalendarMonths__default["default"](month, fromDate);
+    var monthsDiff = differenceInCalendarMonths(month, fromDate);
     if (monthsDiff <= 0) {
         return undefined;
     }
     // Jump back as the number of months when paged navigation
-    return addMonths__default["default"](month, -offset);
+    return addMonths(month, -offset);
 }
 
 /**
@@ -638,15 +600,15 @@ function NavigationProvider(props) {
     var previousMonth = getPreviousMonth(currentMonth, dayPicker);
     var isDateDisplayed = function (date) {
         return displayMonths.some(function (displayMonth) {
-            return isSameMonth__default["default"](date, displayMonth);
+            return isSameMonth(date, displayMonth);
         });
     };
     var goToDate = function (date, refDate) {
         if (isDateDisplayed(date)) {
             return;
         }
-        if (refDate && isBefore__default["default"](date, refDate)) {
-            goToMonth(addMonths__default["default"](date, 1 + dayPicker.numberOfMonths * -1));
+        if (refDate && isBefore(date, refDate)) {
+            goToMonth(addMonths(date, 1 + dayPicker.numberOfMonths * -1));
         }
         else {
             goToMonth(date);
@@ -661,7 +623,7 @@ function NavigationProvider(props) {
         nextMonth: nextMonth,
         isDateDisplayed: isDateDisplayed
     };
-    return (React__default["default"].createElement(NavigationContext.Provider, { value: value }, props.children));
+    return (React.createElement(NavigationContext.Provider, { value: value }, props.children));
 }
 /**
  * Hook to access the {@link NavigationContextValue}. Use this hook to navigate
@@ -688,27 +650,27 @@ function CaptionDropdowns(props) {
         goToMonth(newMonth);
     };
     var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
-    var captionLabel = (React__default["default"].createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
-    return (React__default["default"].createElement("div", { className: classNames.caption_dropdowns, style: styles.caption_dropdowns },
-        React__default["default"].createElement("div", { className: classNames.vhidden }, captionLabel),
-        React__default["default"].createElement(MonthsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth }),
-        React__default["default"].createElement(YearsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth })));
+    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 })));
 }
 
 /**
  * Render the "previous month" button in the navigation.
  */
 function IconLeft(props) {
-    return (React__default["default"].createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
-        React__default["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" })));
+    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" })));
 }
 
 /**
  * Render the "next month" button in the navigation.
  */
 function IconRight(props) {
-    return (React__default["default"].createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
-        React__default["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" })));
+    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" })));
 }
 
 /**
@@ -725,7 +687,7 @@ var Button = React.forwardRef(function (props, ref) {
     if (props.style) {
         Object.assign(style, props.style);
     }
-    return (React__default["default"].createElement("button", __assign({}, props, { ref: ref, type: "button", className: className, style: style })));
+    return (React.createElement("button", __assign({}, props, { ref: ref, type: "button", className: className, style: style })));
 });
 
 /** A component rendering the navigation buttons or the drop-downs. */
@@ -733,7 +695,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__default["default"].createElement(React__default["default"].Fragment, null);
+        return React.createElement(React.Fragment, null);
     }
     var previousLabel = labelPrevious(props.previousMonth, { locale: locale });
     var previousClassName = [
@@ -747,9 +709,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__default["default"].createElement("div", { className: classNames.nav, style: styles.nav },
-        !props.hidePrevious && (React__default["default"].createElement(Button, { name: "previous-month", "aria-label": previousLabel, className: previousClassName, style: styles.nav_button_previous, disabled: !props.previousMonth, onClick: props.onPreviousClick }, dir === 'rtl' ? (React__default["default"].createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React__default["default"].createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })))),
-        !props.hideNext && (React__default["default"].createElement(Button, { name: "next-month", "aria-label": nextLabel, className: nextClassName, style: styles.nav_button_next, disabled: !props.nextMonth, onClick: props.onNextClick }, dir === 'rtl' ? (React__default["default"].createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React__default["default"].createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon }))))));
+    return (React.createElement("div", { className: classNames.nav, style: styles.nav },
+        !props.hidePrevious && (React.createElement(Button, { name: "previous-month", "aria-label": previousLabel, className: previousClassName, style: styles.nav_button_previous, 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, { name: "next-month", "aria-label": nextLabel, className: nextClassName, style: styles.nav_button_next, 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 }))))));
 }
 
 /**
@@ -761,7 +723,7 @@ function CaptionNavigation(props) {
     var _c = useDayPicker(), numberOfMonths = _c.numberOfMonths, dir = _c.dir, components = _c.components;
     var _d = useNavigation(), previousMonth = _d.previousMonth, nextMonth = _d.nextMonth, goToMonth = _d.goToMonth, displayMonths = _d.displayMonths;
     var displayIndex = displayMonths.findIndex(function (month) {
-        return isSameMonth__default["default"](props.displayMonth, month);
+        return isSameMonth(props.displayMonth, month);
     });
     var isFirst = displayIndex === 0;
     var isLast = displayIndex === displayMonths.length - 1;
@@ -781,10 +743,10 @@ function CaptionNavigation(props) {
         goToMonth(nextMonth);
     };
     var CaptionLabelComponent = (_b = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _b !== void 0 ? _b : CaptionLabel;
-    var captionLabel = (React__default["default"].createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+    var captionLabel = (React.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
+    return (React.createElement(React.Fragment, null,
         captionLabel,
-        React__default["default"].createElement(Navigation, { displayMonth: props.displayMonth, hideNext: hideNext, hidePrevious: hidePrevious, nextMonth: nextMonth, previousMonth: previousMonth, onPreviousClick: handlePreviousClick, onNextClick: handleNextClick })));
+        React.createElement(Navigation, { displayMonth: props.displayMonth, hideNext: hideNext, hidePrevious: hidePrevious, nextMonth: nextMonth, previousMonth: previousMonth, onPreviousClick: handlePreviousClick, onNextClick: handleNextClick })));
 }
 
 /**
@@ -797,25 +759,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__default["default"].createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
+        caption = (React.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
     }
     else if (captionLayout === 'dropdown') {
-        caption = (React__default["default"].createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }));
+        caption = (React.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }));
     }
     else {
-        caption = (React__default["default"].createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id }));
+        caption = (React.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id }));
     }
-    return (React__default["default"].createElement("div", { className: classNames.caption, style: styles.caption }, caption));
+    return (React.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__default["default"].createElement(React__default["default"].Fragment, null);
-    return (React__default["default"].createElement("tfoot", { className: tfoot, style: styles.tfoot },
-        React__default["default"].createElement("tr", null,
-            React__default["default"].createElement("td", { colSpan: 8 }, 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))));
 }
 
 /**
@@ -828,11 +790,11 @@ weekStartsOn,
 /** Use ISOWeek instead of locale/ */
 ISOWeek) {
     var start = ISOWeek
-        ? startOfISOWeek__default["default"](new Date())
-        : startOfWeek__default["default"](new Date(), { locale: locale, weekStartsOn: weekStartsOn });
+        ? startOfISOWeek(new Date())
+        : startOfWeek(new Date(), { locale: locale, weekStartsOn: weekStartsOn });
     var days = [];
     for (var i = 0; i < 7; i++) {
-        var day = addDays__default["default"](start, i);
+        var day = addDays(start, i);
         days.push(day);
     }
     return days;
@@ -844,11 +806,11 @@ ISOWeek) {
 function HeadRow() {
     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 (React__default["default"].createElement("tr", { style: styles.head_row, className: classNames.head_row },
-        showWeekNumber && (React__default["default"].createElement("th", { scope: "col", style: styles.head_cell, className: classNames.head_cell })),
-        weekdays.map(function (weekday, i) { return (React__default["default"].createElement("th", { key: i, scope: "col", className: classNames.head_cell, style: styles.head_cell },
-            React__default["default"].createElement("span", { "aria-hidden": true }, formatWeekdayName(weekday, { locale: locale })),
-            React__default["default"].createElement("span", { className: classNames.vhidden }, labelWeekday(weekday, { locale: locale })))); })));
+    return (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 })))); })));
 }
 
 /** Render the table head. */
@@ -856,14 +818,14 @@ 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 (React__default["default"].createElement("thead", { style: styles.head, className: classNames.head },
-        React__default["default"].createElement(HeadRowComponent, null)));
+    return (React.createElement("thead", { style: styles.head, className: classNames.head },
+        React.createElement(HeadRowComponent, null)));
 }
 
 /** Render the content of the day cell. */
 function DayContent(props) {
     var _a = useDayPicker(), locale = _a.locale, formatDay = _a.formatters.formatDay;
-    return React__default["default"].createElement(React__default["default"].Fragment, null, formatDay(props.date, { locale: locale }));
+    return React.createElement(React.Fragment, null, formatDay(props.date, { locale: locale }));
 }
 
 /**
@@ -882,9 +844,9 @@ function SelectMultipleProvider(props) {
                 disabled: []
             }
         };
-        return (React__default["default"].createElement(SelectMultipleContext.Provider, { value: emptyContextValue }, props.children));
+        return (React.createElement(SelectMultipleContext.Provider, { value: emptyContextValue }, props.children));
     }
-    return (React__default["default"].createElement(SelectMultipleProviderInternal, { initialProps: props.initialProps, children: props.children }));
+    return (React.createElement(SelectMultipleProviderInternal, { initialProps: props.initialProps, children: props.children }));
 }
 function SelectMultipleProviderInternal(_a) {
     var initialProps = _a.initialProps, children = _a.children;
@@ -903,7 +865,7 @@ function SelectMultipleProviderInternal(_a) {
         var selectedDays = selected ? __spreadArray([], selected, true) : [];
         if (activeModifiers.selected) {
             var index = selectedDays.findIndex(function (selectedDay) {
-                return isSameDay__default["default"](day, selectedDay);
+                return isSameDay(day, selectedDay);
             });
             selectedDays.splice(index, 1);
         }
@@ -919,7 +881,7 @@ function SelectMultipleProviderInternal(_a) {
         modifiers.disabled.push(function (day) {
             var isMaxSelected = max && selected.length > max - 1;
             var isSelected = selected.some(function (selectedDay) {
-                return isSameDay__default["default"](selectedDay, day);
+                return isSameDay(selectedDay, day);
             });
             return Boolean(isMaxSelected && !isSelected);
         });
@@ -929,7 +891,7 @@ function SelectMultipleProviderInternal(_a) {
         onDayClick: onDayClick,
         modifiers: modifiers
     };
-    return (React__default["default"].createElement(SelectMultipleContext.Provider, { value: contextValue }, children));
+    return (React.createElement(SelectMultipleContext.Provider, { value: contextValue }, children));
 }
 /**
  * Hook to access the {@link SelectMultipleContextValue}.
@@ -955,25 +917,25 @@ function addToRange(day, range) {
     if (!from) {
         return { from: day, to: undefined };
     }
-    if (!to && isSameDay__default["default"](from, day)) {
+    if (!to && isSameDay(from, day)) {
         return { from: from, to: day };
     }
-    if (!to && isBefore__default["default"](day, from)) {
+    if (!to && isBefore(day, from)) {
         return { from: day, to: from };
     }
     if (!to) {
         return { from: from, to: day };
     }
-    if (isSameDay__default["default"](to, day) && isSameDay__default["default"](from, day)) {
+    if (isSameDay(to, day) && isSameDay(from, day)) {
         return undefined;
     }
-    if (isSameDay__default["default"](to, day)) {
+    if (isSameDay(to, day)) {
         return { from: to, to: undefined };
     }
-    if (isSameDay__default["default"](from, day)) {
+    if (isSameDay(from, day)) {
         return undefined;
     }
-    if (isAfter__default["default"](from, day)) {
+    if (isAfter(from, day)) {
         return { from: day, to: to };
     }
     return { from: from, to: day };
@@ -998,9 +960,9 @@ function SelectRangeProvider(props) {
                 disabled: []
             }
         };
-        return (React__default["default"].createElement(SelectRangeContext.Provider, { value: emptyContextValue }, props.children));
+        return (React.createElement(SelectRangeContext.Provider, { value: emptyContextValue }, props.children));
     }
-    return (React__default["default"].createElement(SelectRangeProviderInternal, { initialProps: props.initialProps, children: props.children }));
+    return (React.createElement(SelectRangeProviderInternal, { initialProps: props.initialProps, children: props.children }));
 }
 function SelectRangeProviderInternal(_a) {
     var initialProps = _a.initialProps, children = _a.children;
@@ -1040,38 +1002,38 @@ function SelectRangeProviderInternal(_a) {
     if (min) {
         if (selectedFrom && !selectedTo) {
             modifiers.disabled.push({
-                after: subDays__default["default"](selectedFrom, min - 1),
-                before: addDays__default["default"](selectedFrom, min - 1)
+                after: subDays(selectedFrom, min - 1),
+                before: addDays(selectedFrom, min - 1)
             });
         }
         if (selectedFrom && selectedTo) {
             modifiers.disabled.push({
                 after: selectedFrom,
-                before: addDays__default["default"](selectedFrom, min - 1)
+                before: addDays(selectedFrom, min - 1)
             });
         }
     }
     if (max) {
         if (selectedFrom && !selectedTo) {
             modifiers.disabled.push({
-                before: addDays__default["default"](selectedFrom, -max + 1)
+                before: addDays(selectedFrom, -max + 1)
             });
             modifiers.disabled.push({
-                after: addDays__default["default"](selectedFrom, max - 1)
+                after: addDays(selectedFrom, max - 1)
             });
         }
         if (selectedFrom && selectedTo) {
-            var selectedCount = differenceInCalendarDays__default["default"](selectedTo, selectedFrom) + 1;
+            var selectedCount = differenceInCalendarDays(selectedTo, selectedFrom) + 1;
             var offset = max - selectedCount;
             modifiers.disabled.push({
-                before: subDays__default["default"](selectedFrom, offset)
+                before: subDays(selectedFrom, offset)
             });
             modifiers.disabled.push({
-                after: addDays__default["default"](selectedTo, offset)
+                after: addDays(selectedTo, offset)
             });
         }
     }
-    return (React__default["default"].createElement(SelectRangeContext.Provider, { value: { selected: selected, onDayClick: onDayClick, modifiers: modifiers } }, children));
+    return (React.createElement(SelectRangeContext.Provider, { value: { selected: selected, onDayClick: onDayClick, modifiers: modifiers } }, children));
 }
 /**
  * Hook to access the {@link SelectRangeContextValue}.
@@ -1171,7 +1133,7 @@ function ModifiersProvider(props) {
     var internalModifiers = getInternalModifiers(dayPicker, selectMultiple, selectRange);
     var customModifiers = getCustomModifiers(dayPicker.modifiers);
     var modifiers = __assign(__assign({}, internalModifiers), customModifiers);
-    return (React__default["default"].createElement(ModifiersContext.Provider, { value: modifiers }, props.children));
+    return (React.createElement(ModifiersContext.Provider, { value: modifiers }, props.children));
 }
 /**
  * Return the modifiers used by DayPicker.
@@ -1219,28 +1181,28 @@ function isDateInRange(date, range) {
     if (!from) {
         return false;
     }
-    if (!to && isSameDay__default["default"](from, date)) {
+    if (!to && isSameDay(from, date)) {
         return true;
     }
     if (!to) {
         return false;
     }
-    var isRangeInverted = differenceInCalendarDays__default["default"](to, from) < 0;
+    var isRangeInverted = differenceInCalendarDays(to, from) < 0;
     if (isRangeInverted) {
         _a = [to, from], from = _a[0], to = _a[1];
     }
-    var isInRange = differenceInCalendarDays__default["default"](date, from) >= 0 &&
-        differenceInCalendarDays__default["default"](to, date) >= 0;
+    var isInRange = differenceInCalendarDays(date, from) >= 0 &&
+        differenceInCalendarDays(to, date) >= 0;
     return isInRange;
 }
 
 /** Returns true if `value` is a Date type. */
 function isDateType(value) {
-    return isDate__default["default"](value);
+    return isDate(value);
 }
 /** Returns true if `value` is an array of valid dates. */
 function isArrayOfDates(value) {
-    return Array.isArray(value) && value.every(isDate__default["default"]);
+    return Array.isArray(value) && value.every(isDate);
 }
 /**
  * Returns whether a day matches against at least one of the given Matchers.
@@ -1265,7 +1227,7 @@ function isMatch(day, matchers) {
             return matcher;
         }
         if (isDateType(matcher)) {
-            return isSameDay__default["default"](day, matcher);
+            return isSameDay(day, matcher);
         }
         if (isArrayOfDates(matcher)) {
             return matcher.includes(day);
@@ -1277,8 +1239,8 @@ function isMatch(day, matchers) {
             return matcher.dayOfWeek.includes(day.getDay());
         }
         if (isDateInterval(matcher)) {
-            var diffBefore = differenceInCalendarDays__default["default"](matcher.before, day);
-            var diffAfter = differenceInCalendarDays__default["default"](matcher.after, day);
+            var diffBefore = differenceInCalendarDays(matcher.before, day);
+            var diffAfter = differenceInCalendarDays(matcher.after, day);
             var isDayBefore = diffBefore > 0;
             var isDayAfter = diffAfter < 0;
             var isClosedInterval = dateFns.isAfter(matcher.before, matcher.after);
@@ -1290,10 +1252,10 @@ function isMatch(day, matchers) {
             }
         }
         if (isDateAfterType(matcher)) {
-            return differenceInCalendarDays__default["default"](day, matcher.after) > 0;
+            return differenceInCalendarDays(day, matcher.after) > 0;
         }
         if (isDateBeforeType(matcher)) {
-            return differenceInCalendarDays__default["default"](matcher.before, day) > 0;
+            return differenceInCalendarDays(matcher.before, day) > 0;
         }
         if (typeof matcher === 'function') {
             return matcher(day);
@@ -1317,7 +1279,7 @@ displayMonth) {
     }, []);
     var activeModifiers = {};
     matchedModifiers.forEach(function (modifier) { return (activeModifiers[modifier] = true); });
-    if (displayMonth && !isSameMonth__default["default"](day, displayMonth)) {
+    if (displayMonth && !isSameMonth(day, displayMonth)) {
         activeModifiers.outside = true;
     }
     return activeModifiers;
@@ -1332,8 +1294,8 @@ displayMonth) {
  * https://github.com/gpbl/react-day-picker/pull/1576
  */
 function getInitialFocusTarget(displayMonths, modifiers) {
-    var firstDayInMonth = startOfMonth__default["default"](displayMonths[0]);
-    var lastDayInMonth = endOfMonth__default["default"](displayMonths[displayMonths.length - 1]);
+    var firstDayInMonth = startOfMonth(displayMonths[0]);
+    var lastDayInMonth = endOfMonth(displayMonths[displayMonths.length - 1]);
     // TODO: cleanup code
     var firstFocusableDay;
     var today;
@@ -1342,7 +1304,7 @@ function getInitialFocusTarget(displayMonths, modifiers) {
         var activeModifiers = getActiveModifiers(date, modifiers);
         var isFocusable = !activeModifiers.disabled && !activeModifiers.hidden;
         if (!isFocusable) {
-            date = addDays__default["default"](date, 1);
+            date = addDays(date, 1);
             continue;
         }
         if (activeModifiers.selected) {
@@ -1354,7 +1316,7 @@ function getInitialFocusTarget(displayMonths, modifiers) {
         if (!firstFocusableDay) {
             firstFocusableDay = date;
         }
-        date = addDays__default["default"](date, 1);
+        date = addDays(date, 1);
     }
     if (today) {
         return today;
@@ -1370,27 +1332,27 @@ 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__default["default"],
-        week: addWeeks__default["default"],
-        month: addMonths__default["default"],
-        year: addYears__default["default"],
+        day: addDays,
+        week: addWeeks,
+        month: addMonths,
+        year: addYears,
         startOfWeek: function (date) {
             return context.ISOWeek
-                ? startOfISOWeek__default["default"](date)
-                : startOfWeek__default["default"](date, { locale: locale, weekStartsOn: weekStartsOn });
+                ? startOfISOWeek(date)
+                : startOfWeek(date, { locale: locale, weekStartsOn: weekStartsOn });
         },
         endOfWeek: function (date) {
             return context.ISOWeek
-                ? endOfISOWeek__default["default"](date)
-                : endOfWeek__default["default"](date, { locale: locale, weekStartsOn: weekStartsOn });
+                ? endOfISOWeek(date)
+                : endOfWeek(date, { locale: locale, weekStartsOn: weekStartsOn });
         }
     };
     var newFocusedDay = moveFns[moveBy](focusedDay, direction === 'after' ? 1 : -1);
     if (direction === 'before' && fromDate) {
-        newFocusedDay = max__default["default"]([fromDate, newFocusedDay]);
+        newFocusedDay = max([fromDate, newFocusedDay]);
     }
     else if (direction === 'after' && toDate) {
-        newFocusedDay = min__default["default"]([toDate, newFocusedDay]);
+        newFocusedDay = min([toDate, newFocusedDay]);
     }
     var isFocusable = true;
     if (modifiers) {
@@ -1448,7 +1410,7 @@ function FocusProvider(props) {
             context: context,
             modifiers: modifiers
         });
-        if (isSameDay__default["default"](focusedDay, nextFocused))
+        if (isSameDay(focusedDay, nextFocused))
             return undefined;
         navigation.goToDate(nextFocused, focusedDay);
         focus(nextFocused);
@@ -1469,7 +1431,7 @@ function FocusProvider(props) {
         focusStartOfWeek: function () { return moveFocus('startOfWeek', 'before'); },
         focusEndOfWeek: function () { return moveFocus('endOfWeek', 'after'); }
     };
-    return (React__default["default"].createElement(FocusContext.Provider, { value: value }, props.children));
+    return (React.createElement(FocusContext.Provider, { value: value }, props.children));
 }
 /**
  * Hook to access the {@link FocusContextValue}. Use this hook to handle the
@@ -1517,9 +1479,9 @@ function SelectSingleProvider(props) {
         var emptyContextValue = {
             selected: undefined
         };
-        return (React__default["default"].createElement(SelectSingleContext.Provider, { value: emptyContextValue }, props.children));
+        return (React.createElement(SelectSingleContext.Provider, { value: emptyContextValue }, props.children));
     }
-    return (React__default["default"].createElement(SelectSingleProviderInternal, { initialProps: props.initialProps, children: props.children }));
+    return (React.createElement(SelectSingleProviderInternal, { initialProps: props.initialProps, children: props.children }));
 }
 function SelectSingleProviderInternal(_a) {
     var initialProps = _a.initialProps, children = _a.children;
@@ -1536,7 +1498,7 @@ function SelectSingleProviderInternal(_a) {
         selected: initialProps.selected,
         onDayClick: onDayClick
     };
-    return (React__default["default"].createElement(SelectSingleContext.Provider, { value: contextValue }, children));
+    return (React.createElement(SelectSingleContext.Provider, { value: contextValue }, children));
 }
 /**
  * Hook to access the {@link SelectSingleContextValue}.
@@ -1781,7 +1743,7 @@ buttonRef) {
             return;
         if (!isButton)
             return;
-        if (isSameDay__default["default"](focusContext.focusedDay, day)) {
+        if (isSameDay(focusContext.focusedDay, day)) {
             (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [
@@ -1799,7 +1761,7 @@ 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__default["default"].createElement(DayContentComponent, { date: day, displayMonth: displayMonth, activeModifiers: activeModifiers }));
+    var children = (React.createElement(DayContentComponent, { date: day, displayMonth: displayMonth, activeModifiers: activeModifiers }));
     var divProps = {
         style: style,
         className: className,
@@ -1807,9 +1769,10 @@ buttonRef) {
         'aria-label': ariaLabel
     };
     var isFocusTarget = focusContext.focusTarget &&
-        isSameDay__default["default"](focusContext.focusTarget, day) &&
+        isSameDay(focusContext.focusTarget, day) &&
         !activeModifiers.outside;
-    var buttonProps = __assign(__assign(__assign({}, divProps), (_a = { disabled: activeModifiers.disabled }, _a['aria-pressed'] = activeModifiers.selected, _a['aria-label'] = ariaLabel, _a.tabIndex = isFocusTarget ? 0 : -1, _a)), eventHandlers);
+    var isFocused = focusContext.focusedDay && isSameDay(focusContext.focusedDay, day);
+    var buttonProps = __assign(__assign(__assign({}, divProps), (_a = { disabled: activeModifiers.disabled }, _a['aria-pressed'] = activeModifiers.selected, _a['aria-label'] = ariaLabel, _a.tabIndex = isFocused || isFocusTarget ? 0 : -1, _a)), eventHandlers);
     var dayRender = {
         isButton: isButton,
         isHidden: isHidden,
@@ -1829,12 +1792,12 @@ function Day(props) {
     var buttonRef = React.useRef(null);
     var dayRender = useDayRender(props.date, props.displayMonth, buttonRef);
     if (dayRender.isHidden) {
-        return React__default["default"].createElement(React__default["default"].Fragment, null);
+        return React.createElement(React.Fragment, null);
     }
     if (!dayRender.isButton) {
-        return React__default["default"].createElement("div", __assign({}, dayRender.divProps));
+        return React.createElement("div", __assign({}, dayRender.divProps));
     }
-    return React__default["default"].createElement(Button, __assign({ name: "day", ref: buttonRef }, dayRender.buttonProps));
+    return React.createElement(Button, __assign({ name: "day", ref: buttonRef }, dayRender.buttonProps));
 }
 
 /**
@@ -1846,13 +1809,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__default["default"].createElement("span", { className: classNames.weeknumber, style: styles.weeknumber }, content));
+        return (React.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__default["default"].createElement(Button, { name: "week-number", "aria-label": label, className: classNames.weeknumber, style: styles.weeknumber, onClick: handleClick }, content));
+    return (React.createElement(Button, { name: "week-number", "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. */
@@ -1863,32 +1826,32 @@ 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__default["default"].createElement("td", { className: classNames.cell, style: styles.cell },
-            React__default["default"].createElement(WeeknumberComponent, { number: props.weekNumber, dates: props.dates })));
+        weekNumberCell = (React.createElement("td", { className: classNames.cell, style: styles.cell },
+            React.createElement(WeeknumberComponent, { number: props.weekNumber, dates: props.dates })));
     }
-    return (React__default["default"].createElement("tr", { className: classNames.row, style: styles.row },
+    return (React.createElement("tr", { className: classNames.row, style: styles.row },
         weekNumberCell,
-        props.dates.map(function (date) { return (React__default["default"].createElement("td", { className: classNames.cell, style: styles.cell, key: getUnixTime__default["default"](date) },
-            React__default["default"].createElement(DayComponent, { displayMonth: props.displayMonth, date: date }))); })));
+        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 }))); })));
 }
 
 /** Return the weeks between two dates.  */
 function daysToMonthWeeks(fromDate, toDate, options) {
     var toWeek = (options === null || options === void 0 ? void 0 : options.ISOWeek)
-        ? endOfISOWeek__default["default"](toDate)
-        : endOfWeek__default["default"](toDate, options);
+        ? endOfISOWeek(toDate)
+        : endOfWeek(toDate, options);
     var fromWeek = (options === null || options === void 0 ? void 0 : options.ISOWeek)
-        ? startOfISOWeek__default["default"](fromDate)
-        : startOfWeek__default["default"](fromDate, options);
-    var nOfDays = differenceInCalendarDays__default["default"](toWeek, fromWeek);
+        ? startOfISOWeek(fromDate)
+        : startOfWeek(fromDate, options);
+    var nOfDays = differenceInCalendarDays(toWeek, fromWeek);
     var days = [];
     for (var i = 0; i <= nOfDays; i++) {
-        days.push(addDays__default["default"](fromWeek, 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__default["default"](date)
-            : getWeek__default["default"](date, options);
+            ? getISOWeek(date)
+            : getWeek(date, options);
         var existingWeek = result.find(function (value) { return value.weekNumber === weekNumber; });
         if (existingWeek) {
             existingWeek.dates.push(date);
@@ -1908,15 +1871,15 @@ function daysToMonthWeeks(fromDate, toDate, options) {
  * the first and last week.
  */
 function getMonthWeeks(month, options) {
-    var weeksInMonth = daysToMonthWeeks(startOfMonth__default["default"](month), endOfMonth__default["default"](month), options);
+    var weeksInMonth = daysToMonthWeeks(startOfMonth(month), endOfMonth(month), options);
     if (options === null || options === void 0 ? void 0 : options.useFixedWeeks) {
         // Add extra weeks to the month, up to 6 weeks
-        var nrOfMonthWeeks = getWeeksInMonth__default["default"](month, options);
+        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__default["default"](lastDate, 6 - nrOfMonthWeeks);
-            var extraWeeks = daysToMonthWeeks(addWeeks__default["default"](lastDate, 1), toDate, options);
+            var toDate = addWeeks(lastDate, 6 - nrOfMonthWeeks);
+            var extraWeeks = daysToMonthWeeks(addWeeks(lastDate, 1), toDate, options);
             weeksInMonth.push.apply(weeksInMonth, extraWeeks);
         }
     }
@@ -1937,10 +1900,10 @@ 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__default["default"].createElement("table", { className: classNames.table, style: styles.table, role: "grid", "aria-labelledby": props['aria-labelledby'] },
-        !hideHead && React__default["default"].createElement(HeadComponent, null),
-        React__default["default"].createElement("tbody", { className: classNames.tbody, style: styles.tbody }, weeks.map(function (week) { return (React__default["default"].createElement(RowComponent, { displayMonth: props.displayMonth, key: week.weekNumber, dates: week.dates, weekNumber: week.weekNumber })); })),
-        React__default["default"].createElement(FooterComponent, null)));
+    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)));
 }
 
 /*
@@ -2049,9 +2012,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__default["default"].createElement("div", { key: props.displayIndex, className: className.join(' '), style: style },
-        React__default["default"].createElement(CaptionComponent, { id: captionId, displayMonth: props.displayMonth }),
-        React__default["default"].createElement(Table, { "aria-labelledby": captionId, displayMonth: props.displayMonth })));
+    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 })));
 }
 
 /** Render the container with the months according to the number of months to display. */
@@ -2086,20 +2049,20 @@ function Root() {
         classNames.push(dayPicker.classNames.with_weeknumber);
     }
     var style = __assign(__assign({}, dayPicker.styles.root), dayPicker.style);
-    return (React__default["default"].createElement("div", { className: classNames.join(' '), style: style, dir: dayPicker.dir },
-        React__default["default"].createElement("div", { className: dayPicker.classNames.months, style: dayPicker.styles.months }, navigation.displayMonths.map(function (month, i) { return (React__default["default"].createElement(Month, { key: i, displayIndex: i, displayMonth: month })); }))));
+    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 })); }))));
 }
 
 /** Provide the value for all the context providers. */
 function RootProvider(props) {
     var children = props.children, initialProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement(DayPickerProvider, { initialProps: initialProps },
-        React__default["default"].createElement(NavigationProvider, null,
-            React__default["default"].createElement(SelectSingleProvider, { initialProps: initialProps },
-                React__default["default"].createElement(SelectMultipleProvider, { initialProps: initialProps },
-                    React__default["default"].createElement(SelectRangeProvider, { initialProps: initialProps },
-                        React__default["default"].createElement(ModifiersProvider, null,
-                            React__default["default"].createElement(FocusProvider, null, 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))))))));
 }
 
 /**
@@ -2190,8 +2153,8 @@ function RootProvider(props) {
  * ```
  */
 function DayPicker(props) {
-    return (React__default["default"].createElement(RootProvider, __assign({}, props),
-        React__default["default"].createElement(Root, null)));
+    return (React.createElement(RootProvider, __assign({}, props),
+        React.createElement(Root, null)));
 }
 
 /** @private */
@@ -2202,15 +2165,15 @@ function isValidDate(day) {
 /** Return props and setters for binding an input field to DayPicker. */
 function useInput(options) {
     if (options === void 0) { options = {}; }
-    var _a = options.locale, locale = _a === void 0 ? enUS__default["default"] : _a, required = options.required, _b = options.format, format = _b === void 0 ? 'PP' : _b, defaultSelected = options.defaultSelected, _c = options.today, today = _c === void 0 ? new Date() : _c;
+    var _a = options.locale, locale = _a === void 0 ? enUS : _a, required = options.required, _b = options.format, format$1 = _b === void 0 ? 'PP' : _b, defaultSelected = options.defaultSelected, _c = options.today, today = _c === void 0 ? new Date() : _c;
     var _d = parseFromToProps(options), fromDate = _d.fromDate, toDate = _d.toDate;
     // Shortcut to the DateFns functions
-    var parseValue = function (value) { return parse__default["default"](value, format, today, { locale: locale }); };
+    var parseValue = function (value) { return parse(value, format$1, today, { locale: locale }); };
     // Initialize states
     var _e = React.useState(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : today), month = _e[0], setMonth = _e[1];
     var _f = React.useState(defaultSelected), selectedDay = _f[0], setSelectedDay = _f[1];
     var defaultInputValue = defaultSelected
-        ? format__default["default"](defaultSelected, format, { locale: locale })
+        ? format(defaultSelected, format$1, { locale: locale })
         : '';
     var _g = React.useState(defaultInputValue), inputValue = _g[0], setInputValue = _g[1];
     var reset = function () {
@@ -2221,7 +2184,7 @@ function useInput(options) {
     var setSelected = function (date) {
         setSelectedDay(date);
         setMonth(date !== null && date !== void 0 ? date : today);
-        setInputValue(date ? format__default["default"](date, format, { locale: locale }) : '');
+        setInputValue(date ? format(date, format$1, { locale: locale }) : '');
     };
     var handleDayClick = function (day, _a) {
         var selected = _a.selected;
@@ -2231,7 +2194,7 @@ function useInput(options) {
             return;
         }
         setSelectedDay(day);
-        setInputValue(day ? format__default["default"](day, format, { locale: locale }) : '');
+        setInputValue(day ? format(day, format$1, { locale: locale }) : '');
     };
     var handleMonthChange = function (month) {
         setMonth(month);
@@ -2242,8 +2205,8 @@ function useInput(options) {
     var handleChange = function (e) {
         setInputValue(e.target.value);
         var day = parseValue(e.target.value);
-        var isBefore = fromDate && differenceInCalendarDays__default["default"](fromDate, day) > 0;
-        var isAfter = toDate && differenceInCalendarDays__default["default"](day, toDate) > 0;
+        var isBefore = fromDate && differenceInCalendarDays(fromDate, day) > 0;
+        var isAfter = toDate && differenceInCalendarDays(day, toDate) > 0;
         if (!isValidDate(day) || isBefore || isAfter) {
             setSelectedDay(undefined);
             return;
@@ -2286,7 +2249,7 @@ function useInput(options) {
         onChange: handleChange,
         onFocus: handleFocus,
         value: inputValue,
-        placeholder: format__default["default"](new Date(), format, { locale: locale })
+        placeholder: format(new Date(), format$1, { locale: locale })
     };
     return { dayPickerProps: dayPickerProps, inputProps: inputProps, reset: reset, setSelected: setSelected };
 }