react-day-picker 8.0.0-beta.32 → 8.0.0-beta.33

package/CHANGELOG.md

@@ -16,11 +16,20 @@ with the previous versions.
 
 See the preview website at https://react-day-picker-next.netlify.app.
 
+---
+
+### 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
 
-- Fixed previous/next month navigation with RTL direction (68ad0adf7fb6935eb6d9809a6e72646e6194d51e)
-- Updated `useInput` API (#1293)
-- Removed `defaultSelected` prop (cd4f57906d98eb15b0b5a498112e74c2f6770c45)
+- fix: previous/next month navigation with RTL direction (68ad0adf)
+- chore: updated `useInput` API (#1293)
+- chore: removed `defaultSelected` prop (cd4f5790)
 
 ### v8.0.0-beta.31
 

package/build/DayPicker.d.ts

@@ -36,6 +36,7 @@ import { DayPickerCustomProps, DayPickerMultipleProps, DayPickerProps, DayPicker
  *   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 { DayPickerCustomProps, DayPickerMultipleProps, DayPickerProps, DayPicker
  *
  * ### 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.

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 {\n  DayPickerCustomProps,\n  DayPickerMultipleProps,\n  DayPickerProps,\n  DayPickerRangeProps,\n  DayPickerSingleProps\n} 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(\n  props:\n    | DayPickerProps\n    | DayPickerSingleProps\n    | DayPickerMultipleProps\n    | DayPickerRangeProps\n    | DayPickerCustomProps\n): JSX.Element {\n  return (\n    <ContextProvider {...props}>\n      <Root />\n    </ContextProvider>\n  );\n}\n"],"names":[],"mappings":";;;;;AAaA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAqFgB,SAAS,CACvB,KAKwB;IAExB,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,5 +1,5 @@
 import { __assign } from '../../_virtual/_tslib.js';
-import * as React from 'react';
+import React from 'react';
 import { useDayPicker } from '../../contexts/DayPicker/useDayPicker.js';
 
 /**

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,4 +1,4 @@
-import React__default from 'react';
+import React from 'react';
 import { isSameMonth } from 'date-fns';
 import { useDayPicker } from '../../contexts/DayPicker/useDayPicker.js';
 import '../../contexts/Navigation/NavigationContext.js';
@@ -41,16 +41,16 @@ function Caption(props) {
     if (dir === 'rtl') {
         _a = [isFirst, isLast], isLast = _a[0], isFirst = _a[1];
     }
-    var captionLabel = React__default.createElement(CaptionLabel, { displayMonth: displayMonth });
+    var captionLabel = React.createElement(CaptionLabel, { displayMonth: displayMonth });
     var hideNext = numberOfMonths > 1 && (isFirst || !isLast);
     var hidePrevious = numberOfMonths > 1 && (isLast || !isFirst);
-    return (React__default.createElement("div", { className: classNames.caption, style: styles.caption },
+    return (React.createElement("div", { className: classNames.caption, style: styles.caption },
         disableNavigation && captionLabel,
-        !disableNavigation && (React__default.createElement(React__default.Fragment, null, captionLayout === 'dropdown' ? (React__default.createElement("div", { className: classNames.caption_dropdowns, style: styles.caption_dropdowns },
-            React__default.createElement(MonthsDropdown, { onChange: handleMonthChange, displayMonth: displayMonth }),
-            React__default.createElement(YearsDropdown, { onChange: handleMonthChange, displayMonth: displayMonth }))) : (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(CaptionLabel, { displayMonth: displayMonth }),
-            React__default.createElement(Navigation, { displayMonth: displayMonth, hideNext: hideNext, hidePrevious: hidePrevious, nextMonth: nextMonth, previousMonth: previousMonth, onPreviousClick: handlePreviousClick, onNextClick: handleNextClick })))))));
+        !disableNavigation && (React.createElement(React.Fragment, null, captionLayout === 'dropdown' ? (React.createElement("div", { className: classNames.caption_dropdowns, style: styles.caption_dropdowns },
+            React.createElement(MonthsDropdown, { onChange: handleMonthChange, displayMonth: displayMonth }),
+            React.createElement(YearsDropdown, { onChange: handleMonthChange, displayMonth: displayMonth }))) : (React.createElement(React.Fragment, null,
+            React.createElement(CaptionLabel, { displayMonth: displayMonth }),
+            React.createElement(Navigation, { displayMonth: displayMonth, hideNext: hideNext, hidePrevious: hidePrevious, nextMonth: nextMonth, previousMonth: previousMonth, onPreviousClick: handlePreviousClick, onNextClick: handleNextClick })))))));
 }
 
 export { Caption };

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

@@ -1 +1 @@
-{"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 { MonthChangeEventHandler } from '../../types';\nimport { MonthsDropdown } from '../MonthsDropdown';\nimport { Navigation } from '../Navigation';\nimport { YearsDropdown } from '../YearsDropdown';\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":["React"],"mappings":"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"}
+{"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 = (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":";;;;;;;;;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,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;;;;"}

package/build/components/CaptionLabel/CaptionLabel.js

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

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,5 +1,5 @@
 import React from 'react';
-import { DateRange, ModifierStatus, StyledComponentProps } from '../../../types';
+import { DateRange, ModifierStatus, StyledComponent } from '../../../types';
 import { SelectMultipleContextValue } from '../../../contexts/SelectMultiple';
 import { SelectRangeContextValue } from '../../../contexts/SelectRange';
 import { SelectSingleContextValue } from '../../../contexts/SelectSingle';
@@ -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,9 +1,9 @@
 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/SelectMultiple/SelectMultipleContext.js';
 import { useSelectMultiple } from '../../../contexts/SelectMultiple/useSelectMultiple.js';
@@ -78,7 +78,7 @@ 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 && !context.onDayClick) {
         return __assign(__assign({}, returnValue), { nonInteractiveProps: {

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 && !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.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 {\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?: 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.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":[],"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,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { isSameDay } from 'date-fns';
 import 'date-fns/locale/en-US';
 import { useDayPicker } from '../../../contexts/DayPicker/useDayPicker.js';

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 { useDayPicker } from '../../../contexts';\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  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    }\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,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;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;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';\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  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    }\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,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;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;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,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { useDayPicker } from '../../contexts/DayPicker/useDayPicker.js';
 
 /**

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,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { useDayPicker } from '../../contexts/DayPicker/useDayPicker.js';
 
 /**

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,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { useDayPicker } from '../../contexts/DayPicker/useDayPicker.js';
 
 /** Render the Footer component (empty as default).*/

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,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { useDayPicker } from '../../contexts/DayPicker/useDayPicker.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;;;;"}

package/build/components/IconDropdown/IconDropdown.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { StyledComponentProps } from '../../types';
+import { StyledComponent } from '../../types';
 /**
  * Render the icon in the styled drop-down.
  */
-export declare function IconDropdown(props: StyledComponentProps): JSX.Element;
+export declare function IconDropdown(props: StyledComponent): JSX.Element;

package/build/components/IconDropdown/IconDropdown.js

@@ -1,5 +1,5 @@
 import { __assign } from '../../_virtual/_tslib.js';
-import * as React from 'react';
+import React from 'react';
 
 /**
  * Render the icon in the styled drop-down.

package/build/components/IconDropdown/IconDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconDropdown.js","sources":["../../../src/components/IconDropdown/IconDropdown.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { StyledComponentProps } from '../../types';\n\n/**\n * Render the icon in the styled drop-down.\n */\nexport function IconDropdown(props: StyledComponentProps): JSX.Element {\n  return (\n    <svg\n      width=\"8px\"\n      height=\"8px\"\n      viewBox=\"0 0 120 120\"\n      data-testid=\"iconDropdown\"\n      {...props}\n    >\n      <path\n        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\"\n        fill=\"currentColor\"\n        fillRule=\"nonzero\"\n      ></path>\n    </svg>\n  );\n}\n"],"names":[],"mappings":";;;AAIA;;;SAGgB,YAAY,CAAC,KAA2B;IACtD,QACE,sCACE,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,OAAO,EAAC,aAAa,iBACT,cAAc,IACtB,KAAK;QAET,8BACE,CAAC,EAAC,yhBAAyhB,EAC3hB,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAC,SAAS,GACZ,CACJ,EACN;AACJ;;;;"}
+{"version":3,"file":"IconDropdown.js","sources":["../../../src/components/IconDropdown/IconDropdown.tsx"],"sourcesContent":["import React from 'react';\n\nimport { StyledComponent } from '../../types';\n\n/**\n * Render the icon in the styled drop-down.\n */\nexport function IconDropdown(props: StyledComponent): JSX.Element {\n  return (\n    <svg\n      width=\"8px\"\n      height=\"8px\"\n      viewBox=\"0 0 120 120\"\n      data-testid=\"iconDropdown\"\n      {...props}\n    >\n      <path\n        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\"\n        fill=\"currentColor\"\n        fillRule=\"nonzero\"\n      ></path>\n    </svg>\n  );\n}\n"],"names":[],"mappings":";;;AAIA;;;SAGgB,YAAY,CAAC,KAAsB;IACjD,QACE,sCACE,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,OAAO,EAAC,aAAa,iBACT,cAAc,IACtB,KAAK;QAET,8BACE,CAAC,EAAC,yhBAAyhB,EAC3hB,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAC,SAAS,GACZ,CACJ,EACN;AACJ;;;;"}

package/build/components/IconLeft/IconLeft.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { StyledComponentProps } from '../../types';
+import { StyledComponent } from '../../types';
 /**
  * Render the "previous month" button in the navigation.
  */
-export declare function IconLeft(props: StyledComponentProps): JSX.Element;
+export declare function IconLeft(props: StyledComponent): JSX.Element;

package/build/components/IconLeft/IconLeft.js

@@ -1,12 +1,12 @@
 import { __assign } from '../../_virtual/_tslib.js';
-import React__default from 'react';
+import React from 'react';
 
 /**
  * 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", "data-testid": "iconLeft" }, 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" })));
+    return (React.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120", "data-testid": "iconLeft" }, props),
+        React.createElement("path", { d: "M69.490332,3.34314575 C72.6145263,0.218951416 77.6798462,0.218951416 80.8040405,3.34314575 C83.8617626,6.40086786 83.9268205,11.3179931 80.9992143,14.4548388 L80.8040405,14.6568542 L35.461,60 L80.8040405,105.343146 C83.8617626,108.400868 83.9268205,113.317993 80.9992143,116.454839 L80.8040405,116.656854 C77.7463184,119.714576 72.8291931,119.779634 69.6923475,116.852028 L69.490332,116.656854 L18.490332,65.6568542 C15.4326099,62.5991321 15.367552,57.6820069 18.2951583,54.5451612 L18.490332,54.3431458 L69.490332,3.34314575 Z", fill: "currentColor", fillRule: "nonzero" })));
 }
 
 export { IconLeft };

package/build/components/IconLeft/IconLeft.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconLeft.js","sources":["../../../src/components/IconLeft/IconLeft.tsx"],"sourcesContent":["import React from 'react';\n\nimport { StyledComponentProps } from '../../types';\n\n/**\n * Render the \"previous month\" button in the navigation.\n */\nexport function IconLeft(props: StyledComponentProps): JSX.Element {\n  return (\n    <svg\n      width=\"16px\"\n      height=\"16px\"\n      viewBox=\"0 0 120 120\"\n      data-testid=\"iconLeft\"\n      {...props}\n    >\n      <path\n        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\"\n        fill=\"currentColor\"\n        fillRule=\"nonzero\"\n      ></path>\n    </svg>\n  );\n}\n"],"names":["React"],"mappings":";;;AAIA;;;SAGgB,QAAQ,CAAC,KAA2B;IAClD,QACEA,+CACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,aAAa,iBACT,UAAU,IAClB,KAAK;QAETA,uCACE,CAAC,EAAC,ihBAAihB,EACnhB,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAC,SAAS,GACZ,CACJ,EACN;AACJ;;;;"}
+{"version":3,"file":"IconLeft.js","sources":["../../../src/components/IconLeft/IconLeft.tsx"],"sourcesContent":["import React from 'react';\n\nimport { StyledComponent } from '../../types';\n\n/**\n * Render the \"previous month\" button in the navigation.\n */\nexport function IconLeft(props: StyledComponent): JSX.Element {\n  return (\n    <svg\n      width=\"16px\"\n      height=\"16px\"\n      viewBox=\"0 0 120 120\"\n      data-testid=\"iconLeft\"\n      {...props}\n    >\n      <path\n        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\"\n        fill=\"currentColor\"\n        fillRule=\"nonzero\"\n      ></path>\n    </svg>\n  );\n}\n"],"names":[],"mappings":";;;AAIA;;;SAGgB,QAAQ,CAAC,KAAsB;IAC7C,QACE,sCACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,aAAa,iBACT,UAAU,IAClB,KAAK;QAET,8BACE,CAAC,EAAC,ihBAAihB,EACnhB,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAC,SAAS,GACZ,CACJ,EACN;AACJ;;;;"}

package/build/components/IconRight/IconRight.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { StyledComponentProps } from '../../types';
+import { StyledComponent } from '../../types';
 /**
  * Render the "next month" button in the navigation.
  */
-export declare function IconRight(props: StyledComponentProps): JSX.Element;
+export declare function IconRight(props: StyledComponent): JSX.Element;

package/build/components/IconRight/IconRight.js

@@ -1,12 +1,12 @@
 import { __assign } from '../../_virtual/_tslib.js';
-import React__default from 'react';
+import React from 'react';
 
 /**
  * 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, { "data-testid": "iconRight" }),
-        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 (React.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props, { "data-testid": "iconRight" }),
+        React.createElement("path", { d: "M49.8040405,3.34314575 C46.6798462,0.218951416 41.6145263,0.218951416 38.490332,3.34314575 C35.4326099,6.40086786 35.367552,11.3179931 38.2951583,14.4548388 L38.490332,14.6568542 L83.8333725,60 L38.490332,105.343146 C35.4326099,108.400868 35.367552,113.317993 38.2951583,116.454839 L38.490332,116.656854 C41.5480541,119.714576 46.4651794,119.779634 49.602025,116.852028 L49.8040405,116.656854 L100.804041,65.6568542 C103.861763,62.5991321 103.926821,57.6820069 100.999214,54.5451612 L100.804041,54.3431458 L49.8040405,3.34314575 Z", fill: "currentColor" })));
 }
 
 export { IconRight };

package/build/components/IconRight/IconRight.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconRight.js","sources":["../../../src/components/IconRight/IconRight.tsx"],"sourcesContent":["import React from 'react';\n\nimport { StyledComponentProps } from '../../types';\n\n/**\n * Render the \"next month\" button in the navigation.\n */\nexport function IconRight(props: StyledComponentProps): JSX.Element {\n  return (\n    <svg\n      width=\"16px\"\n      height=\"16px\"\n      viewBox=\"0 0 120 120\"\n      {...props}\n      data-testid=\"iconRight\"\n    >\n      <path\n        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\"\n        fill=\"currentColor\"\n      ></path>\n    </svg>\n  );\n}\n"],"names":["React"],"mappings":";;;AAIA;;;SAGgB,SAAS,CAAC,KAA2B;IACnD,QACEA,+CACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,aAAa,IACjB,KAAK,mBACG,WAAW;QAEvBA,uCACE,CAAC,EAAC,ohBAAohB,EACthB,IAAI,EAAC,cAAc,GACb,CACJ,EACN;AACJ;;;;"}
+{"version":3,"file":"IconRight.js","sources":["../../../src/components/IconRight/IconRight.tsx"],"sourcesContent":["import React from 'react';\n\nimport { StyledComponent } from '../../types';\n\n/**\n * Render the \"next month\" button in the navigation.\n */\nexport function IconRight(props: StyledComponent): JSX.Element {\n  return (\n    <svg\n      width=\"16px\"\n      height=\"16px\"\n      viewBox=\"0 0 120 120\"\n      {...props}\n      data-testid=\"iconRight\"\n    >\n      <path\n        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\"\n        fill=\"currentColor\"\n      ></path>\n    </svg>\n  );\n}\n"],"names":[],"mappings":";;;AAIA;;;SAGgB,SAAS,CAAC,KAAsB;IAC9C,QACE,sCACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,aAAa,IACjB,KAAK,mBACG,WAAW;QAEvB,8BACE,CAAC,EAAC,ohBAAohB,EACthB,IAAI,EAAC,cAAc,GACb,CACJ,EACN;AACJ;;;;"}

package/build/components/MonthsDropdown/MonthsDropdown.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { MonthChangeEventHandler } from '../../types';
+import { MonthChangeEventHandler } from '../../types/EventHandlers';
 /** The props for the [[MonthsDropdown]] component. */
 export interface MonthsDropdownProps {
     /** The month where the dropdown is displayed. */

package/build/components/MonthsDropdown/MonthsDropdown.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { isSameYear, setMonth, startOfMonth } from 'date-fns';
 import { useDayPicker } from '../../contexts/DayPicker/useDayPicker.js';