Repository: gpbl/react-day-picker
Pull request #2555 (2024-10-23 00:23:17)

build(style): support importing styles in Sass

# Pull Request Template

Thanks for your PR! Make sure you have read the [CONTRIBUTING](./CONTRIBUTING.md) guide.

## What's Changed

Allows consumers to import base CSS using SASS. This gives consumers more flexibility to manipulate the base CSS. For example, forcing the styles under a CSS layer

```scss
@layer third-party-libs {
  @import 'pkg:react-day-picker/styles.module';
}
```

OR, forcing the styles to be scoped under a selector

```scss
.my-daypicker {
  @import 'pkg:react-day-picker/styles.module';
}
```

## Type of Change

- [ ] Bug fix
- [x] New feature
- [ ] Breaking change
- [ ] Documentation update

## Tips for a good PR

- If you are changing code, please add tests to cover the changes.
- Some screenshots or screen recording could help to understand the changes.
- If it is a bug, please provide the code to reproduce it.

Thanks

## Additional Notes

Add any extra comments or questions here.



Patch:
diff --git a/examples/Formatters.tsx b/examples/Formatters.tsx
index 6e8260578..2eedaa9b3 100644
--- a/examples/Formatters.tsx
+++ b/examples/Formatters.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 import { format } from "date-fns";
-import { DayPicker, FormatOptions } from "react-day-picker";
+import { DayPicker, type DateLibOptions } from "react-day-picker";
 
 const seasonEmoji: Record<string, string> = {
   winter: "⛄️",
@@ -18,7 +18,7 @@ const getSeason = (month: Date): string => {
   else return "autumn";
 };
 
-const formatCaption = (month: Date, options: FormatOptions | undefined) => {
+const formatCaption = (month: Date, options: DateLibOptions | undefined) => {
   const season = getSeason(month);
   return `${seasonEmoji[season]} ${format(month, "LLLL", { locale: options?.locale })}`;
 };
diff --git a/examples/NumberingSystem.tsx b/examples/NumberingSystem.tsx
index 109ab5758..b6e8755dc 100644
--- a/examples/NumberingSystem.tsx
+++ b/examples/NumberingSystem.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import { format } from "date-fns";
 import { arSA } from "date-fns/locale";
-import { DayPicker, FormatOptions } from "react-day-picker";
+import { DayPicker, type DateLibOptions } from "react-day-picker";
 
 const NU_LOCALE = "ar-u-nu-arab";
 
@@ -12,7 +12,10 @@ const formatWeekNumber = (weekNumber: number) => {
   return weekNumber.toLocaleString(NU_LOCALE);
 };
 
-const formatMonthCaption = (date: Date, options: FormatOptions | undefined) => {
+const formatMonthCaption = (
+  date: Date,
+  options: DateLibOptions | undefined
+) => {
   const y = date.getFullYear().toLocaleString(NU_LOCALE);
   const m = format(date, "LLLL", { locale: options?.locale });
   return `${m} ${y}`;
diff --git a/examples/Range.tsx b/examples/Range.tsx
index d56ef1525..06ded5619 100644
--- a/examples/Range.tsx
+++ b/examples/Range.tsx
@@ -22,13 +22,18 @@ export function Range() {
   }
 
   return (
-    <DayPicker
-      id="test"
-      mode="range"
-      defaultMonth={defaultMonth}
-      selected={range}
-      footer={footer}
-      onSelect={setRange}
-    />
+    <div>
+      <DayPicker
+        id="test"
+        mode="range"
+        defaultMonth={defaultMonth}
+        selected={range}
+        footer={footer}
+        onSelect={setRange}
+      />
+      <button type="button" onClick={() => setRange(undefined)}>
+        Reset
+      </button>
+    </div>
   );
 }
diff --git a/examples/index.ts b/examples/index.ts
index fe93dcbce..702b5d010 100644
--- a/examples/index.ts
+++ b/examples/index.ts
@@ -66,6 +66,7 @@ export * from "./TailwindCSS";
 export * from "./Testcase1567";
 export * from "./TestCase2047";
 export * from "./TestCase2389";
+export * from "./TestCase2511";
 export * from "./TimeZone";
 export * from "./Utc";
 export * from "./WeekIso";
diff --git a/package.json b/package.json
index 19dbbfce1..b7cd35fa7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-day-picker",
-  "version": "9.1.4",
+  "version": "9.2.0",
   "description": "Customizable Date Picker for React",
   "author": "Giampaolo Bellavite <io@gpbl.dev>",
   "homepage": "https://daypicker.dev",
@@ -52,6 +52,9 @@
         "default": "./dist/cjs/locale.js"
       }
     },
+    "./style": {
+      "sass": "./src/style.css"
+    },
     "./style.css": {
       "style": {
         "default": "./src/style.css"
@@ -65,6 +68,9 @@
         "default": "./src/style.css"
       }
     },
+    "./style.module": {
+      "sass": "./src/style.module.css"
+    },
     "./style.module.css": {
       "style": {
         "default": "./src/style.module.css"
diff --git a/src/DayPicker.tsx b/src/DayPicker.tsx
index 8a176bb14..cbc278166 100644
--- a/src/DayPicker.tsx
+++ b/src/DayPicker.tsx
@@ -8,10 +8,10 @@ import type {
 
 import { UI, DayFlag, SelectionState } from "./UI.js";
 import type { CalendarDay } from "./classes/CalendarDay.js";
+import { DateLib, defaultLocale } from "./classes/DateLib.js";
 import { getClassNamesForModifiers } from "./helpers/getClassNamesForModifiers.js";
 import { getComponents } from "./helpers/getComponents.js";
 import { getDataAttributes } from "./helpers/getDataAttributes.js";
-import { getDateLib } from "./helpers/getDateLib.js";
 import { getDefaultClassNames } from "./helpers/getDefaultClassNames.js";
 import { getFormatters } from "./helpers/getFormatters.js";
 import { getMonthOptions } from "./helpers/getMonthOptions.js";
@@ -19,8 +19,6 @@ import { getStyleForModifiers } from "./helpers/getStyleForModifiers.js";
 import { getWeekdays } from "./helpers/getWeekdays.js";
 import { getYearOptions } from "./helpers/getYearOptions.js";
 import * as defaultLabels from "./labels/index.js";
-import type { FormatOptions, LabelOptions } from "./lib/dateLib.js";
-import { enUS } from "./lib/locales.js";
 import type {
   DayPickerProps,
   Modifiers,
@@ -45,28 +43,43 @@ import { isDateRange } from "./utils/typeguards.js";
  */
 export function DayPicker(props: DayPickerProps) {
   const { components, formatters, labels, dateLib, locale, classNames } =
-    useMemo(
-      () => ({
-        dateLib: getDateLib(props.dateLib),
+    useMemo(() => {
+      const locale = { ...defaultLocale, ...props.locale };
+
+      const dateLib = new DateLib(
+        {
+          locale,
+          weekStartsOn: props.weekStartsOn,
+          firstWeekContainsDate: props.firstWeekContainsDate,
+          useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
+          useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens
+        },
+        props.dateLib
+      );
+
+      return {
+        dateLib,
         components: getComponents(props.components),
         formatters: getFormatters(props.formatters),
         labels: { ...defaultLabels, ...props.labels },
-        locale: { ...enUS, ...props.locale },
+        locale,
         classNames: { ...getDefaultClassNames(), ...props.classNames }
-      }),
-      [
-        props.classNames,
-        props.components,
-        props.dateLib,
-        props.formatters,
-        props.labels,
-        props.locale
-      ]
-    );
+      };
+    }, [
+      props.classNames,
+      props.components,
+      props.dateLib,
+      props.firstWeekContainsDate,
+      props.formatters,
+      props.labels,
+      props.locale,
+      props.useAdditionalDayOfYearTokens,
+      props.useAdditionalWeekYearTokens,
+      props.weekStartsOn
+    ]);
 
   const {
     captionLayout,
-    firstWeekContainsDate,
     mode,
     onDayBlur,
     onDayClick,
@@ -77,22 +90,9 @@ export function DayPicker(props: DayPickerProps) {
     onNextClick,
     onPrevClick,
     showWeekNumber,
-    styles,
-    useAdditionalDayOfYearTokens,
-    useAdditionalWeekYearTokens,
-    weekStartsOn
+    styles
   } = props;
 
-  const formatOptions: FormatOptions = {
-    locale,
-    weekStartsOn,
-    firstWeekContainsDate,
-    useAdditionalWeekYearTokens,
-    useAdditionalDayOfYearTokens
-  };
-
-  const labelOptions: LabelOptions = formatOptions;
-
   const {
     formatCaption,
     formatDay,
@@ -144,15 +144,8 @@ export function DayPicker(props: DayPickerProps) {
   } = labels;
 
   const weekdays = useMemo(
-    () =>
-      getWeekdays(
-        locale,
-        props.weekStartsOn,
-        props.ISOWeek,
-        props.timeZone,
-        dateLib
-      ),
-    [dateLib, locale, props.ISOWeek, props.timeZone, props.weekStartsOn]
+    () => getWeekdays(dateLib, props.ISOWeek, props.timeZone),
+    [dateLib, props.ISOWeek, props.timeZone]
   );
 
   const isInteractive = mode !== undefined || onDayClick !== undefined;
@@ -317,7 +310,6 @@ export function DayPicker(props: DayPickerProps) {
               navStart,
               navEnd,
               formatters,
-              locale,
               dateLib
             );
 
@@ -373,7 +365,7 @@ export function DayPicker(props: DayPickerProps) {
                       captionLayout === "dropdown-years" ? (
                         <components.YearsDropdown
                           className={classNames[UI.YearsDropdown]}
-                          aria-label={labelYearDropdown(labelOptions)}
+                          aria-label={labelYearDropdown(dateLib.options)}
                           classNames={classNames}
                           components={components}
                           disabled={Boolean(props.disableNavigation)}
@@ -396,7 +388,7 @@ export function DayPicker(props: DayPickerProps) {
                     >
                       {formatCaption(
                         calendarMonth.date,
-                        formatOptions,
+                        dateLib.options,
                         dateLib
                       )}
                     </components.CaptionLabel>
@@ -406,7 +398,7 @@ export function DayPicker(props: DayPickerProps) {
                   role="grid"
                   aria-multiselectable={mode === "multiple" || mode === "range"}
                   aria-label={
-                    labelGrid(calendarMonth.date, labelOptions, dateLib) ||
+                    labelGrid(calendarMonth.date, dateLib.options, dateLib) ||
                     undefined
                   }
                   className={classNames[UI.MonthGrid]}
@@ -419,7 +411,7 @@ export function DayPicker(props: DayPickerProps) {
                     >
                       {showWeekNumber && (
                         <components.WeekNumberHeader
-                          aria-label={labelWeekNumberHeader(labelOptions)}
+                          aria-label={labelWeekNumberHeader(dateLib.options)}
                           className={classNames[UI.WeekNumberHeader]}
                           style={styles?.[UI.WeekNumberHeader]}
                           scope="col"
@@ -431,7 +423,7 @@ export function DayPicker(props: DayPickerProps) {
                         <components.Weekday
                           aria-label={labelWeekday(
                             weekday,
-                            labelOptions,
+                            dateLib.options,
                             dateLib
                           )}
                           className={classNames[UI.Weekday]}
@@ -439,7 +431,7 @@ export function DayPicker(props: DayPickerProps) {
                           style={styles?.[UI.Weekday]}
                           scope="col"
                         >
-                          {formatWeekdayName(weekday, formatOptions, dateLib)}
+                          {formatWeekdayName(weekday, dateLib.options, dateLib)}
                         </components.Weekday>
                       ))}
                     </components.Weekdays>
@@ -515,7 +507,7 @@ export function DayPicker(props: DayPickerProps) {
                               ? labelGridcell(
                                   date,
                                   modifiers,
-                                  labelOptions,
+                                  dateLib.options,
                                   dateLib
                                 )
                               : undefined;
@@ -555,7 +547,7 @@ export function DayPicker(props: DayPickerProps) {
                                     aria-label={labelDayButton(
                                       date,
                                       modifiers,
-                                      labelOptions,
+                                      dateLib.options,
                                       dateLib
                                     )}
                                     onClick={handleDayClick(day, modifiers)}
@@ -571,10 +563,10 @@ export function DayPicker(props: DayPickerProps) {
                                       modifiers
                                     )}
                                   >
-                                    {formatDay(date, formatOptions, dateLib)}
+                                    {formatDay(date, dateLib.options, dateLib)}
                                   </components.DayButton>
                                 ) : (
-                                  formatDay(day.date, formatOptions, dateLib)
+                                  formatDay(day.date, dateLib.options, dateLib)
                                 )}
                               </components.Day>
                             );
diff --git a/src/classes/CalendarDay.ts b/src/classes/CalendarDay.ts
index 86eb54359..51b4cba4e 100644
--- a/src/classes/CalendarDay.ts
+++ b/src/classes/CalendarDay.ts
@@ -1,5 +1,4 @@
-import type { DateLib } from "../lib/index.js";
-import { dateLib as defaultDateLib } from "../lib/index.js";
+import { type DateLib, defaultDateLib } from "./DateLib.js";
 
 /**
  * Represent the day displayed in the calendar.
@@ -12,7 +11,6 @@ export class CalendarDay {
   constructor(
     date: Date,
     displayMonth: Date,
-    /** @ignore */
     dateLib: DateLib = defaultDateLib
   ) {
     this.date = date;
diff --git a/src/classes/DateLib.ts b/src/classes/DateLib.ts
new file mode 100644
index 000000000..2c2eb52e1
--- /dev/null
+++ b/src/classes/DateLib.ts
@@ -0,0 +1,478 @@
+import {
+  DateArg,
+  EndOfWeekOptions,
+  FormatOptions as DateFnsFormatOptions,
+  StartOfWeekOptions,
+  addDays,
+  addMonths,
+  addWeeks,
+  addYears,
+  differenceInCalendarDays,
+  differenceInCalendarMonths,
+  endOfISOWeek,
+  endOfMonth,
+  endOfWeek,
+  endOfYear,
+  format,
+  getISOWeek,
+  getWeek,
+  isAfter,
+  isBefore,
+  isDate,
+  isSameDay,
+  isSameMonth,
+  isSameYear,
+  max,
+  min,
+  setMonth,
+  setYear,
+  startOfDay,
+  startOfISOWeek,
+  startOfMonth,
+  startOfWeek,
+  startOfYear
+} from "date-fns";
+import type { Locale } from "date-fns/locale";
+import { enUS } from "date-fns/locale";
+
+export type { Locale } from "date-fns/locale";
+export type { Month as DateFnsMonth } from "date-fns";
+
+/** @deprecated Use {@link DateLibOptions} instead. */
+export type FormatOptions = DateLibOptions;
+/** @deprecated Use {@link DateLibOptions} instead. */
+export type LabelOptions = DateLibOptions;
+
+/**
+ * The options for the `DateLib` class.
+ *
+ * Extends `date-fns` [format](https://date-fns.org/docs/format),
+ * [startOfWeek](https://date-fns.org/docs/startOfWeek) and
+ * [endOfWeek](https://date-fns.org/docs/endOfWeek) options.
+ *
+ * @since 9.2.0
+ */
+export interface DateLibOptions
+  extends DateFnsFormatOptions,
+    StartOfWeekOptions,
+    EndOfWeekOptions {
+  /** A constructor for the `Date` object. */
+  Date?: typeof Date;
+  /** A locale to use for formatting dates. */
+  locale?: Locale;
+}
+
+/**
+ * A wrapper class around [date-fns](http://date-fns.org) sharing the same
+ * options. Methods of this class can be overridden using the
+ * {@link PropsBase.dateLib} prop.
+ *
+ * @since 9.2.0
+ * @example
+ *   const dateLib = new DateLib({ locale: es });
+ *   const newDate = dateLib.addDays(new Date(), 5);
+ */
+export class DateLib {
+  /** The options for the date library. */
+  readonly options: DateLibOptions;
+
+  /** Overrides for the date library functions. */
+  readonly overrides?: Partial<typeof DateLib.prototype>;
+
+  /**
+   * Creates an instance of DateLib.
+   *
+   * @param options The options for the date library.
+   * @param overrides Overrides for the date library functions.
+   */
+  constructor(
+    options?: DateLibOptions,
+    overrides?: Partial<typeof DateLib.prototype>
+  ) {
+    this.options = { locale: enUS, ...options };
+    this.overrides = overrides;
+  }
+
+  /** Reference to the built-in Date constructor. */
+  Date: typeof Date = Date;
+
+  /**
+   * Adds the specified number of days to the given date.
+   *
+   * @param date The date to add days to.
+   * @param amount The number of days to add.
+   * @returns The new date with the days added.
+   */
+  addDays: typeof addDays = (date, amount) => {
+    return this.overrides?.addDays
+      ? this.overrides.addDays(date, amount)
+      : addDays(date, amount);
+  };
+
+  /**
+   * Adds the specified number of months to the given date.
+   *
+   * @param date The date to add months to.
+   * @param amount The number of months to add.
+   * @returns The new date with the months added.
+   */
+  addMonths: typeof addMonths = (date, amount) => {
+    return this.overrides?.addMonths
+      ? this.overrides.addMonths(date, amount)
+      : addMonths(date, amount);
+  };
+
+  /**
+   * Adds the specified number of weeks to the given date.
+   *
+   * @param date The date to add weeks to.
+   * @param amount The number of weeks to add.
+   * @returns The new date with the weeks added.
+   */
+  addWeeks: typeof addWeeks = (date, amount) => {
+    return this.overrides?.addWeeks
+      ? this.overrides.addWeeks(date, amount)
+      : addWeeks(date, amount);
+  };
+
+  /**
+   * Adds the specified number of years to the given date.
+   *
+   * @param date The date to add years to.
+   * @param amount The number of years to add.
+   * @returns The new date with the years added.
+   */
+  addYears: typeof addYears = (date, amount) => {
+    return this.overrides?.addYears
+      ? this.overrides.addYears(date, amount)
+      : addYears(date, amount);
+  };
+
+  /**
+   * Returns the number of calendar days between the given dates.
+   *
+   * @param dateLeft The later date.
+   * @param dateRight The earlier date.
+   * @returns The number of calendar days between the dates.
+   */
+  differenceInCalendarDays: typeof differenceInCalendarDays = (
+    dateLeft,
+    dateRight
+  ) => {
+    return this.overrides?.differenceInCalendarDays
+      ? this.overrides.differenceInCalendarDays(dateLeft, dateRight)
+      : differenceInCalendarDays(dateLeft, dateRight);
+  };
+
+  /**
+   * Returns the number of calendar months between the given dates.
+   *
+   * @param dateLeft The later date.
+   * @param dateRight The earlier date.
+   * @returns The number of calendar months between the dates.
+   */
+  differenceInCalendarMonths: typeof differenceInCalendarMonths = (
+    dateLeft,
+    dateRight
+  ) => {
+    return this.overrides?.differenceInCalendarMonths
+      ? this.overrides.differenceInCalendarMonths(dateLeft, dateRight)
+      : differenceInCalendarMonths(dateLeft, dateRight);
+  };
+
+  /**
+   * Returns the end of the ISO week for the given date.
+   *
+   * @param date The original date.
+   * @returns The end of the ISO week.
+   */
+  endOfISOWeek: typeof endOfISOWeek = (date) => {
+    return this.overrides?.endOfISOWeek
+      ? this.overrides.endOfISOWeek(date)
+      : endOfISOWeek(date);
+  };
+
+  /**
+   * Returns the end of the month for the given date.
+   *
+   * @param date The original date.
+   * @returns The end of the month.
+   */
+  endOfMonth: typeof endOfMonth = (date) => {
+    return this.overrides?.endOfMonth
+      ? this.overrides.endOfMonth(date)
+      : endOfMonth(date);
+  };
+
+  /**
+   * Returns the end of the week for the given date.
+   *
+   * @param date The original date.
+   * @returns The end of the week.
+   */
+  endOfWeek: typeof endOfWeek = <
+    DateType extends Date,
+    ResultDate extends Date = DateType
+  >(
+    date: DateArg<DateType>
+  ): ResultDate => {
+    return this.overrides?.endOfWeek
+      ? this.overrides.endOfWeek(
+          date,
+          this.options as EndOfWeekOptions<ResultDate>
+        )
+      : endOfWeek(date, this.options as EndOfWeekOptions<ResultDate>);
+  };
+
+  /**
+   * Returns the end of the year for the given date.
+   *
+   * @param date The original date.
+   * @returns The end of the year.
+   */
+  endOfYear: typeof endOfYear = (date) => {
+    return this.overrides?.endOfYear
+      ? this.overrides.endOfYear(date)
+      : endOfYear(date);
+  };
+
+  /**
+   * Formats the given date using the specified format string.
+   *
+   * @param date The date to format.
+   * @param formatStr The format string.
+   * @returns The formatted date string.
+   */
+  format: typeof format = (date, formatStr) => {
+    return this.overrides?.format
+      ? this.overrides.format(date, formatStr, this.options)
+      : format(date, formatStr, this.options);
+  };
+
+  /**
+   * Returns the ISO week number for the given date.
+   *
+   * @param date The date to get the ISO week number for.
+   * @returns The ISO week number.
+   */
+  getISOWeek: typeof getISOWeek = (date) => {
+    return this.overrides?.getISOWeek
+      ? this.overrides.getISOWeek(date)
+      : getISOWeek(date);
+  };
+
+  /**
+   * Returns the local week number for the given date.
+   *
+   * @param date The date to get the week number for.
+   * @returns The week number.
+   */
+  getWeek: typeof getWeek = (date) => {
+    return this.overrides?.getWeek
+      ? this.overrides.getWeek(date, this.options)
+      : getWeek(date, this.options);
+  };
+
+  /**
+   * Checks if the first date is after the second date.
+   *
+   * @param date The date to compare.
+   * @param dateToCompare The date to compare with.
+   * @returns True if the first date is after the second date.
+   */
+  isAfter: typeof isAfter = (date, dateToCompare) => {
+    return this.overrides?.isAfter
+      ? this.overrides.isAfter(date, dateToCompare)
+      : isAfter(date, dateToCompare);
+  };
+
+  /**
+   * Checks if the first date is before the second date.
+   *
+   * @param date The date to compare.
+   * @param dateToCompare The date to compare with.
+   * @returns True if the first date is before the second date.
+   */
+  isBefore: typeof isBefore = (date, dateToCompare) => {
+    return this.overrides?.isBefore
+      ? this.overrides.isBefore(date, dateToCompare)
+      : isBefore(date, dateToCompare);
+  };
+
+  /**
+   * Checks if the given value is a Date object.
+   *
+   * @param value The value to check.
+   * @returns True if the value is a Date object.
+   */
+  isDate: (value: unknown) => value is Date = (value): value is Date => {
+    return this.overrides?.isDate
+      ? this.overrides.isDate(value)
+      : isDate(value);
+  };
+
+  /**
+   * Checks if the given dates are on the same day.
+   *
+   * @param dateLeft The first date to compare.
+   * @param dateRight The second date to compare.
+   * @returns True if the dates are on the same day.
+   */
+  isSameDay: typeof isSameDay = (dateLeft, dateRight) => {
+    return this.overrides?.isSameDay
+      ? this.overrides.isSameDay(dateLeft, dateRight)
+      : isSameDay(dateLeft, dateRight);
+  };
+
+  /**
+   * Checks if the given dates are in the same month.
+   *
+   * @param dateLeft The first date to compare.
+   * @param dateRight The second date to compare.
+   * @returns True if the dates are in the same month.
+   */
+  isSameMonth: typeof isSameMonth = (dateLeft, dateRight) => {
+    return this.overrides?.isSameMonth
+      ? this.overrides.isSameMonth(dateLeft, dateRight)
+      : isSameMonth(dateLeft, dateRight);
+  };
+
+  /**
+   * Checks if the given dates are in the same year.
+   *
+   * @param dateLeft The first date to compare.
+   * @param dateRight The second date to compare.
+   * @returns True if the dates are in the same year.
+   */
+  isSameYear: typeof isSameYear = (dateLeft, dateRight) => {
+    return this.overrides?.isSameYear
+      ? this.overrides.isSameYear(dateLeft, dateRight)
+      : isSameYear(dateLeft, dateRight);
+  };
+
+  /**
+   * Returns the latest date in the given array of dates.
+   *
+   * @param dates The array of dates to compare.
+   * @returns The latest date.
+   */
+  max: typeof max = (dates) => {
+    return this.overrides?.max ? this.overrides.max(dates) : max(dates);
+  };
+
+  /**
+   * Returns the earliest date in the given array of dates.
+   *
+   * @param dates The array of dates to compare.
+   * @returns The earliest date.
+   */
+  min: typeof min = (dates) => {
+    return this.overrides?.min ? this.overrides.min(dates) : min(dates);
+  };
+
+  /**
+   * Sets the month of the given date.
+   *
+   * @param date The date to set the month on.
+   * @param month The month to set (0-11).
+   * @returns The new date with the month set.
+   */
+  setMonth: typeof setMonth = (date, month) => {
+    return this.overrides?.setMonth
+      ? this.overrides.setMonth(date, month)
+      : setMonth(date, month);
+  };
+
+  /**
+   * Sets the year of the given date.
+   *
+   * @param date The date to set the year on.
+   * @param year The year to set.
+   * @returns The new date with the year set.
+   */
+  setYear: typeof setYear = (date, year) => {
+    return this.overrides?.setYear
+      ? this.overrides.setYear(date, year)
+      : setYear(date, year);
+  };
+
+  /**
+   * Returns the start of the day for the given date.
+   *
+   * @param date The original date.
+   * @returns The start of the day.
+   */
+  startOfDay: typeof startOfDay = (date) => {
+    return this.overrides?.startOfDay
+      ? this.overrides.startOfDay(date)
+      : startOfDay(date);
+  };
+
+  /**
+   * Returns the start of the ISO week for the given date.
+   *
+   * @param date The original date.
+   * @returns The start of the ISO week.
+   */
+  startOfISOWeek: typeof startOfISOWeek = (date) => {
+    return this.overrides?.startOfISOWeek
+      ? this.overrides.startOfISOWeek(date)
+      : startOfISOWeek(date);
+  };
+
+  /**
+   * Returns the start of the month for the given date.
+   *
+   * @param date The original date.
+   * @returns The start of the month.
+   */
+  startOfMonth: typeof startOfMonth = (date) => {
+    return this.overrides?.startOfMonth
+      ? this.overrides.startOfMonth(date)
+      : startOfMonth(date);
+  };
+
+  /**
+   * Returns the start of the week for the given date.
+   *
+   * @param date The original date.
+   * @returns The start of the week.
+   */
+  startOfWeek: typeof startOfWeek = <
+    DateType extends Date,
+    ResultDate extends Date = DateType
+  >(
+    date: DateArg<DateType>
+  ): ResultDate => {
+    return this.overrides?.startOfWeek
+      ? this.overrides.startOfWeek(
+          date,
+          this.options as StartOfWeekOptions<ResultDate>
+        )
+      : startOfWeek(date, this.options as StartOfWeekOptions<ResultDate>);
+  };
+
+  /**
+   * Returns the start of the year for the given date.
+   *
+   * @param date The original date.
+   * @returns The start of the year.
+   */
+  startOfYear: typeof startOfYear = (date) => {
+    return this.overrides?.startOfYear
+      ? this.overrides.startOfYear(date)
+      : startOfYear(date);
+  };
+}
+/** The default locale (English). */
+export { enUS as defaultLocale } from "date-fns/locale/en-US";
+
+/**
+ * The default date library with English locale.
+ *
+ * @since 9.2.0
+ */
+export const defaultDateLib = new DateLib();
+
+/** @deprecated Use `defaultDateLib`. */
+export const dateLib = defaultDateLib;
diff --git a/src/classes/index.ts b/src/classes/index.ts
index a163cb8ca..d1f840aae 100644
--- a/src/classes/index.ts
+++ b/src/classes/index.ts
@@ -1,3 +1,4 @@
 export * from "./CalendarDay.js";
 export * from "./CalendarMonth.js";
 export * from "./CalendarWeek.js";
+export * from "./DateLib.js";
diff --git a/src/formatters/formatCaption.ts b/src/formatters/formatCaption.ts
index edba56990..ba8fdd687 100644
--- a/src/formatters/formatCaption.ts
+++ b/src/formatters/formatCaption.ts
@@ -1,8 +1,4 @@
-import {
-  FormatOptions,
-  dateLib as defaultDateLib,
-  type DateLib
-} from "../lib/index.js";
+import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
 
 /**
  * Format the caption of the month.
@@ -13,11 +9,10 @@ import {
  */
 export function formatCaption(
   month: Date,
-  options?: FormatOptions,
-  /** @ignore */
-  dateLib: DateLib = defaultDateLib
+  options?: DateLibOptions,
+  dateLib?: DateLib
 ) {
-  return dateLib.format(month, "LLLL y", options);
+  return (dateLib ?? new DateLib(options)).format(month, "LLLL y");
 }
 
 /**
diff --git a/src/formatters/formatDay.ts b/src/formatters/formatDay.ts
index 858f14b2c..cca10ec62 100644
--- a/src/formatters/formatDay.ts
+++ b/src/formatters/formatDay.ts
@@ -1,5 +1,4 @@
-import type { FormatOptions, DateLib } from "../lib/dateLib.js";
-import { dateLib as defaultDateLib } from "../lib/index.js";
+import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
 
 /**
  * Format the day date shown in the day cell.
@@ -10,9 +9,8 @@ import { dateLib as defaultDateLib } from "../lib/index.js";
  */
 export function formatDay(
   date: Date,
-  options?: FormatOptions,
-  /** @ignore */
-  dateLib: DateLib = defaultDateLib
+  options?: DateLibOptions,
+  dateLib?: DateLib
 ) {
-  return dateLib.format(date, "d", options);
+  return (dateLib ?? new DateLib(options)).format(date, "d");
 }
diff --git a/src/formatters/formatMonthDropdown.ts b/src/formatters/formatMonthDropdown.ts
index b7773faca..c49e74f20 100644
--- a/src/formatters/formatMonthDropdown.ts
+++ b/src/formatters/formatMonthDropdown.ts
@@ -1,5 +1,5 @@
-import type { DateFnsMonth } from "../lib/dateLib.js";
-import { enUS } from "../lib/locales.js";
+import type { DateFnsMonth } from "../classes/DateLib.js";
+import { defaultLocale } from "../classes/DateLib.js";
 
 /**
  * Format the month number for the dropdown option label.
@@ -12,7 +12,7 @@ export function formatMonthDropdown(
   /** The month number to format. */
   monthNumber: number,
   /** The locale to use for formatting. */
-  locale = enUS
+  locale = defaultLocale
 ): string {
   return locale.localize?.month(monthNumber as DateFnsMonth);
 }
diff --git a/src/formatters/formatWeekdayName.ts b/src/formatters/formatWeekdayName.ts
index f29fc140d..2524215f8 100644
--- a/src/formatters/formatWeekdayName.ts
+++ b/src/formatters/formatWeekdayName.ts
@@ -1,5 +1,4 @@
-import type { FormatOptions, DateLib } from "../lib/dateLib.js";
-import { dateLib as defaultDateLib } from "../lib/index.js";
+import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
 
 /**
  * Format the weekday name to be displayed in the weekdays header.
@@ -10,9 +9,8 @@ import { dateLib as defaultDateLib } from "../lib/index.js";
  */
 export function formatWeekdayName(
   weekday: Date,
-  options?: FormatOptions,
-  /** @ignore */
-  dateLib: DateLib = defaultDateLib
+  options?: DateLibOptions,
+  dateLib?: DateLib
 ) {
-  return dateLib.format(weekday, "cccccc", options);
+  return (dateLib ?? new DateLib(options)).format(weekday, "cccccc");
 }
diff --git a/src/helpers/getDateLib.ts b/src/helpers/getDateLib.ts
deleted file mode 100644
index 2251d8d87..000000000
--- a/src/helpers/getDateLib.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { dateLib, type DateLib } from "../lib/dateLib.js";
-import type { DayPickerProps } from "../types/index.js";
-
-export function getDateLib(customLib: DayPickerProps["dateLib"]): DateLib {
-  return {
-    ...dateLib,
-    ...customLib
-  };
-}
diff --git a/src/helpers/getDates.ts b/src/helpers/getDates.ts
index 2cf7e7209..51d23142b 100644
--- a/src/helpers/getDates.ts
+++ b/src/helpers/getDates.ts
@@ -1,4 +1,5 @@
-import { DateLib, DayPickerProps } from "../index.js";
+import { type DateLib } from "../classes/DateLib.js";
+import { type DayPickerProps } from "../types/props.js";
 
 /** The number of days in a month when having 6 weeks. */
 const NrOfDaysWithFixedWeeks = 42;
@@ -7,16 +8,13 @@ const NrOfDaysWithFixedWeeks = 42;
 export function getDates(
   displayMonths: Date[],
   maxDate: Date | undefined,
-  props: Pick<
-    DayPickerProps,
-    "ISOWeek" | "fixedWeeks" | "locale" | "weekStartsOn" | "timeZone"
-  >,
+  props: Pick<DayPickerProps, "ISOWeek" | "fixedWeeks">,
   dateLib: DateLib
 ): Date[] {
   const firstMonth = displayMonths[0];
   const lastMonth = displayMonths[displayMonths.length - 1];
 
-  const { ISOWeek, fixedWeeks, locale, weekStartsOn } = props ?? {};
+  const { ISOWeek, fixedWeeks } = props ?? {};
   const {
     startOfWeek,
     endOfWeek,
@@ -31,17 +29,11 @@ export function getDates(
 
   const startWeekFirstDate = ISOWeek
     ? startOfISOWeek(firstMonth)
-    : startOfWeek(firstMonth, {
-        weekStartsOn,
-        locale
-      });
+    : startOfWeek(firstMonth);
 
   const endWeekLastDate = ISOWeek
     ? endOfISOWeek(endOfMonth(lastMonth))
-    : endOfWeek(endOfMonth(lastMonth), {
-        weekStartsOn,
-        locale
-      });
+    : endOfWeek(endOfMonth(lastMonth));
 
   const nOfDays = differenceInCalendarDays(endWeekLastDate, startWeekFirstDate);
   const nOfMonths = differenceInCalendarMonths(lastMonth, firstMonth) + 1;
diff --git a/src/helpers/getDisplayMonths.ts b/src/helpers/getDisplayMonths.ts
index 7d661c2b2..8393adfea 100644
--- a/src/helpers/getDisplayMonths.ts
+++ b/src/helpers/getDisplayMonths.ts
@@ -1,4 +1,4 @@
-import type { DateLib } from "../lib/index.js";
+import type { DateLib } from "../classes/DateLib.js";
 import type { DayPickerProps } from "../types/index.js";
 
 export function getDisplayMonths(
diff --git a/src/helpers/getFocusableDate.ts b/src/helpers/getFocusableDate.ts
index 1e1b03475..639bc3d32 100644
--- a/src/helpers/getFocusableDate.ts
+++ b/src/helpers/getFocusableDate.ts
@@ -1,4 +1,4 @@
-import type { DateLib } from "../lib/index.js";
+import type { DateLib } from "../classes/DateLib.js";
 import type {
   DayPickerProps,
   MoveFocusBy,
@@ -12,10 +12,10 @@ export function getFocusableDate(
   refDate: Date,
   navStart: Date | undefined,
   navEnd: Date | undefined,
-  props: Pick<DayPickerProps, "locale" | "ISOWeek" | "weekStartsOn">,
+  props: Pick<DayPickerProps, "ISOWeek">,
   dateLib: DateLib
 ): Date {
-  const { weekStartsOn, locale, ISOWeek } = props;
+  const { ISOWeek } = props;
   const {
     addDays,
     addMonths,
@@ -34,11 +34,8 @@ export function getFocusableDate(
     month: addMonths,
     year: addYears,
     startOfWeek: (date: Date) =>
-      ISOWeek
-        ? startOfISOWeek(date)
-        : startOfWeek(date, { locale, weekStartsOn }),
-    endOfWeek: (date: Date) =>
-      ISOWeek ? endOfISOWeek(date) : endOfWeek(date, { locale, weekStartsOn })
+      ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
+    endOfWeek: (date: Date) => (ISOWeek ? endOfISOWeek(date) : endOfWeek(date))
   };
 
   let focusableDate = moveFns[moveBy](refDate, moveDir === "after" ? 1 : -1);
diff --git a/src/helpers/getInitialMonth.ts b/src/helpers/getInitialMonth.ts
index 1c2c30892..6e477e10d 100644
--- a/src/helpers/getInitialMonth.ts
+++ b/src/helpers/getInitialMonth.ts
@@ -1,6 +1,7 @@
 import { TZDate } from "@date-fns/tz";
 
-import type { DateLib, DayPickerProps } from "../index.js";
+import { type DateLib } from "../classes/DateLib.js";
+import { type DayPickerProps } from "../types/props.js";
 
 /** Return the start month based on the props passed to DayPicker. */
 export function getInitialMonth(
diff --git a/src/helpers/getMonthOptions.ts b/src/helpers/getMonthOptions.ts
index 86b951692..13aa9d4f5 100644
--- a/src/helpers/getMonthOptions.ts
+++ b/src/helpers/getMonthOptions.ts
@@ -1,5 +1,5 @@
+import type { DateLib } from "../classes/DateLib.js";
 import { DropdownOption } from "../components/Dropdown.js";
-import type { Locale, DateLib } from "../lib/dateLib.js";
 import type { Formatters } from "../types/index.js";
 
 /** Return the months to show in the dropdown. */
@@ -8,7 +8,6 @@ export function getMonthOptions(
   navStart: Date | undefined,
   navEnd: Date | undefined,
   formatters: Pick<Formatters, "formatMonthDropdown">,
-  locale: Locale | undefined,
   dateLib: DateLib
 ): DropdownOption[] | undefined {
   if (!navStart) return undefined;
@@ -27,7 +26,7 @@ export function getMonthOptions(
     return a - b;
   });
   const options = sortedMonths.map((value) => {
-    const label = formatters.formatMonthDropdown(value, locale);
+    const label = formatters.formatMonthDropdown(value, dateLib.options.locale);
     const month = dateLib.Date
       ? new dateLib.Date(year, value)
       : new Date(year, value);
diff --git a/src/helpers/getMonths.ts b/src/helpers/getMonths.ts
index fad0d29f8..e12ebfc77 100644
--- a/src/helpers/getMonths.ts
+++ b/src/helpers/getMonths.ts
@@ -1,5 +1,5 @@
+import type { DateLib } from "../classes/DateLib.js";
 import { CalendarWeek, CalendarDay, CalendarMonth } from "../classes/index.js";
-import type { DateLib } from "../lib/index.js";
 import type { DayPickerProps } from "../types/index.js";
 
 /** Return the months to display in the calendar. */
@@ -9,16 +9,7 @@ export function getMonths(
   /** The dates to display in the calendar. */
   dates: Date[],
   /** Options from the props context. */
-  props: Pick<
-    DayPickerProps,
-    | "fixedWeeks"
-    | "ISOWeek"
-    | "locale"
-    | "weekStartsOn"
-    | "reverseMonths"
-    | "firstWeekContainsDate"
-    | "timeZone"
-  >,
+  props: Pick<DayPickerProps, "fixedWeeks" | "ISOWeek" | "reverseMonths">,
   dateLib: DateLib
 ): CalendarMonth[] {
   const {
@@ -35,17 +26,11 @@ export function getMonths(
     (months, month) => {
       const firstDateOfFirstWeek = props.ISOWeek
         ? startOfISOWeek(month)
-        : startOfWeek(month, {
-            locale: props.locale,
-            weekStartsOn: props.weekStartsOn
-          });
+        : startOfWeek(month);
 
       const lastDateOfLastWeek = props.ISOWeek
         ? endOfISOWeek(endOfMonth(month))
-        : endOfWeek(endOfMonth(month), {
-            locale: props.locale,
-            weekStartsOn: props.weekStartsOn
-          });
+        : endOfWeek(endOfMonth(month));
 
       /** The dates to display in the month. */
       const monthDates = dates.filter((date) => {
@@ -63,13 +48,7 @@ export function getMonths(
 
       const weeks: CalendarWeek[] = monthDates.reduce<CalendarWeek[]>(
         (weeks, date) => {
-          const weekNumber = props.ISOWeek
-            ? getISOWeek(date)
-            : getWeek(date, {
-                locale: props.locale,
-                weekStartsOn: props.weekStartsOn,
-                firstWeekContainsDate: props.firstWeekContainsDate
-              });
+          const weekNumber = props.ISOWeek ? getISOWeek(date) : getWeek(date);
           const week = weeks.find((week) => week.weekNumber === weekNumber);
 
           const day = new CalendarDay(date, month, dateLib);
diff --git a/src/helpers/getNavMonth.ts b/src/helpers/getNavMonth.ts
index 69db4e2e3..3f9903e02 100644
--- a/src/helpers/getNavMonth.ts
+++ b/src/helpers/getNavMonth.ts
@@ -1,6 +1,6 @@
 import { TZDate } from "@date-fns/tz";
 
-import type { DateLib } from "../lib/index.js";
+import type { DateLib } from "../classes/DateLib.js";
 import type { DayPickerProps } from "../types/index.js";
 
 /** Return the start and end months for the calendar navigation. */
@@ -12,7 +12,6 @@ export function getNavMonths(
     | "startMonth"
     | "today"
     | "timeZone"
-    | "dateLib"
     // Deprecated:
     | "fromMonth"
     | "fromYear"
diff --git a/src/helpers/getNextFocus.tsx b/src/helpers/getNextFocus.tsx
index 06591e964..52ed98906 100644
--- a/src/helpers/getNextFocus.tsx
+++ b/src/helpers/getNextFocus.tsx
@@ -1,5 +1,5 @@
+import type { DateLib } from "../classes/DateLib.js";
 import { CalendarDay } from "../classes/index.js";
-import type { DateLib } from "../lib/index.js";
 import type {
   DayPickerProps,
   MoveFocusBy,
@@ -18,13 +18,7 @@ export function getNextFocus(
   calendarEndMonth: Date | undefined,
   props: Pick<
     DayPickerProps,
-    | "disabled"
-    | "hidden"
-    | "modifiers"
-    | "locale"
-    | "ISOWeek"
-    | "weekStartsOn"
-    | "timeZone"
+    "disabled" | "hidden" | "modifiers" | "ISOWeek" | "timeZone"
   >,
   dateLib: DateLib,
   attempt: number = 0
diff --git a/src/helpers/getNextMonth.ts b/src/helpers/getNextMonth.ts
index 28f001338..1f7d44366 100644
--- a/src/helpers/getNextMonth.ts
+++ b/src/helpers/getNextMonth.ts
@@ -1,4 +1,4 @@
-import type { DateLib } from "../lib/index.js";
+import type { DateLib } from "../classes/DateLib.js";
 import type { DayPickerProps } from "../types/index.js";
 
 /**
diff --git a/src/helpers/getPreviousMonth.ts b/src/helpers/getPreviousMonth.ts
index 6782b2fe1..24741118a 100644
--- a/src/helpers/getPreviousMonth.ts
+++ b/src/helpers/getPreviousMonth.ts
@@ -1,4 +1,4 @@
-import type { DateLib } from "../lib/index.js";
+import type { DateLib } from "../classes/DateLib.js";
 import type { DayPickerProps } from "../types/index.js";
 
 /**
diff --git a/src/helpers/getWeekdays.ts b/src/helpers/getWeekdays.ts
index b58226732..1bf01af85 100644
--- a/src/helpers/getWeekdays.ts
+++ b/src/helpers/getWeekdays.ts
@@ -1,21 +1,17 @@
 import { TZDate } from "@date-fns/tz";
 
-import type { Locale, DateLib } from "../lib/dateLib.js";
-import { dateLib as defaultDateLib } from "../lib/index.js";
+import { DateLib } from "../classes/DateLib.js";
 
 /**
  * Generate a series of 7 days, starting from the week, to use for formatting
  * the weekday names (Monday, Tuesday, etc.).
  */
 export function getWeekdays(
-  locale?: Locale | undefined,
-  /** The index of the first day of the week (0 - Sunday). */
-  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined,
+  /** The date library. */
+  dateLib: DateLib,
   /** Use ISOWeek instead of locale/ */
   ISOWeek?: boolean | undefined,
-  timeZone?: string | undefined,
-  /** @ignore */
-  dateLib: DateLib = defaultDateLib
+  timeZone?: string | undefined
 ): Date[] {
   const date = timeZone
     ? TZDate.tz(timeZone)
@@ -24,7 +20,7 @@ export function getWeekdays(
       : new Date();
   const start = ISOWeek
     ? dateLib.startOfISOWeek(date)
-    : dateLib.startOfWeek(date, { locale, weekStartsOn });
+    : dateLib.startOfWeek(date);
 
   const days: Date[] = [];
   for (let i = 0; i < 7; i++) {
diff --git a/src/helpers/getYearOptions.ts b/src/helpers/getYearOptions.ts
index c727be2e7..fba0b0fb5 100644
--- a/src/helpers/getYearOptions.ts
+++ b/src/helpers/getYearOptions.ts
@@ -1,5 +1,5 @@
+import type { DateLib } from "../classes/DateLib.js";
 import { DropdownOption } from "../components/Dropdown.js";
-import type { DateLib } from "../lib/dateLib.js";
 import type { Formatters } from "../types/index.js";
 
 /** Return the years to show in the dropdown. */
diff --git a/src/index.ts b/src/index.ts
index 35598d546..1f8d3528e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -4,8 +4,6 @@ export * from "./types/index.js";
 export * from "./classes/index.js";
 export * from "./components/custom-components.js";
 
-export * from "./lib/index.js";
-
 export * from "./formatters/index.js";
 export * from "./helpers/index.js";
 export * from "./labels/index.js";
@@ -14,4 +12,4 @@ export * from "./UI.js";
 
 export * from "./useDayPicker.js";
 
-export { enUS as defaultLocale } from "./lib/locales.js";
+export { TZDate } from "@date-fns/tz";
diff --git a/src/labels/labelDayButton.ts b/src/labels/labelDayButton.ts
index f772e6b7a..ac9e4a231 100644
--- a/src/labels/labelDayButton.ts
+++ b/src/labels/labelDayButton.ts
@@ -1,5 +1,4 @@
-import type { DateLib, LabelOptions } from "../index.js";
-import { dateLib as defaultDateLib } from "../lib/index.js";
+import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
 import type { Modifiers } from "../types/index.js";
 
 /**
@@ -16,11 +15,10 @@ export function labelDayButton(
   date: Date,
   /** The modifiers for the day. */
   modifiers: Modifiers,
-  options?: LabelOptions,
-  /** @ignore */
-  dateLib: DateLib = defaultDateLib
+  options?: DateLibOptions,
+  dateLib?: DateLib
 ) {
-  let label = dateLib.format(date, "PPPP", options);
+  let label = (dateLib ?? new DateLib(options)).format(date, "PPPP");
   if (modifiers.today) label = `Today, ${label}`;
   if (modifiers.selected) label = `${label}, selected`;
   return label;
diff --git a/src/labels/labelGrid.ts b/src/labels/labelGrid.ts
index be9149277..ba36019c2 100644
--- a/src/labels/labelGrid.ts
+++ b/src/labels/labelGrid.ts
@@ -1,5 +1,4 @@
-import type { LabelOptions, DateLib } from "../lib/dateLib.js";
-import { dateLib as defaultDateLib } from "../lib/index.js";
+import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
 
 /**
  * Return an ARIA label for the month grid, that will be announced when entering
@@ -11,11 +10,10 @@ import { dateLib as defaultDateLib } from "../lib/index.js";
  */
 export function labelGrid(
   date: Date,
-  options?: LabelOptions,
-  /** @ignore */
-  dateLib: DateLib = defaultDateLib
+  options?: DateLibOptions,
+  dateLib?: DateLib
 ) {
-  return dateLib.format(date, "LLLL y", options);
+  return (dateLib ?? new DateLib(options)).format(date, "LLLL y");
 }
 
 /**
diff --git a/src/labels/labelGridcell.ts b/src/labels/labelGridcell.ts
index 87409e33a..c9aa04a54 100644
--- a/src/labels/labelGridcell.ts
+++ b/src/labels/labelGridcell.ts
@@ -1,6 +1,4 @@
-import type { DateLib } from "../index.js";
-import type { LabelOptions } from "../lib/dateLib.js";
-import { dateLib as defaultDateLib } from "../lib/index.js";
+import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
 import type { Modifiers } from "../types/index.js";
 
 /**
@@ -13,11 +11,10 @@ export function labelGridcell(
   date: Date,
   /** The modifiers for the day. */
   modifiers?: Modifiers,
-  options?: LabelOptions,
-  /** @ignore */
-  dateLib: DateLib = defaultDateLib
+  options?: DateLibOptions,
+  dateLib?: DateLib
 ) {
-  let label = dateLib.format(date, "PPPP", options);
+  let label = (dateLib ?? new DateLib(options)).format(date, "PPPP");
   if (modifiers?.today) {
     label = `Today, ${label}`;
   }
diff --git a/src/labels/labelMonthDropdown.ts b/src/labels/labelMonthDropdown.ts
index 39f19dfe4..8982ef699 100644
--- a/src/labels/labelMonthDropdown.ts
+++ b/src/labels/labelMonthDropdown.ts
@@ -1,4 +1,4 @@
-import type { LabelOptions } from "../lib/dateLib.js";
+import type { DateLibOptions } from "../classes/DateLib.js";
 
 /**
  * The ARIA label for the months dropdown.
@@ -7,6 +7,6 @@ import type { LabelOptions } from "../lib/dateLib.js";
  * @group Labels
  * @see https://daypicker.dev/docs/translation#aria-labels
  */
-export function labelMonthDropdown(options?: LabelOptions) {
+export function labelMonthDropdown(options?: DateLibOptions) {
   return "Choose the Month";
 }
diff --git a/src/labels/labelWeekNumber.ts b/src/labels/labelWeekNumber.ts
index 8ff54d7f0..559905341 100644
--- a/src/labels/labelWeekNumber.ts
+++ b/src/labels/labelWeekNumber.ts
@@ -1,4 +1,4 @@
-import type { LabelOptions } from "../lib/dateLib.js";
+import type { DateLibOptions } from "../classes/DateLib.js";
 
 /**
  * The ARIA label for the week number cell (the first cell in the row).
@@ -9,7 +9,7 @@ import type { LabelOptions } from "../lib/dateLib.js";
  */
 export function labelWeekNumber(
   weekNumber: number,
-  options?: LabelOptions
+  options?: DateLibOptions
 ): string {
   return `Week ${weekNumber}`;
 }
diff --git a/src/labels/labelWeekNumberHeader.ts b/src/labels/labelWeekNumberHeader.ts
index 8f58c6d20..796dbfe41 100644
--- a/src/labels/labelWeekNumberHeader.ts
+++ b/src/labels/labelWeekNumberHeader.ts
@@ -1,4 +1,4 @@
-import type { LabelOptions } from "../lib/dateLib.js";
+import type { DateLibOptions } from "../classes/DateLib.js";
 
 /**
  * The ARIA label for the week number header element.
@@ -7,6 +7,6 @@ import type { LabelOptions } from "../lib/dateLib.js";
  * @group Labels
  * @see https://daypicker.dev/docs/translation#aria-labels
  */
-export function labelWeekNumberHeader(options?: LabelOptions): string {
+export function labelWeekNumberHeader(options?: DateLibOptions): string {
   return "Week Number";
 }
diff --git a/src/labels/labelWeekday.ts b/src/labels/labelWeekday.ts
index 807c9a400..ba6771570 100644
--- a/src/labels/labelWeekday.ts
+++ b/src/labels/labelWeekday.ts
@@ -1,5 +1,4 @@
-import type { LabelOptions, DateLib } from "../lib/dateLib.js";
-import { dateLib as defaultDateLib } from "../lib/index.js";
+import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
 
 /**
  * The ARIA label for the Weekday column header.
@@ -10,9 +9,8 @@ import { dateLib as defaultDateLib } from "../lib/index.js";
  */
 export function labelWeekday(
   date: Date,
-  options?: LabelOptions,
-  /** @ignore */
-  dateLib: DateLib = defaultDateLib
+  options?: DateLibOptions,
+  dateLib?: DateLib
 ): string {
-  return dateLib.format(date, "cccc", options);
+  return (dateLib ?? new DateLib(options)).format(date, "cccc");
 }
diff --git a/src/labels/labelYearDropdown.ts b/src/labels/labelYearDropdown.ts
index 53a80736b..615df9dbc 100644
--- a/src/labels/labelYearDropdown.ts
+++ b/src/labels/labelYearDropdown.ts
@@ -1,4 +1,4 @@
-import type { LabelOptions } from "../lib/dateLib.js";
+import type { DateLibOptions } from "../classes/DateLib.js";
 
 /**
  * The ARIA label for the years dropdown.
@@ -7,6 +7,6 @@ import type { LabelOptions } from "../lib/dateLib.js";
  * @group Labels
  * @see https://daypicker.dev/docs/translation#aria-labels
  */
-export function labelYearDropdown(options?: LabelOptions) {
+export function labelYearDropdown(options?: DateLibOptions) {
   return "Choose the Year";
 }
diff --git a/src/lib/dateLib.ts b/src/lib/dateLib.ts
deleted file mode 100644
index 9a6f044c8..000000000
--- a/src/lib/dateLib.ts
+++ /dev/null
@@ -1,175 +0,0 @@
-import type {
-  FormatOptions as DateFnsFormatOptions,
-  Locale as DateFnsLocale
-} from "date-fns";
-import { addDays } from "date-fns/addDays";
-import { addMonths } from "date-fns/addMonths";
-import { addWeeks } from "date-fns/addWeeks";
-import { addYears } from "date-fns/addYears";
-import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
-import { differenceInCalendarMonths } from "date-fns/differenceInCalendarMonths";
-import { endOfISOWeek } from "date-fns/endOfISOWeek";
-import { endOfMonth } from "date-fns/endOfMonth";
-import { endOfWeek } from "date-fns/endOfWeek";
-import { endOfYear } from "date-fns/endOfYear";
-import { format } from "date-fns/format";
-import { getISOWeek } from "date-fns/getISOWeek";
-import { getWeek } from "date-fns/getWeek";
-import { isAfter } from "date-fns/isAfter";
-import { isBefore } from "date-fns/isBefore";
-import { isDate } from "date-fns/isDate";
-import { isSameDay } from "date-fns/isSameDay";
-import { isSameMonth } from "date-fns/isSameMonth";
-import { isSameYear } from "date-fns/isSameYear";
-import { max } from "date-fns/max";
-import { min } from "date-fns/min";
-import { setMonth } from "date-fns/setMonth";
-import { setYear } from "date-fns/setYear";
-import { startOfDay } from "date-fns/startOfDay";
-import { startOfISOWeek } from "date-fns/startOfISOWeek";
-import { startOfMonth } from "date-fns/startOfMonth";
-import { startOfWeek } from "date-fns/startOfWeek";
-import { startOfYear } from "date-fns/startOfYear";
-
-/** The options for the {@link Formatters}. */
-export type FormatOptions = DateFnsFormatOptions;
-
-/** The options for the {@link Labels}. */
-export type LabelOptions = DateFnsFormatOptions;
-
-/** The locale used within DayPicker. */
-export type Locale = DateFnsLocale;
-
-export type { Month as DateFnsMonth } from "date-fns";
-
-/**
- * The date library used by DayPicker. It's a subset of the date-fns functions
- * plus an optional Date constructor.
- *
- * Override the default date library with the `dateLib` prop.
- */
-export type DateLib = {
-  /** The constructor of the date object. */
-  Date?: DateConstructor | undefined;
-
-  /** Adds the specified number of days to the given date. */
-  addDays: typeof addDays;
-
-  /** Adds the specified number of months to the given date. */
-  addMonths: typeof addMonths;
-
-  /** Adds the specified number of weeks to the given date. */
-  addWeeks: typeof addWeeks;
-
-  /** Adds the specified number of years to the given date. */
-  addYears: typeof addYears;
-
-  /** Returns the number of calendar days between the given dates. */
-  differenceInCalendarDays: typeof differenceInCalendarDays;
-
-  /** Returns the number of calendar months between the given dates. */
-  differenceInCalendarMonths: typeof differenceInCalendarMonths;
-
-  /** Returns the end of an ISO week for the given date. */
-  endOfISOWeek: typeof endOfISOWeek;
-
-  /** Returns the end of the month for the given date. */
-  endOfMonth: typeof endOfMonth;
-
-  /** Returns the end of the week for the given date. */
-  endOfWeek: typeof endOfWeek;
-
-  /** Returns the end of the year for the given date. */
-  endOfYear: typeof endOfYear;
-
-  /** Formats the given date using the specified format string. */
-  format: typeof format;
-
-  /** Returns the ISO week number for the given date. */
-  getISOWeek: typeof getISOWeek;
-
-  /** Returns the week number for the given date. */
-  getWeek: typeof getWeek;
-
-  /** Checks if the first date is after the second date. */
-  isAfter: typeof isAfter;
-
-  /** Checks if the first date is before the second date. */
-  isBefore: typeof isBefore;
-
-  /** Checks if the given value is a date. */
-  isDate: typeof isDate;
-
-  /** Checks if the given dates are the same day. */
-  isSameDay: typeof isSameDay;
-
-  /** Checks if the given dates are in the same month. */
-  isSameMonth: typeof isSameMonth;
-
-  /** Checks if the given dates are in the same year. */
-  isSameYear: typeof isSameYear;
-
-  /** Returns the maximum of the given dates. */
-  max: typeof max;
-
-  /** Returns the minimum of the given dates. */
-  min: typeof min;
-
-  /** Sets the month for the given date. */
-  setMonth: typeof setMonth;
-
-  /** Sets the year for the given date. */
-  setYear: typeof setYear;
-
-  /** Returns the start of the day for the given date. */
-  startOfDay: typeof startOfDay;
-
-  /** Returns the start of an ISO week for the given date. */
-  startOfISOWeek: typeof startOfISOWeek;
-
-  /** Returns the start of the month for the given date. */
-  startOfMonth: typeof startOfMonth;
-
-  /** Returns the start of the week for the given date. */
-  startOfWeek: typeof startOfWeek;
-
-  /** Returns the start of the year for the given date. */
-  startOfYear: typeof startOfYear;
-};
-
-/**
- * The default date library to use with the date picker.
- *
- * @private
- * @internal
- */
-export const dateLib = {
-  addDays,
-  addMonths,
-  addWeeks,
-  addYears,
-  differenceInCalendarDays,
-  differenceInCalendarMonths,
-  endOfISOWeek,
-  endOfMonth,
-  endOfWeek,
-  endOfYear,
-  format,
-  getISOWeek,
-  getWeek,
-  isAfter,
-  isBefore,
-  isDate,
-  isSameDay,
-  isSameMonth,
-  isSameYear,
-  max,
-  min,
-  setMonth,
-  setYear,
-  startOfDay,
-  startOfISOWeek,
-  startOfMonth,
-  startOfWeek,
-  startOfYear
-};
diff --git a/src/lib/index.ts b/src/lib/index.ts
deleted file mode 100644
index 4febdd13e..000000000
--- a/src/lib/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./dateLib.js";
-export { TZDate } from "@date-fns/tz";
diff --git a/src/lib/locales.ts b/src/lib/locales.ts
deleted file mode 100644
index 3c0f52435..000000000
--- a/src/lib/locales.ts
+++ /dev/null
@@ -1,1 +0,0 @@
-export { enUS } from "date-fns/locale/en-US";
diff --git a/src/selection/useMulti.tsx b/src/selection/useMulti.tsx
index c53f636fd..4fe3f48d8 100644
--- a/src/selection/useMulti.tsx
+++ b/src/selection/useMulti.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
+import type { DateLib } from "../classes/DateLib.js";
 import { useControlledValue } from "../helpers/useControlledValue.js";
-import type { DateLib } from "../lib/dateLib.js";
 import type {
   DayPickerProps,
   Modifiers,
diff --git a/src/selection/useRange.tsx b/src/selection/useRange.tsx
index f8ffaaf04..f95161fc2 100644
--- a/src/selection/useRange.tsx
+++ b/src/selection/useRange.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
+import type { DateLib } from "../classes/DateLib.js";
 import { useControlledValue } from "../helpers/useControlledValue.js";
-import type { DateLib } from "../lib/index.js";
 import type {
   DayPickerProps,
   Modifiers,
diff --git a/src/selection/useSingle.tsx b/src/selection/useSingle.tsx
index f82b07963..976e3adf0 100644
--- a/src/selection/useSingle.tsx
+++ b/src/selection/useSingle.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
+import type { DateLib } from "../classes/DateLib.js";
 import { useControlledValue } from "../helpers/useControlledValue.js";
-import type { DateLib } from "../lib/index.js";
 import type {
   DayPickerProps,
   Modifiers,
diff --git a/src/types/props.ts b/src/types/props.ts
index 02ba6e3d1..ec31d137b 100644
--- a/src/types/props.ts
+++ b/src/types/props.ts
@@ -1,7 +1,7 @@
 import React from "react";
 
 import type { DeprecatedUI } from "../UI.js";
-import type { Locale, DateLib } from "../lib/dateLib.js";
+import type { Locale, DateLib } from "../classes/DateLib.js";
 
 import type {
   ClassNames,
@@ -431,13 +431,13 @@ export interface PropsBase {
   onDayMouseLeave?: DayEventHandler<React.MouseEvent>;
 
   /**
-   * Replace the default date library with a custom one.
+   * Replace the default date library with a custom one. Experimental: not
+   * guaranteed to be stable (may not respect semver).
    *
-   * @private
    * @since 9.0.0
    * @experimental
    */
-  dateLib?: Partial<DateLib> | undefined;
+  dateLib?: Partial<typeof DateLib.prototype> | undefined;
 
   /**
    * @private
diff --git a/src/useCalendar.ts b/src/useCalendar.ts
index 68992e351..54fee5be3 100644
--- a/src/useCalendar.ts
+++ b/src/useCalendar.ts
@@ -3,7 +3,8 @@ import { useEffect } from "react";
 import type {
   CalendarWeek,
   CalendarDay,
-  CalendarMonth
+  CalendarMonth,
+  DateLib
 } from "./classes/index.js";
 import { getDates } from "./helpers/getDates.js";
 import { getDays } from "./helpers/getDays.js";
@@ -15,7 +16,6 @@ import { getNextMonth } from "./helpers/getNextMonth.js";
 import { getPreviousMonth } from "./helpers/getPreviousMonth.js";
 import { getWeeks } from "./helpers/getWeeks.js";
 import { useControlledValue } from "./helpers/useControlledValue.js";
-import type { DateLib } from "./lib/index.js";
 import type { DayPickerProps } from "./types/props.js";
 
 /**
@@ -75,7 +75,6 @@ export function useCalendar(
     | "today"
     | "fixedWeeks"
     | "ISOWeek"
-    | "weekStartsOn"
     | "numberOfMonths"
     | "disableNavigation"
     | "onMonthChange"
diff --git a/src/useFocus.ts b/src/useFocus.ts
index 53417f576..bdcefbaf3 100644
--- a/src/useFocus.ts
+++ b/src/useFocus.ts
@@ -1,9 +1,8 @@
 import { useState } from "react";
 
-import type { CalendarDay } from "./classes/index.js";
+import type { CalendarDay, DateLib } from "./classes/index.js";
 import { calculateFocusTarget } from "./helpers/calculateFocusTarget.js";
 import { getNextFocus } from "./helpers/getNextFocus.js";
-import type { DateLib } from "./lib/index.js";
 import type {
   MoveFocusBy,
   MoveFocusDir,
diff --git a/src/useGetModifiers.tsx b/src/useGetModifiers.tsx
index a1de4b210..29a561558 100644
--- a/src/useGetModifiers.tsx
+++ b/src/useGetModifiers.tsx
@@ -1,8 +1,7 @@
 import { TZDate } from "@date-fns/tz";
 
 import { DayFlag, SelectionState } from "./UI.js";
-import { CalendarDay } from "./classes/index.js";
-import type { DateLib } from "./lib/index.js";
+import type { CalendarDay, DateLib } from "./classes/index.js";
 import type { DayPickerProps, Modifiers } from "./types/index.js";
 import { dateMatchModifiers } from "./utils/dateMatchModifiers.js";
 
diff --git a/src/useSelection.ts b/src/useSelection.ts
index 7f6170d0e..767a1bf63 100644
--- a/src/useSelection.ts
+++ b/src/useSelection.ts
@@ -1,4 +1,4 @@
-import { type DateLib } from "./lib/index.js";
+import { type DateLib } from "./classes/DateLib.js";
 import { useMulti } from "./selection/useMulti.js";
 import { useRange } from "./selection/useRange.js";
 import { useSingle } from "./selection/useSingle.js";
diff --git a/src/utils/addToRange.ts b/src/utils/addToRange.ts
index c46102db0..599530446 100644
--- a/src/utils/addToRange.ts
+++ b/src/utils/addToRange.ts
@@ -1,4 +1,4 @@
-import { dateLib as defaultDateLib, type DateLib } from "../lib/index.js";
+import { defaultDateLib, type DateLib } from "../classes/DateLib.js";
 import type { DateRange } from "../types/index.js";
 
 /**
diff --git a/src/utils/dateMatchModifiers.ts b/src/utils/dateMatchModifiers.ts
index a3caa4031..a64dd8c3f 100644
--- a/src/utils/dateMatchModifiers.ts
+++ b/src/utils/dateMatchModifiers.ts
@@ -1,4 +1,4 @@
-import { dateLib as defaultDateLib, type DateLib } from "../lib/dateLib.js";
+import { type DateLib, defaultDateLib } from "../classes/DateLib.js";
 import type { Matcher } from "../types/index.js";
 
 import { rangeIncludesDate } from "./rangeIncludesDate.js";
diff --git a/src/utils/rangeIncludesDate.ts b/src/utils/rangeIncludesDate.ts
index 04823f2a3..9dfdf5d2f 100644
--- a/src/utils/rangeIncludesDate.ts
+++ b/src/utils/rangeIncludesDate.ts
@@ -1,4 +1,4 @@
-import { dateLib as defaultDateLib, type DateLib } from "../lib/index.js";
+import { defaultDateLib } from "../classes/index.js";
 import type { DateRange } from "../types/index.js";
 
 /**
@@ -12,8 +12,7 @@ export function rangeIncludesDate(
   date: Date,
   /** If `true`, the ends of the range are excluded. */
   excludeEnds = false,
-  /** @ignore */
-  dateLib: DateLib = defaultDateLib
+  dateLib = defaultDateLib
 ): boolean {
   let { from, to } = range;
   const { differenceInCalendarDays, isSameDay } = dateLib;
diff --git a/src/utils/typeguards.ts b/src/utils/typeguards.ts
index 508f7c049..60df84c29 100644
--- a/src/utils/typeguards.ts
+++ b/src/utils/typeguards.ts
@@ -1,4 +1,4 @@
-import type { DateLib } from "../lib/index.js";
+import type { DateLib } from "../classes/DateLib.js";
 import type {
   DateAfter,
   DateBefore,
diff --git a/website/docs/upgrading.mdx b/website/docs/upgrading.mdx
index 3f9d15e6f..844d9838c 100644
--- a/website/docs/upgrading.mdx
+++ b/website/docs/upgrading.mdx
@@ -195,7 +195,7 @@ In case you are using the `components` prop, you may need to update your code, a
   <DayPicker
     components={{
 -     IconLeft: MyLeftIcon,
-+     Chevron: (props) {
++     Chevron: (props) => {
 +        if (props.orientation === "left") {
 +          return <MyLeftIcon {...props} />;
 +        }
diff --git a/website/sidebars.ts b/website/sidebars.ts
index 073f9f9db..e2278b4f6 100644
--- a/website/sidebars.ts
+++ b/website/sidebars.ts
@@ -2,6 +2,26 @@ import type { SidebarsConfig } from "@docusaurus/plugin-content-docs";
 
 import typedocSidebar from "./docs/api/typedoc-sidebar.cjs";
 
+// Something doesn't work when using the TypeDoc sidebar with DateLib importing types from date-fns.
+const typedocSidebarFixed = typedocSidebar.map((item) => {
+  if (item.label === "Classes") {
+    return {
+      ...item,
+      items: item.items?.map((item) => {
+        if (item.label === "DateLib") {
+          return {
+            type: "doc",
+            id: "api/classes/DateLib",
+            label: "DateLib"
+          };
+        }
+        return item;
+      })
+    };
+  }
+  return item;
+});
+
 const sidebars: SidebarsConfig = {
   docs: [
     "intro",
@@ -43,7 +63,7 @@ const sidebars: SidebarsConfig = {
       ]
     }
   ],
-  api: ["api/index", typedocSidebar]
+  api: ["api/index", typedocSidebarFixed]
 };
 
 export default sidebars;


Test patch:
diff --git a/examples/Range.test.tsx b/examples/Range.test.tsx
index 2a46c0334..d23846c07 100644
--- a/examples/Range.test.tsx
+++ b/examples/Range.test.tsx
@@ -37,6 +37,14 @@ describe("when a day in the range is clicked", () => {
   test.each([days[3], days[4]])("%s should not be selected", (day) => {
     expect(gridcell(day, true)).not.toHaveAttribute("aria-selected");
   });
+  describe("when the reset button is clicked", () => {
+    beforeEach(async () =>
+      user.click(screen.getByRole("button", { name: "Reset" }))
+    );
+    test("no day should be selected", () => {
+      expect(getAllSelected()).toHaveLength(0);
+    });
+  });
   describe("when the day is clicked again", () => {
     const day = days[2];
     beforeEach(async () => user.click(dateButton(day)));
diff --git a/examples/TestCase2511.test.tsx b/examples/TestCase2511.test.tsx
new file mode 100644
index 000000000..c28c237a8
--- /dev/null
+++ b/examples/TestCase2511.test.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+import { render, screen } from "@/test/render";
+
+import { TestCase2511 } from "./TestCase2511";
+
+beforeEach(async () => {
+  render(<TestCase2511 />);
+});
+
+test("first weekday is Monday", () => {
+  const weekdaysElements = screen.queryAllByRole("columnheader");
+  expect(weekdaysElements[0]).toHaveAccessibleName("Monday");
+});
diff --git a/examples/TestCase2511.tsx b/examples/TestCase2511.tsx
new file mode 100644
index 000000000..14453a74c
--- /dev/null
+++ b/examples/TestCase2511.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import { enAU } from "date-fns/locale";
+import { DateLib, DayPicker } from "react-day-picker";
+
+/**
+ * Test case for issue #2511
+ *
+ * @see https://github.com/gpbl/react-day-picker/issues/2511
+ */
+export function TestCase2511() {
+  return (
+    <DayPicker
+      dateLib={new DateLib({ locale: enAU })}
+      mode="single"
+      showOutsideDays
+    />
+  );
+}
diff --git a/examples/__snapshots__/Range.test.tsx.snap b/examples/__snapshots__/Range.test.tsx.snap
index 7ae9c9c62..c2b2808c5 100644
--- a/examples/__snapshots__/Range.test.tsx.snap
+++ b/examples/__snapshots__/Range.test.tsx.snap
@@ -2,1281 +2,1295 @@
 
 exports[`should match the snapshot 1`] = `
 <div>
-  <div
-    class="rdp-root"
-    data-mode="range"
-    id="test"
-  >
+  <div>
     <div
-      class="rdp-months"
+      class="rdp-root"
+      data-mode="range"
+      id="test"
     >
-      <nav
-        aria-label=""
-        class="rdp-nav"
+      <div
+        class="rdp-months"
       >
-        <button
-          aria-label="Go to the Previous Month"
-          class="rdp-button_previous"
-          type="button"
+        <nav
+          aria-label=""
+          class="rdp-nav"
         >
-          <svg
-            class="rdp-chevron"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
+          <button
+            aria-label="Go to the Previous Month"
+            class="rdp-button_previous"
+            type="button"
           >
-            <polygon
-              points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20"
-            />
-          </svg>
-        </button>
-        <button
-          aria-label="Go to the Next Month"
-          class="rdp-button_next"
-          type="button"
-        >
-          <svg
-            class="rdp-chevron"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
+            <svg
+              class="rdp-chevron"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+            >
+              <polygon
+                points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20"
+              />
+            </svg>
+          </button>
+          <button
+            aria-label="Go to the Next Month"
+            class="rdp-button_next"
+            type="button"
           >
-            <polygon
-              points="8 18.612 14.1888889 12.5 8 6.37733333 9.91111111 4.5 18 12.5 9.91111111 20.5"
-            />
-          </svg>
-        </button>
-      </nav>
-      <div
-        class="rdp-month"
-      >
+            <svg
+              class="rdp-chevron"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+            >
+              <polygon
+                points="8 18.612 14.1888889 12.5 8 6.37733333 9.91111111 4.5 18 12.5 9.91111111 20.5"
+              />
+            </svg>
+          </button>
+        </nav>
         <div
-          class="rdp-month_caption"
+          class="rdp-month"
         >
-          <span
-            aria-live="polite"
-            class="rdp-caption_label"
-            role="status"
+          <div
+            class="rdp-month_caption"
           >
-            June 2020
-          </span>
-        </div>
-        <table
-          aria-label="June 2020"
-          aria-multiselectable="true"
-          class="rdp-month_grid"
-          role="grid"
-        >
-          <thead>
-            <tr
-              class="rdp-weekdays"
+            <span
+              aria-live="polite"
+              class="rdp-caption_label"
+              role="status"
             >
-              <th
-                aria-label="Sunday"
-                class="rdp-weekday"
-                scope="col"
-              >
-                Su
-              </th>
-              <th
-                aria-label="Monday"
-                class="rdp-weekday"
-                scope="col"
-              >
-                Mo
-              </th>
-              <th
-                aria-label="Tuesday"
-                class="rdp-weekday"
-                scope="col"
-              >
-                Tu
-              </th>
-              <th
-                aria-label="Wednesday"
-                class="rdp-weekday"
-                scope="col"
-              >
-                We
-              </th>
-              <th
-                aria-label="Thursday"
-                class="rdp-weekday"
-                scope="col"
-              >
-                Th
-              </th>
-              <th
-                aria-label="Friday"
-                class="rdp-weekday"
-                scope="col"
-              >
-                Fr
-              </th>
-              <th
-                aria-label="Saturday"
-                class="rdp-weekday"
-                scope="col"
-              >
-                Sa
-              </th>
-            </tr>
-          </thead>
-          <tbody
-            class="rdp-weeks"
+              June 2020
+            </span>
+          </div>
+          <table
+            aria-label="June 2020"
+            aria-multiselectable="true"
+            class="rdp-month_grid"
+            role="grid"
           >
-            <tr
-              class="rdp-week"
-            >
-              <td
-                aria-hidden="true"
-                class="rdp-day rdp-hidden rdp-outside"
-                data-day="2020-05-31"
-                data-hidden="true"
-                data-month="2020-05"
-                data-outside="true"
-              >
-                <button
-                  aria-label="Sunday, May 31st, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  31
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-01"
-              >
-                <button
-                  aria-label="Monday, June 1st, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  1
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-02"
-              >
-                <button
-                  aria-label="Tuesday, June 2nd, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  2
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-03"
-              >
-                <button
-                  aria-label="Wednesday, June 3rd, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  3
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-04"
-              >
-                <button
-                  aria-label="Thursday, June 4th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  4
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-05"
-              >
-                <button
-                  aria-label="Friday, June 5th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  5
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-06"
-              >
-                <button
-                  aria-label="Saturday, June 6th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  6
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="rdp-week"
-            >
-              <td
-                class="rdp-day"
-                data-day="2020-06-07"
-              >
-                <button
-                  aria-label="Sunday, June 7th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  7
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-08"
-              >
-                <button
-                  aria-label="Monday, June 8th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  8
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-09"
-              >
-                <button
-                  aria-label="Tuesday, June 9th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  9
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-10"
-              >
-                <button
-                  aria-label="Wednesday, June 10th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  10
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-11"
-              >
-                <button
-                  aria-label="Thursday, June 11th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  11
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-12"
-              >
-                <button
-                  aria-label="Friday, June 12th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  12
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-13"
-              >
-                <button
-                  aria-label="Saturday, June 13th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  13
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="rdp-week"
-            >
-              <td
-                class="rdp-day"
-                data-day="2020-06-14"
-              >
-                <button
-                  aria-label="Sunday, June 14th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  14
-                </button>
-              </td>
-              <td
-                aria-selected="true"
-                class="rdp-day rdp-range_start rdp-selected"
-                data-day="2020-06-15"
-                data-selected="true"
-              >
-                <button
-                  aria-label="Monday, June 15th, 2020, selected"
-                  class="rdp-day_button"
-                  tabindex="0"
-                  type="button"
-                >
-                  15
-                </button>
-              </td>
-              <td
-                aria-selected="true"
-                class="rdp-day rdp-range_middle rdp-selected"
-                data-day="2020-06-16"
-                data-selected="true"
-              >
-                <button
-                  aria-label="Tuesday, June 16th, 2020, selected"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  16
-                </button>
-              </td>
-              <td
-                aria-selected="true"
-                class="rdp-day rdp-range_middle rdp-selected"
-                data-day="2020-06-17"
-                data-selected="true"
-              >
-                <button
-                  aria-label="Wednesday, June 17th, 2020, selected"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  17
-                </button>
-              </td>
-              <td
-                aria-selected="true"
-                class="rdp-day rdp-range_middle rdp-selected"
-                data-day="2020-06-18"
-                data-selected="true"
-              >
-                <button
-                  aria-label="Thursday, June 18th, 2020, selected"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  18
-                </button>
-              </td>
-              <td
-                aria-selected="true"
-                class="rdp-day rdp-range_end rdp-selected"
-                data-day="2020-06-19"
-                data-selected="true"
-              >
-                <button
-                  aria-label="Friday, June 19th, 2020, selected"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  19
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-20"
-              >
-                <button
-                  aria-label="Saturday, June 20th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  20
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="rdp-week"
-            >
-              <td
-                class="rdp-day"
-                data-day="2020-06-21"
-              >
-                <button
-                  aria-label="Sunday, June 21st, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  21
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-22"
-              >
-                <button
-                  aria-label="Monday, June 22nd, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  22
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-23"
-              >
-                <button
-                  aria-label="Tuesday, June 23rd, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  23
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-24"
-              >
-                <button
-                  aria-label="Wednesday, June 24th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  24
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-25"
-              >
-                <button
-                  aria-label="Thursday, June 25th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  25
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-26"
-              >
-                <button
-                  aria-label="Friday, June 26th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  26
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-27"
-              >
-                <button
-                  aria-label="Saturday, June 27th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  27
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="rdp-week"
+            <thead>
+              <tr
+                class="rdp-weekdays"
+              >
+                <th
+                  aria-label="Sunday"
+                  class="rdp-weekday"
+                  scope="col"
+                >
+                  Su
+                </th>
+                <th
+                  aria-label="Monday"
+                  class="rdp-weekday"
+                  scope="col"
+                >
+                  Mo
+                </th>
+                <th
+                  aria-label="Tuesday"
+                  class="rdp-weekday"
+                  scope="col"
+                >
+                  Tu
+                </th>
+                <th
+                  aria-label="Wednesday"
+                  class="rdp-weekday"
+                  scope="col"
+                >
+                  We
+                </th>
+                <th
+                  aria-label="Thursday"
+                  class="rdp-weekday"
+                  scope="col"
+                >
+                  Th
+                </th>
+                <th
+                  aria-label="Friday"
+                  class="rdp-weekday"
+                  scope="col"
+                >
+                  Fr
+                </th>
+                <th
+                  aria-label="Saturday"
+                  class="rdp-weekday"
+                  scope="col"
+                >
+                  Sa
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="rdp-weeks"
             >
-              <td
-                class="rdp-day"
-                data-day="2020-06-28"
-              >
-                <button
-                  aria-label="Sunday, June 28th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  28
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-29"
-              >
-                <button
-                  aria-label="Monday, June 29th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  29
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-30"
-              >
-                <button
-                  aria-label="Tuesday, June 30th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  30
-                </button>
-              </td>
-              <td
-                aria-hidden="true"
-                class="rdp-day rdp-hidden rdp-outside"
-                data-day="2020-07-01"
-                data-hidden="true"
-                data-month="2020-07"
-                data-outside="true"
-              >
-                <button
-                  aria-label="Wednesday, July 1st, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  1
-                </button>
-              </td>
-              <td
-                aria-hidden="true"
-                class="rdp-day rdp-hidden rdp-outside"
-                data-day="2020-07-02"
-                data-hidden="true"
-                data-month="2020-07"
-                data-outside="true"
-              >
-                <button
-                  aria-label="Thursday, July 2nd, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  2
-                </button>
-              </td>
-              <td
-                aria-hidden="true"
-                class="rdp-day rdp-hidden rdp-outside"
-                data-day="2020-07-03"
-                data-hidden="true"
-                data-month="2020-07"
-                data-outside="true"
-              >
-                <button
-                  aria-label="Friday, July 3rd, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  3
-                </button>
-              </td>
-              <td
-                aria-hidden="true"
-                class="rdp-day rdp-hidden rdp-outside"
-                data-day="2020-07-04"
-                data-hidden="true"
-                data-month="2020-07"
-                data-outside="true"
-              >
-                <button
-                  aria-label="Saturday, July 4th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  4
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+              <tr
+                class="rdp-week"
+              >
+                <td
+                  aria-hidden="true"
+                  class="rdp-day rdp-hidden rdp-outside"
+                  data-day="2020-05-31"
+                  data-hidden="true"
+                  data-month="2020-05"
+                  data-outside="true"
+                >
+                  <button
+                    aria-label="Sunday, May 31st, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    31
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-01"
+                >
+                  <button
+                    aria-label="Monday, June 1st, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    1
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-02"
+                >
+                  <button
+                    aria-label="Tuesday, June 2nd, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    2
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-03"
+                >
+                  <button
+                    aria-label="Wednesday, June 3rd, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    3
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-04"
+                >
+                  <button
+                    aria-label="Thursday, June 4th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    4
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-05"
+                >
+                  <button
+                    aria-label="Friday, June 5th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    5
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-06"
+                >
+                  <button
+                    aria-label="Saturday, June 6th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    6
+                  </button>
+                </td>
+              </tr>
+              <tr
+                class="rdp-week"
+              >
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-07"
+                >
+                  <button
+                    aria-label="Sunday, June 7th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    7
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-08"
+                >
+                  <button
+                    aria-label="Monday, June 8th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    8
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-09"
+                >
+                  <button
+                    aria-label="Tuesday, June 9th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    9
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-10"
+                >
+                  <button
+                    aria-label="Wednesday, June 10th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    10
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-11"
+                >
+                  <button
+                    aria-label="Thursday, June 11th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    11
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-12"
+                >
+                  <button
+                    aria-label="Friday, June 12th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    12
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-13"
+                >
+                  <button
+                    aria-label="Saturday, June 13th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    13
+                  </button>
+                </td>
+              </tr>
+              <tr
+                class="rdp-week"
+              >
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-14"
+                >
+                  <button
+                    aria-label="Sunday, June 14th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    14
+                  </button>
+                </td>
+                <td
+                  aria-selected="true"
+                  class="rdp-day rdp-range_start rdp-selected"
+                  data-day="2020-06-15"
+                  data-selected="true"
+                >
+                  <button
+                    aria-label="Monday, June 15th, 2020, selected"
+                    class="rdp-day_button"
+                    tabindex="0"
+                    type="button"
+                  >
+                    15
+                  </button>
+                </td>
+                <td
+                  aria-selected="true"
+                  class="rdp-day rdp-range_middle rdp-selected"
+                  data-day="2020-06-16"
+                  data-selected="true"
+                >
+                  <button
+                    aria-label="Tuesday, June 16th, 2020, selected"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    16
+                  </button>
+                </td>
+                <td
+                  aria-selected="true"
+                  class="rdp-day rdp-range_middle rdp-selected"
+                  data-day="2020-06-17"
+                  data-selected="true"
+                >
+                  <button
+                    aria-label="Wednesday, June 17th, 2020, selected"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    17
+                  </button>
+                </td>
+                <td
+                  aria-selected="true"
+                  class="rdp-day rdp-range_middle rdp-selected"
+                  data-day="2020-06-18"
+                  data-selected="true"
+                >
+                  <button
+                    aria-label="Thursday, June 18th, 2020, selected"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    18
+                  </button>
+                </td>
+                <td
+                  aria-selected="true"
+                  class="rdp-day rdp-range_end rdp-selected"
+                  data-day="2020-06-19"
+                  data-selected="true"
+                >
+                  <button
+                    aria-label="Friday, June 19th, 2020, selected"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    19
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-20"
+                >
+                  <button
+                    aria-label="Saturday, June 20th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    20
+                  </button>
+                </td>
+              </tr>
+              <tr
+                class="rdp-week"
+              >
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-21"
+                >
+                  <button
+                    aria-label="Sunday, June 21st, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    21
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-22"
+                >
+                  <button
+                    aria-label="Monday, June 22nd, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    22
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-23"
+                >
+                  <button
+                    aria-label="Tuesday, June 23rd, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    23
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-24"
+                >
+                  <button
+                    aria-label="Wednesday, June 24th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    24
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-25"
+                >
+                  <button
+                    aria-label="Thursday, June 25th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    25
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-26"
+                >
+                  <button
+                    aria-label="Friday, June 26th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    26
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-27"
+                >
+                  <button
+                    aria-label="Saturday, June 27th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    27
+                  </button>
+                </td>
+              </tr>
+              <tr
+                class="rdp-week"
+              >
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-28"
+                >
+                  <button
+                    aria-label="Sunday, June 28th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    28
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-29"
+                >
+                  <button
+                    aria-label="Monday, June 29th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    29
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-30"
+                >
+                  <button
+                    aria-label="Tuesday, June 30th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    30
+                  </button>
+                </td>
+                <td
+                  aria-hidden="true"
+                  class="rdp-day rdp-hidden rdp-outside"
+                  data-day="2020-07-01"
+                  data-hidden="true"
+                  data-month="2020-07"
+                  data-outside="true"
+                >
+                  <button
+                    aria-label="Wednesday, July 1st, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    1
+                  </button>
+                </td>
+                <td
+                  aria-hidden="true"
+                  class="rdp-day rdp-hidden rdp-outside"
+                  data-day="2020-07-02"
+                  data-hidden="true"
+                  data-month="2020-07"
+                  data-outside="true"
+                >
+                  <button
+                    aria-label="Thursday, July 2nd, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    2
+                  </button>
+                </td>
+                <td
+                  aria-hidden="true"
+                  class="rdp-day rdp-hidden rdp-outside"
+                  data-day="2020-07-03"
+                  data-hidden="true"
+                  data-month="2020-07"
+                  data-outside="true"
+                >
+                  <button
+                    aria-label="Friday, July 3rd, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    3
+                  </button>
+                </td>
+                <td
+                  aria-hidden="true"
+                  class="rdp-day rdp-hidden rdp-outside"
+                  data-day="2020-07-04"
+                  data-hidden="true"
+                  data-month="2020-07"
+                  data-outside="true"
+                >
+                  <button
+                    aria-label="Saturday, July 4th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    4
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div
+        aria-live="polite"
+        class="rdp-footer"
+        role="status"
+      >
+        June 15th, 2020–June 19th, 2020
       </div>
     </div>
-    <div
-      aria-live="polite"
-      class="rdp-footer"
-      role="status"
+    <button
+      type="button"
     >
-      June 15th, 2020–June 19th, 2020
-    </div>
+      Reset
+    </button>
   </div>
 </div>
 `;
 
 exports[`when a day in the range is clicked when the day is clicked again when a day in the range is clicked again should match the snapshot 1`] = `
 <div>
-  <div
-    class="rdp-root"
-    data-mode="range"
-    id="test"
-  >
+  <div>
     <div
-      class="rdp-months"
+      class="rdp-root"
+      data-mode="range"
+      id="test"
     >
-      <nav
-        aria-label=""
-        class="rdp-nav"
+      <div
+        class="rdp-months"
       >
-        <button
-          aria-label="Go to the Previous Month"
-          class="rdp-button_previous"
-          type="button"
+        <nav
+          aria-label=""
+          class="rdp-nav"
         >
-          <svg
-            class="rdp-chevron"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
+          <button
+            aria-label="Go to the Previous Month"
+            class="rdp-button_previous"
+            type="button"
           >
-            <polygon
-              points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20"
-            />
-          </svg>
-        </button>
-        <button
-          aria-label="Go to the Next Month"
-          class="rdp-button_next"
-          type="button"
-        >
-          <svg
-            class="rdp-chevron"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
+            <svg
+              class="rdp-chevron"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+            >
+              <polygon
+                points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20"
+              />
+            </svg>
+          </button>
+          <button
+            aria-label="Go to the Next Month"
+            class="rdp-button_next"
+            type="button"
           >
-            <polygon
-              points="8 18.612 14.1888889 12.5 8 6.37733333 9.91111111 4.5 18 12.5 9.91111111 20.5"
-            />
-          </svg>
-        </button>
-      </nav>
-      <div
-        class="rdp-month"
-      >
+            <svg
+              class="rdp-chevron"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+            >
+              <polygon
+                points="8 18.612 14.1888889 12.5 8 6.37733333 9.91111111 4.5 18 12.5 9.91111111 20.5"
+              />
+            </svg>
+          </button>
+        </nav>
         <div
-          class="rdp-month_caption"
+          class="rdp-month"
         >
-          <span
-            aria-live="polite"
-            class="rdp-caption_label"
-            role="status"
+          <div
+            class="rdp-month_caption"
           >
-            June 2020
-          </span>
-        </div>
-        <table
-          aria-label="June 2020"
-          aria-multiselectable="true"
-          class="rdp-month_grid"
-          role="grid"
-        >
-          <thead>
-            <tr
-              class="rdp-weekdays"
+            <span
+              aria-live="polite"
+              class="rdp-caption_label"
+              role="status"
             >
-              <th
-                aria-label="Sunday"
-                class="rdp-weekday"
-                scope="col"
-              >
-                Su
-              </th>
-              <th
-                aria-label="Monday"
-                class="rdp-weekday"
-                scope="col"
-              >
-                Mo
-              </th>
-              <th
-                aria-label="Tuesday"
-                class="rdp-weekday"
-                scope="col"
-              >
-                Tu
-              </th>
-              <th
-                aria-label="Wednesday"
-                class="rdp-weekday"
-                scope="col"
-              >
-                We
-              </th>
-              <th
-                aria-label="Thursday"
-                class="rdp-weekday"
-                scope="col"
-              >
-                Th
-              </th>
-              <th
-                aria-label="Friday"
-                class="rdp-weekday"
-                scope="col"
-              >
-                Fr
-              </th>
-              <th
-                aria-label="Saturday"
-                class="rdp-weekday"
-                scope="col"
-              >
-                Sa
-              </th>
-            </tr>
-          </thead>
-          <tbody
-            class="rdp-weeks"
+              June 2020
+            </span>
+          </div>
+          <table
+            aria-label="June 2020"
+            aria-multiselectable="true"
+            class="rdp-month_grid"
+            role="grid"
           >
-            <tr
-              class="rdp-week"
-            >
-              <td
-                aria-hidden="true"
-                class="rdp-day rdp-hidden rdp-outside"
-                data-day="2020-05-31"
-                data-hidden="true"
-                data-month="2020-05"
-                data-outside="true"
-              >
-                <button
-                  aria-label="Sunday, May 31st, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  31
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-01"
-              >
-                <button
-                  aria-label="Monday, June 1st, 2020"
-                  class="rdp-day_button"
-                  tabindex="0"
-                  type="button"
-                >
-                  1
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-02"
-              >
-                <button
-                  aria-label="Tuesday, June 2nd, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  2
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-03"
-              >
-                <button
-                  aria-label="Wednesday, June 3rd, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  3
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-04"
-              >
-                <button
-                  aria-label="Thursday, June 4th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  4
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-05"
-              >
-                <button
-                  aria-label="Friday, June 5th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  5
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-06"
-              >
-                <button
-                  aria-label="Saturday, June 6th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  6
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="rdp-week"
-            >
-              <td
-                class="rdp-day"
-                data-day="2020-06-07"
-              >
-                <button
-                  aria-label="Sunday, June 7th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  7
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-08"
-              >
-                <button
-                  aria-label="Monday, June 8th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  8
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-09"
-              >
-                <button
-                  aria-label="Tuesday, June 9th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  9
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-10"
-              >
-                <button
-                  aria-label="Wednesday, June 10th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  10
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-11"
-              >
-                <button
-                  aria-label="Thursday, June 11th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  11
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-12"
-              >
-                <button
-                  aria-label="Friday, June 12th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  12
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-13"
-              >
-                <button
-                  aria-label="Saturday, June 13th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  13
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="rdp-week"
-            >
-              <td
-                class="rdp-day"
-                data-day="2020-06-14"
-              >
-                <button
-                  aria-label="Sunday, June 14th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  14
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-15"
-              >
-                <button
-                  aria-label="Monday, June 15th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  15
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-16"
-              >
-                <button
-                  aria-label="Tuesday, June 16th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  16
-                </button>
-              </td>
-              <td
-                class="rdp-day rdp-focused"
-                data-day="2020-06-17"
-                data-focused="true"
-              >
-                <button
-                  aria-label="Wednesday, June 17th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  17
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-18"
-              >
-                <button
-                  aria-label="Thursday, June 18th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  18
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-19"
-              >
-                <button
-                  aria-label="Friday, June 19th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  19
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-20"
-              >
-                <button
-                  aria-label="Saturday, June 20th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  20
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="rdp-week"
-            >
-              <td
-                class="rdp-day"
-                data-day="2020-06-21"
-              >
-                <button
-                  aria-label="Sunday, June 21st, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  21
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-22"
-              >
-                <button
-                  aria-label="Monday, June 22nd, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  22
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-23"
-              >
-                <button
-                  aria-label="Tuesday, June 23rd, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  23
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-24"
-              >
-                <button
-                  aria-label="Wednesday, June 24th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  24
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-25"
-              >
-                <button
-                  aria-label="Thursday, June 25th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  25
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-26"
-              >
-                <button
-                  aria-label="Friday, June 26th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  26
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-27"
-              >
-                <button
-                  aria-label="Saturday, June 27th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  27
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="rdp-week"
+            <thead>
+              <tr
+                class="rdp-weekdays"
+              >
+                <th
+                  aria-label="Sunday"
+                  class="rdp-weekday"
+                  scope="col"
+                >
+                  Su
+                </th>
+                <th
+                  aria-label="Monday"
+                  class="rdp-weekday"
+                  scope="col"
+                >
+                  Mo
+                </th>
+                <th
+                  aria-label="Tuesday"
+                  class="rdp-weekday"
+                  scope="col"
+                >
+                  Tu
+                </th>
+                <th
+                  aria-label="Wednesday"
+                  class="rdp-weekday"
+                  scope="col"
+                >
+                  We
+                </th>
+                <th
+                  aria-label="Thursday"
+                  class="rdp-weekday"
+                  scope="col"
+                >
+                  Th
+                </th>
+                <th
+                  aria-label="Friday"
+                  class="rdp-weekday"
+                  scope="col"
+                >
+                  Fr
+                </th>
+                <th
+                  aria-label="Saturday"
+                  class="rdp-weekday"
+                  scope="col"
+                >
+                  Sa
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="rdp-weeks"
             >
-              <td
-                class="rdp-day"
-                data-day="2020-06-28"
-              >
-                <button
-                  aria-label="Sunday, June 28th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  28
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-29"
-              >
-                <button
-                  aria-label="Monday, June 29th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  29
-                </button>
-              </td>
-              <td
-                class="rdp-day"
-                data-day="2020-06-30"
-              >
-                <button
-                  aria-label="Tuesday, June 30th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  30
-                </button>
-              </td>
-              <td
-                aria-hidden="true"
-                class="rdp-day rdp-hidden rdp-outside"
-                data-day="2020-07-01"
-                data-hidden="true"
-                data-month="2020-07"
-                data-outside="true"
-              >
-                <button
-                  aria-label="Wednesday, July 1st, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  1
-                </button>
-              </td>
-              <td
-                aria-hidden="true"
-                class="rdp-day rdp-hidden rdp-outside"
-                data-day="2020-07-02"
-                data-hidden="true"
-                data-month="2020-07"
-                data-outside="true"
-              >
-                <button
-                  aria-label="Thursday, July 2nd, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  2
-                </button>
-              </td>
-              <td
-                aria-hidden="true"
-                class="rdp-day rdp-hidden rdp-outside"
-                data-day="2020-07-03"
-                data-hidden="true"
-                data-month="2020-07"
-                data-outside="true"
-              >
-                <button
-                  aria-label="Friday, July 3rd, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  3
-                </button>
-              </td>
-              <td
-                aria-hidden="true"
-                class="rdp-day rdp-hidden rdp-outside"
-                data-day="2020-07-04"
-                data-hidden="true"
-                data-month="2020-07"
-                data-outside="true"
-              >
-                <button
-                  aria-label="Saturday, July 4th, 2020"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  4
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+              <tr
+                class="rdp-week"
+              >
+                <td
+                  aria-hidden="true"
+                  class="rdp-day rdp-hidden rdp-outside"
+                  data-day="2020-05-31"
+                  data-hidden="true"
+                  data-month="2020-05"
+                  data-outside="true"
+                >
+                  <button
+                    aria-label="Sunday, May 31st, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    31
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-01"
+                >
+                  <button
+                    aria-label="Monday, June 1st, 2020"
+                    class="rdp-day_button"
+                    tabindex="0"
+                    type="button"
+                  >
+                    1
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-02"
+                >
+                  <button
+                    aria-label="Tuesday, June 2nd, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    2
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-03"
+                >
+                  <button
+                    aria-label="Wednesday, June 3rd, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    3
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-04"
+                >
+                  <button
+                    aria-label="Thursday, June 4th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    4
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-05"
+                >
+                  <button
+                    aria-label="Friday, June 5th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    5
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-06"
+                >
+                  <button
+                    aria-label="Saturday, June 6th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    6
+                  </button>
+                </td>
+              </tr>
+              <tr
+                class="rdp-week"
+              >
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-07"
+                >
+                  <button
+                    aria-label="Sunday, June 7th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    7
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-08"
+                >
+                  <button
+                    aria-label="Monday, June 8th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    8
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-09"
+                >
+                  <button
+                    aria-label="Tuesday, June 9th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    9
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-10"
+                >
+                  <button
+                    aria-label="Wednesday, June 10th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    10
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-11"
+                >
+                  <button
+                    aria-label="Thursday, June 11th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    11
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-12"
+                >
+                  <button
+                    aria-label="Friday, June 12th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    12
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-13"
+                >
+                  <button
+                    aria-label="Saturday, June 13th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    13
+                  </button>
+                </td>
+              </tr>
+              <tr
+                class="rdp-week"
+              >
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-14"
+                >
+                  <button
+                    aria-label="Sunday, June 14th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    14
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-15"
+                >
+                  <button
+                    aria-label="Monday, June 15th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    15
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-16"
+                >
+                  <button
+                    aria-label="Tuesday, June 16th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    16
+                  </button>
+                </td>
+                <td
+                  class="rdp-day rdp-focused"
+                  data-day="2020-06-17"
+                  data-focused="true"
+                >
+                  <button
+                    aria-label="Wednesday, June 17th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    17
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-18"
+                >
+                  <button
+                    aria-label="Thursday, June 18th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    18
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-19"
+                >
+                  <button
+                    aria-label="Friday, June 19th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    19
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-20"
+                >
+                  <button
+                    aria-label="Saturday, June 20th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    20
+                  </button>
+                </td>
+              </tr>
+              <tr
+                class="rdp-week"
+              >
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-21"
+                >
+                  <button
+                    aria-label="Sunday, June 21st, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    21
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-22"
+                >
+                  <button
+                    aria-label="Monday, June 22nd, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    22
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-23"
+                >
+                  <button
+                    aria-label="Tuesday, June 23rd, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    23
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-24"
+                >
+                  <button
+                    aria-label="Wednesday, June 24th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    24
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-25"
+                >
+                  <button
+                    aria-label="Thursday, June 25th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    25
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-26"
+                >
+                  <button
+                    aria-label="Friday, June 26th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    26
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-27"
+                >
+                  <button
+                    aria-label="Saturday, June 27th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    27
+                  </button>
+                </td>
+              </tr>
+              <tr
+                class="rdp-week"
+              >
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-28"
+                >
+                  <button
+                    aria-label="Sunday, June 28th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    28
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-29"
+                >
+                  <button
+                    aria-label="Monday, June 29th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    29
+                  </button>
+                </td>
+                <td
+                  class="rdp-day"
+                  data-day="2020-06-30"
+                >
+                  <button
+                    aria-label="Tuesday, June 30th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    30
+                  </button>
+                </td>
+                <td
+                  aria-hidden="true"
+                  class="rdp-day rdp-hidden rdp-outside"
+                  data-day="2020-07-01"
+                  data-hidden="true"
+                  data-month="2020-07"
+                  data-outside="true"
+                >
+                  <button
+                    aria-label="Wednesday, July 1st, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    1
+                  </button>
+                </td>
+                <td
+                  aria-hidden="true"
+                  class="rdp-day rdp-hidden rdp-outside"
+                  data-day="2020-07-02"
+                  data-hidden="true"
+                  data-month="2020-07"
+                  data-outside="true"
+                >
+                  <button
+                    aria-label="Thursday, July 2nd, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    2
+                  </button>
+                </td>
+                <td
+                  aria-hidden="true"
+                  class="rdp-day rdp-hidden rdp-outside"
+                  data-day="2020-07-03"
+                  data-hidden="true"
+                  data-month="2020-07"
+                  data-outside="true"
+                >
+                  <button
+                    aria-label="Friday, July 3rd, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    3
+                  </button>
+                </td>
+                <td
+                  aria-hidden="true"
+                  class="rdp-day rdp-hidden rdp-outside"
+                  data-day="2020-07-04"
+                  data-hidden="true"
+                  data-month="2020-07"
+                  data-outside="true"
+                >
+                  <button
+                    aria-label="Saturday, July 4th, 2020"
+                    class="rdp-day_button"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    4
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div
+        aria-live="polite"
+        class="rdp-footer"
+        role="status"
+      >
+        Please pick the first day.
       </div>
     </div>
-    <div
-      aria-live="polite"
-      class="rdp-footer"
-      role="status"
+    <button
+      type="button"
     >
-      Please pick the first day.
-    </div>
+      Reset
+    </button>
   </div>
 </div>
 `;
diff --git a/src/formatters/formatCaption.test.ts b/src/formatters/formatCaption.test.ts
index 2606958ac..070f7a553 100644
--- a/src/formatters/formatCaption.test.ts
+++ b/src/formatters/formatCaption.test.ts
@@ -1,19 +1,27 @@
 import { es } from "date-fns/locale/es";
 
-import { dateLib } from "../lib";
+import { defaultLocale, DateLib } from "../classes/DateLib.js";
 
 import { formatCaption } from "./formatCaption";
 
 const date = new Date(2022, 10, 21);
 
 test("should return the formatted caption", () => {
-  expect(formatCaption(date, {}, dateLib)).toEqual("November 2022");
+  expect(
+    formatCaption(date, {}, new DateLib({ locale: defaultLocale }))
+  ).toEqual("November 2022");
 });
 
-describe("when a locale is passed in", () => {
+describe("when a locale is passed in through dateLib argument", () => {
   test("should format using the locale", () => {
-    expect(formatCaption(date, { locale: es }, dateLib)).toEqual(
+    expect(formatCaption(date, {}, new DateLib({ locale: es }))).toEqual(
       "noviembre 2022"
     );
   });
 });
+
+describe("when a locale is passed in from options", () => {
+  test("should format using the locale", () => {
+    expect(formatCaption(date, { locale: es })).toEqual("noviembre 2022");
+  });
+});
diff --git a/src/helpers/getDates.test.ts b/src/helpers/getDates.test.ts
index 40cd1a05b..5eca4144d 100644
--- a/src/helpers/getDates.test.ts
+++ b/src/helpers/getDates.test.ts
@@ -1,4 +1,4 @@
-import { dateLib } from "../lib";
+import { DateLib, defaultDateLib } from "../classes/DateLib";
 
 import { getDates } from "./getDates";
 
@@ -13,7 +13,7 @@ describe("when the first month and the last month are the same", () => {
           {
             fixedWeeks: false
           },
-          dateLib
+          defaultDateLib
         );
         expect(dates).toHaveLength(42);
         expect(dates[0]).toEqual(new Date(2023, 10, 26));
@@ -28,7 +28,7 @@ describe("when the first month and the last month are the same", () => {
           {
             fixedWeeks: true
           },
-          dateLib
+          defaultDateLib
         );
         expect(dates).toHaveLength(42);
         expect(dates[0]).toEqual(new Date(2023, 10, 26));
@@ -46,7 +46,7 @@ describe("when the first month and the last month are the same", () => {
           {
             fixedWeeks: false
           },
-          dateLib
+          defaultDateLib
         );
         expect(dates).toHaveLength(35);
         expect(dates[0]).toEqual(new Date(2023, 3, 30));
@@ -61,7 +61,7 @@ describe("when the first month and the last month are the same", () => {
           {
             fixedWeeks: true
           },
-          dateLib
+          defaultDateLib
         );
         expect(dates).toHaveLength(42);
         expect(dates[0]).toEqual(new Date(2023, 3, 30));
@@ -75,10 +75,8 @@ describe("when the first month and the last month are the same", () => {
       const dates = getDates(
         [month],
         undefined,
-        {
-          weekStartsOn: 1
-        },
-        dateLib
+        {},
+        new DateLib({ weekStartsOn: 1 })
       );
       expect(dates[0]).toBeMonday();
       expect(dates[0]).toEqual(new Date(2023, 4, 1));
@@ -90,7 +88,12 @@ describe("when the first month and the last month are the same", () => {
     const maxDate = new Date(2023, 4, 15);
 
     it("the last day should be the max date", () => {
-      const dates = getDates([month], maxDate, { weekStartsOn: 1 }, dateLib);
+      const dates = getDates(
+        [month],
+        maxDate,
+        {},
+        new DateLib({ weekStartsOn: 1 })
+      );
       expect(dates).toHaveLength(15);
       expect(dates[dates.length - 1]).toEqual(maxDate);
     });
@@ -98,7 +101,12 @@ describe("when the first month and the last month are the same", () => {
   describe("when using ISO weeks", () => {
     const month = new Date(2023, 4, 1);
     it("the first day should be Monday", () => {
-      const dates = getDates([month], undefined, { ISOWeek: true }, dateLib);
+      const dates = getDates(
+        [month],
+        undefined,
+        { ISOWeek: true },
+        defaultDateLib
+      );
       expect(dates[0]).toBeMonday();
       expect(dates[0]).toEqual(new Date(2023, 4, 1));
       expect(dates[dates.length - 1]).toEqual(new Date(2023, 5, 4));
@@ -114,10 +122,8 @@ describe("when the first month and the last month are different", () => {
       const dates = getDates(
         [firstMonth, lastMonth],
         undefined,
-        {
-          fixedWeeks: false
-        },
-        dateLib
+        { fixedWeeks: false },
+        defaultDateLib
       );
       expect(dates).toHaveLength(252);
       expect(dates[0]).toEqual(new Date(2023, 3, 30));
@@ -133,10 +139,8 @@ describe("when the first month and the last month are different", () => {
       const dates = getDates(
         [firstMonth, lastMonth],
         maxDate,
-        {
-          weekStartsOn: 1
-        },
-        dateLib
+        {},
+        new DateLib({ weekStartsOn: 1 })
       );
       expect(dates).toHaveLength(46);
       expect(dates[dates.length - 1]).toEqual(maxDate);
@@ -145,7 +149,12 @@ describe("when the first month and the last month are different", () => {
   describe("when using ISO weeks", () => {
     const month = new Date(2023, 4, 1);
     it("the first day should be Monday", () => {
-      const dates = getDates([month], undefined, { ISOWeek: true }, dateLib);
+      const dates = getDates(
+        [month],
+        undefined,
+        { ISOWeek: true },
+        defaultDateLib
+      );
       expect(dates[0]).toBeMonday();
       expect(dates[0]).toEqual(new Date(2023, 4, 1));
       expect(dates[dates.length - 1]).toEqual(new Date(2023, 5, 4));
diff --git a/src/helpers/getDisplayMonths.test.ts b/src/helpers/getDisplayMonths.test.ts
index 320851d3e..07635ead9 100644
--- a/src/helpers/getDisplayMonths.test.ts
+++ b/src/helpers/getDisplayMonths.test.ts
@@ -1,4 +1,4 @@
-import { dateLib } from "react-day-picker";
+import { defaultDateLib } from "../classes/DateLib";
 
 import { getDisplayMonths } from "./getDisplayMonths";
 
@@ -6,7 +6,7 @@ describe("getDisplayMonths", () => {
   it("should return the months to display in the calendar", () => {
     const firstMonth = new Date(2020, 0);
     const expectedResult = [new Date(2020, 0)];
-    const result = getDisplayMonths(firstMonth, undefined, {}, dateLib);
+    const result = getDisplayMonths(firstMonth, undefined, {}, defaultDateLib);
     expect(result).toEqual(expectedResult);
   });
 
@@ -23,7 +23,7 @@ describe("getDisplayMonths", () => {
       {
         numberOfMonths: 3
       },
-      dateLib
+      defaultDateLib
     );
     expect(result).toEqual(expectedResult);
   });
@@ -37,7 +37,7 @@ describe("getDisplayMonths", () => {
       {
         numberOfMonths: 3
       },
-      dateLib
+      defaultDateLib
     );
     expect(result).toEqual(expectedResult);
   });
diff --git a/src/helpers/getFormatters.test.ts b/src/helpers/getFormatters.test.ts
index 7fb7baf8c..373771aff 100644
--- a/src/helpers/getFormatters.test.ts
+++ b/src/helpers/getFormatters.test.ts
@@ -1,5 +1,5 @@
+import { defaultDateLib } from "../classes/DateLib";
 import * as defaultFormatters from "../formatters";
-import { dateLib } from "../lib";
 
 import { getFormatters } from "./getFormatters";
 
@@ -20,8 +20,10 @@ test("merges custom formatters with default formatters", () => {
 
 test("assigns `formatMonthCaption` to `formatCaption` if `formatCaption` is not defined", () => {
   const result = getFormatters({ formatMonthCaption: () => "customMonth" });
-  expect(result.formatCaption(new Date(), {}, dateLib)).toBe("customMonth");
-  expect(result.formatMonthCaption(new Date(), {}, dateLib)).toBe(
+  expect(result.formatCaption(new Date(), {}, defaultDateLib)).toBe(
+    "customMonth"
+  );
+  expect(result.formatMonthCaption(new Date(), {}, defaultDateLib)).toBe(
     "customMonth"
   );
 });
@@ -31,8 +33,10 @@ test("does not overwrite `formatCaption` if already defined", () => {
     formatMonthCaption: () => "customMonth",
     formatCaption: () => "customCaption"
   });
-  expect(result.formatCaption(new Date(), {}, dateLib)).toBe("customCaption");
-  expect(result.formatMonthCaption(new Date(), {}, dateLib)).toBe(
+  expect(result.formatCaption(new Date(), {}, defaultDateLib)).toBe(
+    "customCaption"
+  );
+  expect(result.formatMonthCaption(new Date(), {}, defaultDateLib)).toBe(
     "customMonth"
   );
 });
diff --git a/src/helpers/getInitialMonth.test.ts b/src/helpers/getInitialMonth.test.ts
index e208102ab..fd5dec7d3 100644
--- a/src/helpers/getInitialMonth.test.ts
+++ b/src/helpers/getInitialMonth.test.ts
@@ -1,5 +1,6 @@
 import { addMonths, isSameMonth } from "date-fns";
-import { dateLib } from "react-day-picker";
+
+import { defaultDateLib } from "../classes/DateLib";
 
 import { getInitialMonth } from "./getInitialMonth";
 
@@ -7,21 +8,21 @@ describe("when no endMonth is given", () => {
   describe("when month is in context", () => {
     const month = new Date(2010, 11, 12);
     it("return that month", () => {
-      const startMonth = getInitialMonth({ month }, dateLib);
+      const startMonth = getInitialMonth({ month }, defaultDateLib);
       expect(isSameMonth(startMonth, month)).toBe(true);
     });
   });
   describe("when defaultMonth is in context", () => {
     const defaultMonth = new Date(2010, 11, 12);
     it("return that month", () => {
-      const startMonth = getInitialMonth({ defaultMonth }, dateLib);
+      const startMonth = getInitialMonth({ defaultMonth }, defaultDateLib);
       expect(isSameMonth(startMonth, defaultMonth)).toBe(true);
     });
   });
   describe("when no month or defaultMonth", () => {
     const today = new Date(2010, 11, 12);
     it("return the today month", () => {
-      const startMonth = getInitialMonth({ today }, dateLib);
+      const startMonth = getInitialMonth({ today }, defaultDateLib);
       expect(isSameMonth(startMonth, today)).toBe(true);
     });
   });
@@ -32,7 +33,7 @@ describe("when endMonth is given", () => {
     const endMonth = addMonths(month, -2);
     describe("when the number of month is 1", () => {
       it("return the endMonth", () => {
-        const startMonth = getInitialMonth({ month, endMonth }, dateLib);
+        const startMonth = getInitialMonth({ month, endMonth }, defaultDateLib);
         expect(isSameMonth(startMonth, endMonth)).toBe(true);
       });
     });
@@ -40,7 +41,7 @@ describe("when endMonth is given", () => {
       it("return the endMonth plus the number of months", () => {
         const startMonth = getInitialMonth(
           { month, numberOfMonths: 3, endMonth },
-          dateLib
+          defaultDateLib
         );
         const expectedMonth = addMonths(endMonth, -1 * (3 - 1));
         expect(isSameMonth(startMonth, expectedMonth)).toBe(true);
diff --git a/src/helpers/getMonthOptions.test.ts b/src/helpers/getMonthOptions.test.ts
index a5ecc771a..305f00436 100644
--- a/src/helpers/getMonthOptions.test.ts
+++ b/src/helpers/getMonthOptions.test.ts
@@ -1,6 +1,6 @@
 import { type Locale, format } from "date-fns";
-import { enUS as locale } from "date-fns/locale";
-import { dateLib } from "react-day-picker";
+
+import { defaultDateLib } from "../classes/DateLib";
 
 import { getFormatters } from "./getFormatters";
 import { getMonthOptions } from "./getMonthOptions";
@@ -18,8 +18,7 @@ test("return correct dropdown options", () => {
     startMonth,
     endMonth,
     formatters,
-    locale,
-    dateLib
+    defaultDateLib
   );
 
   expect(result).toEqual([
diff --git a/src/helpers/getMonths.test.ts b/src/helpers/getMonths.test.ts
index 482fbde29..ed917f4fb 100644
--- a/src/helpers/getMonths.test.ts
+++ b/src/helpers/getMonths.test.ts
@@ -1,7 +1,7 @@
 import { DayPickerProps } from "react-day-picker";
 
 import { CalendarMonth } from "../classes";
-import { dateLib } from "../lib";
+import { DateLib } from "../classes/DateLib";
 
 import { getMonths } from "./getMonths";
 
@@ -17,20 +17,17 @@ const mockDates = [
 
 const mockProps: Pick<
   DayPickerProps,
-  | "fixedWeeks"
-  | "ISOWeek"
-  | "locale"
-  | "weekStartsOn"
-  | "reverseMonths"
-  | "firstWeekContainsDate"
+  "fixedWeeks" | "ISOWeek" | "reverseMonths"
 > = {
   fixedWeeks: false,
   ISOWeek: false,
-  locale: undefined,
+  reverseMonths: false
+};
+
+const dateLib = new DateLib({
   weekStartsOn: 0, // Sunday
-  reverseMonths: false,
   firstWeekContainsDate: 1
-};
+});
 
 it("should return the correct months without ISO weeks and reverse months", () => {
   const displayMonths = [new Date(2023, 5, 1)]; // June 2023
diff --git a/src/helpers/getNavMonth.test.ts b/src/helpers/getNavMonth.test.ts
index 850dcfa20..c086a156b 100644
--- a/src/helpers/getNavMonth.test.ts
+++ b/src/helpers/getNavMonth.test.ts
@@ -1,10 +1,10 @@
-import { dateLib } from "../lib";
+import { defaultDateLib } from "../classes/DateLib";
 
 import { getNavMonths } from "./getNavMonth";
 
 describe('when "startMonth" is not passed in', () => {
   test('"startMonth" should be undefined', () => {
-    const [navStartMonth] = getNavMonths({}, dateLib);
+    const [navStartMonth] = getNavMonths({}, defaultDateLib);
     expect(navStartMonth).toBeUndefined();
   });
 });
@@ -13,7 +13,7 @@ describe('when "startMonth" is passed in', () => {
     {
       startMonth: new Date(2021, 4, 3)
     },
-    dateLib
+    defaultDateLib
   );
   test('"startMonth" should be the start of that month', () => {
     expect(navStartMonth).toEqual(new Date(2021, 4, 1));
@@ -25,7 +25,7 @@ describe('when "startMonth" is passed in', () => {
   });
 });
 describe('when "fromYear" is passed in', () => {
-  const [navStartMonth] = getNavMonths({ fromYear: 2021 }, dateLib);
+  const [navStartMonth] = getNavMonths({ fromYear: 2021 }, defaultDateLib);
   test('"startMonth" should be the start of that year', () => {
     expect(navStartMonth).toEqual(new Date(2021, 0, 1));
   });
@@ -35,7 +35,7 @@ describe('when "endMonth" is passed in', () => {
     {
       endMonth: new Date(2021, 4, 3)
     },
-    dateLib
+    defaultDateLib
   );
   test('"endMonth" should be the end of that month', () => {
     expect(navEndMonth).toEqual(new Date(2021, 4, 31));
@@ -50,7 +50,7 @@ describe('when "endMonth" is passed in', () => {
 describe('when "toYear" is passed in', () => {
   const toYear = 2021;
   const expectedendMonth = new Date(2021, 11, 31);
-  const [, navEndMonth] = getNavMonths({ toYear }, dateLib);
+  const [, navEndMonth] = getNavMonths({ toYear }, defaultDateLib);
   test('"endMonth" should be the end of that year', () => {
     expect(navEndMonth).toEqual(expectedendMonth);
   });
@@ -63,7 +63,7 @@ describe('when "captionLayout" is dropdown', () => {
       captionLayout: "dropdown",
       today
     },
-    dateLib
+    defaultDateLib
   );
   test('"startMonth" should be 100 years ago', () => {
     expect(navStartMonth).toEqual(new Date(1924, 0, 1));
@@ -80,7 +80,7 @@ describe('when "captionLayout" is dropdown', () => {
         fromYear,
         today
       },
-      dateLib
+      defaultDateLib
     );
     test('"startMonth" should be equal to the "fromYear"', () => {
       expect(navStartMonth).toEqual(new Date(2022, 0, 1));
@@ -98,7 +98,7 @@ describe('when "captionLayout" is dropdown', () => {
         toYear,
         today
       },
-      dateLib
+      defaultDateLib
     );
     test('"startMonth" should be 100 years ago', () => {
       expect(navStartMonth).toEqual(new Date(1921, 0, 1));
diff --git a/src/helpers/getNextFocus.test.tsx b/src/helpers/getNextFocus.test.tsx
index 364133a3e..804977b2a 100644
--- a/src/helpers/getNextFocus.test.tsx
+++ b/src/helpers/getNextFocus.test.tsx
@@ -1,23 +1,22 @@
 import { CalendarDay } from "../classes";
-import { dateLib } from "../lib";
+import { defaultDateLib } from "../classes/DateLib";
 import type { DayPickerProps, MoveFocusBy, MoveFocusDir } from "../types";
 
 import { getNextFocus } from "./getNextFocus";
 
 const props: Pick<
   DayPickerProps,
-  "disabled" | "hidden" | "startMonth" | "endMonth" | "dateLib"
+  "disabled" | "hidden" | "startMonth" | "endMonth"
 > = {
   disabled: [],
-  hidden: [],
-  dateLib
+  hidden: []
 };
 
 it("should return `undefined` if `attempt` exceeds 365", () => {
   const focusedDay = new CalendarDay(
     new Date(2020, 0, 1),
     new Date(2020, 0, 1),
-    dateLib
+    defaultDateLib
   );
   const moveBy: MoveFocusBy = "day";
   const moveDir: MoveFocusDir = "after";
@@ -28,7 +27,7 @@ it("should return `undefined` if `attempt` exceeds 365", () => {
     undefined,
     undefined,
     props,
-    dateLib,
+    defaultDateLib,
     366
   );
   expect(result).toBeUndefined();
@@ -38,7 +37,7 @@ it("should return the focus date if it is not disabled or hidden", () => {
   const focusedDay = new CalendarDay(
     new Date(2020, 0, 1),
     new Date(2020, 0, 1),
-    dateLib
+    defaultDateLib
   );
   const expectedDate = new Date(2020, 0, 2);
   const result = getNextFocus(
@@ -48,7 +47,7 @@ it("should return the focus date if it is not disabled or hidden", () => {
     undefined,
     undefined,
     props,
-    dateLib
+    defaultDateLib
   );
   expect(result?.date).toEqual(expectedDate);
 });
@@ -57,7 +56,7 @@ it("should return the next focus date if it is disabled", () => {
   const focusedDay = new CalendarDay(
     new Date(2020, 0, 1),
     new Date(2020, 0, 1),
-    dateLib
+    defaultDateLib
   );
   const disabledDate = new Date(2020, 0, 2);
   const expectedDate = new Date(2020, 0, 3);
@@ -71,7 +70,7 @@ it("should return the next focus date if it is disabled", () => {
       ...props,
       disabled: [disabledDate]
     },
-    dateLib
+    defaultDateLib
   );
   expect(result?.date).toEqual(expectedDate);
 });
@@ -80,7 +79,7 @@ it("should return the next focus date if it is hidden", () => {
   const focusedDay = new CalendarDay(
     new Date(2020, 0, 1),
     new Date(2020, 0, 1),
-    dateLib
+    defaultDateLib
   );
   const hiddenDate = new Date(2020, 0, 2);
   const expectedDate = new Date(2020, 0, 3);
@@ -94,7 +93,7 @@ it("should return the next focus date if it is hidden", () => {
       ...props,
       hidden: [hiddenDate]
     },
-    dateLib
+    defaultDateLib
   );
   expect(result?.date).toEqual(expectedDate);
 });
diff --git a/src/helpers/getNextMonth.test.ts b/src/helpers/getNextMonth.test.ts
index 616b1a3f1..c6a792f1c 100644
--- a/src/helpers/getNextMonth.test.ts
+++ b/src/helpers/getNextMonth.test.ts
@@ -1,5 +1,6 @@
 import { addMonths, isSameMonth } from "date-fns";
-import { dateLib } from "react-day-picker";
+
+import { defaultDateLib } from "../classes/DateLib";
 
 import { getNextMonth } from "./getNextMonth";
 
@@ -14,7 +15,7 @@ describe("when number of months is 1", () => {
         {
           disableNavigation: true
         },
-        dateLib
+        defaultDateLib
       );
       expect(result).toBe(undefined);
     });
@@ -22,7 +23,7 @@ describe("when number of months is 1", () => {
   describe("when in the navigable range", () => {
     const endMonth = addMonths(startingMonth, 3);
     it("the next month is not undefined", () => {
-      const result = getNextMonth(startingMonth, endMonth, {}, dateLib);
+      const result = getNextMonth(startingMonth, endMonth, {}, defaultDateLib);
       const expectedNextMonth = addMonths(startingMonth, 1);
       expect(result && isSameMonth(result, expectedNextMonth)).toBeTruthy();
     });
@@ -30,7 +31,7 @@ describe("when number of months is 1", () => {
   describe("when not in the navigable range", () => {
     const endMonth = startingMonth;
     it("the next month is undefined", () => {
-      const result = getNextMonth(startingMonth, endMonth, {}, dateLib);
+      const result = getNextMonth(startingMonth, endMonth, {}, defaultDateLib);
       expect(result).toBe(undefined);
     });
   });
@@ -47,7 +48,7 @@ describe("when displaying 3 months", () => {
           numberOfMonths,
           pagedNavigation
         },
-        dateLib
+        defaultDateLib
       );
       const expectedNextMonth = addMonths(startingMonth, 3);
       expect(result && isSameMonth(result, expectedNextMonth)).toBeTruthy();
@@ -61,7 +62,7 @@ describe("when displaying 3 months", () => {
             numberOfMonths,
             pagedNavigation
           },
-          dateLib
+          defaultDateLib
         );
         expect(result).toBe(undefined);
       });
@@ -77,7 +78,7 @@ describe("when displaying 3 months", () => {
           numberOfMonths,
           pagedNavigation
         },
-        dateLib
+        defaultDateLib
       );
       const expectedNextMonth = addMonths(startingMonth, 1);
       expect(result && isSameMonth(result, expectedNextMonth)).toBeTruthy();
@@ -91,7 +92,7 @@ describe("when displaying 3 months", () => {
             numberOfMonths,
             pagedNavigation
           },
-          dateLib
+          defaultDateLib
         );
         expect(result).toBe(undefined);
       });
diff --git a/src/helpers/getPossibleFocusDate.test.ts b/src/helpers/getPossibleFocusDate.test.ts
index 9d00eb88e..fb97bbca7 100644
--- a/src/helpers/getPossibleFocusDate.test.ts
+++ b/src/helpers/getPossibleFocusDate.test.ts
@@ -11,17 +11,18 @@ import {
   endOfWeek
 } from "date-fns";
 
+import { DateLib } from "../classes/DateLib";
 import type { DayPickerProps, MoveFocusBy, MoveFocusDir } from "../types";
 
-import { dateLib } from "..";
 import { getFocusableDate } from "./getFocusableDate";
 
 const focusedDate = new Date(2023, 0, 1); // Jan 1, 2023
-const options: Pick<DayPickerProps, "locale" | "ISOWeek" | "weekStartsOn"> = {
-  locale: undefined,
-  ISOWeek: false,
-  weekStartsOn: 0 // Sunday
+const options: Pick<DayPickerProps, "ISOWeek"> = {
+  ISOWeek: false
 };
+const dateLib = new DateLib({
+  weekStartsOn: 0 // Sunday
+});
 
 const calendarStartMonth = new Date(2022, 0, 1); // Jan 1, 2022
 const calendarEndMonth = new Date(2024, 0, 1); // Jan 1, 2024
diff --git a/src/helpers/getPreviousMonth.test.ts b/src/helpers/getPreviousMonth.test.ts
index eecca21f7..69e5d17da 100644
--- a/src/helpers/getPreviousMonth.test.ts
+++ b/src/helpers/getPreviousMonth.test.ts
@@ -1,4 +1,5 @@
-import { dateLib } from "..";
+import { defaultDateLib } from "../classes/DateLib";
+
 import { getPreviousMonth } from "./getPreviousMonth";
 
 it("should return undefined if navigation is disabled", () => {
@@ -14,7 +15,7 @@ it("should return undefined if navigation is disabled", () => {
     firstDisplayedMonth,
     calendarStartMonth,
     props,
-    dateLib
+    defaultDateLib
   );
 
   expect(result).toBeUndefined();
@@ -32,7 +33,7 @@ it("should return the previous month if startMonth is not provided", () => {
     firstDisplayedMonth,
     undefined,
     props,
-    dateLib
+    defaultDateLib
   );
 
   expect(result).toEqual(new Date(2022, 0, 1)); // January 2022
@@ -50,7 +51,7 @@ it("should return undefined if the previous month is before the startMonth", ()
     firstDisplayedMonth,
     calendarStartMonth,
     props,
-    dateLib
+    defaultDateLib
   );
   expect(result).toBeUndefined();
 });
@@ -62,15 +63,14 @@ it("should return the correct previous month when pagedNavigation is true", () =
     disableNavigation: false,
     pagedNavigation: true,
     numberOfMonths: 2,
-    startMonth: new Date(2022, 0, 1),
-    dateLib
+    startMonth: new Date(2022, 0, 1)
   };
 
   const result = getPreviousMonth(
     firstDisplayedMonth,
     calendarStartMonth,
     props,
-    dateLib
+    defaultDateLib
   );
 
   expect(result).toEqual(new Date(2022, 0, 1)); // January 2022
diff --git a/src/helpers/getWeekdays.test.ts b/src/helpers/getWeekdays.test.ts
index 711da7c4c..d11ab32c4 100644
--- a/src/helpers/getWeekdays.test.ts
+++ b/src/helpers/getWeekdays.test.ts
@@ -1,6 +1,6 @@
 import { es } from "date-fns/locale/es";
 
-import { dateLib } from "../lib";
+import { DateLib, defaultDateLib } from "../classes/DateLib";
 
 import { getWeekdays } from "./getWeekdays";
 
@@ -8,7 +8,7 @@ let result: Date[];
 
 describe("when rendered without a locale", () => {
   beforeEach(() => {
-    result = getWeekdays();
+    result = getWeekdays(defaultDateLib);
   });
   test("should return 7 days", () => {
     expect(result).toHaveLength(7);
@@ -22,7 +22,7 @@ describe.each<0 | 1 | 2 | 3 | 4 | 5 | 6>([0, 1, 2, 3, 4, 5, 6])(
   "when week start on %s",
   (weekStartsOn) => {
     beforeEach(() => {
-      result = getWeekdays(es, weekStartsOn);
+      result = getWeekdays(new DateLib({ locale: es, weekStartsOn }));
     });
     test("the first date should be weekStartsOn", () => {
       expect(result[0].getDay()).toBe(weekStartsOn);
@@ -32,7 +32,11 @@ describe.each<0 | 1 | 2 | 3 | 4 | 5 | 6>([0, 1, 2, 3, 4, 5, 6])(
 
 describe("when using ISO week", () => {
   beforeEach(() => {
-    result = getWeekdays(es, 3, true, undefined, dateLib);
+    result = getWeekdays(
+      new DateLib({ locale: es, weekStartsOn: 3 }),
+      true,
+      undefined
+    );
   });
   test("should return Monday as first day", () => {
     expect(result[0]).toBeMonday();
diff --git a/src/helpers/getYearOptions.test.ts b/src/helpers/getYearOptions.test.ts
index 79d2879a3..98dc615a5 100644
--- a/src/helpers/getYearOptions.test.ts
+++ b/src/helpers/getYearOptions.test.ts
@@ -1,4 +1,4 @@
-import { dateLib } from "react-day-picker";
+import { defaultDateLib } from "../classes/DateLib";
 
 import { getFormatters } from "./getFormatters";
 import { getYearOptions } from "./getYearOptions";
@@ -13,14 +13,14 @@ test("return undefined if startMonth or endMonth is not provided", () => {
     undefined,
     new Date(2022, 11, 31),
     formatters,
-    dateLib
+    defaultDateLib
   );
   const result2 = getYearOptions(
     displayMonth,
     new Date(2022, 0, 1),
     undefined,
     formatters,
-    dateLib
+    defaultDateLib
   );
 
   expect(result1).toBeUndefined();
@@ -40,7 +40,7 @@ test("return correct dropdown options", () => {
     startMonth,
     endMonth,
     formatters,
-    dateLib
+    defaultDateLib
   );
 
   expect(result).toEqual([
diff --git a/src/selection/useMulti.test.tsx b/src/selection/useMulti.test.tsx
index c26aaa914..d24c0eec8 100644
--- a/src/selection/useMulti.test.tsx
+++ b/src/selection/useMulti.test.tsx
@@ -1,6 +1,6 @@
 import { act, renderHook } from "@/test/render";
 
-import { dateLib } from "../lib";
+import { defaultDateLib } from "../classes/DateLib";
 import { DayPickerProps } from "../types";
 
 import { useMulti } from "./useMulti";
@@ -15,7 +15,7 @@ describe("useMulti", () => {
       onSelect: mockOnSelect
     };
 
-    const { result } = renderHook(() => useMulti(props, dateLib));
+    const { result } = renderHook(() => useMulti(props, defaultDateLib));
 
     expect(result.current.selected).toBe(selectedDates);
   });
@@ -27,7 +27,7 @@ describe("useMulti", () => {
       selected: initialSelectedDates
     };
 
-    const { result } = renderHook(() => useMulti(props, dateLib));
+    const { result } = renderHook(() => useMulti(props, defaultDateLib));
 
     act(() => {
       result.current.select?.(new Date(2023, 9, 3), {}, {} as React.MouseEvent);
diff --git a/src/selection/useRange.test.tsx b/src/selection/useRange.test.tsx
index b53181333..c0341c849 100644
--- a/src/selection/useRange.test.tsx
+++ b/src/selection/useRange.test.tsx
@@ -3,7 +3,7 @@ import { DayPickerProps } from "react-day-picker/types";
 
 import { act, renderHook } from "@/test/render";
 
-import { dateLib } from "../lib";
+import { defaultDateLib } from "../classes/DateLib";
 
 import { useRange } from "./useRange";
 
@@ -16,7 +16,7 @@ describe("useRange", () => {
     const { result } = renderHook(() =>
       useRange(
         { mode: "range", selected: initiallySelected, required: false },
-        dateLib
+        defaultDateLib
       )
     );
 
@@ -31,7 +31,7 @@ describe("useRange", () => {
     const { result } = renderHook(() =>
       useRange(
         { mode: "range", selected: initiallySelected, required: false },
-        dateLib
+        defaultDateLib
       )
     );
 
@@ -54,7 +54,7 @@ describe("useRange", () => {
           required: false,
           max: 5
         },
-        dateLib
+        defaultDateLib
       )
     );
 
@@ -73,7 +73,7 @@ describe("useRange", () => {
     const { result } = renderHook(() =>
       useRange(
         { mode: "range", selected: undefined, required: false, min: 5 },
-        dateLib
+        defaultDateLib
       )
     );
 
@@ -99,7 +99,7 @@ describe("useRange", () => {
           excludeDisabled: true,
           disabled
         },
-        dateLib
+        defaultDateLib
       )
     );
 
@@ -126,7 +126,7 @@ describe("useRange", () => {
       onSelect: mockOnSelect
     };
 
-    const { result } = renderHook(() => useRange(props, dateLib));
+    const { result } = renderHook(() => useRange(props, defaultDateLib));
 
     expect(result.current.selected).toBe(selectedRange);
   });
@@ -141,7 +141,7 @@ describe("useRange", () => {
       selected: initialSelectedRange
     };
 
-    const { result } = renderHook(() => useRange(props, dateLib));
+    const { result } = renderHook(() => useRange(props, defaultDateLib));
 
     act(() => {
       result.current.select?.(new Date(2023, 9, 6), {}, {} as React.MouseEvent);
diff --git a/src/selection/useSingle.test.tsx b/src/selection/useSingle.test.tsx
index 704ff205f..00ad43b6a 100644
--- a/src/selection/useSingle.test.tsx
+++ b/src/selection/useSingle.test.tsx
@@ -1,6 +1,6 @@
 import { act, renderHook } from "@/test/render";
 
-import { dateLib } from "../lib";
+import { defaultDateLib } from "../classes/DateLib";
 import { DayPickerProps } from "../types";
 
 import { useSingle } from "./useSingle";
@@ -15,7 +15,7 @@ describe("useSingle", () => {
       onSelect: mockOnSelect
     };
 
-    const { result } = renderHook(() => useSingle(props, dateLib));
+    const { result } = renderHook(() => useSingle(props, defaultDateLib));
 
     expect(result.current.selected).toBe(selectedDate);
   });
@@ -27,7 +27,7 @@ describe("useSingle", () => {
       selected: initialSelectedDate
     };
 
-    const { result } = renderHook(() => useSingle(props, dateLib));
+    const { result } = renderHook(() => useSingle(props, defaultDateLib));
 
     act(() => {
       result.current.select?.(new Date(2023, 9, 2), {}, {} as React.MouseEvent);
diff --git a/src/utils/dateMatchModifiers.test.ts b/src/utils/dateMatchModifiers.test.ts
index d9a784c63..3039e4329 100644
--- a/src/utils/dateMatchModifiers.test.ts
+++ b/src/utils/dateMatchModifiers.test.ts
@@ -1,6 +1,6 @@
 import { addDays, subDays } from "date-fns";
 
-import { dateLib } from "../lib";
+import { defaultDateLib } from "../classes/DateLib";
 import {
   DateAfter,
   DateBefore,
@@ -15,14 +15,14 @@ const testDay = new Date();
 
 describe("when the matcher is a boolean", () => {
   const matcher = true;
-  const result = dateMatchModifiers(testDay, [matcher], dateLib);
+  const result = dateMatchModifiers(testDay, [matcher], defaultDateLib);
   test("should return the boolean", () => {
     expect(result).toBe(matcher);
   });
 });
 describe("when matching the same day", () => {
   const matcher = testDay;
-  const result = dateMatchModifiers(testDay, [matcher], dateLib);
+  const result = dateMatchModifiers(testDay, [matcher], defaultDateLib);
   test("should return true", () => {
     expect(result).toBe(true);
   });
@@ -30,7 +30,7 @@ describe("when matching the same day", () => {
 
 describe("when matching an array of dates including the day", () => {
   const matcher = [addDays(testDay, -1), testDay, addDays(testDay, 1)];
-  const result = dateMatchModifiers(testDay, [matcher], dateLib);
+  const result = dateMatchModifiers(testDay, [matcher], defaultDateLib);
   test("should return true", () => {
     expect(result).toBe(true);
   });
@@ -41,7 +41,7 @@ describe("when matching date range", () => {
     from: testDay,
     to: addDays(testDay, 1)
   };
-  const result = dateMatchModifiers(testDay, [matcher], dateLib);
+  const result = dateMatchModifiers(testDay, [matcher], defaultDateLib);
   test("should return true", () => {
     expect(result).toBe(true);
   });
@@ -51,7 +51,7 @@ describe("when matching the day of week", () => {
   const matcher: DayOfWeek = {
     dayOfWeek: [testDay.getDay()]
   };
-  const result = dateMatchModifiers(testDay, [matcher], dateLib);
+  const result = dateMatchModifiers(testDay, [matcher], defaultDateLib);
   test("should return true", () => {
     expect(result).toBe(true);
   });
@@ -62,7 +62,7 @@ describe("when matching date interval (closed)", () => {
     before: addDays(testDay, 5),
     after: subDays(testDay, 3)
   };
-  const result = dateMatchModifiers(testDay, [matcher], dateLib);
+  const result = dateMatchModifiers(testDay, [matcher], defaultDateLib);
   test("should return true for the included day", () => {
     expect(result).toBe(true);
   });
@@ -74,22 +74,30 @@ describe("when matching date interval (open)", () => {
     after: addDays(testDay, 5)
   };
   test("should return false", () => {
-    const result = dateMatchModifiers(testDay, [matcher], dateLib);
+    const result = dateMatchModifiers(testDay, [matcher], defaultDateLib);
     expect(result).toBe(false);
   });
   test("should return true for the days before", () => {
-    const result = dateMatchModifiers(subDays(testDay, 8), [matcher], dateLib);
+    const result = dateMatchModifiers(
+      subDays(testDay, 8),
+      [matcher],
+      defaultDateLib
+    );
     expect(result).toBe(true);
   });
   test("should return true for the days after", () => {
-    const result = dateMatchModifiers(addDays(testDay, 8), [matcher], dateLib);
+    const result = dateMatchModifiers(
+      addDays(testDay, 8),
+      [matcher],
+      defaultDateLib
+    );
     expect(result).toBe(true);
   });
 });
 
 describe("when matching the date after", () => {
   const matcher: DateAfter = { after: addDays(testDay, -1) };
-  const result = dateMatchModifiers(testDay, [matcher], dateLib);
+  const result = dateMatchModifiers(testDay, [matcher], defaultDateLib);
   test("should return true", () => {
     expect(result).toBe(true);
   });
@@ -97,7 +105,7 @@ describe("when matching the date after", () => {
 
 describe("when matching the date before", () => {
   const matcher: DateBefore = { before: addDays(testDay, +1) };
-  const result = dateMatchModifiers(testDay, [matcher], dateLib);
+  const result = dateMatchModifiers(testDay, [matcher], defaultDateLib);
   test("should return true", () => {
     expect(result).toBe(true);
   });
@@ -105,7 +113,7 @@ describe("when matching the date before", () => {
 
 describe("when the matcher is a function", () => {
   const matcher = () => true;
-  const result = dateMatchModifiers(testDay, [matcher], dateLib);
+  const result = dateMatchModifiers(testDay, [matcher], defaultDateLib);
   test("should return the result of the function", () => {
     expect(result).toBe(true);
   });
diff --git a/src/utils/typeguards.test.ts b/src/utils/typeguards.test.ts
index 63ec85d2d..68d2db6de 100644
--- a/src/utils/typeguards.test.ts
+++ b/src/utils/typeguards.test.ts
@@ -1,4 +1,4 @@
-import { dateLib } from "../lib/dateLib.js";
+import { defaultDateLib } from "../classes/DateLib.js";
 import type {
   DateInterval,
   DateRange,
@@ -73,11 +73,11 @@ test("isDayOfWeekType return false for invalid DayOfWeek", () => {
 
 test("isDatesArray return true for valid array of dates", () => {
   const validDatesArray: Date[] = [new Date(), new Date()];
-  expect(isDatesArray(validDatesArray, dateLib)).toBe(true);
+  expect(isDatesArray(validDatesArray, defaultDateLib)).toBe(true);
 });
 
 test("isDatesArray return false for invalid array of dates", () => {
-  expect(isDatesArray([{}, {}], dateLib)).toBe(false);
-  expect(isDatesArray(null, dateLib)).toBe(false);
-  expect(isDatesArray(undefined, dateLib)).toBe(false);
+  expect(isDatesArray([{}, {}], defaultDateLib)).toBe(false);
+  expect(isDatesArray(null, defaultDateLib)).toBe(false);
+  expect(isDatesArray(undefined, defaultDateLib)).toBe(false);
 });