react-day-picker 8.2.1 → 8.3.0

package/dist/index.esm.js

@@ -1,31 +1,35 @@
 import * as React from 'react';
-import React__default, { createContext, useContext, useState, forwardRef, useEffect, useRef } from 'react';
+import React__default, { useState, createContext, useContext, 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';
-import startOfDay from 'date-fns/startOfDay';
-import startOfMonth from 'date-fns/startOfMonth';
 import isSameYear from 'date-fns/isSameYear';
 import setMonth from 'date-fns/setMonth';
+import startOfMonth from 'date-fns/startOfMonth';
 import setYear from 'date-fns/setYear';
 import startOfYear from 'date-fns/startOfYear';
 import addMonths from 'date-fns/addMonths';
 import isBefore from 'date-fns/isBefore';
 import isSameMonth from 'date-fns/isSameMonth';
 import differenceInCalendarMonths from 'date-fns/differenceInCalendarMonths';
-import addDays from 'date-fns/addDays';
-import startOfWeek from 'date-fns/startOfWeek';
-import getUnixTime from 'date-fns/getUnixTime';
 import isSameDay from 'date-fns/isSameDay';
+import addDays from 'date-fns/addDays';
 import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
+import subDays from 'date-fns/subDays';
 import isAfter from 'date-fns/isAfter';
 import isDate from 'date-fns/isDate';
+import endOfMonth from 'date-fns/endOfMonth';
 import addWeeks from 'date-fns/addWeeks';
 import addYears from 'date-fns/addYears';
+import endOfISOWeek from 'date-fns/endOfISOWeek';
 import endOfWeek from 'date-fns/endOfWeek';
 import max from 'date-fns/max';
 import min from 'date-fns/min';
+import startOfISOWeek from 'date-fns/startOfISOWeek';
+import startOfWeek from 'date-fns/startOfWeek';
+import getUnixTime from 'date-fns/getUnixTime';
+import format from 'date-fns/format';
+import startOfDay from 'date-fns/startOfDay';
 import getWeeksInMonth from 'date-fns/getWeeksInMonth';
+import getISOWeek from 'date-fns/getISOWeek';
 import getWeek from 'date-fns/getWeek';
 import parse from 'date-fns/parse';
 
@@ -92,309 +96,342 @@ function isDayPickerSingle(props) {
     return props.mode === 'single';
 }
 
-/**
- * The name of the default CSS classes.
- */
-var defaultClassNames = {
-    root: 'rdp',
-    multiple_months: 'rdp-multiple_months',
-    with_weeknumber: 'rdp-with_weeknumber',
-    vhidden: 'rdp-vhidden',
-    button_reset: 'rdp-button_reset',
-    button: 'rdp-button',
-    caption: 'rdp-caption',
-    caption_start: 'rdp-caption_start',
-    caption_end: 'rdp-caption_end',
-    caption_between: 'rdp-caption_between',
-    caption_label: 'rdp-caption_label',
-    caption_dropdowns: 'rdp-caption_dropdowns',
-    dropdown: 'rdp-dropdown',
-    dropdown_month: 'rdp-dropdown_month',
-    dropdown_year: 'rdp-dropdown_year',
-    dropdown_icon: 'rdp-dropdown_icon',
-    months: 'rdp-months',
-    month: 'rdp-month',
-    table: 'rdp-table',
-    tbody: 'rdp-tbody',
-    tfoot: 'rdp-tfoot',
-    head: 'rdp-head',
-    head_row: 'rdp-head_row',
-    head_cell: 'rdp-head_cell',
-    nav: 'rdp-nav',
-    nav_button: 'rdp-nav_button',
-    nav_button_previous: 'rdp-nav_button_previous',
-    nav_button_next: 'rdp-nav_button_next',
-    nav_icon: 'rdp-nav_icon',
-    row: 'rdp-row',
-    weeknumber: 'rdp-weeknumber',
-    cell: 'rdp-cell',
-    day: 'rdp-day',
-    day_today: 'rdp-day_today',
-    day_outside: 'rdp-day_outside',
-    day_selected: 'rdp-day_selected',
-    day_disabled: 'rdp-day_disabled',
-    day_hidden: 'rdp-day_hidden',
-    day_range_start: 'rdp-day_range_start',
-    day_range_end: 'rdp-day_range_end',
-    day_range_middle: 'rdp-day_range_middle'
-};
+/** Render the dropdown to navigate between months. */
+function MonthsDropdown(props) {
+    var _a = useDayPicker(), fromDate = _a.fromDate, toDate = _a.toDate, styles = _a.styles, locale = _a.locale, formatMonthCaption = _a.formatters.formatMonthCaption, classNames = _a.classNames, Dropdown = _a.components.Dropdown, labelMonthDropdown = _a.labels.labelMonthDropdown;
+    // Dropdown should appear only when both from/toDate is set
+    if (!fromDate)
+        return React__default.createElement(React__default.Fragment, null);
+    if (!toDate)
+        return React__default.createElement(React__default.Fragment, null);
+    var dropdownMonths = [];
+    if (isSameYear(fromDate, toDate)) {
+        // only display the months included in the range
+        var date = startOfMonth(fromDate);
+        for (var month = fromDate.getMonth(); month <= toDate.getMonth(); month++) {
+            dropdownMonths.push(setMonth(date, month));
+        }
+    }
+    else {
+        // display all the 12 months
+        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(date, month));
+        }
+    }
+    var handleChange = function (e) {
+        var selectedMonth = Number(e.target.value);
+        var newMonth = setMonth(startOfMonth(props.displayMonth), selectedMonth);
+        props.onChange(newMonth);
+    };
+    return (React__default.createElement(Dropdown, { name: "months", "aria-label": labelMonthDropdown(), className: classNames.dropdown_month, style: styles.dropdown_month, onChange: handleChange, value: props.displayMonth.getMonth(), caption: formatMonthCaption(props.displayMonth, { locale: locale }) }, dropdownMonths.map(function (m) { return (React__default.createElement("option", { key: m.getMonth(), value: m.getMonth() }, formatMonthCaption(m, { locale: locale }))); })));
+}
 
 /**
- * The default formatter for the caption.
+ * Render a dropdown to change the year. Take in account the `nav.fromDate` and
+ * `toDate` from context.
  */
-function formatCaption(month, options) {
-    return format(month, 'LLLL y', options);
+function YearsDropdown(props) {
+    var displayMonth = props.displayMonth;
+    var _a = useDayPicker(), fromDate = _a.fromDate, toDate = _a.toDate, locale = _a.locale, styles = _a.styles, classNames = _a.classNames, Dropdown = _a.components.Dropdown, formatYearCaption = _a.formatters.formatYearCaption, labelYearDropdown = _a.labels.labelYearDropdown;
+    var years = [];
+    // Dropdown should appear only when both from/toDate is set
+    if (!fromDate)
+        return React__default.createElement(React__default.Fragment, null);
+    if (!toDate)
+        return React__default.createElement(React__default.Fragment, null);
+    var fromYear = fromDate.getFullYear();
+    var toYear = toDate.getFullYear();
+    for (var year = fromYear; year <= toYear; year++) {
+        years.push(setYear(startOfYear(new Date()), year));
+    }
+    var handleChange = function (e) {
+        var newMonth = setYear(startOfMonth(displayMonth), Number(e.target.value));
+        props.onChange(newMonth);
+    };
+    return (React__default.createElement(Dropdown, { 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.createElement("option", { key: year.getFullYear(), value: year.getFullYear() }, formatYearCaption(year, { locale: locale }))); })));
 }
 
 /**
- * The default formatter for the Day button.
+ * Helper hook for using controlled/uncontrolled values from a component props.
+ *
+ * When the value is not controlled, pass `undefined` as `controlledValue` and
+ * use the returned setter to update it.
+ *
+ * When the value is controlled, pass the controlled value as second
+ * argument, which will be always returned as `value`.
  */
-function formatDay(day, options) {
-    return format(day, 'd', options);
+function useControlledValue(defaultValue, controlledValue) {
+    var _a = useState(defaultValue), uncontrolledValue = _a[0], setValue = _a[1];
+    var value = controlledValue === undefined ? uncontrolledValue : controlledValue;
+    return [value, setValue];
 }
 
-/**
- * The default formatter for the Month caption.
- */
-function formatMonthCaption(month, options) {
-    return format(month, 'LLLL', options);
+/** Return the initial month according to the given options. */
+function getInitialMonth(context) {
+    var month = context.month, defaultMonth = context.defaultMonth, today = context.today;
+    var initialMonth = month || defaultMonth || today || 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(toDate, initialMonth) < 0) {
+        var offset = -1 * (numberOfMonths - 1);
+        initialMonth = addMonths(toDate, offset);
+    }
+    // Fix the initialMonth if is before the from-date
+    if (fromDate && differenceInCalendarMonths(initialMonth, fromDate) < 0) {
+        initialMonth = fromDate;
+    }
+    return startOfMonth(initialMonth);
 }
 
-/**
- * The default formatter for the week number.
- */
-function formatWeekNumber(weekNumber) {
-    return "".concat(weekNumber);
+/** Controls the navigation state. */
+function useNavigationState() {
+    var context = useDayPicker();
+    var initialMonth = getInitialMonth(context);
+    var _a = useControlledValue(initialMonth, context.month), month = _a[0], setMonth = _a[1];
+    var goToMonth = function (date) {
+        var _a;
+        if (context.disableNavigation)
+            return;
+        var month = startOfMonth(date);
+        setMonth(month);
+        (_a = context.onMonthChange) === null || _a === void 0 ? void 0 : _a.call(context, month);
+    };
+    return [month, goToMonth];
 }
 
 /**
- * The default formatter for the name of the weekday.
+ * Return the months to display in the component according to the number of
+ * months and the from/to date.
  */
-function formatWeekdayName(weekday, options) {
-    return format(weekday, 'cccccc', options);
+function getDisplayMonths(month, _a) {
+    var reverseMonths = _a.reverseMonths, numberOfMonths = _a.numberOfMonths;
+    var start = startOfMonth(month);
+    var end = startOfMonth(addMonths(start, numberOfMonths));
+    var monthsDiff = differenceInCalendarMonths(end, start);
+    var months = [];
+    for (var i = 0; i < monthsDiff; i++) {
+        var nextMonth = addMonths(start, i);
+        months.push(nextMonth);
+    }
+    if (reverseMonths)
+        months = months.reverse();
+    return months;
 }
 
 /**
- * The default formatter for the Year caption.
+ * Returns the next month the user can navigate to according to the given
+ * options.
+ *
+ * Please note that the next month is not always the next calendar month:
+ *
+ * - if after the `toDate` range, is undefined;
+ * - if the navigation is paged, is the number of months displayed ahead.
+ *
  */
-function formatYearCaption(year, options) {
-    return format(year, 'yyyy', options);
+function getNextMonth(startingMonth, options) {
+    if (options.disableNavigation) {
+        return undefined;
+    }
+    var toDate = options.toDate, pagedNavigation = options.pagedNavigation, _a = options.numberOfMonths, numberOfMonths = _a === void 0 ? 1 : _a;
+    var offset = pagedNavigation ? numberOfMonths : 1;
+    var month = startOfMonth(startingMonth);
+    if (!toDate) {
+        return addMonths(month, offset);
+    }
+    var monthsDiff = differenceInCalendarMonths(toDate, startingMonth);
+    if (monthsDiff < numberOfMonths) {
+        return undefined;
+    }
+    // Jump forward as the number of months when paged navigation
+    return addMonths(month, offset);
 }
 
-var formatters = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    formatCaption: formatCaption,
-    formatDay: formatDay,
-    formatMonthCaption: formatMonthCaption,
-    formatWeekNumber: formatWeekNumber,
-    formatWeekdayName: formatWeekdayName,
-    formatYearCaption: formatYearCaption
-});
-
 /**
- * The default ARIA label for the day button.
+ * Returns the next previous the user can navigate to, according to the given
+ * options.
+ *
+ * Please note that the previous month is not always the previous calendar
+ * month:
+ *
+ * - if before the `fromDate` date, is `undefined`;
+ * - if the navigation is paged, is the number of months displayed before.
+ *
  */
-var labelDay = function (day, activeModifiers, options) {
-    return format(day, 'do MMMM (EEEE)', options);
-};
+function getPreviousMonth(startingMonth, options) {
+    if (options.disableNavigation) {
+        return undefined;
+    }
+    var fromDate = options.fromDate, pagedNavigation = options.pagedNavigation, _a = options.numberOfMonths, numberOfMonths = _a === void 0 ? 1 : _a;
+    var offset = pagedNavigation ? numberOfMonths : 1;
+    var month = startOfMonth(startingMonth);
+    if (!fromDate) {
+        return addMonths(month, -offset);
+    }
+    var monthsDiff = differenceInCalendarMonths(month, fromDate);
+    if (monthsDiff <= 0) {
+        return undefined;
+    }
+    // Jump back as the number of months when paged navigation
+    return addMonths(month, -offset);
+}
 
 /**
- * The default ARIA label for the WeekNumber element.
+ * The Navigation context shares details and methods to navigate the months in DayPicker.
+ * Access this context from the {@link useNavigation} hook.
  */
-var labelMonthDropdown = function () {
-    return 'Month: ';
-};
-
-/**
- * The default ARIA label for next month button in navigation
- */
-var labelNext = function () {
-    return 'Go to next month';
-};
-
-/**
- * The default ARIA label for previous month button in navigation
- */
-var labelPrevious = function () {
-    return 'Go to previous month';
-};
-
-/**
- * The default ARIA label for the Weekday element.
- */
-var labelWeekday = function (day, options) {
-    return format(day, 'cccc', options);
-};
-
-/**
- * The default ARIA label for the WeekNumber element.
- */
-var labelWeekNumber = function (n) {
-    return "Week n. ".concat(n);
-};
-
+var NavigationContext = createContext(undefined);
+/** Provides the values for the {@link NavigationContext}. */
+function NavigationProvider(props) {
+    var dayPicker = useDayPicker();
+    var _a = useNavigationState(), currentMonth = _a[0], goToMonth = _a[1];
+    var displayMonths = getDisplayMonths(currentMonth, dayPicker);
+    var nextMonth = getNextMonth(currentMonth, dayPicker);
+    var previousMonth = getPreviousMonth(currentMonth, dayPicker);
+    var isDateDisplayed = function (date) {
+        return displayMonths.some(function (displayMonth) {
+            return isSameMonth(date, displayMonth);
+        });
+    };
+    var goToDate = function (date, refDate) {
+        if (isDateDisplayed(date)) {
+            return;
+        }
+        if (refDate && isBefore(date, refDate)) {
+            goToMonth(addMonths(date, 1 + dayPicker.numberOfMonths * -1));
+        }
+        else {
+            goToMonth(date);
+        }
+    };
+    var value = {
+        currentMonth: currentMonth,
+        displayMonths: displayMonths,
+        goToMonth: goToMonth,
+        goToDate: goToDate,
+        previousMonth: previousMonth,
+        nextMonth: nextMonth,
+        isDateDisplayed: isDateDisplayed
+    };
+    return (React__default.createElement(NavigationContext.Provider, { value: value }, props.children));
+}
 /**
- * The default ARIA label for the WeekNumber element.
+ * 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.
  */
-var labelYearDropdown = function () {
-    return 'Year: ';
-};
-
-var labels = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    labelDay: labelDay,
-    labelMonthDropdown: labelMonthDropdown,
-    labelNext: labelNext,
-    labelPrevious: labelPrevious,
-    labelWeekday: labelWeekday,
-    labelWeekNumber: labelWeekNumber,
-    labelYearDropdown: labelYearDropdown
-});
+function useNavigation() {
+    var context = useContext(NavigationContext);
+    if (!context) {
+        throw new Error('useNavigation must be used within a NavigationProvider');
+    }
+    return context;
+}
 
 /**
- * Returns the default values to use in the DayPickerContext, in case they are
- * not passed down with the DayPicker initial props.
+ * Render a caption with the dropdowns to navigate between months and years.
  */
