react-day-picker 8.0.0-beta.30 → 8.0.0-beta.35

package/CHANGELOG.md

@@ -16,7 +16,30 @@ with the previous versions.
 
 See the preview website at https://react-day-picker-next.netlify.app.
 
-### v8.0.0-beta.30
+---
+
+### v8.0.0-beta.35
+
+- feat: add extended keyboard navigation (#1300) (2a098719)
+- chore: export missing Button component (5ba65841)
+- chore: rename `handleDayClick` to `onDayClick` (3d1678b2)
+- chore: limit documented exports (c2fbd576)
+- build: fix circular dependency (5cd0c2c8)
+
+### v8.0.0-beta.33
+
+- chore: unify context files (#1303) (d66b3981)
+- chore: cleanup useInput types (7faec569)
+- chore: improve internal modifiers typings (#1299) (9ddc64d9)
+- chore: consolidate types (#1297) (e00c59e7)
+
+### v8.0.0-beta.32
+
+- fix: previous/next month navigation with RTL direction (68ad0adf)
+- chore: updated `useInput` API (#1293)
+- chore: removed `defaultSelected` prop (cd4f5790)
+
+### v8.0.0-beta.31
 
 - Switched to rollup as module bundler
 - Added `custom` selection mode

package/README.md

@@ -1,4 +1,4 @@
-# React DayPicker
+# React DayPicker (beta)
 
 DayPicker is a date picker component for [React](https://reactjs.org).
 

package/build/DayPicker.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DayPickerProps } from './types';
+import { DayPickerCustomProps, DayPickerMultipleProps, DayPickerProps, DayPickerRangeProps, DayPickerSingleProps } from './types';
 /**
  * DayPicker render a date picker component to let users pick dates from a
  * calendar. See http://react-day-picker.js.org for updated documentation and
@@ -36,6 +36,7 @@ import { DayPickerProps } from './types';
  *   days that can be selected with the `min` or the `max` props.
  * - `mode="range"`: users can select a range of days. Limit the amount of days
  *   in the range with the `min` or the `max` props.
+ * - `mode="custom"`: implement your own selection mode with `onDayClick`.
  *
  * These selection modes should cover the most common use cases. In case you
  * need a more refined way of selecting days, use `mode="custom"`. Use the
@@ -59,8 +60,8 @@ import { DayPickerProps } from './types';
  *
  * ### Styling
  *
- * DayPicker comes with a default, basic style in `react-day-picker/style` –
- * use it as template for your own style.
+ * DayPicker comes with a default, basic style in `react-day-picker/style` – use
+ * it as template for your own style.
  *
  * If you are using CSS modules, pass the imported styles object the
  * `classNames` props.
@@ -85,4 +86,4 @@ import { DayPickerProps } from './types';
  * <DayPicker locale={es} />
  * ```
  */
-export declare function DayPicker(props: DayPickerProps): JSX.Element;
+export declare function DayPicker(props: DayPickerProps | DayPickerSingleProps | DayPickerMultipleProps | DayPickerRangeProps | DayPickerCustomProps): JSX.Element;

package/build/DayPicker.js

@@ -1,7 +1,7 @@
 import { __assign } from './_virtual/_tslib.js';
-import * as React from 'react';
+import React from 'react';
 import { Root } from './components/Root/Root.js';
-import { ContextProvider } from './contexts/ContextProvider.js';
+import { RootProvider } from './contexts/RootProvider.js';
 
 /**
  * DayPicker render a date picker component to let users pick dates from a
@@ -39,6 +39,7 @@ import { ContextProvider } from './contexts/ContextProvider.js';
  *   days that can be selected with the `min` or the `max` props.
  * - `mode="range"`: users can select a range of days. Limit the amount of days
  *   in the range with the `min` or the `max` props.
+ * - `mode="custom"`: implement your own selection mode with `onDayClick`.
  *
  * These selection modes should cover the most common use cases. In case you
  * need a more refined way of selecting days, use `mode="custom"`. Use the
@@ -62,8 +63,8 @@ import { ContextProvider } from './contexts/ContextProvider.js';
  *
  * ### Styling
  *
- * DayPicker comes with a default, basic style in `react-day-picker/style` –
- * use it as template for your own style.
+ * DayPicker comes with a default, basic style in `react-day-picker/style` – use
+ * it as template for your own style.
  *
  * If you are using CSS modules, pass the imported styles object the
  * `classNames` props.
@@ -89,7 +90,7 @@ import { ContextProvider } from './contexts/ContextProvider.js';
  * ```
  */
 function DayPicker(props) {
-    return (React.createElement(ContextProvider, __assign({}, props),
+    return (React.createElement(RootProvider, __assign({}, props),
         React.createElement(Root, null)));
 }
 

package/build/DayPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DayPicker.js","sources":["../src/DayPicker.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { DayPickerProps } from './types';\n\nimport { Root } from './components/Root';\nimport { ContextProvider } from './contexts/ContextProvider';\n\n/**\n * DayPicker render a date picker component to let users pick dates from a\n * calendar. See http://react-day-picker.js.org for updated documentation and\n * examples.\n *\n * ### Customization\n *\n * DayPicker offers different customization props. For example,\n *\n * - show multiple months using `numberOfMonths`\n * - display a dropdown to navigate the months via `captionLayout`\n * - display the week numbers with `showWeekNumbers`\n * - disable or hide days with `disabled` or `hidden`\n *\n * ### Controlling the months\n *\n * Change the initially displayed month using the `defaultMonth` prop. The\n * displayed months are controlled by DayPicker and stored in its internal\n * state. To control the months yourself, use `month` instead of `defaultMonth`\n * and use the `onMonthChange` event to set it.\n *\n * To limit the months the user can navigate to, use\n * `fromDate`/`fromMonth`/`fromYear` or `toDate`/`toMonth`/`toYear`.\n *\n * ### Selection modes\n *\n * DayPicker supports different selection mode that can be toggled using the\n * `mode` prop:\n *\n * - `mode=\"single\"`: only one day can be selected. Use `required` to make the\n *   selection required. Use the `onSelect` event handler to get the selected\n *   days.\n * - `mode=\"multiple\"`: users can select one or more days. Limit the amount of\n *   days that can be selected with the `min` or the `max` props.\n * - `mode=\"range\"`: users can select a range of days. Limit the amount of days\n *   in the range with the `min` or the `max` props.\n *\n * These selection modes should cover the most common use cases. In case you\n * need a more refined way of selecting days, use `mode=\"custom\"`. Use the\n * `selected` props and add the day event handlers to add/remove days from the\n * selection.\n *\n * ### Modifiers\n *\n * A _modifier_ represents different styles or states for the days displayed in\n * the calendar (like \"selected\" or \"disabled\"). Define custom modifiers using\n * the `modifiers` prop.\n *\n * ### Formatters and custom component\n *\n * You can customize how the content is displayed in the date picker by using\n * either the formatters or replacing the internal components.\n *\n * For the most common cases you want to use the `formatters` prop to change how\n * the content is formatted in the calendar. Use the `components` prop to\n * replace the internal components, like the navigation icons.\n *\n * ### Styling\n *\n * DayPicker comes with a default, basic style in `react-day-picker/style` –\n * use it as template for your own style.\n *\n * If you are using CSS modules, pass the imported styles object the\n * `classNames` props.\n *\n * You can also style the elements via inline-styles using the `styles` prop.\n *\n * ### Form fields\n *\n * If you need to bind the date picker to a form field, you can use the\n * `useInput` hooks for a basic behavior. See the `useInput` source as an\n * example to bind the date picker with form fields.\n *\n * ### Localization\n *\n * To localize DayPicker, import the locale from `date-fns` package and use the\n * `locale` prop.\n *\n * For example, to use Spanish locale:\n *\n * ```\n * import es from 'date-fns/locale/es';\n * <DayPicker locale={es} />\n * ```\n */\nexport function DayPicker(props: DayPickerProps): JSX.Element {\n  return (\n    <ContextProvider {...props}>\n      <Root />\n    </ContextProvider>\n  );\n}\n"],"names":[],"mappings":";;;;;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAqFgB,SAAS,CAAC,KAAqB;IAC7C,QACE,oBAAC,eAAe,eAAK,KAAK;QACxB,oBAAC,IAAI,OAAG,CACQ,EAClB;AACJ;;;;"}
+{"version":3,"file":"DayPicker.js","sources":["../src/DayPicker.tsx"],"sourcesContent":["import React from 'react';\n\nimport {\n  DayPickerCustomProps,\n  DayPickerMultipleProps,\n  DayPickerProps,\n  DayPickerRangeProps,\n  DayPickerSingleProps\n} from './types';\n\nimport { Root } from './components/Root';\nimport { RootProvider } from './contexts/RootProvider';\n\n/**\n * DayPicker render a date picker component to let users pick dates from a\n * calendar. See http://react-day-picker.js.org for updated documentation and\n * examples.\n *\n * ### Customization\n *\n * DayPicker offers different customization props. For example,\n *\n * - show multiple months using `numberOfMonths`\n * - display a dropdown to navigate the months via `captionLayout`\n * - display the week numbers with `showWeekNumbers`\n * - disable or hide days with `disabled` or `hidden`\n *\n * ### Controlling the months\n *\n * Change the initially displayed month using the `defaultMonth` prop. The\n * displayed months are controlled by DayPicker and stored in its internal\n * state. To control the months yourself, use `month` instead of `defaultMonth`\n * and use the `onMonthChange` event to set it.\n *\n * To limit the months the user can navigate to, use\n * `fromDate`/`fromMonth`/`fromYear` or `toDate`/`toMonth`/`toYear`.\n *\n * ### Selection modes\n *\n * DayPicker supports different selection mode that can be toggled using the\n * `mode` prop:\n *\n * - `mode=\"single\"`: only one day can be selected. Use `required` to make the\n *   selection required. Use the `onSelect` event handler to get the selected\n *   days.\n * - `mode=\"multiple\"`: users can select one or more days. Limit the amount of\n *   days that can be selected with the `min` or the `max` props.\n * - `mode=\"range\"`: users can select a range of days. Limit the amount of days\n *   in the range with the `min` or the `max` props.\n * - `mode=\"custom\"`: implement your own selection mode with `onDayClick`.\n *\n * These selection modes should cover the most common use cases. In case you\n * need a more refined way of selecting days, use `mode=\"custom\"`. Use the\n * `selected` props and add the day event handlers to add/remove days from the\n * selection.\n *\n * ### Modifiers\n *\n * A _modifier_ represents different styles or states for the days displayed in\n * the calendar (like \"selected\" or \"disabled\"). Define custom modifiers using\n * the `modifiers` prop.\n *\n * ### Formatters and custom component\n *\n * You can customize how the content is displayed in the date picker by using\n * either the formatters or replacing the internal components.\n *\n * For the most common cases you want to use the `formatters` prop to change how\n * the content is formatted in the calendar. Use the `components` prop to\n * replace the internal components, like the navigation icons.\n *\n * ### Styling\n *\n * DayPicker comes with a default, basic style in `react-day-picker/style` – use\n * it as template for your own style.\n *\n * If you are using CSS modules, pass the imported styles object the\n * `classNames` props.\n *\n * You can also style the elements via inline-styles using the `styles` prop.\n *\n * ### Form fields\n *\n * If you need to bind the date picker to a form field, you can use the\n * `useInput` hooks for a basic behavior. See the `useInput` source as an\n * example to bind the date picker with form fields.\n *\n * ### Localization\n *\n * To localize DayPicker, import the locale from `date-fns` package and use the\n * `locale` prop.\n *\n * For example, to use Spanish locale:\n *\n * ```\n * import es from 'date-fns/locale/es';\n * <DayPicker locale={es} />\n * ```\n */\nexport function DayPicker(\n  props:\n    | DayPickerProps\n    | DayPickerSingleProps\n    | DayPickerMultipleProps\n    | DayPickerRangeProps\n    | DayPickerCustomProps\n): JSX.Element {\n  return (\n    <RootProvider {...props}>\n      <Root />\n    </RootProvider>\n  );\n}\n"],"names":[],"mappings":";;;;;AAaA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAsFgB,SAAS,CACvB,KAKwB;IAExB,QACE,oBAAC,YAAY,eAAK,KAAK;QACrB,oBAAC,IAAI,OAAG,CACK,EACf;AACJ;;;;"}

package/build/components/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 /** The props for the [[Button]] component. */
 export declare type ButtonProps = React.HTMLProps<HTMLButtonElement>;
 /**

package/build/components/Button/Button.js

@@ -1,6 +1,7 @@
 import { __assign } from '../../_virtual/_tslib.js';
-import * as React from 'react';
+import React from 'react';
 import { useDayPicker } from '../../contexts/DayPicker/useDayPicker.js';
+import '../../contexts/DayPicker/DayPickerContext.js';
 
 /**
  * Render a button HTML element applying the reset class name.

package/build/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useDayPicker } from '../../contexts/DayPicker';\n\n/** The props for the [[Button]] component. */\nexport type ButtonProps = React.HTMLProps<HTMLButtonElement>;\n\n/**\n * Render a button HTML element applying the reset class name.\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (props, ref) => {\n    const { classNames, styles } = useDayPicker();\n\n    const classNamesArr = [classNames.button_reset, classNames.button];\n    if (props.className) {\n      classNamesArr.push(props.className);\n    }\n    const className = classNamesArr.join(' ');\n\n    const style = { ...styles.button_reset, ...styles.button };\n    if (props.style) {\n      Object.assign(style, props.style);\n    }\n\n    return (\n      <button\n        {...props}\n        ref={ref}\n        type=\"button\"\n        className={className}\n        style={style}\n      />\n    );\n  }\n);\n"],"names":[],"mappings":";;;;AAOA;;;IAGa,MAAM,GAAG,KAAK,CAAC,UAAU,CACpC,UAAC,KAAK,EAAE,GAAG;IACH,IAAA,KAAyB,YAAY,EAAE,EAArC,UAAU,gBAAA,EAAE,MAAM,YAAmB,CAAC;IAE9C,IAAM,aAAa,GAAG,CAAC,UAAU,CAAC,YAAY,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IACnE,IAAI,KAAK,CAAC,SAAS,EAAE;QACnB,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;KACrC;IACD,IAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE1C,IAAM,KAAK,yBAAQ,MAAM,CAAC,YAAY,GAAK,MAAM,CAAC,MAAM,CAAE,CAAC;IAC3D,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;KACnC;IAED,QACE,2CACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,IACZ,EACF;AACJ,CAAC;;;;"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useDayPicker } from '../../contexts/DayPicker';\n\n/** The props for the [[Button]] component. */\nexport type ButtonProps = React.HTMLProps<HTMLButtonElement>;\n\n/**\n * Render a button HTML element applying the reset class name.\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (props, ref) => {\n    const { classNames, styles } = useDayPicker();\n\n    const classNamesArr = [classNames.button_reset, classNames.button];\n    if (props.className) {\n      classNamesArr.push(props.className);\n    }\n    const className = classNamesArr.join(' ');\n\n    const style = { ...styles.button_reset, ...styles.button };\n    if (props.style) {\n      Object.assign(style, props.style);\n    }\n\n    return (\n      <button\n        {...props}\n        ref={ref}\n        type=\"button\"\n        className={className}\n        style={style}\n      />\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;AAOA;;;IAGa,MAAM,GAAG,KAAK,CAAC,UAAU,CACpC,UAAC,KAAK,EAAE,GAAG;IACH,IAAA,KAAyB,YAAY,EAAE,EAArC,UAAU,gBAAA,EAAE,MAAM,YAAmB,CAAC;IAE9C,IAAM,aAAa,GAAG,CAAC,UAAU,CAAC,YAAY,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IACnE,IAAI,KAAK,CAAC,SAAS,EAAE;QACnB,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;KACrC;IACD,IAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE1C,IAAM,KAAK,yBAAQ,MAAM,CAAC,YAAY,GAAK,MAAM,CAAC,MAAM,CAAE,CAAC;IAC3D,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;KACnC;IAED,QACE,2CACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,IACZ,EACF;AACJ,CAAC;;;;"}

package/build/components/Caption/Caption.d.ts

@@ -4,6 +4,13 @@ export interface CaptionProps {
     /** The month where the caption is displayed. */
     displayMonth: Date;
 }
+/**
+ * The layout of the caption:
+ *
+ * - `dropdown` - display a month / year dropdown
+ * - `buttons` - display previous / next month button.
+ */
+export declare type CaptionLayout = 'dropdown' | 'buttons';
 /**
  * Render the caption of a month, which includes title and navigation buttons.
  * The caption has a different layout when setting the `numberOfMonths` prop.

package/build/components/Caption/Caption.js

@@ -1,11 +1,12 @@
-import * as React from 'react';
+import React from 'react';
 import { isSameMonth } from 'date-fns';
-import { MonthsDropdown } from '../MonthsDropdown/MonthsDropdown.js';
-import { Navigation } from '../Navigation/Navigation.js';
-import { YearsDropdown } from '../YearsDropdown/YearsDropdown.js';
 import { useDayPicker } from '../../contexts/DayPicker/useDayPicker.js';
+import '../../contexts/DayPicker/DayPickerContext.js';
 import '../../contexts/Navigation/NavigationContext.js';
 import { useNavigation } from '../../contexts/Navigation/useNavigation.js';
+import { MonthsDropdown } from '../MonthsDropdown/MonthsDropdown.js';
+import { Navigation } from '../Navigation/Navigation.js';
+import { YearsDropdown } from '../YearsDropdown/YearsDropdown.js';
 
 /**
  * Render the caption of a month, which includes title and navigation buttons.
@@ -17,13 +18,13 @@ function Caption(props) {
     var context = useDayPicker();
     var classNames = context.classNames, numberOfMonths = context.numberOfMonths, disableNavigation = context.disableNavigation, styles = context.styles, captionLayout = context.captionLayout, onMonthChange = context.onMonthChange, dir = context.dir, CaptionLabel = context.components.CaptionLabel;
     var _b = useNavigation(), previousMonth = _b.previousMonth, nextMonth = _b.nextMonth, goToMonth = _b.goToMonth, displayMonths = _b.displayMonths;
-    var handlePreviousClick = function (e) {
+    var handlePreviousClick = function () {
         if (!previousMonth)
             return;
         goToMonth(previousMonth);
         onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(previousMonth);
     };
-    var handleNextClick = function (e) {
+    var handleNextClick = function () {
         if (!nextMonth)
             return;
         goToMonth(nextMonth);

package/build/components/Caption/Caption.js.map

@@ -1 +1 @@
-{"version":3,"file":"Caption.js","sources":["../../../src/components/Caption/Caption.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { isSameMonth } from 'date-fns';\n\nimport { MonthChangeEventHandler } from '../../types';\n\nimport { MonthsDropdown } from '../MonthsDropdown';\nimport { Navigation } from '../Navigation';\nimport { YearsDropdown } from '../YearsDropdown';\nimport { useDayPicker } from '../../contexts/DayPicker';\nimport { useNavigation } from '../../contexts/Navigation';\n\n/** Represent the props of the [[Caption]] component. */\nexport interface CaptionProps {\n  /** The month where the caption is displayed. */\n  displayMonth: Date;\n}\n\n/**\n * Render the caption of a month, which includes title and navigation buttons.\n * The caption has a different layout when setting the `numberOfMonths` prop.\n */\nexport function Caption(props: CaptionProps): JSX.Element {\n  const { displayMonth } = props;\n  const context = useDayPicker();\n  const {\n    classNames,\n    numberOfMonths,\n    disableNavigation,\n    styles,\n    captionLayout,\n    onMonthChange,\n    dir,\n    components: { CaptionLabel }\n  } = context;\n\n  const { previousMonth, nextMonth, goToMonth, displayMonths } =\n    useNavigation();\n\n  const handlePreviousClick: React.MouseEventHandler = (e) => {\n    if (!previousMonth) return;\n    goToMonth(previousMonth);\n    onMonthChange?.(previousMonth);\n  };\n\n  const handleNextClick: React.MouseEventHandler = (e) => {\n    if (!nextMonth) return;\n    goToMonth(nextMonth);\n    onMonthChange?.(nextMonth);\n  };\n\n  const handleMonthChange: MonthChangeEventHandler = (newMonth) => {\n    goToMonth(newMonth);\n    onMonthChange?.(newMonth);\n  };\n\n  const displayIndex = displayMonths.findIndex((month) =>\n    isSameMonth(displayMonth, month)\n  );\n  let isFirst = displayIndex === 0;\n  let isLast = displayIndex === displayMonths.length - 1;\n  if (dir === 'rtl') {\n    [isLast, isFirst] = [isFirst, isLast];\n  }\n\n  const captionLabel = <CaptionLabel displayMonth={displayMonth} />;\n  const hideNext = numberOfMonths > 1 && (isFirst || !isLast);\n  const hidePrevious = numberOfMonths > 1 && (isLast || !isFirst);\n\n  return (\n    <div className={classNames.caption} style={styles.caption}>\n      {disableNavigation && captionLabel}\n      {!disableNavigation && (\n        <>\n          {captionLayout === 'dropdown' ? (\n            <div\n              className={classNames.caption_dropdowns}\n              style={styles.caption_dropdowns}\n            >\n              <MonthsDropdown\n                onChange={handleMonthChange}\n                displayMonth={displayMonth}\n              />\n              <YearsDropdown\n                onChange={handleMonthChange}\n                displayMonth={displayMonth}\n              />\n            </div>\n          ) : (\n            <>\n              <CaptionLabel displayMonth={displayMonth} />\n              <Navigation\n                displayMonth={displayMonth}\n                hideNext={hideNext}\n                hidePrevious={hidePrevious}\n                nextMonth={nextMonth}\n                previousMonth={previousMonth}\n                onPreviousClick={handlePreviousClick}\n                onNextClick={handleNextClick}\n              />\n            </>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAkBA;;;;SAIgB,OAAO,CAAC,KAAmB;;IACjC,IAAA,YAAY,GAAK,KAAK,aAAV,CAAW;IAC/B,IAAM,OAAO,GAAG,YAAY,EAAE,CAAC;IAE7B,IAAA,UAAU,GAQR,OAAO,WARC,EACV,cAAc,GAOZ,OAAO,eAPK,EACd,iBAAiB,GAMf,OAAO,kBANQ,EACjB,MAAM,GAKJ,OAAO,OALH,EACN,aAAa,GAIX,OAAO,cAJI,EACb,aAAa,GAGX,OAAO,cAHI,EACb,GAAG,GAED,OAAO,IAFN,EACW,YAAY,GACxB,OAAO,wBADiB,CAChB;IAEN,IAAA,KACJ,aAAa,EAAE,EADT,aAAa,mBAAA,EAAE,SAAS,eAAA,EAAE,SAAS,eAAA,EAAE,aAAa,mBACzC,CAAC;IAElB,IAAM,mBAAmB,GAA4B,UAAC,CAAC;QACrD,IAAI,CAAC,aAAa;YAAE,OAAO;QAC3B,SAAS,CAAC,aAAa,CAAC,CAAC;QACzB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,aAAa,CAAC,CAAC;KAChC,CAAC;IAEF,IAAM,eAAe,GAA4B,UAAC,CAAC;QACjD,IAAI,CAAC,SAAS;YAAE,OAAO;QACvB,SAAS,CAAC,SAAS,CAAC,CAAC;QACrB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,SAAS,CAAC,CAAC;KAC5B,CAAC;IAEF,IAAM,iBAAiB,GAA4B,UAAC,QAAQ;QAC1D,SAAS,CAAC,QAAQ,CAAC,CAAC;QACpB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,QAAQ,CAAC,CAAC;KAC3B,CAAC;IAEF,IAAM,YAAY,GAAG,aAAa,CAAC,SAAS,CAAC,UAAC,KAAK;QACjD,OAAA,WAAW,CAAC,YAAY,EAAE,KAAK,CAAC;KAAA,CACjC,CAAC;IACF,IAAI,OAAO,GAAG,YAAY,KAAK,CAAC,CAAC;IACjC,IAAI,MAAM,GAAG,YAAY,KAAK,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IACvD,IAAI,GAAG,KAAK,KAAK,EAAE;QACjB,KAAoB,CAAC,OAAO,EAAE,MAAM,CAAC,EAApC,MAAM,QAAA,EAAE,OAAO,QAAA,CAAsB;KACvC;IAED,IAAM,YAAY,GAAG,oBAAC,YAAY,IAAC,YAAY,EAAE,YAAY,GAAI,CAAC;IAClE,IAAM,QAAQ,GAAG,cAAc,GAAG,CAAC,KAAK,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC;IAC5D,IAAM,YAAY,GAAG,cAAc,GAAG,CAAC,KAAK,MAAM,IAAI,CAAC,OAAO,CAAC,CAAC;IAEhE,QACE,6BAAK,SAAS,EAAE,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,OAAO;QACtD,iBAAiB,IAAI,YAAY;QACjC,CAAC,iBAAiB,KACjB,0CACG,aAAa,KAAK,UAAU,IAC3B,6BACE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EACvC,KAAK,EAAE,MAAM,CAAC,iBAAiB;YAE/B,oBAAC,cAAc,IACb,QAAQ,EAAE,iBAAiB,EAC3B,YAAY,EAAE,YAAY,GAC1B;YACF,oBAAC,aAAa,IACZ,QAAQ,EAAE,iBAAiB,EAC3B,YAAY,EAAE,YAAY,GAC1B,CACE,KAEN;YACE,oBAAC,YAAY,IAAC,YAAY,EAAE,YAAY,GAAI;YAC5C,oBAAC,UAAU,IACT,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,eAAe,EAAE,mBAAmB,EACpC,WAAW,EAAE,eAAe,GAC5B,CACD,CACJ,CACA,CACJ,CACG,EACN;AACJ;;;;"}
+{"version":3,"file":"Caption.js","sources":["../../../src/components/Caption/Caption.tsx"],"sourcesContent":["import React from 'react';\n\nimport { isSameMonth } from 'date-fns';\n\nimport { useDayPicker } from '../../contexts/DayPicker';\nimport { useNavigation } from '../../contexts/Navigation';\nimport { MonthsDropdown } from '../MonthsDropdown';\nimport { Navigation } from '../Navigation';\nimport { YearsDropdown } from '../YearsDropdown';\nimport { MonthChangeEventHandler } from '../../types/EventHandlers';\n\n/** Represent the props of the [[Caption]] component. */\nexport interface CaptionProps {\n  /** The month where the caption is displayed. */\n  displayMonth: Date;\n}\n\n/**\n * The layout of the caption:\n *\n * - `dropdown` - display a month / year dropdown\n * - `buttons` - display previous / next month button.\n */\nexport type CaptionLayout = 'dropdown' | 'buttons';\n\n/**\n * Render the caption of a month, which includes title and navigation buttons.\n * The caption has a different layout when setting the `numberOfMonths` prop.\n */\nexport function Caption(props: CaptionProps): JSX.Element {\n  const { displayMonth } = props;\n  const context = useDayPicker();\n  const {\n    classNames,\n    numberOfMonths,\n    disableNavigation,\n    styles,\n    captionLayout,\n    onMonthChange,\n    dir,\n    components: { CaptionLabel }\n  } = context;\n\n  const { previousMonth, nextMonth, goToMonth, displayMonths } =\n    useNavigation();\n\n  const handlePreviousClick: React.MouseEventHandler = () => {\n    if (!previousMonth) return;\n    goToMonth(previousMonth);\n    onMonthChange?.(previousMonth);\n  };\n\n  const handleNextClick: React.MouseEventHandler = () => {\n    if (!nextMonth) return;\n    goToMonth(nextMonth);\n    onMonthChange?.(nextMonth);\n  };\n\n  const handleMonthChange: MonthChangeEventHandler = (newMonth) => {\n    goToMonth(newMonth);\n    onMonthChange?.(newMonth);\n  };\n\n  const displayIndex = displayMonths.findIndex((month) =>\n    isSameMonth(displayMonth, month)\n  );\n  let isFirst = displayIndex === 0;\n  let isLast = displayIndex === displayMonths.length - 1;\n  if (dir === 'rtl') {\n    [isLast, isFirst] = [isFirst, isLast];\n  }\n\n  const captionLabel = <CaptionLabel displayMonth={displayMonth} />;\n  const hideNext = numberOfMonths > 1 && (isFirst || !isLast);\n  const hidePrevious = numberOfMonths > 1 && (isLast || !isFirst);\n\n  return (\n    <div className={classNames.caption} style={styles.caption}>\n      {disableNavigation && captionLabel}\n      {!disableNavigation && (\n        <>\n          {captionLayout === 'dropdown' ? (\n            <div\n              className={classNames.caption_dropdowns}\n              style={styles.caption_dropdowns}\n            >\n              <MonthsDropdown\n                onChange={handleMonthChange}\n                displayMonth={displayMonth}\n              />\n              <YearsDropdown\n                onChange={handleMonthChange}\n                displayMonth={displayMonth}\n              />\n            </div>\n          ) : (\n            <>\n              <CaptionLabel displayMonth={displayMonth} />\n              <Navigation\n                displayMonth={displayMonth}\n                hideNext={hideNext}\n                hidePrevious={hidePrevious}\n                nextMonth={nextMonth}\n                previousMonth={previousMonth}\n                onPreviousClick={handlePreviousClick}\n                onNextClick={handleNextClick}\n              />\n            </>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAyBA;;;;SAIgB,OAAO,CAAC,KAAmB;;IACjC,IAAA,YAAY,GAAK,KAAK,aAAV,CAAW;IAC/B,IAAM,OAAO,GAAG,YAAY,EAAE,CAAC;IAE7B,IAAA,UAAU,GAQR,OAAO,WARC,EACV,cAAc,GAOZ,OAAO,eAPK,EACd,iBAAiB,GAMf,OAAO,kBANQ,EACjB,MAAM,GAKJ,OAAO,OALH,EACN,aAAa,GAIX,OAAO,cAJI,EACb,aAAa,GAGX,OAAO,cAHI,EACb,GAAG,GAED,OAAO,IAFN,EACW,YAAY,GACxB,OAAO,wBADiB,CAChB;IAEN,IAAA,KACJ,aAAa,EAAE,EADT,aAAa,mBAAA,EAAE,SAAS,eAAA,EAAE,SAAS,eAAA,EAAE,aAAa,mBACzC,CAAC;IAElB,IAAM,mBAAmB,GAA4B;QACnD,IAAI,CAAC,aAAa;YAAE,OAAO;QAC3B,SAAS,CAAC,aAAa,CAAC,CAAC;QACzB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,aAAa,CAAC,CAAC;KAChC,CAAC;IAEF,IAAM,eAAe,GAA4B;QAC/C,IAAI,CAAC,SAAS;YAAE,OAAO;QACvB,SAAS,CAAC,SAAS,CAAC,CAAC;QACrB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,SAAS,CAAC,CAAC;KAC5B,CAAC;IAEF,IAAM,iBAAiB,GAA4B,UAAC,QAAQ;QAC1D,SAAS,CAAC,QAAQ,CAAC,CAAC;QACpB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,QAAQ,CAAC,CAAC;KAC3B,CAAC;IAEF,IAAM,YAAY,GAAG,aAAa,CAAC,SAAS,CAAC,UAAC,KAAK;QACjD,OAAA,WAAW,CAAC,YAAY,EAAE,KAAK,CAAC;KAAA,CACjC,CAAC;IACF,IAAI,OAAO,GAAG,YAAY,KAAK,CAAC,CAAC;IACjC,IAAI,MAAM,GAAG,YAAY,KAAK,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IACvD,IAAI,GAAG,KAAK,KAAK,EAAE;QACjB,KAAoB,CAAC,OAAO,EAAE,MAAM,CAAC,EAApC,MAAM,QAAA,EAAE,OAAO,QAAA,CAAsB;KACvC;IAED,IAAM,YAAY,GAAG,oBAAC,YAAY,IAAC,YAAY,EAAE,YAAY,GAAI,CAAC;IAClE,IAAM,QAAQ,GAAG,cAAc,GAAG,CAAC,KAAK,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC;IAC5D,IAAM,YAAY,GAAG,cAAc,GAAG,CAAC,KAAK,MAAM,IAAI,CAAC,OAAO,CAAC,CAAC;IAEhE,QACE,6BAAK,SAAS,EAAE,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,OAAO;QACtD,iBAAiB,IAAI,YAAY;QACjC,CAAC,iBAAiB,KACjB,0CACG,aAAa,KAAK,UAAU,IAC3B,6BACE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EACvC,KAAK,EAAE,MAAM,CAAC,iBAAiB;YAE/B,oBAAC,cAAc,IACb,QAAQ,EAAE,iBAAiB,EAC3B,YAAY,EAAE,YAAY,GAC1B;YACF,oBAAC,aAAa,IACZ,QAAQ,EAAE,iBAAiB,EAC3B,YAAY,EAAE,YAAY,GAC1B,CACE,KAEN;YACE,oBAAC,YAAY,IAAC,YAAY,EAAE,YAAY,GAAI;YAC5C,oBAAC,UAAU,IACT,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,eAAe,EAAE,mBAAmB,EACpC,WAAW,EAAE,eAAe,GAC5B,CACD,CACJ,CACA,CACJ,CACG,EACN;AACJ;;;;"}

package/build/components/CaptionLabel/CaptionLabel.js

@@ -1,5 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 import { useDayPicker } from '../../contexts/DayPicker/useDayPicker.js';
+import '../../contexts/DayPicker/DayPickerContext.js';
 
 /** Render the caption for the displayed month. This component is used when `captionLayout="buttons"`. */
 function CaptionLabel(props) {

package/build/components/CaptionLabel/CaptionLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaptionLabel.js","sources":["../../../src/components/CaptionLabel/CaptionLabel.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useDayPicker } from '../../contexts/DayPicker';\n\n/** The props for the [[CaptionLabel]] component. */\nexport interface CaptionLabelProps {\n  /** The month where the caption is displayed. */\n  displayMonth: Date;\n}\n\n/** Render the caption for the displayed month. This component is used when `captionLayout=\"buttons\"`. */\nexport function CaptionLabel(props: CaptionLabelProps): JSX.Element {\n  const {\n    locale,\n    classNames,\n    styles,\n    formatters: { formatCaption }\n  } = useDayPicker();\n  return (\n    <div\n      key=\"caption\"\n      className={classNames.caption_label}\n      style={styles.caption_label}\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n    >\n      {formatCaption(props.displayMonth, { locale })}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAUA;SACgB,YAAY,CAAC,KAAwB;IAC7C,IAAA,KAKF,YAAY,EAAE,EAJhB,MAAM,YAAA,EACN,UAAU,gBAAA,EACV,MAAM,YAAA,EACQ,aAAa,8BACX,CAAC;IACnB,QACE,6BACE,GAAG,EAAC,SAAS,EACb,SAAS,EAAE,UAAU,CAAC,aAAa,EACnC,KAAK,EAAE,MAAM,CAAC,aAAa,eACjB,QAAQ,iBACN,MAAM,IAEjB,aAAa,CAAC,KAAK,CAAC,YAAY,EAAE,EAAE,MAAM,QAAA,EAAE,CAAC,CAC1C,EACN;AACJ;;;;"}
+{"version":3,"file":"CaptionLabel.js","sources":["../../../src/components/CaptionLabel/CaptionLabel.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useDayPicker } from '../../contexts/DayPicker';\n\n/** The props for the [[CaptionLabel]] component. */\nexport interface CaptionLabelProps {\n  /** The month where the caption is displayed. */\n  displayMonth: Date;\n}\n\n/** Render the caption for the displayed month. This component is used when `captionLayout=\"buttons\"`. */\nexport function CaptionLabel(props: CaptionLabelProps): JSX.Element {\n  const {\n    locale,\n    classNames,\n    styles,\n    formatters: { formatCaption }\n  } = useDayPicker();\n  return (\n    <div\n      key=\"caption\"\n      className={classNames.caption_label}\n      style={styles.caption_label}\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n    >\n      {formatCaption(props.displayMonth, { locale })}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAUA;SACgB,YAAY,CAAC,KAAwB;IAC7C,IAAA,KAKF,YAAY,EAAE,EAJhB,MAAM,YAAA,EACN,UAAU,gBAAA,EACV,MAAM,YAAA,EACQ,aAAa,8BACX,CAAC;IACnB,QACE,6BACE,GAAG,EAAC,SAAS,EACb,SAAS,EAAE,UAAU,CAAC,aAAa,EACnC,KAAK,EAAE,MAAM,CAAC,aAAa,eACjB,QAAQ,iBACN,MAAM,IAEjB,aAAa,CAAC,KAAK,CAAC,YAAY,EAAE,EAAE,MAAM,QAAA,EAAE,CAAC,CAC1C,EACN;AACJ;;;;"}

package/build/components/Day/Day.js

@@ -1,5 +1,5 @@
 import { __assign } from '../../_virtual/_tslib.js';
-import * as React from 'react';
+import React from 'react';
 import { Button } from '../Button/Button.js';
 import { useDay } from './hooks/useDay.js';
 

package/build/components/Day/Day.js.map

@@ -1 +1 @@
-{"version":3,"file":"Day.js","sources":["../../../src/components/Day/Day.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button } from '../Button';\n\nimport { useDay } from './hooks/useDay';\n\n/** Represent the props used by the [[Day]] component. */\nexport interface DayProps {\n  /** The month where the date is displayed. */\n  displayMonth: Date;\n  /** The date to render. */\n  date: Date;\n}\n\n/**\n * The content of a day cell – as a button or span element according to its\n * modifiers.\n */\nexport function Day(props: DayProps): JSX.Element {\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n\n  const day = useDay(props.date, props.displayMonth, buttonRef);\n  const { buttonProps, nonInteractiveProps } = day;\n\n  if (!buttonProps && !nonInteractiveProps) {\n    return <></>;\n  }\n  if (nonInteractiveProps) {\n    return <div {...nonInteractiveProps} />;\n  }\n  return <Button ref={buttonRef} {...buttonProps} />;\n}\n"],"names":[],"mappings":";;;;;AAcA;;;;SAIgB,GAAG,CAAC,KAAe;IACjC,IAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAoB,IAAI,CAAC,CAAC;IAExD,IAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;IACtD,IAAA,WAAW,GAA0B,GAAG,YAA7B,EAAE,mBAAmB,GAAK,GAAG,oBAAR,CAAS;IAEjD,IAAI,CAAC,WAAW,IAAI,CAAC,mBAAmB,EAAE;QACxC,OAAO,yCAAK,CAAC;KACd;IACD,IAAI,mBAAmB,EAAE;QACvB,OAAO,wCAAS,mBAAmB,EAAI,CAAC;KACzC;IACD,OAAO,oBAAC,MAAM,aAAC,GAAG,EAAE,SAAS,IAAM,WAAW,EAAI,CAAC;AACrD;;;;"}
+{"version":3,"file":"Day.js","sources":["../../../src/components/Day/Day.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Button } from '../Button';\n\nimport { useDay } from './hooks/useDay';\n\n/** Represent the props used by the [[Day]] component. */\nexport interface DayProps {\n  /** The month where the date is displayed. */\n  displayMonth: Date;\n  /** The date to render. */\n  date: Date;\n}\n\n/**\n * The content of a day cell – as a button or span element according to its\n * modifiers.\n */\nexport function Day(props: DayProps): JSX.Element {\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n\n  const day = useDay(props.date, props.displayMonth, buttonRef);\n  const { buttonProps, nonInteractiveProps } = day;\n\n  if (!buttonProps && !nonInteractiveProps) {\n    return <></>;\n  }\n  if (nonInteractiveProps) {\n    return <div {...nonInteractiveProps} />;\n  }\n  return <Button ref={buttonRef} {...buttonProps} />;\n}\n"],"names":[],"mappings":";;;;;AAcA;;;;SAIgB,GAAG,CAAC,KAAe;IACjC,IAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAoB,IAAI,CAAC,CAAC;IAExD,IAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;IACtD,IAAA,WAAW,GAA0B,GAAG,YAA7B,EAAE,mBAAmB,GAAK,GAAG,oBAAR,CAAS;IAEjD,IAAI,CAAC,WAAW,IAAI,CAAC,mBAAmB,EAAE;QACxC,OAAO,yCAAK,CAAC;KACd;IACD,IAAI,mBAAmB,EAAE;QACvB,OAAO,wCAAS,mBAAmB,EAAI,CAAC;KACzC;IACD,OAAO,oBAAC,MAAM,aAAC,GAAG,EAAE,SAAS,IAAM,WAAW,EAAI,CAAC;AACrD;;;;"}

package/build/components/Day/hooks/useDay.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { DateRange, ModifierStatus, StyledComponentProps } from '../../../types';
-import { SelectMultipleContextValue } from '../../../contexts/SelectMultiple';
-import { SelectRangeContextValue } from '../../../contexts/SelectRange';
-import { SelectSingleContextValue } from '../../../contexts/SelectSingle';
+import { DateRange, ModifierStatus, StyledComponent } from '../../../types';
+import { SelectMultipleContextValue } from '../../../contexts/SelectMultiple/SelectMultipleContext';
+import { SelectRangeContextValue } from '../../../contexts/SelectRange/SelectRangeContext';
+import { SelectSingleContextValue } from '../../../contexts/SelectSingle/SelectSingleContext';
 export declare type UseDay = {
     /** Whether the date is outside the display month/ */
     isOutside: boolean;
@@ -22,7 +22,7 @@ export declare type UseDay = {
      *
      * When both this value and `buttonProps` are `undefined`, DayPicker should not render anything.
      */
-    nonInteractiveProps?: StyledComponentProps;
+    nonInteractiveProps?: StyledComponent;
     single: SelectSingleContextValue;
     multiple: SelectMultipleContextValue;
     range: SelectRangeContextValue;

package/build/components/Day/hooks/useDay.js

@@ -1,19 +1,19 @@
 import { __assign } from '../../../_virtual/_tslib.js';
-import React__default from 'react';
+import React from 'react';
 import { isSameMonth } from 'date-fns';
-import { isDayPickerMultiple } from '../../../types/isDayPickerMultiple.js';
-import { isDayPickerRange } from '../../../types/isDayPickerRange.js';
-import { isDayPickerSingle } from '../../../types/isDayPickerSingle.js';
+import { isDayPickerMultiple } from '../../../types/DayPickerMultiple.js';
+import { isDayPickerRange } from '../../../types/DayPickerRange.js';
+import { isDayPickerSingle } from '../../../types/DayPickerSingle.js';
 import { useDayPicker } from '../../../contexts/DayPicker/useDayPicker.js';
+import '../../../contexts/DayPicker/DayPickerContext.js';
 import '../../../contexts/SelectMultiple/SelectMultipleContext.js';
 import { useSelectMultiple } from '../../../contexts/SelectMultiple/useSelectMultiple.js';
 import '../../../contexts/SelectRange/SelectRangeContext.js';
 import { useSelectRange } from '../../../contexts/SelectRange/useSelectRange.js';
 import '../../../contexts/SelectSingle/SelectSingleContext.js';
 import { useSelectSingle } from '../../../contexts/SelectSingle/useSelectSingle.js';
-import 'date-fns/locale/en-US';
-import { useModifiers } from '../../../hooks/useModifiers/useModifiers.js';
 import { useDayFocus } from './useDayFocus.js';
+import { useModifiers } from '../../../hooks/useModifiers/useModifiers.js';
 
 /**
  * This hook returns details about the content to render in the day cell.
@@ -78,9 +78,9 @@ buttonRef) {
         style = __assign(__assign({}, context.styles), context.styles.day_outside);
     }
     var DayContent = context.components.DayContent;
-    var children = (React__default.createElement(DayContent, { date: date, displayMonth: displayMonth, modifiers: modifiers }));
+    var children = (React.createElement(DayContent, { date: date, displayMonth: displayMonth, modifiers: modifiers }));
     var className = classNames.join(' ');
-    if (!context.mode) {
+    if (!context.mode && !context.onDayClick) {
         return __assign(__assign({}, returnValue), { nonInteractiveProps: {
                 style: style,
                 className: className,
@@ -91,13 +91,13 @@ buttonRef) {
     var handleClick = function (e) {
         var _a, _b, _c, _d;
         if (isDayPickerSingle(context)) {
-            (_a = single.handleDayClick) === null || _a === void 0 ? void 0 : _a.call(single, date, modifiers, e);
+            (_a = single.onDayClick) === null || _a === void 0 ? void 0 : _a.call(single, date, modifiers, e);
         }
         else if (isDayPickerMultiple(context)) {
-            (_b = multiple.handleDayClick) === null || _b === void 0 ? void 0 : _b.call(multiple, date, modifiers, e);
+            (_b = multiple.onDayClick) === null || _b === void 0 ? void 0 : _b.call(multiple, date, modifiers, e);
         }
         else if (isDayPickerRange(context)) {
-            (_c = range.handleDayClick) === null || _c === void 0 ? void 0 : _c.call(range, date, modifiers, e);
+            (_c = range.onDayClick) === null || _c === void 0 ? void 0 : _c.call(range, date, modifiers, e);
         }
         (_d = context.onDayClick) === null || _d === void 0 ? void 0 : _d.call(context, date, modifiers, e);
     };

package/build/components/Day/hooks/useDay.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDay.js","sources":["../../../../src/components/Day/hooks/useDay.tsx"],"sourcesContent":["import React from 'react';\n\nimport { isSameMonth } from 'date-fns';\n\nimport {\n  DateRange,\n  isDayPickerMultiple,\n  isDayPickerRange,\n  isDayPickerSingle,\n  ModifierStatus,\n  StyledComponentProps\n} from '../../../types';\n\nimport { useDayPicker } from '../../../contexts/DayPicker';\nimport {\n  SelectMultipleContextValue,\n  useSelectMultiple\n} from '../../../contexts/SelectMultiple';\nimport {\n  SelectRangeContextValue,\n  useSelectRange\n} from '../../../contexts/SelectRange';\nimport {\n  SelectSingleContextValue,\n  useSelectSingle\n} from '../../../contexts/SelectSingle';\nimport { useModifiers } from '../../../hooks';\n\nimport { useDayFocus } from './useDayFocus';\n\nexport type UseDay = {\n  /** Whether the date is outside the display month/ */\n  isOutside: boolean;\n  /** The modifiers for the given date. */\n  modifiers: ModifierStatus;\n  /** The days in DayPicker currently selected. */\n  selected: Date | Date[] | DateRange | undefined;\n  /**\n   * The props for rendering the day as interactive element.\n   *\n   * When `undefined`, DayPicker should render a non interactive element with non-interactive\n   * props.\n   */\n  buttonProps?: Omit<React.HTMLProps<HTMLButtonElement>, 'ref'>;\n  /**\n   * The props for rendering the day as not interactive element.\n   *\n   * When both this value and `buttonProps` are `undefined`, DayPicker should not render anything.\n   */\n  nonInteractiveProps?: StyledComponentProps;\n  single: SelectSingleContextValue;\n  multiple: SelectMultipleContextValue;\n  range: SelectRangeContextValue;\n};\n\n/**\n * This hook returns details about the content to render in the day cell.\n *\n *\n * When a day cell is rendered in the table, DayPicker can either:\n *\n * - render nothing: when the day is outside the month or has matched the\n *   \"hidden\" modifier.\n * - render a button. When a selection mode is set, DayPicker renders a button\n *   to allow the focus and the selection. In case of `custom` selection\n *   mode, DayPicker expects a `onDayClick` prop to render a button.\n * - render a non-interactive element: when no selection mode is set, the day\n *   cell shouldn’t respond to any interaction. DayPicker should render a `div`\n *   or a `span`.\n *\n * ### Usage\n *\n * Use this hook to customize the behavior of the [[Day]] component. Create a\n * new `Day` component using this hook and pass it to the `components` prop.\n * The source of [[Day]] can be a good starting point.\n *\n * */\nexport function useDay(\n  /** The day rendered in the month. */\n  date: Date,\n  /** The month where the date is displayed. DayPicker renders days outside the display month when `showOutsideDays` is true. */\n  displayMonth: Date,\n  /** A ref to the button element. */\n  buttonRef: React.RefObject<HTMLButtonElement>\n): UseDay {\n  const context = useDayPicker();\n  const single = useSelectSingle();\n  const multiple = useSelectMultiple();\n  const range = useSelectRange();\n  const { focus, blur, focusOnKeyDown, isFocused } = useDayFocus(\n    date,\n    buttonRef\n  );\n\n  const { modifiers, modifierClassNames, modifierStyle } = useModifiers(date);\n  const isOutside = !isSameMonth(date, displayMonth);\n\n  const returnValue = {\n    isOutside,\n    modifiers,\n    selected: isDayPickerSingle(context)\n      ? single.selected\n      : isDayPickerMultiple(context)\n      ? multiple.selected\n      : isDayPickerRange(context)\n      ? range.selected\n      : undefined,\n    single,\n    multiple,\n    range\n  };\n  if (isOutside && !context.showOutsideDays) {\n    return returnValue;\n  }\n  if (modifiers.hidden) {\n    return returnValue;\n  }\n\n  const classNames = [context.classNames.day].concat(modifierClassNames);\n  let style: React.CSSProperties = { ...context.styles.day, ...modifierStyle };\n\n  if (isOutside) {\n    classNames.push(context.classNames.day_outside);\n    style = { ...context.styles, ...context.styles.day_outside };\n  }\n\n  const { DayContent } = context.components;\n  const children = (\n    <DayContent date={date} displayMonth={displayMonth} modifiers={modifiers} />\n  );\n\n  let className = classNames.join(' ');\n\n  if (!context.mode) {\n    return {\n      ...returnValue,\n      nonInteractiveProps: {\n        style,\n        className,\n        children\n      }\n    };\n  }\n\n  // #region Event handlers\n  const handleClick: React.MouseEventHandler = (e) => {\n    if (isDayPickerSingle(context)) {\n      single.handleDayClick?.(date, modifiers, e);\n    } else if (isDayPickerMultiple(context)) {\n      multiple.handleDayClick?.(date, modifiers, e);\n    } else if (isDayPickerRange(context)) {\n      range.handleDayClick?.(date, modifiers, e);\n    }\n    context.onDayClick?.(date, modifiers, e);\n  };\n\n  const handleFocus: React.FocusEventHandler = (e) => {\n    focus(date);\n    context.onDayFocus?.(date, modifiers, e);\n  };\n\n  const handleBlur: React.FocusEventHandler = (e) => {\n    blur();\n    context.onDayBlur?.(date, modifiers, e);\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler = (e) => {\n    focusOnKeyDown(e);\n    context.onDayKeyDown?.(date, modifiers, e);\n  };\n\n  const handleKeyUp: React.KeyboardEventHandler = (e) => {\n    context.onDayKeyUp?.(date, modifiers, e);\n  };\n  const handleMouseEnter: React.MouseEventHandler = (e) => {\n    context.onDayMouseEnter?.(date, modifiers, e);\n  };\n  const handleMouseLeave: React.MouseEventHandler = (e) => {\n    context.onDayMouseLeave?.(date, modifiers, e);\n  };\n  const handleTouchCancel: React.TouchEventHandler = (e) => {\n    context.onDayTouchCancel?.(date, modifiers, e);\n  };\n  const handleTouchEnd: React.TouchEventHandler = (e) => {\n    context.onDayTouchEnd?.(date, modifiers, e);\n  };\n  const handleTouchMove: React.TouchEventHandler = (e) => {\n    context.onDayTouchMove?.(date, modifiers, e);\n  };\n  const handleTouchStart: React.TouchEventHandler = (e) => {\n    context.onDayTouchStart?.(date, modifiers, e);\n  };\n\n  if (isOutside) {\n    classNames.push(context.classNames.day_outside);\n    style = { ...context.styles, ...context.styles.day_outside };\n  }\n\n  className = classNames.join(' ');\n\n  const { selected, disabled } = modifiers;\n\n  const tabIndex = disabled || isFocused ? -1 : 0;\n\n  return {\n    ...returnValue,\n    buttonProps: {\n      children,\n      'aria-pressed': selected,\n      style: style,\n      disabled: disabled,\n      className: className,\n      tabIndex: tabIndex,\n      onClick: handleClick,\n      onFocus: handleFocus,\n      onBlur: handleBlur,\n      onKeyDown: handleKeyDown,\n      onKeyUp: handleKeyUp,\n      onMouseEnter: handleMouseEnter,\n      onMouseLeave: handleMouseLeave,\n      onTouchCancel: handleTouchCancel,\n      onTouchEnd: handleTouchEnd,\n      onTouchMove: handleTouchMove,\n      onTouchStart: handleTouchStart\n    }\n  };\n}\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"useDay.js","sources":["../../../../src/components/Day/hooks/useDay.tsx"],"sourcesContent":["import React from 'react';\n\nimport { isSameMonth } from 'date-fns';\n\nimport {\n  DateRange,\n  isDayPickerMultiple,\n  isDayPickerRange,\n  isDayPickerSingle,\n  ModifierStatus,\n  StyledComponent\n} from '../../../types';\n\nimport { useDayPicker } from '../../../contexts/DayPicker';\nimport { useSelectMultiple } from '../../../contexts/SelectMultiple';\nimport { useSelectRange } from '../../../contexts/SelectRange';\nimport { useSelectSingle } from '../../../contexts/SelectSingle';\n\nimport { useDayFocus } from './useDayFocus';\nimport { SelectMultipleContextValue } from '../../../contexts/SelectMultiple/SelectMultipleContext';\nimport { SelectRangeContextValue } from '../../../contexts/SelectRange/SelectRangeContext';\nimport { SelectSingleContextValue } from '../../../contexts/SelectSingle/SelectSingleContext';\nimport { useModifiers } from '../../../hooks/useModifiers';\n\nexport type UseDay = {\n  /** Whether the date is outside the display month/ */\n  isOutside: boolean;\n  /** The modifiers for the given date. */\n  modifiers: ModifierStatus;\n  /** The days in DayPicker currently selected. */\n  selected: Date | Date[] | DateRange | undefined;\n  /**\n   * The props for rendering the day as interactive element.\n   *\n   * When `undefined`, DayPicker should render a non interactive element with non-interactive\n   * props.\n   */\n  buttonProps?: Omit<React.HTMLProps<HTMLButtonElement>, 'ref'>;\n  /**\n   * The props for rendering the day as not interactive element.\n   *\n   * When both this value and `buttonProps` are `undefined`, DayPicker should not render anything.\n   */\n  nonInteractiveProps?: StyledComponent;\n  single: SelectSingleContextValue;\n  multiple: SelectMultipleContextValue;\n  range: SelectRangeContextValue;\n};\n\n/**\n * This hook returns details about the content to render in the day cell.\n *\n *\n * When a day cell is rendered in the table, DayPicker can either:\n *\n * - render nothing: when the day is outside the month or has matched the\n *   \"hidden\" modifier.\n * - render a button. When a selection mode is set, DayPicker renders a button\n *   to allow the focus and the selection. In case of `custom` selection\n *   mode, DayPicker expects a `onDayClick` prop to render a button.\n * - render a non-interactive element: when no selection mode is set, the day\n *   cell shouldn’t respond to any interaction. DayPicker should render a `div`\n *   or a `span`.\n *\n * ### Usage\n *\n * Use this hook to customize the behavior of the [[Day]] component. Create a\n * new `Day` component using this hook and pass it to the `components` prop.\n * The source of [[Day]] can be a good starting point.\n *\n * */\nexport function useDay(\n  /** The day rendered in the month. */\n  date: Date,\n  /** The month where the date is displayed. DayPicker renders days outside the display month when `showOutsideDays` is true. */\n  displayMonth: Date,\n  /** A ref to the button element. */\n  buttonRef: React.RefObject<HTMLButtonElement>\n): UseDay {\n  const context = useDayPicker();\n  const single = useSelectSingle();\n  const multiple = useSelectMultiple();\n  const range = useSelectRange();\n  const { focus, blur, focusOnKeyDown, isFocused } = useDayFocus(\n    date,\n    buttonRef\n  );\n\n  const { modifiers, modifierClassNames, modifierStyle } = useModifiers(date);\n  const isOutside = !isSameMonth(date, displayMonth);\n\n  const returnValue = {\n    isOutside,\n    modifiers,\n    selected: isDayPickerSingle(context)\n      ? single.selected\n      : isDayPickerMultiple(context)\n      ? multiple.selected\n      : isDayPickerRange(context)\n      ? range.selected\n      : undefined,\n    single,\n    multiple,\n    range\n  };\n  if (isOutside && !context.showOutsideDays) {\n    return returnValue;\n  }\n  if (modifiers.hidden) {\n    return returnValue;\n  }\n\n  const classNames = [context.classNames.day].concat(modifierClassNames);\n  let style: React.CSSProperties = { ...context.styles.day, ...modifierStyle };\n\n  if (isOutside) {\n    classNames.push(context.classNames.day_outside);\n    style = { ...context.styles, ...context.styles.day_outside };\n  }\n\n  const { DayContent } = context.components;\n  const children = (\n    <DayContent date={date} displayMonth={displayMonth} modifiers={modifiers} />\n  );\n\n  let className = classNames.join(' ');\n\n  if (!context.mode && !context.onDayClick) {\n    return {\n      ...returnValue,\n      nonInteractiveProps: {\n        style,\n        className,\n        children\n      }\n    };\n  }\n\n  // #region Event handlers\n  const handleClick: React.MouseEventHandler = (e) => {\n    if (isDayPickerSingle(context)) {\n      single.onDayClick?.(date, modifiers, e);\n    } else if (isDayPickerMultiple(context)) {\n      multiple.onDayClick?.(date, modifiers, e);\n    } else if (isDayPickerRange(context)) {\n      range.onDayClick?.(date, modifiers, e);\n    }\n    context.onDayClick?.(date, modifiers, e);\n  };\n\n  const handleFocus: React.FocusEventHandler = (e) => {\n    focus(date);\n    context.onDayFocus?.(date, modifiers, e);\n  };\n\n  const handleBlur: React.FocusEventHandler = (e) => {\n    blur();\n    context.onDayBlur?.(date, modifiers, e);\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler = (e) => {\n    focusOnKeyDown(e);\n    context.onDayKeyDown?.(date, modifiers, e);\n  };\n\n  const handleKeyUp: React.KeyboardEventHandler = (e) => {\n    context.onDayKeyUp?.(date, modifiers, e);\n  };\n  const handleMouseEnter: React.MouseEventHandler = (e) => {\n    context.onDayMouseEnter?.(date, modifiers, e);\n  };\n  const handleMouseLeave: React.MouseEventHandler = (e) => {\n    context.onDayMouseLeave?.(date, modifiers, e);\n  };\n  const handleTouchCancel: React.TouchEventHandler = (e) => {\n    context.onDayTouchCancel?.(date, modifiers, e);\n  };\n  const handleTouchEnd: React.TouchEventHandler = (e) => {\n    context.onDayTouchEnd?.(date, modifiers, e);\n  };\n  const handleTouchMove: React.TouchEventHandler = (e) => {\n    context.onDayTouchMove?.(date, modifiers, e);\n  };\n  const handleTouchStart: React.TouchEventHandler = (e) => {\n    context.onDayTouchStart?.(date, modifiers, e);\n  };\n\n  if (isOutside) {\n    classNames.push(context.classNames.day_outside);\n    style = { ...context.styles, ...context.styles.day_outside };\n  }\n\n  className = classNames.join(' ');\n\n  const { selected, disabled } = modifiers;\n\n  const tabIndex = disabled || isFocused ? -1 : 0;\n\n  return {\n    ...returnValue,\n    buttonProps: {\n      children,\n      'aria-pressed': selected,\n      style: style,\n      disabled: disabled,\n      className: className,\n      tabIndex: tabIndex,\n      onClick: handleClick,\n      onFocus: handleFocus,\n      onBlur: handleBlur,\n      onKeyDown: handleKeyDown,\n      onKeyUp: handleKeyUp,\n      onMouseEnter: handleMouseEnter,\n      onMouseLeave: handleMouseLeave,\n      onTouchCancel: handleTouchCancel,\n      onTouchEnd: handleTouchEnd,\n      onTouchMove: handleTouchMove,\n      onTouchStart: handleTouchStart\n    }\n  };\n}\n"],"names":[],"mappings":"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"}

package/build/components/Day/hooks/useDayFocus.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 /** Handle the focus for the day element. */
 export declare function useDayFocus(date: Date, buttonRef: React.RefObject<HTMLButtonElement>): {
     focus: (date: Date) => void;

package/build/components/Day/hooks/useDayFocus.js

@@ -1,13 +1,14 @@
-import * as React from 'react';
+import React from 'react';
 import { isSameDay } from 'date-fns';
-import '../../../contexts/Focus/FocusContext.js';
+import { useDayPicker } from '../../../contexts/DayPicker/useDayPicker.js';
 import '../../../contexts/DayPicker/DayPickerContext.js';
-import '../../../contexts/Navigation/NavigationContext.js';
+import '../../../contexts/Focus/FocusContext.js';
 import { useFocus } from '../../../contexts/Focus/useFocus.js';
 
 /** Handle the focus for the day element. */
 function useDayFocus(date, buttonRef) {
-    var _a = useFocus(), focusedDay = _a[0], _b = _a[1], focusDayAfter = _b.focusDayAfter, focusDayBefore = _b.focusDayBefore, focusWeekAfterDay = _b.focusWeekAfterDay, focusWeekBeforeDay = _b.focusWeekBeforeDay, blur = _b.blur, focus = _b.focus;
+    var _a = useFocus(), focusedDay = _a[0], _b = _a[1], focusDayAfter = _b.focusDayAfter, focusDayBefore = _b.focusDayBefore, focusWeekAfterDay = _b.focusWeekAfterDay, focusWeekBeforeDay = _b.focusWeekBeforeDay, blur = _b.blur, focus = _b.focus, focusMonthBefore = _b.focusMonthBefore, focusMonthAfter = _b.focusMonthAfter, focusYearBefore = _b.focusYearBefore, focusYearAfter = _b.focusYearAfter, focusStartOfWeek = _b.focusStartOfWeek, focusEndOfWeek = _b.focusEndOfWeek;
+    var dir = useDayPicker().dir;
     // Focus the HTML element if this is the focused day.
     React.useEffect(function () {
         var _a;
@@ -22,12 +23,12 @@ function useDayFocus(date, buttonRef) {
             case 'ArrowLeft':
                 e.preventDefault();
                 e.stopPropagation();
-                focusDayBefore();
+                dir === 'rtl' ? focusDayAfter() : focusDayBefore();
                 break;
             case 'ArrowRight':
                 e.preventDefault();
                 e.stopPropagation();
-                focusDayAfter();
+                dir === 'rtl' ? focusDayBefore() : focusDayAfter();
                 break;
             case 'ArrowDown':
                 e.preventDefault();
@@ -39,6 +40,26 @@ function useDayFocus(date, buttonRef) {
                 e.stopPropagation();
                 focusWeekBeforeDay();
                 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;
         }
     };
     var isFocused = Boolean(focusedDay && !isSameDay(focusedDay, date));

package/build/components/Day/hooks/useDayFocus.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDayFocus.js","sources":["../../../../src/components/Day/hooks/useDayFocus.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { isSameDay } from 'date-fns';\n\nimport { useFocus } from '../../../contexts/Focus';\n\n/** Handle the focus for the day element. */\nexport function useDayFocus(\n  date: Date,\n  buttonRef: React.RefObject<HTMLButtonElement>\n): {\n  focus: (date: Date) => void;\n  blur: () => void;\n  focusOnKeyDown: React.KeyboardEventHandler;\n  isFocused: boolean;\n} {\n  const [\n    focusedDay,\n    {\n      focusDayAfter,\n      focusDayBefore,\n      focusWeekAfterDay,\n      focusWeekBeforeDay,\n      blur,\n      focus\n    }\n  ] = useFocus();\n\n  // Focus the HTML element if this is the focused day.\n  React.useEffect(() => {\n    if (!focusedDay) return;\n    if (isSameDay(focusedDay, date)) {\n      buttonRef.current?.focus();\n    }\n  }, [focusedDay, date, buttonRef]);\n\n  const focusOnKeyDown: React.KeyboardEventHandler = (e) => {\n    switch (e.key) {\n      case 'ArrowLeft':\n        e.preventDefault();\n        e.stopPropagation();\n        focusDayBefore();\n        break;\n      case 'ArrowRight':\n        e.preventDefault();\n        e.stopPropagation();\n        focusDayAfter();\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        e.stopPropagation();\n        focusWeekAfterDay();\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        e.stopPropagation();\n        focusWeekBeforeDay();\n        break;\n    }\n  };\n\n  const isFocused = Boolean(focusedDay && !isSameDay(focusedDay, date));\n\n  return { focus, blur, focusOnKeyDown, isFocused };\n}\n"],"names":[],"mappings":";;;;;;;AAMA;SACgB,WAAW,CACzB,IAAU,EACV,SAA6C;IAOvC,IAAA,KAUF,QAAQ,EAAE,EATZ,UAAU,QAAA,EACV,UAOC,EANC,aAAa,mBAAA,EACb,cAAc,oBAAA,EACd,iBAAiB,uBAAA,EACjB,kBAAkB,wBAAA,EAClB,IAAI,UAAA,EACJ,KAAK,WAEK,CAAC;;IAGf,KAAK,CAAC,SAAS,CAAC;;QACd,IAAI,CAAC,UAAU;YAAE,OAAO;QACxB,IAAI,SAAS,CAAC,UAAU,EAAE,IAAI,CAAC,EAAE;YAC/B,MAAA,SAAS,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SAC5B;KACF,EAAE,CAAC,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAElC,IAAM,cAAc,GAA+B,UAAC,CAAC;QACnD,QAAQ,CAAC,CAAC,GAAG;YACX,KAAK,WAAW;gBACd,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,cAAc,EAAE,CAAC;gBACjB,MAAM;YACR,KAAK,YAAY;gBACf,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,aAAa,EAAE,CAAC;gBAChB,MAAM;YACR,KAAK,WAAW;gBACd,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,iBAAiB,EAAE,CAAC;gBACpB,MAAM;YACR,KAAK,SAAS;gBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,kBAAkB,EAAE,CAAC;gBACrB,MAAM;SACT;KACF,CAAC;IAEF,IAAM,SAAS,GAAG,OAAO,CAAC,UAAU,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC;IAEtE,OAAO,EAAE,KAAK,OAAA,EAAE,IAAI,MAAA,EAAE,cAAc,gBAAA,EAAE,SAAS,WAAA,EAAE,CAAC;AACpD;;;;"}
+{"version":3,"file":"useDayFocus.js","sources":["../../../../src/components/Day/hooks/useDayFocus.ts"],"sourcesContent":["import React from 'react';\n\nimport { isSameDay } from 'date-fns';\n\nimport { useDayPicker } from '../../../contexts/DayPicker';\nimport { useFocus } from '../../../contexts/Focus';\n\n/** Handle the focus for the day element. */\nexport function useDayFocus(\n  date: Date,\n  buttonRef: React.RefObject<HTMLButtonElement>\n): {\n  focus: (date: Date) => void;\n  blur: () => void;\n  focusOnKeyDown: React.KeyboardEventHandler;\n  isFocused: boolean;\n} {\n  const [\n    focusedDay,\n    {\n      focusDayAfter,\n      focusDayBefore,\n      focusWeekAfterDay,\n      focusWeekBeforeDay,\n      blur,\n      focus,\n      focusMonthBefore,\n      focusMonthAfter,\n      focusYearBefore,\n      focusYearAfter,\n      focusStartOfWeek,\n      focusEndOfWeek\n    }\n  ] = useFocus();\n  const { dir } = useDayPicker();\n\n  // Focus the HTML element if this is the focused day.\n  React.useEffect(() => {\n    if (!focusedDay) return;\n    if (isSameDay(focusedDay, date)) {\n      buttonRef.current?.focus();\n    }\n  }, [focusedDay, date, buttonRef]);\n\n  const focusOnKeyDown: React.KeyboardEventHandler = (e) => {\n    switch (e.key) {\n      case 'ArrowLeft':\n        e.preventDefault();\n        e.stopPropagation();\n        dir === 'rtl' ? focusDayAfter() : focusDayBefore();\n        break;\n      case 'ArrowRight':\n        e.preventDefault();\n        e.stopPropagation();\n        dir === 'rtl' ? focusDayBefore() : focusDayAfter();\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        e.stopPropagation();\n        focusWeekAfterDay();\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        e.stopPropagation();\n        focusWeekBeforeDay();\n        break;\n      case 'PageUp':\n        e.preventDefault();\n        e.stopPropagation();\n        e.shiftKey ? focusYearBefore() : focusMonthBefore();\n        break;\n      case 'PageDown':\n        e.preventDefault();\n        e.stopPropagation();\n        e.shiftKey ? focusYearAfter() : focusMonthAfter();\n        break;\n      case 'Home':\n        e.preventDefault();\n        e.stopPropagation();\n        focusStartOfWeek();\n        break;\n      case 'End':\n        e.preventDefault();\n        e.stopPropagation();\n        focusEndOfWeek();\n        break;\n    }\n  };\n\n  const isFocused = Boolean(focusedDay && !isSameDay(focusedDay, date));\n\n  return { focus, blur, focusOnKeyDown, isFocused };\n}\n"],"names":[],"mappings":";;;;;;;AAOA;SACgB,WAAW,CACzB,IAAU,EACV,SAA6C;IAOvC,IAAA,KAgBF,QAAQ,EAAE,EAfZ,UAAU,QAAA,EACV,UAaC,EAZC,aAAa,mBAAA,EACb,cAAc,oBAAA,EACd,iBAAiB,uBAAA,EACjB,kBAAkB,wBAAA,EAClB,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,gBAAgB,sBAAA,EAChB,eAAe,qBAAA,EACf,eAAe,qBAAA,EACf,cAAc,oBAAA,EACd,gBAAgB,sBAAA,EAChB,cAAc,oBAEJ,CAAC;IACP,IAAA,GAAG,GAAK,YAAY,EAAE,IAAnB,CAAoB;;IAG/B,KAAK,CAAC,SAAS,CAAC;;QACd,IAAI,CAAC,UAAU;YAAE,OAAO;QACxB,IAAI,SAAS,CAAC,UAAU,EAAE,IAAI,CAAC,EAAE;YAC/B,MAAA,SAAS,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SAC5B;KACF,EAAE,CAAC,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAElC,IAAM,cAAc,GAA+B,UAAC,CAAC;QACnD,QAAQ,CAAC,CAAC,GAAG;YACX,KAAK,WAAW;gBACd,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,GAAG,KAAK,KAAK,GAAG,aAAa,EAAE,GAAG,cAAc,EAAE,CAAC;gBACnD,MAAM;YACR,KAAK,YAAY;gBACf,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,GAAG,KAAK,KAAK,GAAG,cAAc,EAAE,GAAG,aAAa,EAAE,CAAC;gBACnD,MAAM;YACR,KAAK,WAAW;gBACd,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,iBAAiB,EAAE,CAAC;gBACpB,MAAM;YACR,KAAK,SAAS;gBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,kBAAkB,EAAE,CAAC;gBACrB,MAAM;YACR,KAAK,QAAQ;gBACX,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,CAAC,CAAC,QAAQ,GAAG,eAAe,EAAE,GAAG,gBAAgB,EAAE,CAAC;gBACpD,MAAM;YACR,KAAK,UAAU;gBACb,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,CAAC,CAAC,QAAQ,GAAG,cAAc,EAAE,GAAG,eAAe,EAAE,CAAC;gBAClD,MAAM;YACR,KAAK,MAAM;gBACT,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,gBAAgB,EAAE,CAAC;gBACnB,MAAM;YACR,KAAK,KAAK;gBACR,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,cAAc,EAAE,CAAC;gBACjB,MAAM;SACT;KACF,CAAC;IAEF,IAAM,SAAS,GAAG,OAAO,CAAC,UAAU,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC;IAEtE,OAAO,EAAE,KAAK,OAAA,EAAE,IAAI,MAAA,EAAE,cAAc,gBAAA,EAAE,SAAS,WAAA,EAAE,CAAC;AACpD;;;;"}

package/build/components/DayContent/DayContent.js

@@ -1,5 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 import { useDayPicker } from '../../contexts/DayPicker/useDayPicker.js';
+import '../../contexts/DayPicker/DayPickerContext.js';
 
 /**
  * Render the content of the day cell.

package/build/components/DayContent/DayContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DayContent.js","sources":["../../../src/components/DayContent/DayContent.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useDayPicker } from '../../contexts/DayPicker';\n\nimport { ModifierStatus } from '../../types';\n\n/** Represent the props for the [[DayContent]] component. */\nexport interface DayContentProps {\n  /** The date representing the day. */\n  date: Date;\n  /** The month where the day is displayed. */\n  displayMonth: Date;\n  /** The modifier status for the date. */\n  modifiers: ModifierStatus;\n}\n\n/**\n * Render the content of the day cell.\n */\nexport function DayContent(props: DayContentProps): JSX.Element {\n  const {\n    locale,\n    classNames,\n    styles,\n    labels: { labelDay },\n    formatters: { formatDay }\n  } = useDayPicker();\n  return (\n    <>\n      <span aria-hidden=\"true\">{formatDay(props.date, { locale })}</span>\n      <span className={classNames.vhidden} style={styles.vhidden}>\n        {labelDay(props.date, props.modifiers, { locale })}\n      </span>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;AAgBA;;;SAGgB,UAAU,CAAC,KAAsB;IACzC,IAAA,KAMF,YAAY,EAAE,EALhB,MAAM,YAAA,EACN,UAAU,gBAAA,EACV,MAAM,YAAA,EACI,QAAQ,qBAAA,EACJ,SAAS,0BACP,CAAC;IACnB,QACE;QACE,6CAAkB,MAAM,IAAE,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,MAAM,QAAA,EAAE,CAAC,CAAQ;QACnE,8BAAM,SAAS,EAAE,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,OAAO,IACvD,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,EAAE,EAAE,MAAM,QAAA,EAAE,CAAC,CAC7C,CACN,EACH;AACJ;;;;"}
+{"version":3,"file":"DayContent.js","sources":["../../../src/components/DayContent/DayContent.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useDayPicker } from '../../contexts/DayPicker';\n\nimport { ModifierStatus } from '../../types';\n\n/** Represent the props for the [[DayContent]] component. */\nexport interface DayContentProps {\n  /** The date representing the day. */\n  date: Date;\n  /** The month where the day is displayed. */\n  displayMonth: Date;\n  /** The modifier status for the date. */\n  modifiers: ModifierStatus;\n}\n\n/**\n * Render the content of the day cell.\n */\nexport function DayContent(props: DayContentProps): JSX.Element {\n  const {\n    locale,\n    classNames,\n    styles,\n    labels: { labelDay },\n    formatters: { formatDay }\n  } = useDayPicker();\n\n  return (\n    <>\n      <span aria-hidden=\"true\">{formatDay(props.date, { locale })}</span>\n      <span className={classNames.vhidden} style={styles.vhidden}>\n        {labelDay(props.date, props.modifiers, { locale })}\n      </span>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;AAgBA;;;SAGgB,UAAU,CAAC,KAAsB;IACzC,IAAA,KAMF,YAAY,EAAE,EALhB,MAAM,YAAA,EACN,UAAU,gBAAA,EACV,MAAM,YAAA,EACI,QAAQ,qBAAA,EACJ,SAAS,0BACP,CAAC;IAEnB,QACE;QACE,6CAAkB,MAAM,IAAE,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,MAAM,QAAA,EAAE,CAAC,CAAQ;QACnE,8BAAM,SAAS,EAAE,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,OAAO,IACvD,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,EAAE,EAAE,MAAM,QAAA,EAAE,CAAC,CAC7C,CACN,EACH;AACJ;;;;"}

package/build/components/Dropdown/Dropdown.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 /** The props for the [[Dropdown]] component. */
 export interface DropdownProps {
     caption?: React.ReactNode;

package/build/components/Dropdown/Dropdown.js

@@ -1,5 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 import { useDayPicker } from '../../contexts/DayPicker/useDayPicker.js';
+import '../../contexts/DayPicker/DayPickerContext.js';
 
 /**
  * Render a styled select component – displaying a caption and a custom

package/build/components/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useDayPicker } from '../../contexts/DayPicker';\n\n/** The props for the [[Dropdown]] component. */\nexport interface DropdownProps {\n  caption?: React.ReactNode;\n  children?: React.SelectHTMLAttributes<HTMLSelectElement>['children'];\n  className?: string;\n  ['aria-label']?: string;\n  style?: React.CSSProperties;\n  value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n  onChange?: React.ChangeEventHandler<HTMLSelectElement>;\n}\n\n/**\n * Render a styled select component – displaying a caption and a custom\n * drop-down icon.\n */\nexport function Dropdown(props: DropdownProps): JSX.Element {\n  const { onChange, value, children, caption, className, style } = props;\n  const {\n    classNames,\n    styles,\n    components: { IconDropdown }\n  } = useDayPicker();\n  return (\n    <div className={className} style={style}>\n      <span className={classNames.vhidden}>{props['aria-label']}</span>\n      <select\n        aria-label={props['aria-label']}\n        className={classNames.dropdown}\n        style={styles.dropdown}\n        value={value}\n        onChange={onChange}\n      >\n        {children}\n      </select>\n      <div\n        className={classNames.caption_label}\n        style={styles.caption_label}\n        aria-hidden=\"true\"\n      >\n        {caption}\n        {\n          <IconDropdown\n            className={classNames.dropdown_icon}\n            style={styles.dropdown_icon}\n          />\n        }\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAeA;;;;SAIgB,QAAQ,CAAC,KAAoB;IACnC,IAAA,QAAQ,GAAiD,KAAK,SAAtD,EAAE,KAAK,GAA0C,KAAK,MAA/C,EAAE,QAAQ,GAAgC,KAAK,SAArC,EAAE,OAAO,GAAuB,KAAK,QAA5B,EAAE,SAAS,GAAY,KAAK,UAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IACjE,IAAA,KAIF,YAAY,EAAE,EAHhB,UAAU,gBAAA,EACV,MAAM,YAAA,EACQ,YAAY,6BACV,CAAC;IACnB,QACE,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK;QACrC,8BAAM,SAAS,EAAE,UAAU,CAAC,OAAO,IAAG,KAAK,CAAC,YAAY,CAAC,CAAQ;QACjE,8CACc,KAAK,CAAC,YAAY,CAAC,EAC/B,SAAS,EAAE,UAAU,CAAC,QAAQ,EAC9B,KAAK,EAAE,MAAM,CAAC,QAAQ,EACtB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,IAEjB,QAAQ,CACF;QACT,6BACE,SAAS,EAAE,UAAU,CAAC,aAAa,EACnC,KAAK,EAAE,MAAM,CAAC,aAAa,iBACf,MAAM;YAEjB,OAAO;YAEN,oBAAC,YAAY,IACX,SAAS,EAAE,UAAU,CAAC,aAAa,EACnC,KAAK,EAAE,MAAM,CAAC,aAAa,GAC3B,CAEA,CACF,EACN;AACJ;;;;"}
+{"version":3,"file":"Dropdown.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useDayPicker } from '../../contexts/DayPicker';\n\n/** The props for the [[Dropdown]] component. */\nexport interface DropdownProps {\n  caption?: React.ReactNode;\n  children?: React.SelectHTMLAttributes<HTMLSelectElement>['children'];\n  className?: string;\n  ['aria-label']?: string;\n  style?: React.CSSProperties;\n  value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n  onChange?: React.ChangeEventHandler<HTMLSelectElement>;\n}\n\n/**\n * Render a styled select component – displaying a caption and a custom\n * drop-down icon.\n */\nexport function Dropdown(props: DropdownProps): JSX.Element {\n  const { onChange, value, children, caption, className, style } = props;\n  const {\n    classNames,\n    styles,\n    components: { IconDropdown }\n  } = useDayPicker();\n  return (\n    <div className={className} style={style}>\n      <span className={classNames.vhidden}>{props['aria-label']}</span>\n      <select\n        aria-label={props['aria-label']}\n        className={classNames.dropdown}\n        style={styles.dropdown}\n        value={value}\n        onChange={onChange}\n      >\n        {children}\n      </select>\n      <div\n        className={classNames.caption_label}\n        style={styles.caption_label}\n        aria-hidden=\"true\"\n      >\n        {caption}\n        {\n          <IconDropdown\n            className={classNames.dropdown_icon}\n            style={styles.dropdown_icon}\n          />\n        }\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAeA;;;;SAIgB,QAAQ,CAAC,KAAoB;IACnC,IAAA,QAAQ,GAAiD,KAAK,SAAtD,EAAE,KAAK,GAA0C,KAAK,MAA/C,EAAE,QAAQ,GAAgC,KAAK,SAArC,EAAE,OAAO,GAAuB,KAAK,QAA5B,EAAE,SAAS,GAAY,KAAK,UAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IACjE,IAAA,KAIF,YAAY,EAAE,EAHhB,UAAU,gBAAA,EACV,MAAM,YAAA,EACQ,YAAY,6BACV,CAAC;IACnB,QACE,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK;QACrC,8BAAM,SAAS,EAAE,UAAU,CAAC,OAAO,IAAG,KAAK,CAAC,YAAY,CAAC,CAAQ;QACjE,8CACc,KAAK,CAAC,YAAY,CAAC,EAC/B,SAAS,EAAE,UAAU,CAAC,QAAQ,EAC9B,KAAK,EAAE,MAAM,CAAC,QAAQ,EACtB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,IAEjB,QAAQ,CACF;QACT,6BACE,SAAS,EAAE,UAAU,CAAC,aAAa,EACnC,KAAK,EAAE,MAAM,CAAC,aAAa,iBACf,MAAM;YAEjB,OAAO;YAEN,oBAAC,YAAY,IACX,SAAS,EAAE,UAAU,CAAC,aAAa,EACnC,KAAK,EAAE,MAAM,CAAC,aAAa,GAC3B,CAEA,CACF,EACN;AACJ;;;;"}

package/build/components/Footer/Footer.js

@@ -1,5 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 import { useDayPicker } from '../../contexts/DayPicker/useDayPicker.js';
+import '../../contexts/DayPicker/DayPickerContext.js';
 
 /** Render the Footer component (empty as default).*/
 function Footer() {

package/build/components/Footer/Footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.js","sources":["../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useDayPicker } from '../../contexts/DayPicker';\n\n/** Render the Footer component (empty as default).*/\nexport function Footer(): JSX.Element {\n  const {\n    footer,\n    styles,\n    classNames: { tfoot }\n  } = useDayPicker();\n  if (!footer) return <></>;\n  return (\n    <tfoot className={tfoot} style={styles.tfoot}>\n      <tr>\n        <td colSpan={8}>{footer}</td>\n      </tr>\n    </tfoot>\n  );\n}\n"],"names":[],"mappings":";;;AAIA;SACgB,MAAM;IACd,IAAA,KAIF,YAAY,EAAE,EAHhB,MAAM,YAAA,EACN,MAAM,YAAA,EACQ,KAAK,sBACH,CAAC;IACnB,IAAI,CAAC,MAAM;QAAE,OAAO,yCAAK,CAAC;IAC1B,QACE,+BAAO,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK;QAC1C;YACE,4BAAI,OAAO,EAAE,CAAC,IAAG,MAAM,CAAM,CAC1B,CACC,EACR;AACJ;;;;"}
+{"version":3,"file":"Footer.js","sources":["../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useDayPicker } from '../../contexts/DayPicker';\n\n/** Render the Footer component (empty as default).*/\nexport function Footer(): JSX.Element {\n  const {\n    footer,\n    styles,\n    classNames: { tfoot }\n  } = useDayPicker();\n  if (!footer) return <></>;\n  return (\n    <tfoot className={tfoot} style={styles.tfoot}>\n      <tr>\n        <td colSpan={8}>{footer}</td>\n      </tr>\n    </tfoot>\n  );\n}\n"],"names":[],"mappings":";;;;AAIA;SACgB,MAAM;IACd,IAAA,KAIF,YAAY,EAAE,EAHhB,MAAM,YAAA,EACN,MAAM,YAAA,EACQ,KAAK,sBACH,CAAC;IACnB,IAAI,CAAC,MAAM;QAAE,OAAO,yCAAK,CAAC;IAC1B,QACE,+BAAO,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK;QAC1C;YACE,4BAAI,OAAO,EAAE,CAAC,IAAG,MAAM,CAAM,CAC1B,CACC,EACR;AACJ;;;;"}

package/build/components/Head/Head.js

@@ -1,5 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 import { useDayPicker } from '../../contexts/DayPicker/useDayPicker.js';
+import '../../contexts/DayPicker/DayPickerContext.js';
 import { getWeekdays } from './utils/getWeekdays.js';
 
 /**

package/build/components/Head/Head.js.map

@@ -1 +1 @@
-{"version":3,"file":"Head.js","sources":["../../../src/components/Head/Head.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useDayPicker } from '../../contexts/DayPicker';\n\nimport { getWeekdays } from './utils';\n\n/**\n * Render the Head component - i.e. the table head with the weekday names.\n */\nexport function Head(): JSX.Element {\n  const {\n    classNames,\n    styles,\n    showWeekNumber,\n    locale,\n    formatters: { formatWeekdayName },\n    labels: { labelWeekday }\n  } = useDayPicker();\n\n  const weekdays = getWeekdays(locale);\n\n  return (\n    <thead style={styles.head} className={classNames.head}>\n      <tr style={styles.head_row} className={classNames.head_row}>\n        {showWeekNumber && (\n          <th\n            scope=\"col\"\n            style={styles.head_cell}\n            className={classNames.head_cell}\n          ></th>\n        )}\n        {weekdays.map((weekday, i) => (\n          <th\n            key={i}\n            scope=\"col\"\n            className={classNames.head_cell}\n            style={styles.head_cell}\n          >\n            <span className={classNames.vhidden} aria-label=\"\">\n              {labelWeekday(weekday, { locale })}\n            </span>\n            <span aria-hidden={true}>\n              {formatWeekdayName(weekday, { locale })}\n            </span>\n          </th>\n        ))}\n      </tr>\n    </thead>\n  );\n}\n"],"names":[],"mappings":";;;;AAMA;;;SAGgB,IAAI;IACZ,IAAA,KAOF,YAAY,EAAE,EANhB,UAAU,gBAAA,EACV,MAAM,YAAA,EACN,cAAc,oBAAA,EACd,MAAM,YAAA,EACQ,iBAAiB,kCAAA,EACrB,YAAY,yBACN,CAAC;IAEnB,IAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IAErC,QACE,+BAAO,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,SAAS,EAAE,UAAU,CAAC,IAAI;QACnD,4BAAI,KAAK,EAAE,MAAM,CAAC,QAAQ,EAAE,SAAS,EAAE,UAAU,CAAC,QAAQ;YACvD,cAAc,KACb,4BACE,KAAK,EAAC,KAAK,EACX,KAAK,EAAE,MAAM,CAAC,SAAS,EACvB,SAAS,EAAE,UAAU,CAAC,SAAS,GAC3B,CACP;YACA,QAAQ,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,CAAC,IAAK,QAC5B,4BACE,GAAG,EAAE,CAAC,EACN,KAAK,EAAC,KAAK,EACX,SAAS,EAAE,UAAU,CAAC,SAAS,EAC/B,KAAK,EAAE,MAAM,CAAC,SAAS;gBAEvB,8BAAM,SAAS,EAAE,UAAU,CAAC,OAAO,gBAAa,EAAE,IAC/C,YAAY,CAAC,OAAO,EAAE,EAAE,MAAM,QAAA,EAAE,CAAC,CAC7B;gBACP,6CAAmB,IAAI,IACpB,iBAAiB,CAAC,OAAO,EAAE,EAAE,MAAM,QAAA,EAAE,CAAC,CAClC,CACJ,IACN,CAAC,CACC,CACC,EACR;AACJ;;;;"}
+{"version":3,"file":"Head.js","sources":["../../../src/components/Head/Head.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useDayPicker } from '../../contexts/DayPicker';\n\nimport { getWeekdays } from './utils';\n\n/**\n * Render the Head component - i.e. the table head with the weekday names.\n */\nexport function Head(): JSX.Element {\n  const {\n    classNames,\n    styles,\n    showWeekNumber,\n    locale,\n    formatters: { formatWeekdayName },\n    labels: { labelWeekday }\n  } = useDayPicker();\n\n  const weekdays = getWeekdays(locale);\n\n  return (\n    <thead style={styles.head} className={classNames.head}>\n      <tr style={styles.head_row} className={classNames.head_row}>\n        {showWeekNumber && (\n          <th\n            scope=\"col\"\n            style={styles.head_cell}\n            className={classNames.head_cell}\n          ></th>\n        )}\n        {weekdays.map((weekday, i) => (\n          <th\n            key={i}\n            scope=\"col\"\n            className={classNames.head_cell}\n            style={styles.head_cell}\n          >\n            <span className={classNames.vhidden} aria-label=\"\">\n              {labelWeekday(weekday, { locale })}\n            </span>\n            <span aria-hidden={true}>\n              {formatWeekdayName(weekday, { locale })}\n            </span>\n          </th>\n        ))}\n      </tr>\n    </thead>\n  );\n}\n"],"names":[],"mappings":";;;;;AAMA;;;SAGgB,IAAI;IACZ,IAAA,KAOF,YAAY,EAAE,EANhB,UAAU,gBAAA,EACV,MAAM,YAAA,EACN,cAAc,oBAAA,EACd,MAAM,YAAA,EACQ,iBAAiB,kCAAA,EACrB,YAAY,yBACN,CAAC;IAEnB,IAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IAErC,QACE,+BAAO,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,SAAS,EAAE,UAAU,CAAC,IAAI;QACnD,4BAAI,KAAK,EAAE,MAAM,CAAC,QAAQ,EAAE,SAAS,EAAE,UAAU,CAAC,QAAQ;YACvD,cAAc,KACb,4BACE,KAAK,EAAC,KAAK,EACX,KAAK,EAAE,MAAM,CAAC,SAAS,EACvB,SAAS,EAAE,UAAU,CAAC,SAAS,GAC3B,CACP;YACA,QAAQ,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,CAAC,IAAK,QAC5B,4BACE,GAAG,EAAE,CAAC,EACN,KAAK,EAAC,KAAK,EACX,SAAS,EAAE,UAAU,CAAC,SAAS,EAC/B,KAAK,EAAE,MAAM,CAAC,SAAS;gBAEvB,8BAAM,SAAS,EAAE,UAAU,CAAC,OAAO,gBAAa,EAAE,IAC/C,YAAY,CAAC,OAAO,EAAE,EAAE,MAAM,QAAA,EAAE,CAAC,CAC7B;gBACP,6CAAmB,IAAI,IACpB,iBAAiB,CAAC,OAAO,EAAE,EAAE,MAAM,QAAA,EAAE,CAAC,CAClC,CACJ,IACN,CAAC,CACC,CACC,EACR;AACJ;;;;"}