-function getDefaultContextValue() {
-    var captionLayout = 'buttons';
-    var classNames = defaultClassNames;
-    var locale = enUS;
-    var modifiersClassNames = {};
-    var modifiers = {};
-    var numberOfMonths = 1;
-    var styles = {};
-    var today = new Date();
-    return {
-        captionLayout: captionLayout,
-        classNames: classNames,
-        formatters: formatters,
-        labels: labels,
-        locale: locale,
-        modifiersClassNames: modifiersClassNames,
-        modifiers: modifiers,
-        numberOfMonths: numberOfMonths,
-        styles: styles,
-        today: today,
-        mode: 'default'
+function CaptionDropdowns(props) {
+    var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles, CaptionLabel = _a.components.CaptionLabel;
+    var goToMonth = useNavigation().goToMonth;
+    var handleMonthChange = function (newMonth) {
+        goToMonth(newMonth);
     };
+    var captionLabel = (React__default.createElement(CaptionLabel, { 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 })));
 }
 
-/** Return the `fromDate` and `toDate` prop values values parsing the DayPicker props. */
-function parseFromToProps(props) {
-    var fromYear = props.fromYear, toYear = props.toYear, fromMonth = props.fromMonth, toMonth = props.toMonth;
-    var fromDate = props.fromDate, toDate = props.toDate;
-    if (fromMonth) {
-        fromDate = startOfMonth(fromMonth);
-    }
-    else if (fromYear) {
-        fromDate = new Date(fromYear, 0, 1);
+/**
+ * Render a button HTML element applying the reset class name.
+ */
+var Button = forwardRef(function (props, ref) {
+    var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles;
+    var classNamesArr = [classNames.button_reset, classNames.button];
+    if (props.className) {
+        classNamesArr.push(props.className);
     }
-    if (toMonth) {
-        toDate = endOfMonth(toMonth);
+    var className = classNamesArr.join(' ');
+    var style = __assign(__assign({}, styles.button_reset), styles.button);
+    if (props.style) {
+        Object.assign(style, props.style);
     }
-    else if (toYear) {
-        toDate = new Date(toYear, 11, 31);
+    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. */
+function Navigation(props) {
+    var _a = useDayPicker(), dir = _a.dir, locale = _a.locale, classNames = _a.classNames, styles = _a.styles, _b = _a.labels, labelPrevious = _b.labelPrevious, labelNext = _b.labelNext, _c = _a.components, IconRight = _c.IconRight, IconLeft = _c.IconLeft;
+    if (!props.nextMonth && !props.previousMonth) {
+        return React__default.createElement(React__default.Fragment, null);
     }
-    return {
-        fromDate: fromDate ? startOfDay(fromDate) : undefined,
-        toDate: toDate ? startOfDay(toDate) : undefined
-    };
+    var previousLabel = labelPrevious(props.previousMonth, { locale: locale });
+    var previousClassName = [
+        classNames.nav_button,
+        classNames.nav_button_previous
+    ].join(' ');
+    var nextLabel = labelNext(props.nextMonth, { locale: locale });
+    var nextClassName = [
+        classNames.nav_button,
+        classNames.nav_button_next
+    ].join(' ');
+    return (React__default.createElement("div", { className: classNames.nav, style: styles.nav },
+        !props.hidePrevious && (React__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.createElement(IconRight, { className: classNames.nav_icon, style: styles.nav_icon })) : (React__default.createElement(IconLeft, { className: classNames.nav_icon, style: styles.nav_icon })))),
+        !props.hideNext && (React__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.createElement(IconLeft, { className: classNames.nav_icon, style: styles.nav_icon })) : (React__default.createElement(IconRight, { className: classNames.nav_icon, style: styles.nav_icon }))))));
 }
 
 /**
- * The DayPicker context shares the props passed to DayPicker within internal
- * and custom components. It is used to set the default values and perform
- * one-time calculations required to render the days.
- *
- * Access to this context from the {@link useDayPicker} hook.
- */
-var DayPickerContext = createContext(undefined);
-/**
- * The provider for the {@link DayPickerContext}, assigning the defaults from the
- * initial DayPicker props.
+ * Render a caption with a button-based navigation.
  */
-function DayPickerProvider(props) {
-    var _a, _b, _c, _d;
-    var initialProps = props.initialProps;
-    var defaults = getDefaultContextValue();
-    var _e = parseFromToProps(initialProps), fromDate = _e.fromDate, toDate = _e.toDate;
-    var captionLayout = (_a = initialProps.captionLayout) !== null && _a !== void 0 ? _a : defaults.captionLayout;
-    if (captionLayout !== 'buttons' && (!fromDate || !toDate)) {
-        captionLayout = 'buttons';
-    }
-    var onSelect;
-    if (isDayPickerSingle(initialProps) ||
-        isDayPickerMultiple(initialProps) ||
-        isDayPickerRange(initialProps)) {
-        onSelect = initialProps.onSelect;
+function CaptionNavigation(props) {
+    var _a;
+    var _b = useDayPicker(), numberOfMonths = _b.numberOfMonths, dir = _b.dir, CaptionLabel = _b.components.CaptionLabel;
+    var _c = useNavigation(), previousMonth = _c.previousMonth, nextMonth = _c.nextMonth, goToMonth = _c.goToMonth, displayMonths = _c.displayMonths;
+    var displayIndex = displayMonths.findIndex(function (month) {
+        return isSameMonth(props.displayMonth, month);
+    });
+    var isFirst = displayIndex === 0;
+    var isLast = displayIndex === displayMonths.length - 1;
+    if (dir === 'rtl') {
+        _a = [isFirst, isLast], isLast = _a[0], isFirst = _a[1];
     }
-    var value = {
-        captionLayout: captionLayout,
-        className: initialProps.className,
-        classNames: __assign(__assign({}, defaults.classNames), initialProps.classNames),
-        components: __assign(__assign({}, defaults.components), initialProps.components),
-        defaultMonth: initialProps.defaultMonth,
-        dir: initialProps.dir,
-        disabled: initialProps.disabled,
-        disableNavigation: initialProps.disableNavigation,
-        fixedWeeks: initialProps.fixedWeeks,
-        footer: initialProps.footer,
-        formatters: __assign(__assign({}, defaults.formatters), initialProps.formatters),
-        fromDate: fromDate,
-        hidden: initialProps.hidden,
-        hideHead: initialProps.hideHead,
-        initialFocus: initialProps.initialFocus,
-        labels: __assign(__assign({}, defaults.labels), initialProps.labels),
-        locale: (_b = initialProps.locale) !== null && _b !== void 0 ? _b : defaults.locale,
-        mode: initialProps.mode || 'default',
-        modifiers: __assign(__assign({}, defaults.modifiers), initialProps.modifiers),
-        modifiersClassNames: __assign(__assign({}, defaults.modifiersClassNames), initialProps.modifiersClassNames),
-        modifiersStyles: initialProps.modifiersStyles,
-        month: initialProps.month,
-        numberOfMonths: (_c = initialProps.numberOfMonths) !== null && _c !== void 0 ? _c : defaults.numberOfMonths,
-        onDayBlur: initialProps.onDayBlur,
-        onDayClick: initialProps.onDayClick,
-        onDayFocus: initialProps.onDayFocus,
-        onDayKeyDown: initialProps.onDayKeyDown,
-        onDayKeyPress: initialProps.onDayKeyPress,
-        onDayKeyUp: initialProps.onDayKeyUp,
-        onDayMouseEnter: initialProps.onDayMouseEnter,
-        onDayMouseLeave: initialProps.onDayMouseLeave,
-        onDayTouchCancel: initialProps.onDayTouchCancel,
-        onDayTouchEnd: initialProps.onDayTouchEnd,
-        onDayTouchMove: initialProps.onDayTouchMove,
-        onDayTouchStart: initialProps.onDayTouchStart,
-        onMonthChange: initialProps.onMonthChange,
-        onNextClick: initialProps.onNextClick,
-        onPrevClick: initialProps.onPrevClick,
-        onSelect: onSelect,
-        onWeekNumberClick: initialProps.onWeekNumberClick,
-        pagedNavigation: initialProps.pagedNavigation,
-        reverseMonths: initialProps.reverseMonths,
-        selected: initialProps.selected,
-        showOutsideDays: initialProps.showOutsideDays,
-        showWeekNumber: initialProps.showWeekNumber,
-        style: initialProps.style,
-        styles: __assign(__assign({}, defaults.styles), initialProps.styles),
-        toDate: toDate,
-        today: (_d = initialProps.today) !== null && _d !== void 0 ? _d : defaults.today,
-        weekStartsOn: initialProps.weekStartsOn
+    var hideNext = numberOfMonths > 1 && (isFirst || !isLast);
+    var hidePrevious = numberOfMonths > 1 && (isLast || !isFirst);
+    var handlePreviousClick = function () {
+        if (!previousMonth)
+            return;
+        goToMonth(previousMonth);
     };
-    return (React__default.createElement(DayPickerContext.Provider, { value: value }, props.children));
+    var handleNextClick = function () {
+        if (!nextMonth)
+            return;
+        goToMonth(nextMonth);
+    };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(CaptionLabel, { id: props.id, displayMonth: props.displayMonth }),
+        React__default.createElement(Navigation, { displayMonth: props.displayMonth, hideNext: hideNext, hidePrevious: hidePrevious, nextMonth: nextMonth, previousMonth: previousMonth, onPreviousClick: handlePreviousClick, onNextClick: handleNextClick })));
 }
 
 /**
- * Hook to access the {@link DayPickerContextValue}.
- *
- * Use the DayPicker context to access to the props passed to DayPicker inside
- * internal or custom components.
+ * Render the caption of a month. The caption has a different layout when
+ * setting the {@link DayPickerBase.captionLayout} prop.
  */
-function useDayPicker() {
-    var context = useContext(DayPickerContext);
-    if (!context) {
-        throw new Error("useDayPicker must be used within a DayPickerProvider.");
+function Caption(props) {
+    var _a = useDayPicker(), classNames = _a.classNames, disableNavigation = _a.disableNavigation, styles = _a.styles, captionLayout = _a.captionLayout, CaptionLabel = _a.components.CaptionLabel;
+    var caption;
+    if (disableNavigation) {
+        caption = React__default.createElement(CaptionLabel, { id: props.id, displayMonth: props.displayMonth });
     }
-    return context;
+    else if (captionLayout === 'dropdown') {
+        caption = (React__default.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }));
+    }
+    else {
+        caption = (React__default.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id }));
+    }
+    return (React__default.createElement("div", { className: classNames.caption, style: styles.caption }, caption));
 }
 
 /** Render the caption for the displayed month. This component is used when `captionLayout="buttons"`. */
@@ -404,1422 +441,1368 @@ function CaptionLabel(props) {
 }
 
 /**
- * Render the icon in the styled drop-down.
- */
-function IconDropdown(props) {
-    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" })));
-}
-
-/**
- * Render a styled select component – displaying a caption and a custom
- * drop-down icon.
+ * The SelectMultiple context shares details about the selected days when in
+ * multiple selection mode.
+ *
+ * Access this context from the {@link useSelectMultiple} hook.
  */
-function Dropdown(props) {
-    var _a, _b;
-    var onChange = props.onChange, value = props.value, children = props.children, caption = props.caption, className = props.className, style = props.style;
-    var dayPicker = useDayPicker();
-    var IconDropdownComponent = (_b = (_a = dayPicker.components) === null || _a === void 0 ? void 0 : _a.IconDropdown) !== null && _b !== void 0 ? _b : IconDropdown;
-    return (React__default.createElement("div", { className: className, style: style },
-        React__default.createElement("span", { className: dayPicker.classNames.vhidden }, props['aria-label']),
-        React__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.createElement("div", { className: dayPicker.classNames.caption_label, style: dayPicker.styles.caption_label, "aria-hidden": "true" },
-            caption,
-            React__default.createElement(IconDropdownComponent, { className: dayPicker.classNames.dropdown_icon, style: dayPicker.styles.dropdown_icon }))));
+var SelectMultipleContext = createContext(undefined);
+/** Provides the values for the {@link SelectMultipleContext}. */
+function SelectMultipleProvider(props) {
+    if (!isDayPickerMultiple(props.initialProps)) {
+        var emptyContextValue = {
+            selected: undefined,
+            modifiers: {
+                disabled: []
+            }
+        };
+        return (React__default.createElement(SelectMultipleContext.Provider, { value: emptyContextValue }, props.children));
+    }
+    return (React__default.createElement(SelectMultipleProviderInternal, { initialProps: props.initialProps, children: props.children }));
 }
-
-/** Render the dropdown to navigate between months. */
-function MonthsDropdown(props) {
-    var _a;
-    var _b = useDayPicker(), fromDate = _b.fromDate, toDate = _b.toDate, styles = _b.styles, locale = _b.locale, 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.createElement(React__default.Fragment, null);
-    if (!toDate)
-        return React__default.createElement(React__default.Fragment, null);
-    var dropdownMonths = [];
-    if (isSameYear(fromDate, toDate)) {
-        // only display the months included in the range
-        var date = startOfMonth(fromDate);
-        for (var month = fromDate.getMonth(); month <= toDate.getMonth(); month++) {
-            dropdownMonths.push(setMonth(date, month));
+function SelectMultipleProviderInternal(_a) {
+    var initialProps = _a.initialProps, children = _a.children;
+    var selected = initialProps.selected, min = initialProps.min, max = initialProps.max;
+    var onDayClick = function (day, activeModifiers, e) {
+        var _a, _b;
+        (_a = initialProps.onDayClick) === null || _a === void 0 ? void 0 : _a.call(initialProps, day, activeModifiers, e);
+        var isMinSelected = Boolean(activeModifiers.selected && min && (selected === null || selected === void 0 ? void 0 : selected.length) === min);
+        if (isMinSelected) {
+            return;
         }
-    }
-    else {
-        // display all the 12 months
-        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(date, month));
+        var isMaxSelected = Boolean(!activeModifiers.selected && max && (selected === null || selected === void 0 ? void 0 : selected.length) === max);
+        if (isMaxSelected) {
+            return;
         }
+        var selectedDays = selected ? __spreadArray([], selected, true) : [];
+        if (activeModifiers.selected) {
+            var index = selectedDays.findIndex(function (selectedDay) {
+                return isSameDay(day, selectedDay);
+            });
+            selectedDays.splice(index, 1);
+        }
+        else {
+            selectedDays.push(day);
+        }
+        (_b = initialProps.onSelect) === null || _b === void 0 ? void 0 : _b.call(initialProps, selectedDays, day, activeModifiers, e);
+    };
+    var modifiers = {
+        disabled: []
+    };
+    if (selected) {
+        modifiers.disabled.push(function (day) {
+            var isMaxSelected = max && selected.length > max - 1;
+            var isSelected = selected.some(function (selectedDay) {
+                return isSameDay(selectedDay, day);
+            });
+            return Boolean(isMaxSelected && !isSelected);
+        });
     }
-    var handleChange = function (e) {
-        var selectedMonth = Number(e.target.value);
-        var newMonth = setMonth(startOfMonth(props.displayMonth), selectedMonth);
-        props.onChange(newMonth);
+    var contextValue = {
+        selected: selected,
+        onDayClick: onDayClick,
+        modifiers: modifiers
     };
-    var DropdownComponent = (_a = components === null || components === void 0 ? void 0 : components.Dropdown) !== null && _a !== void 0 ? _a : Dropdown;
-    return (React__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.createElement("option", { key: m.getMonth(), value: m.getMonth() }, formatMonthCaption(m, { locale: locale }))); })));
+    return (React__default.createElement(SelectMultipleContext.Provider, { value: contextValue }, children));
 }
-
 /**
- * Render a dropdown to change the year. Take in account the `nav.fromDate` and
- * `toDate` from context.
+ * Hook to access the {@link SelectMultipleContextValue}.
+ *
+ * This hook is meant to be used inside internal or custom components.
  */
-function YearsDropdown(props) {
-    var _a;
-    var displayMonth = props.displayMonth;
-    var _b = useDayPicker(), fromDate = _b.fromDate, toDate = _b.toDate, locale = _b.locale, styles = _b.styles, classNames = _b.classNames, components = _b.components, formatYearCaption = _b.formatters.formatYearCaption, labelYearDropdown = _b.labels.labelYearDropdown;
-    var years = [];
-    // Dropdown should appear only when both from/toDate is set
-    if (!fromDate)
-        return React__default.createElement(React__default.Fragment, null);
-    if (!toDate)
-        return React__default.createElement(React__default.Fragment, null);
-    var fromYear = fromDate.getFullYear();
-    var toYear = toDate.getFullYear();
-    for (var year = fromYear; year <= toYear; year++) {
-        years.push(setYear(startOfYear(new Date()), year));
+function useSelectMultiple() {
+    var context = useContext(SelectMultipleContext);
+    if (!context) {
+        throw new Error('useSelectMultiple must be used within a SelectMultipleProvider');
     }
-    var handleChange = function (e) {
-        var newMonth = setYear(startOfMonth(displayMonth), Number(e.target.value));
-        props.onChange(newMonth);
-    };
-    var DropdownComponent = (_a = components === null || components === void 0 ? void 0 : components.Dropdown) !== null && _a !== void 0 ? _a : Dropdown;
-    return (React__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.createElement("option", { key: year.getFullYear(), value: year.getFullYear() }, formatYearCaption(year, { locale: locale }))); })));
+    return context;
 }
 
 /**
- * Helper hook for using controlled/uncontrolled values from a component props.
- *
- * When the value is not controlled, pass `undefined` as `controlledValue` and
- * use the returned setter to update it.
+ * Add a day to an existing range.
  *
- * When the value is controlled, pass the controlled value as second
- * argument, which will be always returned as `value`.
+ * The returned range takes in account the `undefined` values and if the added
+ * day is already present in the range.
  */
-function useControlledValue(defaultValue, controlledValue) {
-    var _a = useState(defaultValue), uncontrolledValue = _a[0], setValue = _a[1];
-    var value = controlledValue === undefined ? uncontrolledValue : controlledValue;
-    return [value, setValue];
-}
-
-/** Return the initial month according to the given options. */
-function getInitialMonth(context) {
-    var month = context.month, defaultMonth = context.defaultMonth, today = context.today;
-    var initialMonth = month || defaultMonth || today || 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(toDate, initialMonth) < 0) {
-        var offset = -1 * (numberOfMonths - 1);
-        initialMonth = addMonths(toDate, offset);
+function addToRange(day, range) {
+    var _a = range || {}, from = _a.from, to = _a.to;
+    if (!from) {
+        return { from: day, to: undefined };
     }
-    // Fix the initialMonth if is before the from-date
-    if (fromDate && differenceInCalendarMonths(initialMonth, fromDate) < 0) {
-        initialMonth = fromDate;
+    if (!to && isSameDay(from, day)) {
+        return { from: from, to: day };
     }
-    return startOfMonth(initialMonth);
-}
-
-/** Controls the navigation state. */
-function useNavigationState() {
-    var context = useDayPicker();
-    var initialMonth = getInitialMonth(context);
-    var _a = useControlledValue(initialMonth, context.month), month = _a[0], setMonth = _a[1];
-    var goToMonth = function (date) {
-        var _a;
-        if (context.disableNavigation)
-            return;
-        var month = startOfMonth(date);
-        setMonth(month);
-        (_a = context.onMonthChange) === null || _a === void 0 ? void 0 : _a.call(context, month);
-    };
-    return [month, goToMonth];
-}
-
-/**
- * Return the months to display in the component according to the number of
- * months and the from/to date.
- */
-function getDisplayMonths(month, _a) {
-    var reverseMonths = _a.reverseMonths, numberOfMonths = _a.numberOfMonths;
-    var start = startOfMonth(month);
-    var end = startOfMonth(addMonths(start, numberOfMonths));
-    var monthsDiff = differenceInCalendarMonths(end, start);
-    var months = [];
-    for (var i = 0; i < monthsDiff; i++) {
-        var nextMonth = addMonths(start, i);
-        months.push(nextMonth);
+    if (!to && isBefore(day, from)) {
+        return { from: day, to: from };
     }
-    if (reverseMonths)
-        months = months.reverse();
-    return months;
-}
-
-/**
- * Returns the next month the user can navigate to according to the given
- * options.
- *
- * Please note that the next month is not always the next calendar month:
- *
- * - if after the `toDate` range, is undefined;
- * - if the navigation is paged, is the number of months displayed ahead.
- *
- */
-function getNextMonth(startingMonth, options) {
-    if (options.disableNavigation) {
+    if (!to) {
+        return { from: from, to: day };
+    }
+    if (isSameDay(to, day) && isSameDay(from, day)) {
         return undefined;
     }
-    var toDate = options.toDate, pagedNavigation = options.pagedNavigation, _a = options.numberOfMonths, numberOfMonths = _a === void 0 ? 1 : _a;
-    var offset = pagedNavigation ? numberOfMonths : 1;
-    var month = startOfMonth(startingMonth);
-    if (!toDate) {
-        return addMonths(month, offset);
+    if (isSameDay(to, day)) {
+        return { from: to, to: undefined };
     }
-    var monthsDiff = differenceInCalendarMonths(toDate, startingMonth);
-    if (monthsDiff < numberOfMonths) {
+    if (isSameDay(from, day)) {
         return undefined;
     }
-    // Jump forward as the number of months when paged navigation
-    return addMonths(month, offset);
+    if (isAfter(from, day)) {
+        return { from: day, to: to };
+    }
+    return { from: from, to: day };
 }
 
 /**
- * Returns the next previous the user can navigate to, according to the given
- * options.
- *
- * Please note that the previous month is not always the previous calendar
- * month:
- *
- * - if before the `fromDate` date, is `undefined`;
- * - if the navigation is paged, is the number of months displayed before.
+ * The SelectRange context shares details about the selected days when in
+ * range selection mode.
  *
+ * Access this context from the {@link useSelectRange} hook.
  */
-function getPreviousMonth(startingMonth, options) {
-    if (options.disableNavigation) {
-        return undefined;
-    }
-    var fromDate = options.fromDate, pagedNavigation = options.pagedNavigation, _a = options.numberOfMonths, numberOfMonths = _a === void 0 ? 1 : _a;
-    var offset = pagedNavigation ? numberOfMonths : 1;
-    var month = startOfMonth(startingMonth);
-    if (!fromDate) {
-        return addMonths(month, -offset);
-    }
-    var monthsDiff = differenceInCalendarMonths(month, fromDate);
-    if (monthsDiff <= 0) {
-        return undefined;
+var SelectRangeContext = createContext(undefined);
+/** Provides the values for the {@link SelectRangeProvider}. */
+function SelectRangeProvider(props) {
+    if (!isDayPickerRange(props.initialProps)) {
+        var emptyContextValue = {
+            selected: undefined,
+            modifiers: {
+                range_start: [],
+                range_end: [],
+                range_middle: [],
+                disabled: []
+            }
+        };
+        return (React__default.createElement(SelectRangeContext.Provider, { value: emptyContextValue }, props.children));
     }
-    // Jump back as the number of months when paged navigation
-    return addMonths(month, -offset);
+    return (React__default.createElement(SelectRangeProviderInternal, { initialProps: props.initialProps, children: props.children }));
 }
-
-/**
- * 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 {@link NavigationContext}. */
-function NavigationProvider(props) {
-    var dayPicker = useDayPicker();
-    var _a = useNavigationState(), currentMonth = _a[0], goToMonth = _a[1];
-    var displayMonths = getDisplayMonths(currentMonth, dayPicker);
-    var nextMonth = getNextMonth(currentMonth, dayPicker);
-    var previousMonth = getPreviousMonth(currentMonth, dayPicker);
-    var isDateDisplayed = function (date) {
-        return displayMonths.some(function (displayMonth) {
-            return isSameMonth(date, displayMonth);
-        });
+function SelectRangeProviderInternal(_a) {
+    var initialProps = _a.initialProps, children = _a.children;
+    var selected = initialProps.selected;
+    var _b = selected || {}, selectedFrom = _b.from, selectedTo = _b.to;
+    var min = initialProps.min;
+    var max = initialProps.max;
+    var onDayClick = function (day, activeModifiers, e) {
+        var _a, _b;
+        (_a = initialProps.onDayClick) === null || _a === void 0 ? void 0 : _a.call(initialProps, day, activeModifiers, e);
+        var newRange = addToRange(day, selected);
+        (_b = initialProps.onSelect) === null || _b === void 0 ? void 0 : _b.call(initialProps, newRange, day, activeModifiers, e);
     };
-    var goToDate = function (date, refDate) {
-        if (isDateDisplayed(date)) {
-            return;
-        }
-        if (refDate && isBefore(date, refDate)) {
-            goToMonth(addMonths(date, 1 + dayPicker.numberOfMonths * -1));
+    var modifiers = {
+        range_start: [],
+        range_end: [],
+        range_middle: [],
+        disabled: []
+    };
+    if (selectedFrom) {
+        modifiers.range_start = [selectedFrom];
+        if (!selectedTo) {
+            modifiers.range_end = [selectedFrom];
         }
         else {
-            goToMonth(date);
+            modifiers.range_end = [selectedTo];
+            modifiers.range_middle = [
+                {
+                    after: selectedFrom,
+                    before: selectedTo
+                }
+            ];
         }
-    };
-    var value = {
-        currentMonth: currentMonth,
-        displayMonths: displayMonths,
-        goToMonth: goToMonth,
-        goToDate: goToDate,
-        previousMonth: previousMonth,
-        nextMonth: nextMonth,
-        isDateDisplayed: isDateDisplayed
-    };
-    return (React__default.createElement(NavigationContext.Provider, { value: value }, props.children));
+    }
+    if (min) {
+        if (selectedFrom && !selectedTo) {
+            modifiers.disabled.push({
+                after: subDays(selectedFrom, min - 1),
+                before: addDays(selectedFrom, min - 1)
+            });
+        }
+        if (selectedFrom && selectedTo) {
+            modifiers.disabled.push({
+                after: selectedFrom,
+                before: addDays(selectedFrom, min - 1)
+            });
+        }
+    }
+    if (max) {
+        if (selectedFrom && !selectedTo) {
+            modifiers.disabled.push({
+                before: addDays(selectedFrom, -max + 1)
+            });
+            modifiers.disabled.push({
+                after: addDays(selectedFrom, max - 1)
+            });
+        }
+        if (selectedFrom && selectedTo) {
+            var selectedCount = differenceInCalendarDays(selectedTo, selectedFrom) + 1;
+            var offset = max - selectedCount;
+            modifiers.disabled.push({
+                before: subDays(selectedFrom, offset)
+            });
+            modifiers.disabled.push({
+                after: addDays(selectedTo, offset)
+            });
+        }
+    }
+    return (React__default.createElement(SelectRangeContext.Provider, { value: { selected: selected, onDayClick: onDayClick, modifiers: modifiers } }, children));
 }
-
 /**
- * Hook to access the {@link NavigationContextValue}. Use this hook to navigate
- * between months or years in DayPicker.
+ * Hook to access the {@link SelectRangeContextValue}.
  *
  * This hook is meant to be used inside internal or custom components.
  */
-function useNavigation() {
-    var context = useContext(NavigationContext);
+function useSelectRange() {
+    var context = useContext(SelectRangeContext);
     if (!context) {
-        throw new Error('useNavigation must be used within a NavigationProvider');
+        throw new Error('useSelectRange must be used within a SelectRangeProvider');
     }
     return context;
 }
 
-/**
- * Render a caption with the dropdowns to navigate between months and years.
- */
-function CaptionDropdowns(props) {
-    var _a;
-    var _b = useDayPicker(), classNames = _b.classNames, styles = _b.styles, components = _b.components;
-    var goToMonth = useNavigation().goToMonth;
-    var handleMonthChange = function (newMonth) {
-        goToMonth(newMonth);
-    };
-    var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
-    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 })));
+/** Normalize to array a matcher input. */
+function matcherToArray(matcher) {
+    if (Array.isArray(matcher)) {
+        return matcher;
+    }
+    else if (matcher !== undefined) {
+        return [matcher];
+    }
+    else {
+        return [];
+    }
 }
 
-/**
- * Render the "previous month" button in the navigation.
- */
-function IconLeft(props) {
-    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" })));
+/** Create CustomModifiers from dayModifiers */
+function getCustomModifiers(dayModifiers) {
+    var customModifiers = {};
+    Object.entries(dayModifiers).forEach(function (_a) {
+        var modifier = _a[0], matcher = _a[1];
+        customModifiers[modifier] = matcherToArray(matcher);
+    });
+    return customModifiers;
 }
 
-/**
- * Render the "next month" button in the navigation.
- */
-function IconRight(props) {
-    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" })));
-}
+/** The name of the modifiers that are used internally by DayPicker. */
+var InternalModifier;
+(function (InternalModifier) {
+    InternalModifier["Outside"] = "outside";
+    /** Name of the modifier applied to the disabled days, using the `disabled` prop. */
+    InternalModifier["Disabled"] = "disabled";
+    /** Name of the modifier applied to the selected days using the `selected` prop). */
+    InternalModifier["Selected"] = "selected";
+    /** Name of the modifier applied to the hidden days using the `hidden` prop). */
+    InternalModifier["Hidden"] = "hidden";
+    /** Name of the modifier applied to the day specified using the `today` prop). */
+    InternalModifier["Today"] = "today";
+    /** The modifier applied to the day starting a selected range, when in range selection mode.  */
+    InternalModifier["RangeStart"] = "range_start";
+    /** The modifier applied to the day ending a selected range, when in range selection mode.  */
+    InternalModifier["RangeEnd"] = "range_end";
+    /** The modifier applied to the days between the start and the end of a selected range, when in range selection mode.  */
+    InternalModifier["RangeMiddle"] = "range_middle";
+})(InternalModifier || (InternalModifier = {}));
 
-/**
- * Render a button HTML element applying the reset class name.
- */
-var Button = forwardRef(function (props, ref) {
-    var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles;
-    var classNamesArr = [classNames.button_reset, classNames.button];
-    if (props.className) {
-        classNamesArr.push(props.className);
+var Selected = InternalModifier.Selected, Disabled = InternalModifier.Disabled, Hidden = InternalModifier.Hidden, Today = InternalModifier.Today, RangeEnd = InternalModifier.RangeEnd, RangeMiddle = InternalModifier.RangeMiddle, RangeStart = InternalModifier.RangeStart, Outside = InternalModifier.Outside;
+/** Return the {@link InternalModifiers} from the DayPicker and select contexts. */
+function getInternalModifiers(dayPicker, selectMultiple, selectRange) {
+    var _a;
+    var internalModifiers = (_a = {},
+        _a[Selected] = matcherToArray(dayPicker.selected),
+        _a[Disabled] = matcherToArray(dayPicker.disabled),
+        _a[Hidden] = matcherToArray(dayPicker.hidden),
+        _a[Today] = [dayPicker.today],
+        _a[RangeEnd] = [],
+        _a[RangeMiddle] = [],
+        _a[RangeStart] = [],
+        _a[Outside] = [],
+        _a);
+    if (dayPicker.fromDate) {
+        internalModifiers[Disabled].push({ before: dayPicker.fromDate });
     }
-    var className = classNamesArr.join(' ');
-    var style = __assign(__assign({}, styles.button_reset), styles.button);
-    if (props.style) {
-        Object.assign(style, props.style);
+    if (dayPicker.toDate) {
+        internalModifiers[Disabled].push({ after: dayPicker.toDate });
     }
-    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. */
-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.createElement(React__default.Fragment, null);
+    if (isDayPickerMultiple(dayPicker)) {
+        internalModifiers[Disabled] = internalModifiers[Disabled].concat(selectMultiple.modifiers[Disabled]);
     }
-    var previousLabel = labelPrevious(props.previousMonth, { locale: locale });
-    var previousClassName = [
-        classNames.nav_button,
-        classNames.nav_button_previous
-    ].join(' ');
-    var nextLabel = labelNext(props.nextMonth, { locale: locale });
-    var nextClassName = [
-        classNames.nav_button,
-        classNames.nav_button_next
-    ].join(' ');
-    var IconRightComponent = (_a = components === null || components === void 0 ? void 0 : components.IconRight) !== null && _a !== void 0 ? _a : IconRight;
-    var IconLeftComponent = (_b = components === null || components === void 0 ? void 0 : components.IconLeft) !== null && _b !== void 0 ? _b : IconLeft;
-    return (React__default.createElement("div", { className: classNames.nav, style: styles.nav },
-        !props.hidePrevious && (React__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.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, { name: "next-month", "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 }))))));
+    else if (isDayPickerRange(dayPicker)) {
+        internalModifiers[Disabled] = internalModifiers[Disabled].concat(selectRange.modifiers[Disabled]);
+        internalModifiers[RangeStart] = selectRange.modifiers[RangeStart];
+        internalModifiers[RangeMiddle] = selectRange.modifiers[RangeMiddle];
+        internalModifiers[RangeEnd] = selectRange.modifiers[RangeEnd];
+    }
+    return internalModifiers;
 }
 
+/** The Modifiers context store the modifiers used in DayPicker. To access the value of this context, use {@link useModifiers}. */
+var ModifiersContext = createContext(undefined);
+/** Provide the value for the {@link ModifiersContext}. */
+function ModifiersProvider(props) {
+    var dayPicker = useDayPicker();
+    var selectMultiple = useSelectMultiple();
+    var selectRange = useSelectRange();
+    var internalModifiers = getInternalModifiers(dayPicker, selectMultiple, selectRange);
+    var customModifiers = getCustomModifiers(dayPicker.modifiers);
+    var modifiers = __assign(__assign({}, internalModifiers), customModifiers);
+    return (React__default.createElement(ModifiersContext.Provider, { value: modifiers }, props.children));
+}
 /**
- * Render a caption with a button-based navigation.
+ * Return the modifiers used by DayPicker.
+ *
+ * This hook is meant to be used inside internal or custom components.
+ * Requires to be wrapped into {@link ModifiersProvider}.
+ *
  */
-function CaptionNavigation(props) {
-    var _a;
-    var _b;
-    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(props.displayMonth, month);
-    });
-    var isFirst = displayIndex === 0;
-    var isLast = displayIndex === displayMonths.length - 1;
-    if (dir === 'rtl') {
-        _a = [isFirst, isLast], isLast = _a[0], isFirst = _a[1];
+function useModifiers() {
+    var context = useContext(ModifiersContext);
+    if (!context) {
+        throw new Error('useModifiers must be used within a ModifiersProvider');
     }
-    var hideNext = numberOfMonths > 1 && (isFirst || !isLast);
-    var hidePrevious = numberOfMonths > 1 && (isLast || !isFirst);
-    var handlePreviousClick = function () {
-        if (!previousMonth)
-            return;
-        goToMonth(previousMonth);
-    };
-    var handleNextClick = function () {
-        if (!nextMonth)
-            return;
-        goToMonth(nextMonth);
-    };
-    var CaptionLabelComponent = (_b = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _b !== void 0 ? _b : CaptionLabel;
-    var captionLabel = (React__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
-    return (React__default.createElement(React__default.Fragment, null,
-        captionLabel,
-        React__default.createElement(Navigation, { displayMonth: props.displayMonth, hideNext: hideNext, hidePrevious: hidePrevious, nextMonth: nextMonth, previousMonth: previousMonth, onPreviousClick: handlePreviousClick, onNextClick: handleNextClick })));
+    return context;
 }
 
-/**
- * Render the caption of a month. The caption has a different layout when
- * setting the {@link DayPickerBase.captionLayout} prop.
- */
-function Caption(props) {
-    var _a;
-    var _b = useDayPicker(), classNames = _b.classNames, disableNavigation = _b.disableNavigation, styles = _b.styles, captionLayout = _b.captionLayout, components = _b.components;
-    var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
-    var caption;
-    if (disableNavigation) {
-        caption = (React__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
-    }
-    else if (captionLayout === 'dropdown') {
-        caption = (React__default.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }));
-    }
-    else {
-        caption = (React__default.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id }));
-    }
-    return (React__default.createElement("div", { className: classNames.caption, style: styles.caption }, caption));
+/** Returns true if `matcher` is of type {@link DateInterval}. */
+function isDateInterval(matcher) {
+    return Boolean(matcher &&
+        typeof matcher === 'object' &&
+        'before' in matcher &&
+        'after' in matcher);
 }
-
-/** 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.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))));
+/** Returns true if `value` is a {@link DateRange} type. */
+function isDateRange(value) {
+    return Boolean(value && typeof value === 'object' && 'from' in value);
 }
-
-/**
- * Generate a series of 7 days, starting from the week, to use for formatting
- * the weekday names (Monday, Tuesday, etc.).
- */
-function getWeekdays(locale, 
-/** The index of the first day of the week (0 - Sunday) */
-weekStartsOn) {
-    var start = startOfWeek(new Date(), { locale: locale, weekStartsOn: weekStartsOn });
-    var days = [];
-    for (var i = 0; i < 7; i++) {
-        var day = addDays(start, i);
-        days.push(day);
-    }
-    return days;
+/** Returns true if `value` is of type {@link DateAfter}. */
+function isDateAfterType(value) {
+    return Boolean(value && typeof value === 'object' && 'after' in value);
 }
-
-/**
- * Render the HeadRow component - i.e. the table head row with the weekday names.
- */
-function HeadRow() {
-    var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles, showWeekNumber = _a.showWeekNumber, locale = _a.locale, weekStartsOn = _a.weekStartsOn, formatWeekdayName = _a.formatters.formatWeekdayName, labelWeekday = _a.labels.labelWeekday;
-    var weekdays = getWeekdays(locale, weekStartsOn);
-    return (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 })))); })));
+/** 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 {@link DayOfWeek} type. */
+function isDayOfWeekType(value) {
+    return Boolean(value && typeof value === 'object' && 'dayOfWeek' in value);
 }
 
-/** Render the table head. */
-function Head() {
+/** Return `true` whether `date` is inside `range`. */
+function isDateInRange(date, range) {
     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.createElement("thead", { style: styles.head, className: classNames.head },
-        React__default.createElement(HeadRowComponent, null)));
+    var from = range.from, to = range.to;
+    if (!from) {
+        return false;
+    }
+    if (!to && isSameDay(from, date)) {
+        return true;
+    }
+    if (!to) {
+        return false;
+    }
+    var isToBeforeFrom = differenceInCalendarDays(to, from) < 0;
+    if (to && isToBeforeFrom) {
+        _a = [to, from], from = _a[0], to = _a[1];
+    }
+    return (differenceInCalendarDays(date, from) >= 0 &&
+        differenceInCalendarDays(to, date) >= 0);
 }
 
-/** Render the content of the day cell. */
-function DayContent(props) {
-    var _a = useDayPicker(), locale = _a.locale, formatDay = _a.formatters.formatDay;
-    return React__default.createElement(React__default.Fragment, null, formatDay(props.date, { locale: locale }));
+/** Returns true if `value` is a Date type. */
+function isDateType(value) {
+    return isDate(value);
+}
+/** Returns true if `value` is an array of valid dates. */
+function isArrayOfDates(value) {
+    return Array.isArray(value) && value.every(isDate);
 }
-
 /**
- * The SelectMultiple context shares details about the selected days when in
- * multiple selection mode.
+ * Returns whether a day matches against at least one of the given Matchers.
  *
- * Access this context from the {@link useSelectMultiple} hook.
- */
-var SelectMultipleContext = createContext(undefined);
-/** Provides the values for the {@link SelectMultipleContext}. */
-function SelectMultipleProvider(props) {
-    if (!isDayPickerMultiple(props.initialProps)) {
-        var emptyContextValue = {
-            selected: undefined,
-            modifiers: {
-                disabled: []
-            }
-        };
-        return (React__default.createElement(SelectMultipleContext.Provider, { value: emptyContextValue }, props.children));
-    }
-    return (React__default.createElement(SelectMultipleProviderInternal, { initialProps: props.initialProps, children: props.children }));
-}
-function SelectMultipleProviderInternal(_a) {
-    var initialProps = _a.initialProps, children = _a.children;
-    var selected = initialProps.selected, min = initialProps.min, max = initialProps.max;
-    var onDayClick = function (day, activeModifiers, e) {
-        var _a, _b;
-        (_a = initialProps.onDayClick) === null || _a === void 0 ? void 0 : _a.call(initialProps, day, activeModifiers, e);
-        var isMinSelected = Boolean(activeModifiers.selected && min && (selected === null || selected === void 0 ? void 0 : selected.length) === min);
-        if (isMinSelected) {
-            return;
+ * ```
+ * const day = new Date(2022, 5, 19);
+ * const matcher1: DateRange = {
+ *    from: new Date(2021, 12, 21),
+ *    to: new Date(2021, 12, 30)
+ * }
+ * const matcher2: DateRange = {
+ *    from: new Date(2022, 5, 1),
+ *    to: new Date(2022, 5, 23)
+ * }
+ *
+ * const isMatch(day, [matcher1, matcher2]); // true, since day is in the matcher1 range.
+ * ```
+ * */
+function isMatch(day, matchers) {
+    return matchers.some(function (matcher) {
+        if (typeof matcher === 'boolean') {
+            return matcher;
         }
-        var isMaxSelected = Boolean(!activeModifiers.selected && max && (selected === null || selected === void 0 ? void 0 : selected.length) === max);
-        if (isMaxSelected) {
-            return;
+        if (isDateType(matcher)) {
+            return isSameDay(day, matcher);
         }
-        var selectedDays = selected ? __spreadArray([], selected, true) : [];
-        if (activeModifiers.selected) {
-            var index = selectedDays.findIndex(function (selectedDay) {
-                return isSameDay(day, selectedDay);
-            });
-            selectedDays.splice(index, 1);
+        if (isArrayOfDates(matcher)) {
+            return matcher.includes(day);
         }
-        else {
-            selectedDays.push(day);
+        if (isDateRange(matcher)) {
+            return isDateInRange(day, matcher);
         }
-        (_b = initialProps.onSelect) === null || _b === void 0 ? void 0 : _b.call(initialProps, selectedDays, day, activeModifiers, e);
-    };
-    var modifiers = {
-        disabled: []
-    };
-    if (selected) {
-        modifiers.disabled.push(function (day) {
-            var isMaxSelected = max && selected.length > max - 1;
-            var isSelected = selected.some(function (selectedDay) {
-                return isSameDay(selectedDay, day);
-            });
-            return Boolean(isMaxSelected && !isSelected);
-        });
+        if (isDayOfWeekType(matcher)) {
+            return matcher.dayOfWeek.includes(day.getDay());
+        }
+        if (isDateInterval(matcher)) {
+            var isBefore = differenceInCalendarDays(matcher.before, day) > 0;
+            var isAfter = differenceInCalendarDays(day, matcher.after) > 0;
+            return isBefore && isAfter;
+        }
+        if (isDateAfterType(matcher)) {
+            return differenceInCalendarDays(day, matcher.after) > 0;
+        }
+        if (isDateBeforeType(matcher)) {
+            return differenceInCalendarDays(matcher.before, day) > 0;
+        }
+        if (typeof matcher === 'function') {
+            return matcher(day);
+        }
+        return false;
+    });
+}
+
+/** Return the active modifiers for the given day. */
+function getActiveModifiers(day, 
+/** The modifiers to match for the given date. */
+modifiers, 
+/** The month where the day is displayed, to add the "outside" modifiers.  */
+displayMonth) {
+    var matchedModifiers = Object.keys(modifiers).reduce(function (result, key) {
+        var modifier = modifiers[key];
+        if (isMatch(day, modifier)) {
+            result.push(key);
+        }
+        return result;
+    }, []);
+    var activeModifiers = {};
+    matchedModifiers.forEach(function (modifier) { return (activeModifiers[modifier] = true); });
+    if (displayMonth && !isSameMonth(day, displayMonth)) {
+        activeModifiers.outside = true;
     }
-    var contextValue = {
-        selected: selected,
-        onDayClick: onDayClick,
-        modifiers: modifiers
-    };
-    return (React__default.createElement(SelectMultipleContext.Provider, { value: contextValue }, children));
+    return activeModifiers;
 }
 
-/**
- * Hook to access the {@link SelectMultipleContextValue}.
- *
- * This hook is meant to be used inside internal or custom components.
- */
-function useSelectMultiple() {
-    var context = useContext(SelectMultipleContext);
-    if (!context) {
-        throw new Error('useSelectMultiple must be used within a SelectMultipleProvider');
+/** Returns the day that should be the target of the focus when DayPicker is rendered the first time. */
+function getInitialFocusTarget(displayMonths, modifiers) {
+    var firstDayInMonth = startOfMonth(displayMonths[0]);
+    var lastDayInMonth = endOfMonth(displayMonths[displayMonths.length - 1]);
+    // TODO: cleanup code
+    var firstFocusableDay;
+    var today;
+    var date = firstDayInMonth;
+    while (date <= lastDayInMonth) {
+        var activeModifiers = getActiveModifiers(date, modifiers);
+        var isFocusable = !activeModifiers.disabled && !activeModifiers.hidden;
+        if (!isFocusable) {
+            date = addDays(date, 1);
+            continue;
+        }
+        if (activeModifiers.selected) {
+            return date;
+        }
+        if (activeModifiers.today && !today) {
+            today = date;
+        }
+        if (!firstFocusableDay) {
+            firstFocusableDay = date;
+        }
+        date = addDays(date, 1);
+    }
+    if (today) {
+        return today;
+    }
+    else {
+        return firstFocusableDay;
     }
-    return context;
 }
 
-/**
- * Add a day to an existing range.
- *
- * The returned range takes in account the `undefined` values and if the added
- * day is already present in the range.
- */
-function addToRange(day, range) {
-    var _a = range || {}, from = _a.from, to = _a.to;
-    if (!from) {
-        return { from: day, to: undefined };
-    }
-    if (!to && isSameDay(from, day)) {
-        return { from: from, to: day };
-    }
-    if (!to && isBefore(day, from)) {
-        return { from: day, to: from };
+var MAX_RETRY = 365;
+/** Return the next date to be focused. */
+function getNextFocus(focusedDay, options) {
+    var moveBy = options.moveBy, direction = options.direction, context = options.context, modifiers = options.modifiers, _a = options.retry, retry = _a === void 0 ? { count: 0, lastFocused: focusedDay } : _a;
+    var weekStartsOn = context.weekStartsOn, fromDate = context.fromDate, toDate = context.toDate, locale = context.locale;
+    var moveFns = {
+        day: addDays,
+        week: addWeeks,
+        month: addMonths,
+        year: addYears,
+        startOfWeek: function (date) {
+            return context.ISOWeek
+                ? startOfISOWeek(date)
+                : startOfWeek(date, { locale: locale, weekStartsOn: weekStartsOn });
+        },
+        endOfWeek: function (date) {
+            return context.ISOWeek
+                ? endOfISOWeek(date)
+                : endOfWeek(date, { locale: locale, weekStartsOn: weekStartsOn });
+        }
+    };
+    var newFocusedDay = moveFns[moveBy](focusedDay, direction === 'after' ? 1 : -1);
+    if (direction === 'before' && fromDate) {
+        newFocusedDay = max([fromDate, newFocusedDay]);
     }
-    if (!to) {
-        return { from: from, to: day };
+    else if (direction === 'after' && toDate) {
+        newFocusedDay = min([toDate, newFocusedDay]);
     }
-    if (isSameDay(to, day) && isSameDay(from, day)) {
-        return undefined;
+    var isFocusable = true;
+    if (modifiers) {
+        var activeModifiers = getActiveModifiers(newFocusedDay, modifiers);
+        isFocusable = !activeModifiers.disabled && !activeModifiers.hidden;
     }
-    if (isSameDay(to, day)) {
-        return { from: to, to: undefined };
+    if (isFocusable) {
+        return newFocusedDay;
     }
-    if (isSameDay(from, day)) {
-        return undefined;
+    else {
+        if (retry.count > MAX_RETRY) {
+            return retry.lastFocused;
+        }
+        return getNextFocus(newFocusedDay, {
+            moveBy: moveBy,
+            direction: direction,
+            context: context,
+            modifiers: modifiers,
+            retry: __assign(__assign({}, retry), { count: retry.count + 1 })
+        });
     }
-    if (isAfter(from, day)) {
-        return { from: day, to: to };
+}
+
+/**
+ * The Focus context shares details about the focused day for the keyboard
+ *
+ * Access this context from the {@link useFocusContext} hook.
+ */
+var FocusContext = createContext(undefined);
+/** 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);
+    // TODO: cleanup and test obscure code below
+    var focusTarget = (focusedDay !== null && focusedDay !== void 0 ? focusedDay : (lastFocused && navigation.isDateDisplayed(lastFocused)))
+        ? lastFocused
+        : initialFocusTarget;
+    var blur = function () {
+        setLastFocused(focusedDay);
+        setFocusedDay(undefined);
+    };
+    var focus = function (date) {
+        setFocusedDay(date);
+    };
+    var context = useDayPicker();
+    var moveFocus = function (moveBy, direction) {
+        if (!focusedDay)
+            return;
+        var nextFocused = getNextFocus(focusedDay, {
+            moveBy: moveBy,
+            direction: direction,
+            context: context,
+            modifiers: modifiers
+        });
+        if (isSameDay(focusedDay, nextFocused))
+            return undefined;
+        navigation.goToDate(nextFocused, focusedDay);
+        focus(nextFocused);
+    };
+    var value = {
+        focusedDay: focusedDay,
+        focusTarget: focusTarget,
+        blur: blur,
+        focus: focus,
+        focusDayAfter: function () { return moveFocus('day', 'after'); },
+        focusDayBefore: function () { return moveFocus('day', 'before'); },
+        focusWeekAfter: function () { return moveFocus('week', 'after'); },
+        focusWeekBefore: function () { return moveFocus('week', 'before'); },
+        focusMonthBefore: function () { return moveFocus('month', 'before'); },
+        focusMonthAfter: function () { return moveFocus('month', 'after'); },
+        focusYearBefore: function () { return moveFocus('year', 'before'); },
+        focusYearAfter: function () { return moveFocus('year', 'after'); },
+        focusStartOfWeek: function () { return moveFocus('startOfWeek', 'before'); },
+        focusEndOfWeek: function () { return moveFocus('endOfWeek', 'after'); }
+    };
+    return (React__default.createElement(FocusContext.Provider, { value: value }, props.children));
+}
+/**
+ * Hook to access the {@link FocusContextValue}. Use this hook to handle the
+ * focus state of the elements.
+ *
+ * This hook is meant to be used inside internal or custom components.
+ */
+function useFocusContext() {
+    var context = useContext(FocusContext);
+    if (!context) {
+        throw new Error('useFocusContext must be used within a FocusProvider');
     }
-    return { from: from, to: day };
+    return context;
 }
 
 /**
- * The SelectRange context shares details about the selected days when in
- * range selection mode.
+ * Return the active modifiers for the specified day.
  *
- * Access this context from the {@link useSelectRange} hook.
+ * This hook is meant to be used inside internal or custom components.
+ *
+ * @param day
+ * @param displayMonth
  */
-var SelectRangeContext = createContext(undefined);
-/** Provides the values for the {@link SelectRangeProvider}. */
-function SelectRangeProvider(props) {
-    if (!isDayPickerRange(props.initialProps)) {
+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;
+}
+
+/**
+ * The SelectSingle context shares details about the selected days when in
+ * single selection mode.
+ *
+ * Access this context from the {@link useSelectSingle} hook.
+ */
+var SelectSingleContext = createContext(undefined);
+/** Provides the values for the {@link SelectSingleProvider}. */
+function SelectSingleProvider(props) {
+    if (!isDayPickerSingle(props.initialProps)) {
         var emptyContextValue = {
-            selected: undefined,
-            modifiers: {
-                range_start: [],
-                range_end: [],
-                range_middle: [],
-                disabled: []
-            }
+            selected: undefined
         };
-        return (React__default.createElement(SelectRangeContext.Provider, { value: emptyContextValue }, props.children));
+        return (React__default.createElement(SelectSingleContext.Provider, { value: emptyContextValue }, props.children));
     }
-    return (React__default.createElement(SelectRangeProviderInternal, { initialProps: props.initialProps, children: props.children }));
+    return (React__default.createElement(SelectSingleProviderInternal, { initialProps: props.initialProps, children: props.children }));
 }
-function SelectRangeProviderInternal(_a) {
+function SelectSingleProviderInternal(_a) {
     var initialProps = _a.initialProps, children = _a.children;
-    var selected = initialProps.selected;
-    var _b = selected || {}, selectedFrom = _b.from, selectedTo = _b.to;
-    var min = initialProps.min;
-    var max = initialProps.max;
     var onDayClick = function (day, activeModifiers, e) {
-        var _a, _b;
+        var _a, _b, _c;
         (_a = initialProps.onDayClick) === null || _a === void 0 ? void 0 : _a.call(initialProps, day, activeModifiers, e);
-        var range = addToRange(day, selected);
-        if ((min || max) &&
-            selected &&
-            (range === null || range === void 0 ? void 0 : range.to) &&
-            range.from &&
-            range.from !== range.to) {
-            var diff = Math.abs(differenceInCalendarDays(range === null || range === void 0 ? void 0 : range.to, range === null || range === void 0 ? void 0 : range.from));
-            if ((min && diff < min) || (max && diff >= max)) {
-                return;
-            }
+        if (activeModifiers.selected && !initialProps.required) {
+            (_b = initialProps.onSelect) === null || _b === void 0 ? void 0 : _b.call(initialProps, undefined, day, activeModifiers, e);
+            return;
         }
-        (_b = initialProps.onSelect) === null || _b === void 0 ? void 0 : _b.call(initialProps, range, day, activeModifiers, e);
+        (_c = initialProps.onSelect) === null || _c === void 0 ? void 0 : _c.call(initialProps, day, day, activeModifiers, e);
     };
-    var modifiers = {
-        range_start: [],
-        range_end: [],
-        range_middle: [],
-        disabled: []
+    var contextValue = {
+        selected: initialProps.selected,
+        onDayClick: onDayClick
     };
-    if (selectedFrom) {
-        modifiers.range_start = [selectedFrom];
-        if (!selectedTo) {
-            modifiers.range_end = [selectedFrom];
-        }
-        else {
-            modifiers.range_end = [selectedTo];
-            modifiers.range_middle = [
-                {
-                    after: selectedFrom,
-                    before: selectedTo
-                }
-            ];
-        }
-    }
-    if (min && selectedFrom && selectedTo) {
-        modifiers.disabled.push(function (date) {
-            return ((isBefore(date, selectedFrom) &&
-                differenceInCalendarDays(selectedFrom, date) < min) ||
-                (isAfter(date, selectedTo) &&
-                    differenceInCalendarDays(date, selectedFrom) < min));
-        });
-    }
-    if (max && selectedFrom && selectedTo) {
-        modifiers.disabled.push(function (date) {
-            return ((isBefore(date, selectedFrom) &&
-                differenceInCalendarDays(selectedTo, date) >= max) ||
-                (isAfter(date, selectedTo) &&
-                    differenceInCalendarDays(date, selectedFrom) >= max));
-        });
-    }
-    return (React__default.createElement(SelectRangeContext.Provider, { value: { selected: selected, onDayClick: onDayClick, modifiers: modifiers } }, children));
+    return (React__default.createElement(SelectSingleContext.Provider, { value: contextValue }, children));
 }
-
 /**
- * Hook to access the {@link SelectRangeContextValue}.
+ * Hook to access the {@link SelectSingleContextValue}.
  *
  * This hook is meant to be used inside internal or custom components.
  */
-function useSelectRange() {
-    var context = useContext(SelectRangeContext);
+function useSelectSingle() {
+    var context = useContext(SelectSingleContext);
     if (!context) {
-        throw new Error('useSelectRange must be used within a SelectRangeProvider');
+        throw new Error('useSelectSingle must be used within a SelectSingleProvider');
     }
     return context;
 }
 
-/** Normalize to array a matcher input. */
-function matcherToArray(matcher) {
-    if (Array.isArray(matcher)) {
-        return matcher;
-    }
-    else if (matcher !== undefined) {
-        return [matcher];
-    }
-    else {
-        return [];
-    }
-}
-
-/** Create CustomModifiers from dayModifiers */
-function getCustomModifiers(dayModifiers) {
-    var customModifiers = {};
-    Object.entries(dayModifiers).forEach(function (_a) {
-        var modifier = _a[0], matcher = _a[1];
-        customModifiers[modifier] = matcherToArray(matcher);
-    });
-    return customModifiers;
-}
-
-/** The name of the modifiers that are used internally by DayPicker. */
-var InternalModifier;
-(function (InternalModifier) {
-    InternalModifier["Outside"] = "outside";
-    /** Name of the modifier applied to the disabled days, using the `disabled` prop. */
-    InternalModifier["Disabled"] = "disabled";
-    /** Name of the modifier applied to the selected days using the `selected` prop). */
-    InternalModifier["Selected"] = "selected";
-    /** Name of the modifier applied to the hidden days using the `hidden` prop). */
-    InternalModifier["Hidden"] = "hidden";
-    /** Name of the modifier applied to the day specified using the `today` prop). */
-    InternalModifier["Today"] = "today";
-    /** The modifier applied to the day starting a selected range, when in range selection mode.  */
-    InternalModifier["RangeStart"] = "range_start";
-    /** The modifier applied to the day ending a selected range, when in range selection mode.  */
-    InternalModifier["RangeEnd"] = "range_end";
-    /** The modifier applied to the days between the start and the end of a selected range, when in range selection mode.  */
-    InternalModifier["RangeMiddle"] = "range_middle";
-})(InternalModifier || (InternalModifier = {}));
-
-var Selected = InternalModifier.Selected, Disabled = InternalModifier.Disabled, Hidden = InternalModifier.Hidden, Today = InternalModifier.Today, RangeEnd = InternalModifier.RangeEnd, RangeMiddle = InternalModifier.RangeMiddle, RangeStart = InternalModifier.RangeStart, Outside = InternalModifier.Outside;
-/** Return the {@link InternalModifiers} from the DayPicker and select contexts. */
-function getInternalModifiers(dayPicker, selectMultiple, selectRange) {
-    var _a;
-    var internalModifiers = (_a = {},
-        _a[Selected] = matcherToArray(dayPicker.selected),
-        _a[Disabled] = matcherToArray(dayPicker.disabled),
-        _a[Hidden] = matcherToArray(dayPicker.hidden),
-        _a[Today] = [dayPicker.today],
-        _a[RangeEnd] = [],
-        _a[RangeMiddle] = [],
-        _a[RangeStart] = [],
-        _a[Outside] = [],
-        _a);
-    if (dayPicker.fromDate) {
-        internalModifiers[Disabled].push({ before: dayPicker.fromDate });
-    }
-    if (dayPicker.toDate) {
-        internalModifiers[Disabled].push({ after: dayPicker.toDate });
-    }
-    if (isDayPickerMultiple(dayPicker)) {
-        internalModifiers[Disabled] = internalModifiers[Disabled].concat(selectMultiple.modifiers[Disabled]);
-    }
-    else if (isDayPickerRange(dayPicker)) {
-        internalModifiers[Disabled] = internalModifiers[Disabled].concat(selectRange.modifiers[Disabled]);
-        internalModifiers[RangeStart] = selectRange.modifiers[RangeStart];
-        internalModifiers[RangeMiddle] = selectRange.modifiers[RangeMiddle];
-        internalModifiers[RangeEnd] = selectRange.modifiers[RangeEnd];
-    }
-    return internalModifiers;
-}
-
-/** 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 {@link ModifiersContext}. */
-function ModifiersProvider(props) {
+/**
+ * This hook returns details about the content to render in the day cell.
+ *
+ *
+ * When a day cell is rendered in the table, DayPicker can either:
+ *
+ * - render nothing: when the day is outside the month or has matched the
+ *   "hidden" modifier.
+ * - render a button when `onDayClick` or a selection mode is set.
+ * - render a non-interactive element: when no selection mode is set, the day
+ *   cell shouldn’t respond to any interaction. DayPicker should render a `div`
+ *   or a `span`.
+ *
+ * ### Usage
+ *
+ * Use this hook to customize the behavior of the {@link Day} component. Create a
+ * new `Day` component using this hook and pass it to the `components` prop.
+ * The source of {@link Day} can be a good starting point.
+ *
+ */
+function useDayEventHandlers(date, activeModifiers) {
     var dayPicker = useDayPicker();
-    var selectMultiple = useSelectMultiple();
-    var selectRange = useSelectRange();
-    var internalModifiers = getInternalModifiers(dayPicker, selectMultiple, selectRange);
-    var customModifiers = getCustomModifiers(dayPicker.modifiers);
-    var modifiers = __assign(__assign({}, internalModifiers), customModifiers);
-    return (React__default.createElement(ModifiersContext.Provider, { value: modifiers }, props.children));
+    var single = useSelectSingle();
+    var multiple = useSelectMultiple();
+    var range = useSelectRange();
+    var _a = useFocusContext(), focusDayAfter = _a.focusDayAfter, focusDayBefore = _a.focusDayBefore, focusWeekAfter = _a.focusWeekAfter, focusWeekBefore = _a.focusWeekBefore, blur = _a.blur, focus = _a.focus, focusMonthBefore = _a.focusMonthBefore, focusMonthAfter = _a.focusMonthAfter, focusYearBefore = _a.focusYearBefore, focusYearAfter = _a.focusYearAfter, focusStartOfWeek = _a.focusStartOfWeek, focusEndOfWeek = _a.focusEndOfWeek;
+    var onClick = function (e) {
+        var _a, _b, _c, _d;
+        if (isDayPickerSingle(dayPicker)) {
+            (_a = single.onDayClick) === null || _a === void 0 ? void 0 : _a.call(single, date, activeModifiers, e);
+        }
+        else if (isDayPickerMultiple(dayPicker)) {
+            (_b = multiple.onDayClick) === null || _b === void 0 ? void 0 : _b.call(multiple, date, activeModifiers, e);
+        }
+        else if (isDayPickerRange(dayPicker)) {
+            (_c = range.onDayClick) === null || _c === void 0 ? void 0 : _c.call(range, date, activeModifiers, e);
+        }
+        else {
+            (_d = dayPicker.onDayClick) === null || _d === void 0 ? void 0 : _d.call(dayPicker, date, activeModifiers, e);
+        }
+    };
+    var onFocus = function (e) {
+        var _a;
+        focus(date);
+        (_a = dayPicker.onDayFocus) === null || _a === void 0 ? void 0 : _a.call(dayPicker, date, activeModifiers, e);
+    };
+    var onBlur = function (e) {
+        var _a;
+        blur();
+        (_a = dayPicker.onDayBlur) === null || _a === void 0 ? void 0 : _a.call(dayPicker, date, activeModifiers, e);
+    };
+    var onMouseEnter = function (e) {
+        var _a;
+        (_a = dayPicker.onDayMouseEnter) === null || _a === void 0 ? void 0 : _a.call(dayPicker, date, activeModifiers, e);
+    };
+    var onMouseLeave = function (e) {
+        var _a;
+        (_a = dayPicker.onDayMouseLeave) === null || _a === void 0 ? void 0 : _a.call(dayPicker, date, activeModifiers, e);
+    };
+    var onTouchCancel = function (e) {
+        var _a;
+        (_a = dayPicker.onDayTouchCancel) === null || _a === void 0 ? void 0 : _a.call(dayPicker, date, activeModifiers, e);
+    };
+    var onTouchEnd = function (e) {
+        var _a;
+        (_a = dayPicker.onDayTouchEnd) === null || _a === void 0 ? void 0 : _a.call(dayPicker, date, activeModifiers, e);
+    };
+    var onTouchMove = function (e) {
+        var _a;
+        (_a = dayPicker.onDayTouchMove) === null || _a === void 0 ? void 0 : _a.call(dayPicker, date, activeModifiers, e);
+    };
+    var onTouchStart = function (e) {
+        var _a;
+        (_a = dayPicker.onDayTouchStart) === null || _a === void 0 ? void 0 : _a.call(dayPicker, date, activeModifiers, e);
+    };
+    var onKeyUp = function (e) {
+        var _a;
+        (_a = dayPicker.onDayKeyUp) === null || _a === void 0 ? void 0 : _a.call(dayPicker, date, activeModifiers, e);
+    };
+    var onKeyDown = function (e) {
+        var _a;
+        switch (e.key) {
+            case 'ArrowLeft':
+                e.preventDefault();
+                e.stopPropagation();
+                dayPicker.dir === 'rtl' ? focusDayAfter() : focusDayBefore();
+                break;
+            case 'ArrowRight':
+                e.preventDefault();
+                e.stopPropagation();
+                dayPicker.dir === 'rtl' ? focusDayBefore() : focusDayAfter();
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                e.stopPropagation();
+                focusWeekAfter();
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                e.stopPropagation();
+                focusWeekBefore();
+                break;
+            case 'PageUp':
+                e.preventDefault();
+                e.stopPropagation();
+                e.shiftKey ? focusYearBefore() : focusMonthBefore();
+                break;
+            case 'PageDown':
+                e.preventDefault();
+                e.stopPropagation();
+                e.shiftKey ? focusYearAfter() : focusMonthAfter();
+                break;
+            case 'Home':
+                e.preventDefault();
+                e.stopPropagation();
+                focusStartOfWeek();
+                break;
+            case 'End':
+                e.preventDefault();
+                e.stopPropagation();
+                focusEndOfWeek();
+                break;
+        }
+        (_a = dayPicker.onDayKeyDown) === null || _a === void 0 ? void 0 : _a.call(dayPicker, date, activeModifiers, e);
+    };
+    var eventHandlers = {
+        onClick: onClick,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        onTouchCancel: onTouchCancel,
+        onTouchEnd: onTouchEnd,
+        onTouchMove: onTouchMove,
+        onTouchStart: onTouchStart
+    };
+    return eventHandlers;
 }
 
 /**
- * Return the modifiers used by DayPicker.
+ * 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.
- * Requires to be wrapped into {@link ModifiersProvider}.
  *
  */
-function useModifiers() {
-    var context = useContext(ModifiersContext);
-    if (!context) {
-        throw new Error('useModifiers must be used within a ModifiersProvider');
-    }
-    return context;
+function useSelectedDays() {
+    var dayPicker = useDayPicker();
+    var single = useSelectSingle();
+    var multiple = useSelectMultiple();
+    var range = useSelectRange();
+    var selectedDays = isDayPickerSingle(dayPicker)
+        ? single.selected
+        : isDayPickerMultiple(dayPicker)
+            ? multiple.selected
+            : isDayPickerRange(dayPicker)
+                ? range.selected
+                : undefined;
+    return selectedDays;
 }
 
-/** 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 {@link DateRange} type. */
-function isDateRange(value) {
-    return Boolean(value && typeof value === 'object' && 'from' in value);
-}
-/** Returns true if `value` is of type {@link DateAfter}. */
-function isDateAfterType(value) {
-    return Boolean(value && typeof value === 'object' && 'after' in value);
+function isInternalModifier(modifier) {
+    return Object.values(InternalModifier).includes(modifier);
 }
-/** Returns true if `value` is of type {@link DateBefore}. */
-function isDateBeforeType(value) {
-    return Boolean(value && typeof value === 'object' && 'before' in value);
+/**
+ * Return the class names for the Day element, according to the given active
+ * modifiers.
+ *
+ * Custom class names are set via `modifiersClassNames` or `classNames`,
+ * where the first have the precedence.
+ */
+function getDayClassNames(dayPicker, activeModifiers) {
+    var classNames = [dayPicker.classNames.day];
+    Object.keys(activeModifiers).forEach(function (modifier) {
+        var customClassName = dayPicker.modifiersClassNames[modifier];
+        if (customClassName) {
+            classNames.push(customClassName);
+        }
+        else if (isInternalModifier(modifier)) {
+            var internalClassName = dayPicker.classNames["day_".concat(modifier)];
+            if (internalClassName) {
+                classNames.push(internalClassName);
+            }
+        }
+    });
+    return classNames;
 }
-/** Returns true if `value` is a {@link DayOfWeek} type. */
-function isDayOfWeekType(value) {
-    return Boolean(value && typeof value === 'object' && 'dayOfWeek' in value);
+
+/** Return the style for the Day element, according to the given active modifiers. */
+function getDayStyle(dayPicker, activeModifiers) {
+    var style = __assign({}, dayPicker.styles.day);
+    Object.keys(activeModifiers).forEach(function (modifier) {
+        var _a;
+        style = __assign(__assign({}, style), (_a = dayPicker.modifiersStyles) === null || _a === void 0 ? void 0 : _a[modifier]);
+    });
+    return style;
 }
 
-/** Return `true` whether `date` is inside `range`. */
-function isDateInRange(date, range) {
+/**
+ * Return props and data used to render the {@link Day} component.
+ *
+ * Use this hook when creating a component to replace the built-in `Day`
+ * component.
+ */
+function useDayRender(
+/** 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 from = range.from, to = range.to;
-    if (!from) {
-        return false;
-    }
-    if (!to && isSameDay(from, date)) {
-        return true;
-    }
-    if (!to) {
-        return false;
+    var _b = useDayPicker(), DayContent = _b.components.DayContent, dayPicker = __rest(_b, ["components"]);
+    var focusContext = useFocusContext();
+    var activeModifiers = useActiveModifiers(day, displayMonth);
+    var eventHandlers = useDayEventHandlers(day, activeModifiers);
+    var selectedDays = useSelectedDays();
+    var isButton = Boolean(dayPicker.onDayClick || dayPicker.mode !== 'default');
+    // Focus the button if the day is focused according to the focus context
+    useEffect(function () {
+        var _a;
+        if (activeModifiers.outside)
+            return;
+        if (!focusContext.focusedDay)
+            return;
+        if (!isButton)
+            return;
+        if (isSameDay(focusContext.focusedDay, day)) {
+            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [
+        focusContext.focusedDay,
+        day,
+        buttonRef,
+        isButton,
+        activeModifiers.outside
+    ]);
+    var className = getDayClassNames(dayPicker, activeModifiers).join(' ');
+    var style = getDayStyle(dayPicker, activeModifiers);
+    var ariaLabel = dayPicker.labels.labelDay(day, activeModifiers, {
+        locale: dayPicker.locale
+    });
+    var isHidden = Boolean((activeModifiers.outside && !dayPicker.showOutsideDays) ||
+        activeModifiers.hidden);
+    var children = (React__default.createElement(DayContent, { date: day, displayMonth: displayMonth, activeModifiers: activeModifiers }));
+    var divProps = {
+        style: style,
+        className: className,
+        children: children,
+        'aria-label': ariaLabel
+    };
+    var isFocusTarget = Boolean(focusContext.focusTarget && isSameDay(focusContext.focusTarget, day));
+    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 dayRender = {
+        isButton: isButton,
+        isHidden: isHidden,
+        activeModifiers: activeModifiers,
+        selectedDays: selectedDays,
+        buttonProps: buttonProps,
+        divProps: divProps
+    };
+    return dayRender;
+}
+
+/**
+ * The content of a day cell – as a button or span element according to its
+ * modifiers.
+ */
+function Day(props) {
+    var buttonRef = useRef(null);
+    var dayRender = useDayRender(props.date, props.displayMonth, buttonRef);
+    if (dayRender.isHidden) {
+        return React__default.createElement(React__default.Fragment, null);
     }
-    var isToBeforeFrom = differenceInCalendarDays(to, from) < 0;
-    if (to && isToBeforeFrom) {
-        _a = [to, from], from = _a[0], to = _a[1];
+    if (!dayRender.isButton) {
+        return React__default.createElement("div", __assign({}, dayRender.divProps));
     }
-    return (differenceInCalendarDays(date, from) >= 0 &&
-        differenceInCalendarDays(to, date) >= 0);
+    return React__default.createElement(Button, __assign({ name: "day", ref: buttonRef }, dayRender.buttonProps));
 }
 
-/** Returns true if `value` is a Date type. */
-function isDateType(value) {
-    return isDate(value);
+/** Render the content of the day cell. */
+function DayContent(props) {
+    var _a = useDayPicker(), locale = _a.locale, formatDay = _a.formatters.formatDay;
+    return React__default.createElement(React__default.Fragment, null, formatDay(props.date, { locale: locale }));
+}
+
+/**
+ * Render a styled select component – displaying a caption and a custom
+ * drop-down icon.
+ */
+function Dropdown(props) {
+    var onChange = props.onChange, value = props.value, children = props.children, caption = props.caption, className = props.className, style = props.style;
+    var _a = useDayPicker(), IconDropdown = _a.components.IconDropdown, dayPicker = __rest(_a, ["components"]);
+    return (React__default.createElement("div", { className: className, style: style },
+        React__default.createElement("span", { className: dayPicker.classNames.vhidden }, props['aria-label']),
+        React__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.createElement("div", { className: dayPicker.classNames.caption_label, style: dayPicker.styles.caption_label, "aria-hidden": "true" },
+            caption,
+            React__default.createElement(IconDropdown, { className: dayPicker.classNames.dropdown_icon, style: dayPicker.styles.dropdown_icon }))));
+}
+
+/** 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.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))));
+}
+
+/** Render the table head. */
+function Head() {
+    var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles, HeadRow = _a.components.HeadRow;
+    return (React__default.createElement("thead", { style: styles.head, className: classNames.head },
+        React__default.createElement(HeadRow, null)));
+}
+
+/**
+ * Generate a series of 7 days, starting from the week, to use for formatting
+ * the weekday names (Monday, Tuesday, etc.).
+ */
+function getWeekdays(locale, 
+/** The index of the first day of the week (0 - Sunday). */
+weekStartsOn, 
+/** Use ISOWeek instead of locale/ */
+ISOWeek) {
+    var start = ISOWeek
+        ? startOfISOWeek(new Date())
+        : startOfWeek(new Date(), { locale: locale, weekStartsOn: weekStartsOn });
+    var days = [];
+    for (var i = 0; i < 7; i++) {
+        var day = addDays(start, i);
+        days.push(day);
+    }
+    return days;
 }
-/** Returns true if `value` is an array of valid dates. */
-function isArrayOfDates(value) {
-    return Array.isArray(value) && value.every(isDate);
+
+/**
+ * Render the HeadRow component - i.e. the table head row with the weekday names.
+ */
+function HeadRow() {
+    var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles, showWeekNumber = _a.showWeekNumber, locale = _a.locale, weekStartsOn = _a.weekStartsOn, ISOWeek = _a.ISOWeek, formatWeekdayName = _a.formatters.formatWeekdayName, labelWeekday = _a.labels.labelWeekday;
+    var weekdays = getWeekdays(locale, weekStartsOn, ISOWeek);
+    return (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 })))); })));
 }
+
 /**
- * Returns whether a day matches against at least one of the given Matchers.
- *
- * ```
- * const day = new Date(2022, 5, 19);
- * const matcher1: DateRange = {
- *    from: new Date(2021, 12, 21),
- *    to: new Date(2021, 12, 30)
- * }
- * const matcher2: DateRange = {
- *    from: new Date(2022, 5, 1),
- *    to: new Date(2022, 5, 23)
- * }
- *
- * const isMatch(day, [matcher1, matcher2]); // true, since day is in the matcher1 range.
- * ```
- * */
-function isMatch(day, matchers) {
-    return matchers.some(function (matcher) {
-        if (typeof matcher === 'boolean') {
-            return matcher;
-        }
-        if (isDateType(matcher)) {
-            return isSameDay(day, matcher);
-        }
-        if (isArrayOfDates(matcher)) {
-            return matcher.includes(day);
-        }
-        if (isDateRange(matcher)) {
-            return isDateInRange(day, matcher);
-        }
-        if (isDayOfWeekType(matcher)) {
-            return matcher.dayOfWeek.includes(day.getDay());
-        }
-        if (isDateInterval(matcher)) {
-            var isBefore = differenceInCalendarDays(matcher.before, day) > 0;
-            var isAfter = differenceInCalendarDays(day, matcher.after) > 0;
-            return isBefore && isAfter;
-        }
-        if (isDateAfterType(matcher)) {
-            return differenceInCalendarDays(day, matcher.after) > 0;
-        }
-        if (isDateBeforeType(matcher)) {
-            return differenceInCalendarDays(matcher.before, day) > 0;
-        }
-        if (typeof matcher === 'function') {
-            return matcher(day);
-        }
-        return false;
-    });
+ * Render the icon in the styled drop-down.
+ */
+function IconDropdown(props) {
+    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" })));
 }
 
-/** Return the active modifiers for the given day. */
-function getActiveModifiers(day, 
-/** The modifiers to match for the given date. */
-modifiers, 
-/** The month where the day is displayed, to add the "outside" modifiers.  */
-displayMonth) {
-    var matchedModifiers = Object.keys(modifiers).reduce(function (result, key) {
-        var modifier = modifiers[key];
-        if (isMatch(day, modifier)) {
-            result.push(key);
-        }
-        return result;
-    }, []);
-    var activeModifiers = {};
-    matchedModifiers.forEach(function (modifier) { return (activeModifiers[modifier] = true); });
-    if (displayMonth && !isSameMonth(day, displayMonth)) {
-        activeModifiers.outside = true;
-    }
-    return activeModifiers;
+/**
+ * Render the "previous month" button in the navigation.
+ */
+function IconLeft(props) {
+    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" })));
 }
 
-/** Returns the day that should be the target of the focus when DayPicker is rendered the first time. */
-function getInitialFocusTarget(displayMonths, modifiers) {
-    var firstDayInMonth = startOfMonth(displayMonths[0]);
-    var lastDayInMonth = endOfMonth(displayMonths[displayMonths.length - 1]);
-    // TODO: cleanup code
-    var firstFocusableDay;
-    var today;
-    var date = firstDayInMonth;
-    while (date <= lastDayInMonth) {
-        var activeModifiers = getActiveModifiers(date, modifiers);
-        var isFocusable = !activeModifiers.disabled && !activeModifiers.hidden;
-        if (!isFocusable) {
-            date = addDays(date, 1);
-            continue;
-        }
-        if (activeModifiers.selected) {
-            return date;
-        }
-        if (activeModifiers.today && !today) {
-            today = date;
-        }
-        if (!firstFocusableDay) {
-            firstFocusableDay = date;
-        }
-        date = addDays(date, 1);
-    }
-    if (today) {
-        return today;
-    }
-    else {
-        return firstFocusableDay;
-    }
+/**
+ * Render the "next month" button in the navigation.
+ */
+function IconRight(props) {
+    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" })));
 }
 
-/** Return the next date to be focused. */
-function getNextFocus(
-/** The day that is focused. */
-focusedDay, moveBy, direction, options, modifiers) {
-    var weekStartsOn = options.weekStartsOn, fromDate = options.fromDate, toDate = options.toDate, locale = options.locale;
-    var moveFns = {
-        day: addDays,
-        week: addWeeks,
-        month: addMonths,
-        year: addYears,
-        startOfWeek: function (date) { return startOfWeek(date, { locale: locale, weekStartsOn: weekStartsOn }); },
-        endOfWeek: function (date) { return endOfWeek(date, { locale: locale, weekStartsOn: weekStartsOn }); }
-    };
-    var newFocusedDay = moveFns[moveBy](focusedDay, direction === 'after' ? 1 : -1);
-    if (direction === 'before' && fromDate) {
-        newFocusedDay = max([fromDate, newFocusedDay]);
-    }
-    else if (direction === 'after' && toDate) {
-        newFocusedDay = min([toDate, newFocusedDay]);
-    }
-    if (modifiers) {
-        var activeModifiers = getActiveModifiers(newFocusedDay, modifiers);
-        var isFocusable = !activeModifiers.disabled && !activeModifiers.hidden;
-        if (!isFocusable) {
-            return getNextFocus(newFocusedDay, moveBy, direction, options, modifiers);
-        }
+/** Render a row in the calendar, with the days and the week number. */
+function Row(props) {
+    var _a = useDayPicker(), styles = _a.styles, classNames = _a.classNames, showWeekNumber = _a.showWeekNumber, _b = _a.components, Day = _b.Day, WeekNumber = _b.WeekNumber;
+    var weekNumberCell;
+    if (showWeekNumber) {
+        weekNumberCell = (React__default.createElement("td", { className: classNames.cell, style: styles.cell },
+            React__default.createElement(WeekNumber, { number: props.weekNumber, dates: props.dates })));
     }
-    return newFocusedDay;
+    return (React__default.createElement("tr", { className: classNames.row, style: styles.row },
+        weekNumberCell,
+        props.dates.map(function (date) { return (React__default.createElement("td", { className: classNames.cell, style: styles.cell, key: getUnixTime(date) },
+            React__default.createElement(Day, { displayMonth: props.displayMonth, date: date }))); })));
 }
 
 /**
- * The Focus context shares details about the focused day for the keyboard
- *
- * Access this context from the {@link useFocusContext} hook.
+ * Render the week number element. If `onWeekNumberClick` is passed to DayPicker, it
+ * renders a button, otherwise a span element.
  */
-var FocusContext = createContext(undefined);
-/** 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);
-    // TODO: cleanup and test obscure code below
-    var focusTarget = (focusedDay !== null && focusedDay !== void 0 ? focusedDay : (lastFocused && navigation.isDateDisplayed(lastFocused)))
-        ? lastFocused
-        : initialFocusTarget;
-    var blur = function () {
-        setLastFocused(focusedDay);
-        setFocusedDay(undefined);
-    };
-    var focus = function (date) {
-        setFocusedDay(date);
-    };
-    var dayPicker = useDayPicker();
-    var moveFocus = function (moveBy, direction) {
-        if (!focusedDay)
-            return;
-        var nextFocused = getNextFocus(focusedDay, moveBy, direction, dayPicker, modifiers);
-        if (isSameDay(focusedDay, nextFocused))
-            return undefined;
-        navigation.goToDate(nextFocused, focusedDay);
-        focus(nextFocused);
-    };
-    var value = {
-        focusedDay: focusedDay,
-        focusTarget: focusTarget,
-        blur: blur,
-        focus: focus,
-        focusDayAfter: function () { return moveFocus('day', 'after'); },
-        focusDayBefore: function () { return moveFocus('day', 'before'); },
-        focusWeekAfter: function () { return moveFocus('week', 'after'); },
-        focusWeekBefore: function () { return moveFocus('week', 'before'); },
-        focusMonthBefore: function () { return moveFocus('month', 'before'); },
-        focusMonthAfter: function () { return moveFocus('month', 'after'); },
-        focusYearBefore: function () { return moveFocus('year', 'before'); },
-        focusYearAfter: function () { return moveFocus('year', 'after'); },
-        focusStartOfWeek: function () { return moveFocus('startOfWeek', 'before'); },
-        focusEndOfWeek: function () { return moveFocus('endOfWeek', 'after'); }
+function WeekNumber(props) {
+    var weekNumber = props.number, dates = props.dates;
+    var _a = useDayPicker(), onWeekNumberClick = _a.onWeekNumberClick, styles = _a.styles, classNames = _a.classNames, locale = _a.locale, labelWeekNumber = _a.labels.labelWeekNumber, formatWeekNumber = _a.formatters.formatWeekNumber;
+    var content = formatWeekNumber(Number(weekNumber), { locale: locale });
+    if (!onWeekNumberClick) {
+        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__default.createElement(FocusContext.Provider, { value: value }, props.children));
+    return (React__default.createElement(Button, { name: "week-number", "aria-label": label, className: classNames.weeknumber, style: styles.weeknumber, onClick: handleClick }, content));
 }
 
 /**
- * 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.
+ * The name of the default CSS classes.
+ */
+var defaultClassNames = {
+    root: 'rdp',
+    multiple_months: 'rdp-multiple_months',
+    with_weeknumber: 'rdp-with_weeknumber',
+    vhidden: 'rdp-vhidden',
+    button_reset: 'rdp-button_reset',
+    button: 'rdp-button',
+    caption: 'rdp-caption',
+    caption_start: 'rdp-caption_start',
+    caption_end: 'rdp-caption_end',
+    caption_between: 'rdp-caption_between',
+    caption_label: 'rdp-caption_label',
+    caption_dropdowns: 'rdp-caption_dropdowns',
+    dropdown: 'rdp-dropdown',
+    dropdown_month: 'rdp-dropdown_month',
+    dropdown_year: 'rdp-dropdown_year',
+    dropdown_icon: 'rdp-dropdown_icon',
+    months: 'rdp-months',
+    month: 'rdp-month',
+    table: 'rdp-table',
+    tbody: 'rdp-tbody',
+    tfoot: 'rdp-tfoot',
+    head: 'rdp-head',
+    head_row: 'rdp-head_row',
+    head_cell: 'rdp-head_cell',
+    nav: 'rdp-nav',
+    nav_button: 'rdp-nav_button',
+    nav_button_previous: 'rdp-nav_button_previous',
+    nav_button_next: 'rdp-nav_button_next',
+    nav_icon: 'rdp-nav_icon',
+    row: 'rdp-row',
+    weeknumber: 'rdp-weeknumber',
+    cell: 'rdp-cell',
+    day: 'rdp-day',
+    day_today: 'rdp-day_today',
+    day_outside: 'rdp-day_outside',
+    day_selected: 'rdp-day_selected',
+    day_disabled: 'rdp-day_disabled',
+    day_hidden: 'rdp-day_hidden',
+    day_range_start: 'rdp-day_range_start',
+    day_range_end: 'rdp-day_range_end',
+    day_range_middle: 'rdp-day_range_middle'
+};
+
+/**
+ * The default formatter for the caption.
  */
-function useFocusContext() {
-    var context = useContext(FocusContext);
-    if (!context) {
-        throw new Error('useFocusContext must be used within a FocusProvider');
-    }
-    return context;
+function formatCaption(month, options) {
+    return format(month, 'LLLL y', options);
 }
 
 /**
- * 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 default formatter for the Day button.
  */
-function useActiveModifiers(day, 
+function formatDay(day, options) {
+    return format(day, 'd', options);
+}
+
 /**
- * The month where the date is displayed. If not the same as `date`, the day
- * is an "outside day".
+ * The default formatter for the Month caption.
  */
-displayMonth) {
-    var modifiers = useModifiers();
-    var activeModifiers = getActiveModifiers(day, modifiers, displayMonth);
-    return activeModifiers;
+function formatMonthCaption(month, options) {
+    return format(month, 'LLLL', options);
 }
 
 /**
- * The SelectSingle context shares details about the selected days when in
- * single selection mode.
- *
- * Access this context from the {@link useSelectSingle} hook.
+ * The default formatter for the week number.
  */
-var SelectSingleContext = createContext(undefined);
-/** Provides the values for the {@link SelectSingleProvider}. */
-function SelectSingleProvider(props) {
-    if (!isDayPickerSingle(props.initialProps)) {
-        var emptyContextValue = {
-            selected: undefined
-        };
-        return (React__default.createElement(SelectSingleContext.Provider, { value: emptyContextValue }, props.children));
-    }
-    return (React__default.createElement(SelectSingleProviderInternal, { initialProps: props.initialProps, children: props.children }));
-}
-function SelectSingleProviderInternal(_a) {
-    var initialProps = _a.initialProps, children = _a.children;
-    var onDayClick = function (day, activeModifiers, e) {
-        var _a, _b, _c;
-        (_a = initialProps.onDayClick) === null || _a === void 0 ? void 0 : _a.call(initialProps, day, activeModifiers, e);
-        if (activeModifiers.selected && !initialProps.required) {
-            (_b = initialProps.onSelect) === null || _b === void 0 ? void 0 : _b.call(initialProps, undefined, day, activeModifiers, e);
-            return;
-        }
-        (_c = initialProps.onSelect) === null || _c === void 0 ? void 0 : _c.call(initialProps, day, day, activeModifiers, e);
-    };
-    var contextValue = {
-        selected: initialProps.selected,
-        onDayClick: onDayClick
-    };
-    return (React__default.createElement(SelectSingleContext.Provider, { value: contextValue }, children));
+function formatWeekNumber(weekNumber) {
+    return "".concat(weekNumber);
 }
 
 /**
- * Hook to access the {@link SelectSingleContextValue}.
- *
- * This hook is meant to be used inside internal or custom components.
+ * The default formatter for the name of the weekday.
  */
-function useSelectSingle() {
-    var context = useContext(SelectSingleContext);
-    if (!context) {
-        throw new Error('useSelectSingle must be used within a SelectSingleProvider');
-    }
-    return context;
+function formatWeekdayName(weekday, options) {
+    return format(weekday, 'cccccc', options);
 }
 
 /**
- * This hook returns details about the content to render in the day cell.
- *
- *
- * When a day cell is rendered in the table, DayPicker can either:
- *
- * - render nothing: when the day is outside the month or has matched the
- *   "hidden" modifier.
- * - render a button when `onDayClick` or a selection mode is set.
- * - render a non-interactive element: when no selection mode is set, the day
- *   cell shouldn’t respond to any interaction. DayPicker should render a `div`
- *   or a `span`.
- *
- * ### Usage
- *
- * Use this hook to customize the behavior of the {@link Day} component. Create a
- * new `Day` component using this hook and pass it to the `components` prop.
- * The source of {@link Day} can be a good starting point.
- *
+ * The default formatter for the Year caption.
  */
-function useDayEventHandlers(date, activeModifiers) {
-    var dayPicker = useDayPicker();
-    var single = useSelectSingle();
-    var multiple = useSelectMultiple();
-    var range = useSelectRange();
-    var _a = useFocusContext(), focusDayAfter = _a.focusDayAfter, focusDayBefore = _a.focusDayBefore, focusWeekAfter = _a.focusWeekAfter, focusWeekBefore = _a.focusWeekBefore, blur = _a.blur, focus = _a.focus, focusMonthBefore = _a.focusMonthBefore, focusMonthAfter = _a.focusMonthAfter, focusYearBefore = _a.focusYearBefore, focusYearAfter = _a.focusYearAfter, focusStartOfWeek = _a.focusStartOfWeek, focusEndOfWeek = _a.focusEndOfWeek;
-    var onClick = function (e) {
-        var _a, _b, _c, _d;
-        if (isDayPickerSingle(dayPicker)) {
-            (_a = single.onDayClick) === null || _a === void 0 ? void 0 : _a.call(single, date, activeModifiers, e);
-        }
-        else if (isDayPickerMultiple(dayPicker)) {
-            (_b = multiple.onDayClick) === null || _b === void 0 ? void 0 : _b.call(multiple, date, activeModifiers, e);
-        }
-        else if (isDayPickerRange(dayPicker)) {
-            (_c = range.onDayClick) === null || _c === void 0 ? void 0 : _c.call(range, date, activeModifiers, e);
-        }
-        else {
-            (_d = dayPicker.onDayClick) === null || _d === void 0 ? void 0 : _d.call(dayPicker, date, activeModifiers, e);
-        }
-    };
-    var onFocus = function (e) {
-        var _a;
-        focus(date);
-        (_a = dayPicker.onDayFocus) === null || _a === void 0 ? void 0 : _a.call(dayPicker, date, activeModifiers, e);
-    };
-    var onBlur = function (e) {
-        var _a;
-        blur();
-        (_a = dayPicker.onDayBlur) === null || _a === void 0 ? void 0 : _a.call(dayPicker, date, activeModifiers, e);
-    };
-    var onMouseEnter = function (e) {
-        var _a;
-        (_a = dayPicker.onDayMouseEnter) === null || _a === void 0 ? void 0 : _a.call(dayPicker, date, activeModifiers, e);
-    };
-    var onMouseLeave = function (e) {
-        var _a;
-        (_a = dayPicker.onDayMouseLeave) === null || _a === void 0 ? void 0 : _a.call(dayPicker, date, activeModifiers, e);
-    };
-    var onTouchCancel = function (e) {
-        var _a;
-        (_a = dayPicker.onDayTouchCancel) === null || _a === void 0 ? void 0 : _a.call(dayPicker, date, activeModifiers, e);
-    };
-    var onTouchEnd = function (e) {
-        var _a;
-        (_a = dayPicker.onDayTouchEnd) === null || _a === void 0 ? void 0 : _a.call(dayPicker, date, activeModifiers, e);
-    };
-    var onTouchMove = function (e) {
-        var _a;
-        (_a = dayPicker.onDayTouchMove) === null || _a === void 0 ? void 0 : _a.call(dayPicker, date, activeModifiers, e);
-    };
-    var onTouchStart = function (e) {
-        var _a;
-        (_a = dayPicker.onDayTouchStart) === null || _a === void 0 ? void 0 : _a.call(dayPicker, date, activeModifiers, e);
-    };
-    var onKeyUp = function (e) {
-        var _a;
-        (_a = dayPicker.onDayKeyUp) === null || _a === void 0 ? void 0 : _a.call(dayPicker, date, activeModifiers, e);
-    };
-    var onKeyDown = function (e) {
-        var _a;
-        switch (e.key) {
-            case 'ArrowLeft':
-                e.preventDefault();
-                e.stopPropagation();
-                dayPicker.dir === 'rtl' ? focusDayAfter() : focusDayBefore();
-                break;
-            case 'ArrowRight':
-                e.preventDefault();
-                e.stopPropagation();
-                dayPicker.dir === 'rtl' ? focusDayBefore() : focusDayAfter();
-                break;
-            case 'ArrowDown':
-                e.preventDefault();
-                e.stopPropagation();
-                focusWeekAfter();
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                e.stopPropagation();
-                focusWeekBefore();
-                break;
-            case 'PageUp':
-                e.preventDefault();
-                e.stopPropagation();
-                e.shiftKey ? focusYearBefore() : focusMonthBefore();
-                break;
-            case 'PageDown':
-                e.preventDefault();
-                e.stopPropagation();
-                e.shiftKey ? focusYearAfter() : focusMonthAfter();
-                break;
-            case 'Home':
-                e.preventDefault();
-                e.stopPropagation();
-                focusStartOfWeek();
-                break;
-            case 'End':
-                e.preventDefault();
-                e.stopPropagation();
-                focusEndOfWeek();
-                break;
-        }
-        (_a = dayPicker.onDayKeyDown) === null || _a === void 0 ? void 0 : _a.call(dayPicker, date, activeModifiers, e);
-    };
-    var eventHandlers = {
-        onClick: onClick,
-        onFocus: onFocus,
-        onBlur: onBlur,
-        onKeyDown: onKeyDown,
-        onKeyUp: onKeyUp,
-        onMouseEnter: onMouseEnter,
-        onMouseLeave: onMouseLeave,
-        onTouchCancel: onTouchCancel,
-        onTouchEnd: onTouchEnd,
-        onTouchMove: onTouchMove,
-        onTouchStart: onTouchStart
-    };
-    return eventHandlers;
+function formatYearCaption(year, options) {
+    return format(year, 'yyyy', options);
 }
 
+var formatters = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    formatCaption: formatCaption,
+    formatDay: formatDay,
+    formatMonthCaption: formatMonthCaption,
+    formatWeekNumber: formatWeekNumber,
+    formatWeekdayName: formatWeekdayName,
+    formatYearCaption: formatYearCaption
+});
+
+/**
+ * The default ARIA label for the day button.
+ */
+var labelDay = function (day, activeModifiers, options) {
+    return format(day, 'do MMMM (EEEE)', options);
+};
+
+/**
+ * The default ARIA label for the WeekNumber element.
+ */
+var labelMonthDropdown = function () {
+    return 'Month: ';
+};
+
+/**
+ * The default ARIA label for next month button in navigation
+ */
+var labelNext = function () {
+    return 'Go to next month';
+};
+
 /**
- * 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.
- *
+ * The default ARIA label for previous month button in navigation
  */
-function useSelectedDays() {
-    var dayPicker = useDayPicker();
-    var single = useSelectSingle();
-    var multiple = useSelectMultiple();
-    var range = useSelectRange();
-    var selectedDays = isDayPickerSingle(dayPicker)
-        ? single.selected
-        : isDayPickerMultiple(dayPicker)
-            ? multiple.selected
-            : isDayPickerRange(dayPicker)
-                ? range.selected
-                : undefined;
-    return selectedDays;
-}
+var labelPrevious = function () {
+    return 'Go to previous month';
+};
 
-function isInternalModifier(modifier) {
-    return Object.values(InternalModifier).includes(modifier);
-}
 /**
- * Return the class names for the Day element, according to the given active
- * modifiers.
- *
- * Custom class names are set via `modifiersClassNames` or `classNames`,
- * where the first have the precedence.
+ * The default ARIA label for the Weekday element.
  */
-function getDayClassNames(dayPicker, activeModifiers) {
-    var classNames = [dayPicker.classNames.day];
-    Object.keys(activeModifiers).forEach(function (modifier) {
-        var customClassName = dayPicker.modifiersClassNames[modifier];
-        if (customClassName) {
-            classNames.push(customClassName);
-        }
-        else if (isInternalModifier(modifier)) {
-            var internalClassName = dayPicker.classNames["day_".concat(modifier)];
-            if (internalClassName) {
-                classNames.push(internalClassName);
-            }
-        }
-    });
-    return classNames;
-}
+var labelWeekday = function (day, options) {
+    return format(day, 'cccc', options);
+};
 
-/** Return the style for the Day element, according to the given active modifiers. */
-function getDayStyle(dayPicker, activeModifiers) {
-    var style = __assign({}, dayPicker.styles.day);
-    Object.keys(activeModifiers).forEach(function (modifier) {
-        var _a;
-        style = __assign(__assign({}, style), (_a = dayPicker.modifiersStyles) === null || _a === void 0 ? void 0 : _a[modifier]);
-    });
-    return style;
-}
+/**
+ * The default ARIA label for the WeekNumber element.
+ */
+var labelWeekNumber = function (n) {
+    return "Week n. ".concat(n);
+};
 
 /**
- * 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.
+ * The default ARIA label for the WeekNumber element.
  */
-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();
-    var focusContext = useFocusContext();
-    var activeModifiers = useActiveModifiers(day, displayMonth);
-    var eventHandlers = useDayEventHandlers(day, activeModifiers);
-    var selectedDays = useSelectedDays();
-    var isButton = Boolean(dayPicker.onDayClick || dayPicker.mode !== 'default');
-    // Focus the button if the day is focused according to the focus context
-    useEffect(function () {
-        var _a;
-        if (activeModifiers.outside)
-            return;
-        if (!focusContext.focusedDay)
-            return;
-        if (!isButton)
-            return;
-        if (isSameDay(focusContext.focusedDay, day)) {
-            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-    }, [
-        focusContext.focusedDay,
-        day,
-        buttonRef,
-        isButton,
-        activeModifiers.outside
-    ]);
-    var className = getDayClassNames(dayPicker, activeModifiers).join(' ');
-    var style = getDayStyle(dayPicker, activeModifiers);
-    var ariaLabel = dayPicker.labels.labelDay(day, activeModifiers, {
-        locale: dayPicker.locale
-    });
-    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.createElement(DayContentComponent, { date: day, displayMonth: displayMonth, activeModifiers: activeModifiers }));
-    var divProps = {
-        style: style,
-        className: className,
-        children: children,
-        'aria-label': ariaLabel
+var labelYearDropdown = function () {
+    return 'Year: ';
+};
+
+var labels = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    labelDay: labelDay,
+    labelMonthDropdown: labelMonthDropdown,
+    labelNext: labelNext,
+    labelPrevious: labelPrevious,
+    labelWeekday: labelWeekday,
+    labelWeekNumber: labelWeekNumber,
+    labelYearDropdown: labelYearDropdown
+});
+
+/**
+ * Returns the default values to use in the DayPickerContext, in case they are
+ * not passed down with the DayPicker initial props.
+ */
+function getDefaultContextValues() {
+    var captionLayout = 'buttons';
+    var classNames = defaultClassNames;
+    var locale = enUS;
+    var modifiersClassNames = {};
+    var modifiers = {};
+    var numberOfMonths = 1;
+    var styles = {};
+    var today = new Date();
+    var components = {
+        Caption: Caption,
+        CaptionLabel: CaptionLabel,
+        Day: Day,
+        DayContent: DayContent,
+        Dropdown: Dropdown,
+        Footer: Footer,
+        Head: Head,
+        HeadRow: HeadRow,
+        IconDropdown: IconDropdown,
+        IconRight: IconRight,
+        IconLeft: IconLeft,
+        Row: Row,
+        WeekNumber: WeekNumber
     };
-    var isFocusTarget = Boolean(focusContext.focusTarget && isSameDay(focusContext.focusTarget, day));
-    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 dayRender = {
-        isButton: isButton,
-        isHidden: isHidden,
-        activeModifiers: activeModifiers,
-        selectedDays: selectedDays,
-        buttonProps: buttonProps,
-        divProps: divProps
+    return {
+        captionLayout: captionLayout,
+        classNames: classNames,
+        components: components,
+        formatters: formatters,
+        labels: labels,
+        locale: locale,
+        modifiersClassNames: modifiersClassNames,
+        modifiers: modifiers,
+        numberOfMonths: numberOfMonths,
+        styles: styles,
+        today: today,
+        mode: 'default'
     };
-    return dayRender;
 }
 
-/**
- * The content of a day cell – as a button or span element according to its
- * modifiers.
- */
-function Day(props) {
-    var buttonRef = useRef(null);
-    var dayRender = useDayRender(props.date, props.displayMonth, buttonRef);
-    if (dayRender.isHidden) {
-        return React__default.createElement(React__default.Fragment, null);
+/** Return the `fromDate` and `toDate` prop values values parsing the DayPicker props. */
+function parseFromToProps(props) {
+    var fromYear = props.fromYear, toYear = props.toYear, fromMonth = props.fromMonth, toMonth = props.toMonth;
+    var fromDate = props.fromDate, toDate = props.toDate;
+    if (fromMonth) {
+        fromDate = startOfMonth(fromMonth);
     }
-    if (!dayRender.isButton) {
-        return React__default.createElement("div", __assign({}, dayRender.divProps));
+    else if (fromYear) {
+        fromDate = new Date(fromYear, 0, 1);
     }
-    return React__default.createElement(Button, __assign({ name: "day", ref: buttonRef }, dayRender.buttonProps));
+    if (toMonth) {
+        toDate = endOfMonth(toMonth);
+    }
+    else if (toYear) {
+        toDate = new Date(toYear, 11, 31);
+    }
+    return {
+        fromDate: fromDate ? startOfDay(fromDate) : undefined,
+        toDate: toDate ? startOfDay(toDate) : undefined
+    };
 }
 
 /**
- * Render the week number element. If `onWeekNumberClick` is passed to DayPicker, it
- * renders a button, otherwise a span element.
+ * The DayPicker context shares the props passed to DayPicker within internal
+ * and custom components. It is used to set the default values and perform
+ * one-time calculations required to render the days.
+ *
+ * Access to this context from the {@link useDayPicker} hook.
  */
-function WeekNumber(props) {
-    var weekNumber = props.number, dates = props.dates;
-    var _a = useDayPicker(), onWeekNumberClick = _a.onWeekNumberClick, styles = _a.styles, classNames = _a.classNames, locale = _a.locale, labelWeekNumber = _a.labels.labelWeekNumber, formatWeekNumber = _a.formatters.formatWeekNumber;
-    var content = formatWeekNumber(Number(weekNumber), { locale: locale });
-    if (!onWeekNumberClick) {
-        return (React__default.createElement("span", { className: classNames.weeknumber, style: styles.weeknumber }, content));
+var DayPickerContext = createContext(undefined);
+/**
+ * The provider for the {@link DayPickerContext}, assigning the defaults from the
+ * initial DayPicker props.
+ */
+function DayPickerProvider(props) {
+    var _a;
+    var initialProps = props.initialProps;
+    var defaultContextValues = getDefaultContextValues();
+    var _b = parseFromToProps(initialProps), fromDate = _b.fromDate, toDate = _b.toDate;
+    var captionLayout = (_a = initialProps.captionLayout) !== null && _a !== void 0 ? _a : defaultContextValues.captionLayout;
+    if (captionLayout !== 'buttons' && (!fromDate || !toDate)) {
+        // When no from/to dates are set, the caption is always buttons
+        captionLayout = 'buttons';
     }
-    var label = labelWeekNumber(Number(weekNumber), { locale: locale });
-    var handleClick = function (e) {
-        onWeekNumberClick(weekNumber, dates, e);
-    };
-    return (React__default.createElement(Button, { name: "week-number", "aria-label": label, className: classNames.weeknumber, style: styles.weeknumber, onClick: handleClick }, content));
+    var onSelect;
+    if (isDayPickerSingle(initialProps) ||
+        isDayPickerMultiple(initialProps) ||
+        isDayPickerRange(initialProps)) {
+        onSelect = initialProps.onSelect;
+    }
+    var value = __assign(__assign(__assign({}, defaultContextValues), initialProps), { captionLayout: captionLayout, classNames: __assign(__assign({}, defaultContextValues.classNames), initialProps.classNames), components: __assign(__assign({}, defaultContextValues.components), 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.createElement(DayPickerContext.Provider, { value: value }, props.children));
 }
-
-/** Render a row in the calendar, with the days and the week number. */
-function Row(props) {
-    var _a, _b;
-    var _c = useDayPicker(), styles = _c.styles, classNames = _c.classNames, showWeekNumber = _c.showWeekNumber, components = _c.components;
-    var DayComponent = (_a = components === null || components === void 0 ? void 0 : components.Day) !== null && _a !== void 0 ? _a : Day;
-    var WeeknumberComponent = (_b = components === null || components === void 0 ? void 0 : components.WeekNumber) !== null && _b !== void 0 ? _b : WeekNumber;
-    var weekNumberCell;
-    if (showWeekNumber) {
-        weekNumberCell = (React__default.createElement("td", { className: classNames.cell, style: styles.cell },
-            React__default.createElement(WeeknumberComponent, { number: props.weekNumber, dates: props.dates })));
+/**
+ * Hook to access the {@link DayPickerContextValue}.
+ *
+ * Use the DayPicker context to access to the props passed to DayPicker inside
+ * internal or custom components.
+ */
+function useDayPicker() {
+    var context = useContext(DayPickerContext);
+    if (!context) {
+        throw new Error("useDayPicker must be used within a DayPickerProvider.");
     }
-    return (React__default.createElement("tr", { className: classNames.row, style: styles.row },
-        weekNumberCell,
-        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 context;
 }
 
 /** Return the weeks between two dates.  */
 function daysToMonthWeeks(fromDate, toDate, options) {
-    var toWeek = endOfWeek(toDate, options);
-    var fromWeek = startOfWeek(fromDate, options);
+    var toWeek = (options === null || options === void 0 ? void 0 : options.ISOWeek)
+        ? endOfISOWeek(toDate)
+        : endOfWeek(toDate, options);
+    var fromWeek = (options === null || options === void 0 ? void 0 : options.ISOWeek)
+        ? startOfISOWeek(fromDate)
+        : startOfWeek(fromDate, options);
     var nOfDays = differenceInCalendarDays(toWeek, fromWeek);
     var days = [];
     for (var i = 0; i <= nOfDays; i++) {
         days.push(addDays(fromWeek, i));
     }
     var weeksInMonth = days.reduce(function (result, date) {
-        var weekNumber = getWeek(date, options);
+        var weekNumber = (options === null || options === void 0 ? void 0 : options.ISOWeek)
+            ? getISOWeek(date)
+            : getWeek(date, options);
         var existingWeek = result.find(function (value) { return value.weekNumber === weekNumber; });
         if (existingWeek) {
             existingWeek.dates.push(date);
@@ -1838,12 +1821,10 @@ function daysToMonthWeeks(fromDate, toDate, options) {
  * Return the weeks belonging to the given month, adding the "outside days" to
  * the first and last week.
  */
-function getMonthWeeks(
-/** The month to get the weeks from */
-month, options) {
+function getMonthWeeks(month, options) {
     var weeksInMonth = daysToMonthWeeks(startOfMonth(month), endOfMonth(month), options);
-    // Add extra weeks to the month, up to 6 weeks
     if (options === null || options === void 0 ? void 0 : options.useFixedWeeks) {
+        // Add extra weeks to the month, up to 6 weeks
         var nrOfMonthWeeks = getWeeksInMonth(month, options);
         if (nrOfMonthWeeks < 6) {
             var lastWeek = weeksInMonth[weeksInMonth.length - 1];
@@ -1858,20 +1839,18 @@ month, options) {
 
 /** Render the table with the calendar. */
 function Table(props) {
-    var _a, _b, _c;
-    var _d = useDayPicker(), locale = _d.locale, classNames = _d.classNames, styles = _d.styles, hideHead = _d.hideHead, fixedWeeks = _d.fixedWeeks, components = _d.components, weekStartsOn = _d.weekStartsOn;
+    var _a = useDayPicker(), locale = _a.locale, classNames = _a.classNames, styles = _a.styles, hideHead = _a.hideHead, fixedWeeks = _a.fixedWeeks, _b = _a.components, Head = _b.Head, Row = _b.Row, Footer = _b.Footer, weekStartsOn = _a.weekStartsOn, firstWeekContainsDate = _a.firstWeekContainsDate, ISOWeek = _a.ISOWeek;
     var weeks = getMonthWeeks(props.displayMonth, {
         useFixedWeeks: Boolean(fixedWeeks),
+        ISOWeek: ISOWeek,
         locale: locale,
-        weekStartsOn: weekStartsOn
+        weekStartsOn: weekStartsOn,
+        firstWeekContainsDate: firstWeekContainsDate
     });
-    var HeadComponent = (_a = components === null || components === void 0 ? void 0 : components.Head) !== null && _a !== void 0 ? _a : Head;
-    var RowComponent = (_b = components === null || components === void 0 ? void 0 : components.Row) !== null && _b !== void 0 ? _b : Row;
-    var FooterComponent = (_c = components === null || components === void 0 ? void 0 : components.Footer) !== null && _c !== void 0 ? _c : Footer;
     return (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)));
+        !hideHead && React__default.createElement(Head, null),
+        React__default.createElement("tbody", { className: classNames.tbody, style: styles.tbody }, weeks.map(function (week) { return (React__default.createElement(Row, { displayMonth: props.displayMonth, key: week.weekNumber, dates: week.dates, weekNumber: week.weekNumber })); })),
+        React__default.createElement(Footer, null)));
 }
 
 /*
@@ -1954,11 +1933,10 @@ function useId(providedId) {
 /** Render a month. */
 function Month(props) {
     var _a;
-    var _b;
     var dayPicker = useDayPicker();
-    var dir = dayPicker.dir, classNames = dayPicker.classNames, styles = dayPicker.styles, components = dayPicker.components;
+    var dir = dayPicker.dir, classNames = dayPicker.classNames, styles = dayPicker.styles, Caption = dayPicker.components.Caption;
     var displayMonths = useNavigation().displayMonths;
-    var captionId = useId();
+    var captionId = useId(dayPicker.id ? "".concat(dayPicker.id, "-").concat(props.displayIndex) : undefined);
     var className = [classNames.month];
     var style = styles.month;
     var isStart = props.displayIndex === 0;
@@ -1979,9 +1957,8 @@ function Month(props) {
         className.push(classNames.caption_between);
         style = __assign(__assign({}, style), styles.caption_between);
     }
-    var CaptionComponent = (_b = components === null || components === void 0 ? void 0 : components.Caption) !== null && _b !== void 0 ? _b : Caption;
     return (React__default.createElement("div", { key: props.displayIndex, className: className.join(' '), style: style },
-        React__default.createElement(CaptionComponent, { id: captionId, displayMonth: props.displayMonth }),
+        React__default.createElement(Caption, { id: captionId, displayMonth: props.displayMonth }),
         React__default.createElement(Table, { "aria-labelledby": captionId, displayMonth: props.displayMonth })));
 }