Repository: gpbl/react-day-picker
Pull request #2138 (2024-05-17 22:50:38)

feat(types): deprecations and updated type names
In this PR, I'm updating the types to make them more consistent to the next version of react-day-picker.

## Breaking: Formatters

Formatters were not meant to return a `ReactNode` but a `string`. For React Nodes, a custom component should be used instead.

- Formatters: always return strings (39613f1)
- Note: this change may be reverted. Let see how other devs are reacting.

## Breaking: Renamed Previous/Next Buttons label

These will require a test update.

- "Go to next month" has been renamed to "Next Month"
- "Go to previous month" has been renamed to "Previous Month"
- "Week n. ${week}" renamed to "Week ${week}"

## Deprecated Types

The following types have been renamed. The old names have been deprecated in `components/deprecated.ts` and shouldn't be used anymore.

| Deprecated Name          | New Name                | Commit   |
| ------------------------ | ----------------------- | -------- |
| `DaySelectionMode`       | `Mode`                  | 53a1c6cf |
| `DayPickerDefaultProps`  | `PropsDefault`          | 81439e74 |
| `DayPickerSingleProps`   | `PropsSingle`           | 81439e74 |
| `DayPickerMultipleProps` | `PropsMulti`            | 81439e74 |
| `DayPickerRangeProps`    | `PropsRange`            | 81439e74 |
| `WeekNumber`             | `WeekNumberRowHeader`   | 280f5520 |
| `Row`                    | `WeekRow`               | aeff9abe |
| `HeadRow`                | `WeekdaysRow`           | b6302b1a |
| `Caption`                | `MonthCaption`          | 4d3e9677 |
| `Month`                  | `MonthGrid`             | d2b962ee |
| `Root`                   | `Calendar`              | bf335389 |
| `RootProviderProps`      | `ContextProvidersProps` | d58410fd |
| `RootProvider`           | `ContextProviders`      | f868d8a6 |

## Custom Components

Instead of adding manually the custom components, they are now exported in `custom-components.ts`. The type is now defined using the exports.

- `CustomComponents`: define type using exports (2bad3c3a)


github-actions[bot]: ## Pull request title linting :rotating_light:

In order to merge this pull request, the title of the pull request should be prefixed by one of the available types.

### Available types:

- **feat**: A new feature
- **fix**: A bug fix
- **docs**: Documentation only changes
- **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
- **refactor**: A code change that neither fixes a bug nor adds a feature
- **perf**: A code change that improves performance
- **test**: Adding missing tests or correcting existing tests
- **build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
- **ci**: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
- **chore**: Other changes that don't modify src or test files
- **revert**: Reverts a previous commit

---

<details>
<summary>Examples</summary>

```
feat(grpc): add new endpoint
refactor: combine class A and class B
ci: update pull request linter
style: change format of strings
```

</details>

:tipping_hand_person: For more examples, visit https://www.conventionalcommits.org/en/v1.0.0/#examples.

Patch:
diff --git a/package.json b/package.json
index 11d27c15b..44487e770 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-day-picker",
-  "version": "8.10.1",
+  "version": "9.0.0-alpha.0",
   "description": "Customizable Date Picker for React",
   "author": "Giampaolo Bellavite <io@gpbl.dev>",
   "homepage": "http://react-day-picker.js.org",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8a8aa5628..d3ffbf961 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -97,7 +97,7 @@ importers:
         version: 18.3.1(react@18.3.1)
       ts-jest:
         specifier: ^29.1.2
-        version: 29.1.2(@babel/core@7.23.0)(@jest/types@29.6.3)(jest@29.7.0)(typescript@5.4.5)
+        version: 29.1.2(@babel/core@7.23.6)(@jest/types@29.6.3)(jest@29.7.0)(typescript@5.4.5)
       ts-node:
         specifier: ^10.9.2
         version: 10.9.2(@types/node@20.12.12)(typescript@5.4.5)
@@ -174,6 +174,9 @@ importers:
       typedoc:
         specifier: ^0.25.13
         version: 0.25.13(typescript@5.4.5)
+      typedoc-plugin-frontmatter:
+        specifier: ^1.0.0
+        version: 1.0.0(typedoc-plugin-markdown@4.0.2)
       typedoc-plugin-markdown:
         specifier: ^4.0.2
         version: 4.0.2(typedoc@0.25.13)
@@ -12089,41 +12092,6 @@ packages:
       typescript: 5.4.5
     dev: true
 
-  /ts-jest@29.1.2(@babel/core@7.23.0)(@jest/types@29.6.3)(jest@29.7.0)(typescript@5.4.5):
-    resolution: {integrity: sha512-br6GJoH/WUX4pu7FbZXuWGKGNDuU7b8Uj77g/Sp7puZV6EXzuByl6JrECvm0MzVzSTkSHWTihsXt+5XYER5b+g==}
-    engines: {node: ^16.10.0 || ^18.0.0 || >=20.0.0}
-    hasBin: true
-    peerDependencies:
-      '@babel/core': '>=7.0.0-beta.0 <8'
-      '@jest/types': ^29.0.0
-      babel-jest: ^29.0.0
-      esbuild: '*'
-      jest: ^29.0.0
-      typescript: '>=4.3 <6'
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-      '@jest/types':
-        optional: true
-      babel-jest:
-        optional: true
-      esbuild:
-        optional: true
-    dependencies:
-      '@babel/core': 7.23.0
-      '@jest/types': 29.6.3
-      bs-logger: 0.2.6
-      fast-json-stable-stringify: 2.1.0
-      jest: 29.7.0(@types/node@20.12.12)(ts-node@10.9.2)
-      jest-util: 29.7.0
-      json5: 2.2.3
-      lodash.memoize: 4.1.2
-      make-error: 1.3.6
-      semver: 7.6.0
-      typescript: 5.4.5
-      yargs-parser: 21.1.1
-    dev: true
-
   /ts-jest@29.1.2(@babel/core@7.23.6)(@jest/types@29.6.3)(jest@29.7.0)(typescript@5.4.5):
     resolution: {integrity: sha512-br6GJoH/WUX4pu7FbZXuWGKGNDuU7b8Uj77g/Sp7puZV6EXzuByl6JrECvm0MzVzSTkSHWTihsXt+5XYER5b+g==}
     engines: {node: ^16.10.0 || ^18.0.0 || >=20.0.0}
@@ -12305,6 +12273,15 @@ packages:
       is-typedarray: 1.0.0
     dev: false
 
+  /typedoc-plugin-frontmatter@1.0.0(typedoc-plugin-markdown@4.0.2):
+    resolution: {integrity: sha512-Mqn96+RjUjPUz/42H8MOp/8eOKjE5MVIgZRFDGmSI2YuggnMZSfh5MMpvd6ykjNTpq7gV5D2iwjqLt8nYRg9rg==}
+    peerDependencies:
+      typedoc-plugin-markdown: '>=4.0.0'
+    dependencies:
+      typedoc-plugin-markdown: 4.0.2(typedoc@0.25.13)
+      yaml: 2.4.2
+    dev: true
+
   /typedoc-plugin-markdown@4.0.2(typedoc@0.25.13):
     resolution: {integrity: sha512-4MV3M+0lsmIaXuDBzeqLYemZqwTQDWQow+o8zdT9hC7KFu06GaFo2uUEbkjE6pgZA9hnkOTtzRVd0R9YJWcH8A==}
     peerDependencies:
@@ -12986,6 +12963,12 @@ packages:
     engines: {node: '>= 6'}
     dev: false
 
+  /yaml@2.4.2:
+    resolution: {integrity: sha512-B3VqDZ+JAg1nZpaEmWtTXUlBneoGx6CPM9b0TENK6aoSu5t73dItudwdgmi6tHlIZZId4dZ9skcAQ2UbcyAeVA==}
+    engines: {node: '>= 14'}
+    hasBin: true
+    dev: true
+
   /yargs-parser@21.1.1:
     resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
     engines: {node: '>=12'}
diff --git a/src/DayPicker.tsx b/src/DayPicker.tsx
index af875f8bd..b9f72909b 100644
--- a/src/DayPicker.tsx
+++ b/src/DayPicker.tsx
@@ -1,15 +1,15 @@
-import { Root } from "./components/Root";
-import { RootProvider } from "./contexts/RootProvider";
-import { DayPickerDefaultProps } from "./types/DayPickerDefault";
-import { DayPickerMultipleProps } from "./types/DayPickerMultiple";
-import { DayPickerRangeProps } from "./types/DayPickerRange";
-import { DayPickerSingleProps } from "./types/DayPickerSingle";
+import { Calendar } from "./components/Calendar";
+import { ContextProviders } from "./contexts/ContextProviders";
+import { PropsDefault } from "./types/PropsDefault";
+import { PropsMulti } from "./types/PropsMulti";
+import { PropsRange } from "./types/PropsRange";
+import { PropsSingle } from "./types/PropsSingle";
 
 export type DayPickerProps =
-  | DayPickerDefaultProps
-  | DayPickerSingleProps
-  | DayPickerMultipleProps
-  | DayPickerRangeProps;
+  | PropsDefault
+  | PropsSingle
+  | PropsMulti
+  | PropsRange;
 
 /**
  * DayPicker is a React component to create date pickers, calendars, and date
@@ -18,15 +18,11 @@ export type DayPickerProps =
  * @see http://daypicker.dev
  */
 export function DayPicker(
-  props:
-    | DayPickerDefaultProps
-    | DayPickerSingleProps
-    | DayPickerMultipleProps
-    | DayPickerRangeProps
+  props: PropsDefault | PropsSingle | PropsMulti | PropsRange
 ): JSX.Element {
   return (
-    <RootProvider {...props}>
-      <Root initialProps={props} />
-    </RootProvider>
+    <ContextProviders {...props}>
+      <Calendar initialProps={props} />
+    </ContextProviders>
   );
 }
diff --git a/src/components/Root.tsx b/src/components/Calendar.tsx
similarity index 82%
rename from src/components/Root.tsx
rename to src/components/Calendar.tsx
index a13bcc92e..9f254ff21 100644
--- a/src/components/Root.tsx
+++ b/src/components/Calendar.tsx
@@ -5,8 +5,8 @@ import { useDayPicker } from "../contexts/DayPicker";
 import { useFocusContext } from "../contexts/Focus";
 import { useNavigation } from "../contexts/Navigation";
 
-import { Month } from "./Month";
-import { Months } from "./Months";
+import { MonthGrid } from "./MonthGrid";
+import { Months as DefaultMonths } from "./Months";
 
 function isDataAttributes(attrs: DayPickerProps): attrs is {
   [key: string]: string | boolean | number | undefined;
@@ -14,15 +14,12 @@ function isDataAttributes(attrs: DayPickerProps): attrs is {
   return true;
 }
 
-export interface RootProps {
+export interface CalendarProps {
   initialProps: DayPickerProps;
 }
 
-/**
- * Render the container with the months according to the number of months to
- * display.
- */
-export function Root({ initialProps }: RootProps): JSX.Element {
+/** Render the DayPicker Calendar with navigation and the month grids. */
+export function Calendar({ initialProps }: CalendarProps): JSX.Element {
   const dayPicker = useDayPicker();
   const focusContext = useFocusContext();
   const navigation = useNavigation();
@@ -69,7 +66,7 @@ export function Root({ initialProps }: RootProps): JSX.Element {
       };
     }, {});
 
-  const MonthsComponent = initialProps.components?.Months ?? Months;
+  const Months = initialProps.components?.Months ?? DefaultMonths;
 
   return (
     <div
@@ -82,11 +79,11 @@ export function Root({ initialProps }: RootProps): JSX.Element {
       lang={initialProps.lang}
       {...dataAttributes}
     >
-      <MonthsComponent>
+      <Months>
         {navigation.displayMonths.map((month, i) => (
-          <Month key={i} displayIndex={i} displayMonth={month} />
+          <MonthGrid key={i} displayIndex={i} displayMonth={month} />
         ))}
-      </MonthsComponent>
+      </Months>
     </div>
   );
 }
diff --git a/src/components/CaptionDropdowns.tsx b/src/components/CaptionDropdowns.tsx
index abec9071b..f42c4b310 100644
--- a/src/components/CaptionDropdowns.tsx
+++ b/src/components/CaptionDropdowns.tsx
@@ -2,15 +2,15 @@ import { addMonths } from "date-fns";
 
 import { useDayPicker } from "../contexts/DayPicker";
 import { useNavigation } from "../contexts/Navigation";
-import { MonthChangeEventHandler } from "../types/EventHandlers";
+import { MonthChangeEventHandler } from "../types/events";
 
-import { CaptionProps } from "./Caption";
 import { CaptionLabel } from "./CaptionLabel";
+import { MonthCaptionProps } from "./MonthCaption";
 import { MonthsDropdown } from "./MonthsDropdown";
 import { YearsDropdown } from "./YearsDropdown";
 
 /** Render a caption with the dropdowns to navigate between months and years. */
-export function CaptionDropdowns(props: CaptionProps): JSX.Element {
+export function CaptionDropdowns(props: MonthCaptionProps): JSX.Element {
   const { classNames, styles, components } = useDayPicker();
   const { goToMonth } = useNavigation();
 
diff --git a/src/components/CaptionNavigation.tsx b/src/components/CaptionNavigation.tsx
index a077fac1a..79b00ed02 100644
--- a/src/components/CaptionNavigation.tsx
+++ b/src/components/CaptionNavigation.tsx
@@ -5,11 +5,11 @@ import { isSameMonth } from "date-fns";
 import { useDayPicker } from "../contexts/DayPicker";
 import { useNavigation } from "../contexts/Navigation";
 
-import { CaptionProps } from "./Caption";
+import { MonthCaptionProps } from "./MonthCaption";
 import { Navigation } from "./Navigation";
 
 /** Render a caption with a button-based navigation. */
-export function CaptionNavigation(props: CaptionProps): JSX.Element {
+export function CaptionNavigation(props: MonthCaptionProps): JSX.Element {
   const { numberOfMonths } = useDayPicker();
   const { previousMonth, nextMonth, goToMonth, displayMonths } =
     useNavigation();
diff --git a/src/components/Head.tsx b/src/components/Head.tsx
index fac0ad04e..2463a9bae 100644
--- a/src/components/Head.tsx
+++ b/src/components/Head.tsx
@@ -1,14 +1,19 @@
 import { useDayPicker } from "../contexts/DayPicker";
 
-import { HeadRow } from "./HeadRow";
+import { WeekdaysRow as DefaultWeekdaysRow } from "./WeekdaysRow";
 
-/** Render the table head. */
+/**
+ * Render the table head.
+ *
+ * @deprecated This component should be removed in the next major version. Use
+ *   only `WeekdaysRow`.
+ */
 export function Head(): JSX.Element {
   const { classNames, styles, components } = useDayPicker();
-  const HeadRowComponent = components?.HeadRow ?? HeadRow;
+  const WeekdaysRow = components?.WeekdaysRow ?? DefaultWeekdaysRow;
   return (
     <thead style={styles.head} className={classNames.head}>
-      <HeadRowComponent />
+      <WeekdaysRow />
     </thead>
   );
 }
diff --git a/src/components/Caption.tsx b/src/components/MonthCaption.tsx
similarity index 66%
rename from src/components/Caption.tsx
rename to src/components/MonthCaption.tsx
index 6e842f9bb..1a34cf33b 100644
--- a/src/components/Caption.tsx
+++ b/src/components/MonthCaption.tsx
@@ -1,11 +1,10 @@
 import { useDayPicker } from "../contexts/DayPicker";
 
-import { CaptionDropdowns } from "./CaptionDropdowns";
-import { CaptionLabel } from "./CaptionLabel";
-import { CaptionNavigation } from "./CaptionNavigation";
+import { CaptionDropdowns as DefaultCaptionDropdowns } from "./CaptionDropdowns";
+import { CaptionLabel as DefaultCaptionLabel } from "./CaptionLabel";
+import { CaptionNavigation as DefaultCaptionNavigation } from "./CaptionNavigation";
 
-/** Represent the props of the {@link Caption} component. */
-export interface CaptionProps {
+export interface MonthCaptionProps {
   /**
    * The ID for the heading element. Must be the same as the labelled-by in
    * Table.
@@ -32,32 +31,33 @@ export type CaptionLayout = "dropdown" | "buttons" | "dropdown-buttons";
 
 /**
  * Render the caption of a month. The caption has a different layout when
- * setting the {@link DayPickerBase.captionLayout} prop.
+ * setting the {@link PropsBase.captionLayout} prop.
  */
-export function Caption(props: CaptionProps): JSX.Element {
+export function MonthCaption(props: MonthCaptionProps): JSX.Element {
   const { classNames, disableNavigation, styles, captionLayout, components } =
     useDayPicker();
 
-  const CaptionLabelComponent = components?.CaptionLabel ?? CaptionLabel;
+  const CaptionLabel = components?.CaptionLabel ?? DefaultCaptionLabel;
 
   let caption: JSX.Element;
   if (disableNavigation) {
-    caption = (
-      <CaptionLabelComponent id={props.id} displayMonth={props.displayMonth} />
-    );
+    caption = <CaptionLabel id={props.id} displayMonth={props.displayMonth} />;
   } else if (captionLayout === "dropdown") {
     caption = (
-      <CaptionDropdowns displayMonth={props.displayMonth} id={props.id} />
+      <DefaultCaptionDropdowns
+        displayMonth={props.displayMonth}
+        id={props.id}
+      />
     );
   } else if (captionLayout === "dropdown-buttons") {
     caption = (
       <>
-        <CaptionDropdowns
+        <DefaultCaptionDropdowns
           displayMonth={props.displayMonth}
           displayIndex={props.displayIndex}
           id={props.id}
         />
-        <CaptionNavigation
+        <DefaultCaptionNavigation
           displayMonth={props.displayMonth}
           displayIndex={props.displayIndex}
           id={props.id}
@@ -67,12 +67,15 @@ export function Caption(props: CaptionProps): JSX.Element {
   } else {
     caption = (
       <>
-        <CaptionLabelComponent
+        <CaptionLabel
           id={props.id}
           displayMonth={props.displayMonth}
           displayIndex={props.displayIndex}
         />
-        <CaptionNavigation displayMonth={props.displayMonth} id={props.id} />
+        <DefaultCaptionNavigation
+          displayMonth={props.displayMonth}
+          id={props.id}
+        />
       </>
     );
   }
diff --git a/src/components/Month.tsx b/src/components/MonthGrid.tsx
similarity index 81%
rename from src/components/Month.tsx
rename to src/components/MonthGrid.tsx
index 0281e470b..1474f57fd 100644
--- a/src/components/Month.tsx
+++ b/src/components/MonthGrid.tsx
@@ -3,17 +3,19 @@ import { useId } from "react";
 import { useDayPicker } from "../contexts/DayPicker";
 import { useNavigation } from "../contexts/Navigation";
 
-import { Caption } from "./Caption";
+import { MonthCaption as DefaultMonthCaption } from "./MonthCaption";
 import { Table } from "./Table";
 
-/** The props for the {@link Month} component. */
-export interface MonthProps {
+export interface MonthGridProps {
   displayIndex: number;
   displayMonth: Date;
 }
 
-/** Render a month. */
-export function Month(props: MonthProps) {
+/**
+ * Render the grid with the month, the caption, weekday header and the weeks for
+ * the given month.
+ */
+export function MonthGrid(props: MonthGridProps) {
   const dayPicker = useDayPicker();
 
   const defaultId = useId();
@@ -50,11 +52,11 @@ export function Month(props: MonthProps) {
     style = { ...style, ...styles.caption_between };
   }
 
-  const CaptionComponent = components?.Caption ?? Caption;
+  const MonthCaption = components?.MonthCaption ?? DefaultMonthCaption;
 
   return (
     <div key={props.displayIndex} className={className.join(" ")} style={style}>
-      <CaptionComponent
+      <MonthCaption
         id={captionId}
         displayMonth={props.displayMonth}
         displayIndex={props.displayIndex}
diff --git a/src/components/MonthsDropdown.tsx b/src/components/MonthsDropdown.tsx
index be05d359d..1e79df71d 100644
--- a/src/components/MonthsDropdown.tsx
+++ b/src/components/MonthsDropdown.tsx
@@ -3,7 +3,7 @@ import { ChangeEventHandler } from "react";
 import { isSameYear, setMonth, startOfMonth } from "date-fns";
 
 import { useDayPicker } from "../contexts/DayPicker";
-import { MonthChangeEventHandler } from "../types/EventHandlers";
+import { MonthChangeEventHandler } from "../types/events";
 
 import { Dropdown } from "./Dropdown";
 
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index c94806267..445be233a 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -1,8 +1,8 @@
 import { useDayPicker } from "../contexts/DayPicker";
 
-import { Footer } from "./Footer";
-import { Head } from "./Head";
-import { Row } from "./Row";
+import { Footer as DefaultFooter } from "./Footer";
+import { Head as DefaultHead } from "./Head";
+import { WeekRow as DefaultWeekRow } from "./WeekRow";
 import { getMonthWeeks } from "./utils/getMonthWeeks";
 
 /** The props for the {@link Table} component. */
@@ -37,9 +37,9 @@ export function Table(props: TableProps): JSX.Element {
     firstWeekContainsDate
   });
 
-  const HeadComponent = components?.Head ?? Head;
-  const RowComponent = components?.Row ?? Row;
-  const FooterComponent = components?.Footer ?? Footer;
+  const Head = components?.Head ?? DefaultHead;
+  const WeekRow = components?.WeekRow ?? DefaultWeekRow;
+  const Footer = components?.Footer ?? DefaultFooter;
   return (
     <table
       id={props.id}
@@ -48,10 +48,10 @@ export function Table(props: TableProps): JSX.Element {
       role="grid"
       aria-labelledby={props["aria-labelledby"]}
     >
-      {!hideHead && <HeadComponent />}
+      {!hideHead && <Head />}
       <tbody className={classNames.tbody} style={styles.tbody}>
         {weeks.map((week) => (
-          <RowComponent
+          <WeekRow
             displayMonth={props.displayMonth}
             key={week.weekNumber}
             dates={week.dates}
@@ -59,7 +59,7 @@ export function Table(props: TableProps): JSX.Element {
           />
         ))}
       </tbody>
-      <FooterComponent displayMonth={props.displayMonth} />
+      <Footer displayMonth={props.displayMonth} />
     </table>
   );
 }
diff --git a/src/components/WeekNumber.tsx b/src/components/WeekNumberRowHeader.tsx
similarity index 78%
rename from src/components/WeekNumber.tsx
rename to src/components/WeekNumberRowHeader.tsx
index 60f2b1929..dc05d8f57 100644
--- a/src/components/WeekNumber.tsx
+++ b/src/components/WeekNumberRowHeader.tsx
@@ -4,19 +4,15 @@ import { useDayPicker } from "../contexts/DayPicker";
 
 import { Button } from "./Button";
 
-/** The props for the {@link WeekNumber} component. */
-export interface WeekNumberProps {
+export interface WeekNumberRowHeaderProps {
   /** The number of the week. */
   number: number;
   /** The dates in the week. */
   dates: Date[];
 }
 
-/**
- * Render the week number element. If `onWeekNumberClick` is passed to
- * DayPicker, it renders a button, otherwise a span element.
- */
-export function WeekNumber(props: WeekNumberProps): JSX.Element {
+/** Render the cell with the number of the week. */
+export function WeekNumberRowHeader(props: WeekNumberRowHeaderProps) {
   const { number: weekNumber, dates } = props;
   const {
     onWeekNumberClick,
diff --git a/src/components/Row.tsx b/src/components/WeekRow.tsx
similarity index 65%
rename from src/components/Row.tsx
rename to src/components/WeekRow.tsx
index d5425677b..98241e07b 100644
--- a/src/components/Row.tsx
+++ b/src/components/WeekRow.tsx
@@ -2,11 +2,10 @@ import { getUnixTime } from "date-fns";
 
 import { useDayPicker } from "../contexts/DayPicker";
 
-import { Day } from "./Day";
-import { WeekNumber } from "./WeekNumber";
+import { Day as DefaultDay } from "./Day";
+import { WeekNumberRowHeader as DefaultWeekNumberRowHeader } from "./WeekNumberRowHeader";
 
-/** The props for the {@link Row} component. */
-export interface RowProps {
+export interface WeekRowProps {
   /** The month where the row is displayed. */
   displayMonth: Date;
   /** The number of the week to render. */
@@ -16,17 +15,18 @@ export interface RowProps {
 }
 
 /** Render a row in the calendar, with the days and the week number. */
-export function Row(props: RowProps): JSX.Element {
+export function WeekRow(props: WeekRowProps): JSX.Element {
   const { styles, classNames, showWeekNumber, components } = useDayPicker();
 
-  const DayComponent = components?.Day ?? Day;
-  const WeeknumberComponent = components?.WeekNumber ?? WeekNumber;
+  const Day = components?.Day ?? DefaultDay;
+  const WeekNumberRowHeader =
+    components?.WeekNumberRowHeader ?? DefaultWeekNumberRowHeader;
 
   let weekNumberCell;
   if (showWeekNumber) {
     weekNumberCell = (
       <td className={classNames.cell} style={styles.cell}>
-        <WeeknumberComponent number={props.weekNumber} dates={props.dates} />
+        <WeekNumberRowHeader number={props.weekNumber} dates={props.dates} />
       </td>
     );
   }
@@ -41,7 +41,7 @@ export function Row(props: RowProps): JSX.Element {
           key={getUnixTime(date)}
           role="presentation"
         >
-          <DayComponent displayMonth={props.displayMonth} date={date} />
+          <Day displayMonth={props.displayMonth} date={date} />
         </td>
       ))}
     </tr>
diff --git a/src/components/HeadRow.tsx b/src/components/WeekdaysRow.tsx
similarity index 80%
rename from src/components/HeadRow.tsx
rename to src/components/WeekdaysRow.tsx
index 84b430928..b7b48b2ed 100644
--- a/src/components/HeadRow.tsx
+++ b/src/components/WeekdaysRow.tsx
@@ -2,11 +2,8 @@ import { useDayPicker } from "../contexts/DayPicker";
 
 import { getWeekdays } from "./utils/getWeekdays";
 
-/**
- * Render the HeadRow component - i.e. the table head row with the weekday
- * names.
- */
-export function HeadRow(): JSX.Element {
+/** Render the row with the weekday names. */
+export function WeekdaysRow() {
   const {
     classNames,
     styles,
@@ -23,9 +20,11 @@ export function HeadRow(): JSX.Element {
   return (
     <tr style={styles.head_row} className={classNames.head_row}>
       {showWeekNumber && (
+        // TODO: should be a custom component: `WeekdayColumnHeader`
         <td style={styles.head_cell} className={classNames.head_cell}></td>
       )}
       {weekdays.map((weekday, i) => (
+        // TODO: should be a custom component: `WeekdayColumnHeader`
         <th
           key={i}
           scope="col"
diff --git a/src/components/YearsDropdown.tsx b/src/components/YearsDropdown.tsx
index 9d6bcdf8c..3555fcfe9 100644
--- a/src/components/YearsDropdown.tsx
+++ b/src/components/YearsDropdown.tsx
@@ -3,7 +3,7 @@ import { ChangeEventHandler } from "react";
 import { setYear, startOfMonth, startOfYear } from "date-fns";
 
 import { useDayPicker } from "../contexts/DayPicker";
-import { MonthChangeEventHandler } from "../types/EventHandlers";
+import { MonthChangeEventHandler } from "../types/events";
 
 import { Dropdown } from "./Dropdown";
 
diff --git a/src/components/custom-components.ts b/src/components/custom-components.ts
new file mode 100644
index 000000000..86ac15fbc
--- /dev/null
+++ b/src/components/custom-components.ts
@@ -0,0 +1,14 @@
+export { MonthCaption } from "./MonthCaption";
+export { CaptionLabel } from "./CaptionLabel";
+export { Day } from "./Day";
+export { DayContent } from "./DayContent";
+export { Dropdown } from "./Dropdown";
+export { Footer } from "./Footer";
+export { Head } from "./Head";
+export { WeekdaysRow } from "./WeekdaysRow";
+export { IconDropdown } from "./IconDropdown";
+export { IconRight } from "./IconRight";
+export { IconLeft } from "./IconLeft";
+export { Months } from "./Months";
+export { WeekRow } from "./WeekRow";
+export { WeekNumberRowHeader } from "./WeekNumberRowHeader";
diff --git a/src/contexts/RootProvider.tsx b/src/contexts/ContextProviders.tsx
similarity index 54%
rename from src/contexts/RootProvider.tsx
rename to src/contexts/ContextProviders.tsx
index 714c28d3b..37551b5fb 100644
--- a/src/contexts/RootProvider.tsx
+++ b/src/contexts/ContextProviders.tsx
@@ -1,31 +1,28 @@
-import { ReactNode } from "react";
+import { PropsWithChildren } from "react";
 
-import { ModifiersProvider } from "../contexts/Modifiers/ModifiersContext";
-import { DayPickerDefaultProps } from "../types/DayPickerDefault";
-import { DayPickerMultipleProps } from "../types/DayPickerMultiple";
-import { DayPickerRangeProps } from "../types/DayPickerRange";
-import { DayPickerSingleProps } from "../types/DayPickerSingle";
+import { PropsDefault } from "../types/PropsDefault";
+import { PropsMulti } from "../types/PropsMulti";
+import { PropsRange } from "../types/PropsRange";
+import { PropsSingle } from "../types/PropsSingle";
 
 import { DayPickerProvider } from "./DayPicker";
 import { FocusProvider } from "./Focus";
+import { ModifiersProvider } from "./Modifiers/ModifiersContext";
 import { NavigationProvider } from "./Navigation";
 import { SelectMultipleProvider } from "./SelectMultiple";
 import { SelectRangeProvider } from "./SelectRange";
 import { SelectSingleProvider } from "./SelectSingle";
 
-type RootContextProps =
-  | Partial<DayPickerDefaultProps>
-  | Partial<DayPickerSingleProps>
-  | Partial<DayPickerMultipleProps>
-  | Partial<DayPickerRangeProps>;
+export type ContextProvidersProps =
+  | Partial<PropsDefault>
+  | Partial<PropsSingle>
+  | Partial<PropsMulti>
+  | Partial<PropsRange>;
 
-/** The props of {@link RootProvider}. */
-export type RootContext = RootContextProps & {
-  children?: ReactNode;
-};
-
-/** Provide the value for all the context providers. */
-export function RootProvider(props: RootContext): JSX.Element {
+/** Provide the value for all the contexts. */
+export function ContextProviders(
+  props: PropsWithChildren<ContextProvidersProps>
+) {
   const { children, ...initialProps } = props;
 
   return (
diff --git a/src/contexts/DayPicker/DayPickerContext.tsx b/src/contexts/DayPicker/DayPickerContext.tsx
index 266cd8e54..de4c7b818 100644
--- a/src/contexts/DayPicker/DayPickerContext.tsx
+++ b/src/contexts/DayPicker/DayPickerContext.tsx
@@ -3,24 +3,15 @@ import { createContext, ReactNode, useContext } from "react";
 import { Locale } from "date-fns";
 
 import { DayPickerProps } from "../../DayPicker";
-import { CaptionLayout } from "../../components/Caption";
-import { DayPickerBase, DaySelectionMode } from "../../types/DayPickerBase";
-import {
-  DayPickerMultipleProps,
-  isDayPickerMultiple
-} from "../../types/DayPickerMultiple";
-import {
-  DayPickerRangeProps,
-  isDayPickerRange
-} from "../../types/DayPickerRange";
-import {
-  DayPickerSingleProps,
-  isDayPickerSingle
-} from "../../types/DayPickerSingle";
+import { CaptionLayout } from "../../components/MonthCaption";
 import { Formatters } from "../../types/Formatters";
 import { Labels } from "../../types/Labels";
 import { Matcher } from "../../types/Matchers";
 import { DayModifiers, ModifiersClassNames } from "../../types/Modifiers";
+import { PropsBase, Mode } from "../../types/PropsBase";
+import { PropsMulti, isDayPickerMultiple } from "../../types/PropsMulti";
+import { PropsRange, isDayPickerRange } from "../../types/PropsRange";
+import { PropsSingle, isDayPickerSingle } from "../../types/PropsSingle";
 import { ClassNames, Styles } from "../../types/Styles";
 
 import { getDefaultContextValues } from "./defaultContextValues";
@@ -30,12 +21,12 @@ import { parseFromToProps } from "./utils";
  * The value of the {@link DayPickerContext} extends the props from DayPicker
  * with default and cleaned up values.
  */
-export interface DayPickerContextValue extends DayPickerBase {
-  mode: DaySelectionMode;
+export interface DayPickerContextValue extends PropsBase {
+  mode: Mode;
   onSelect?:
-    | DayPickerSingleProps["onSelect"]
-    | DayPickerMultipleProps["onSelect"]
-    | DayPickerRangeProps["onSelect"];
+    | PropsSingle["onSelect"]
+    | PropsMulti["onSelect"]
+    | PropsRange["onSelect"];
   required?: boolean;
   min?: number;
   max?: number;
diff --git a/src/contexts/DayPicker/defaultContextValues.ts b/src/contexts/DayPicker/defaultContextValues.ts
index 06abf0641..d95ad30e0 100644
--- a/src/contexts/DayPicker/defaultContextValues.ts
+++ b/src/contexts/DayPicker/defaultContextValues.ts
@@ -1,6 +1,6 @@
 import { enUS } from "date-fns/locale";
 
-import { CaptionLayout } from "../../components/Caption";
+import { CaptionLayout } from "../../components/MonthCaption";
 import { DayPickerContextValue } from "../../contexts/DayPicker";
 
 import { defaultClassNames } from "./defaultClassNames";
diff --git a/src/contexts/DayPicker/labels/index.ts b/src/contexts/DayPicker/labels/index.ts
index f3d9b98af..9dcc75dae 100644
--- a/src/contexts/DayPicker/labels/index.ts
+++ b/src/contexts/DayPicker/labels/index.ts
@@ -4,4 +4,5 @@ export * from "./labelNext";
 export * from "./labelPrevious";
 export * from "./labelWeekday";
 export * from "./labelWeekNumber";
+export * from "./labelWeekNumberHeader";
 export * from "./labelYearDropdown";
diff --git a/src/contexts/DayPicker/labels/labelDay.ts b/src/contexts/DayPicker/labels/labelDay.ts
index 5c9e69345..6259d0c4b 100644
--- a/src/contexts/DayPicker/labels/labelDay.ts
+++ b/src/contexts/DayPicker/labels/labelDay.ts
@@ -1,8 +1,12 @@
 import { format } from "date-fns";
 
-import { DayLabel } from "../../../types/Labels";
+import { ActiveModifiers } from "../../../types/Modifiers";
 
-/** The default ARIA label for the day button. */
-export const labelDay: DayLabel = (day, activeModifiers, options): string => {
-  return format(day, "do MMMM (EEEE)", options);
-};
+/** Return the default ARIA label for the day button. */
+export function labelDay(
+  date: Date,
+  activeModifiers: ActiveModifiers,
+  options?: Parameters<typeof format>[2]
+) {
+  return format(date, "do MMMM (EEEE)", options);
+}
diff --git a/src/contexts/DayPicker/labels/labelMonthDropdown.ts b/src/contexts/DayPicker/labels/labelMonthDropdown.ts
index 02b7bd33f..381e7b2c3 100644
--- a/src/contexts/DayPicker/labels/labelMonthDropdown.ts
+++ b/src/contexts/DayPicker/labels/labelMonthDropdown.ts
@@ -1,4 +1,4 @@
-/** The default ARIA label for the WeekNumber element. */
+/** The default ARIA label for the WeekNumberRowHeader element. */
 export const labelMonthDropdown = (): string => {
   return "Month: ";
 };
diff --git a/src/contexts/DayPicker/labels/labelNext.ts b/src/contexts/DayPicker/labels/labelNext.ts
index bdd538e6f..3b0fdba28 100644
--- a/src/contexts/DayPicker/labels/labelNext.ts
+++ b/src/contexts/DayPicker/labels/labelNext.ts
@@ -1,6 +1,12 @@
-import { NavButtonLabel } from "../../../types/Labels";
+import type { format } from "date-fns/format";
 
-/** The default ARIA label for next month button in navigation */
-export const labelNext: NavButtonLabel = (): string => {
-  return "Go to next month";
-};
+/** Return the default ARIA label for next month button. */
+export function labelNext(
+  /** Undefined where there's no next month no navigate to. */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  month?: Date | undefined,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  options?: Parameters<typeof format>[2]
+) {
+  return "Next Month";
+}
diff --git a/src/contexts/DayPicker/labels/labelPrevious.ts b/src/contexts/DayPicker/labels/labelPrevious.ts
index b9e2b5d62..d3a65a180 100644
--- a/src/contexts/DayPicker/labels/labelPrevious.ts
+++ b/src/contexts/DayPicker/labels/labelPrevious.ts
@@ -1,6 +1,12 @@
-import { NavButtonLabel } from "../../../types/Labels";
+import type { format } from "date-fns/format";
 
-/** The default ARIA label for previous month button in navigation */
-export const labelPrevious: NavButtonLabel = (): string => {
-  return "Go to previous month";
-};
+/** Return the default ARIA label for next month button. */
+export function labelPrevious(
+  /** Undefined where there's no previous month no navigate to. */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  month: Date | undefined,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  options?: Parameters<typeof format>[2]
+) {
+  return "Previous Month";
+}
diff --git a/src/contexts/DayPicker/labels/labelWeekNumber.ts b/src/contexts/DayPicker/labels/labelWeekNumber.ts
index 6d3ae9c0b..498ebc569 100644
--- a/src/contexts/DayPicker/labels/labelWeekNumber.ts
+++ b/src/contexts/DayPicker/labels/labelWeekNumber.ts
@@ -1,6 +1,10 @@
-import { WeekNumberLabel } from "../../../types/Labels";
+import type { format } from "date-fns/format";
 
-/** The default ARIA label for the WeekNumber element. */
-export const labelWeekNumber: WeekNumberLabel = (n): string => {
-  return `Week n. ${n}`;
-};
+/** Return the default ARIA label for the week number element. */
+export function labelWeekNumber(
+  weekNumber: number,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  options?: Parameters<typeof format>[2]
+): string {
+  return `Week ${weekNumber}`;
+}
diff --git a/src/contexts/DayPicker/labels/labelWeekNumberHeader.ts b/src/contexts/DayPicker/labels/labelWeekNumberHeader.ts
new file mode 100644
index 000000000..3330a505c
--- /dev/null
+++ b/src/contexts/DayPicker/labels/labelWeekNumberHeader.ts
@@ -0,0 +1,13 @@
+import type { format } from "date-fns/format";
+
+/**
+ * Return the default ARIA label for the week number header element.
+ *
+ * @since 9.0.0
+ */
+export function labelWeekNumberHeader(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  options?: Parameters<typeof format>[2]
+): string {
+  return "Week Number";
+}
diff --git a/src/contexts/DayPicker/labels/labelWeekday.ts b/src/contexts/DayPicker/labels/labelWeekday.ts
index e4ae9036f..035e29957 100644
--- a/src/contexts/DayPicker/labels/labelWeekday.ts
+++ b/src/contexts/DayPicker/labels/labelWeekday.ts
@@ -1,8 +1,9 @@
-import { format } from "date-fns";
+import { format } from "date-fns/format";
 
-import { WeekdayLabel } from "../../../types/Labels";
-
-/** The default ARIA label for the Weekday element. */
-export const labelWeekday: WeekdayLabel = (day, options): string => {
-  return format(day, "cccc", options);
-};
+/** Return he default ARIA label for the Weekday element. */
+export function labelWeekday(
+  date: Date,
+  options?: Parameters<typeof format>[2]
+): string {
+  return format(date, "cccc", options);
+}
diff --git a/src/contexts/DayPicker/labels/labelYearDropdown.ts b/src/contexts/DayPicker/labels/labelYearDropdown.ts
index 3aa648980..1661ba7e5 100644
--- a/src/contexts/DayPicker/labels/labelYearDropdown.ts
+++ b/src/contexts/DayPicker/labels/labelYearDropdown.ts
@@ -1,4 +1,4 @@
-/** The default ARIA label for the WeekNumber element. */
+/** The default ARIA label for the WeekNumberRowHeader element. */
 export const labelYearDropdown = (): string => {
   return "Year: ";
 };
diff --git a/src/contexts/DayPicker/utils/parseFromToProps.ts b/src/contexts/DayPicker/utils/parseFromToProps.ts
index 402b7c0ce..346619d44 100644
--- a/src/contexts/DayPicker/utils/parseFromToProps.ts
+++ b/src/contexts/DayPicker/utils/parseFromToProps.ts
@@ -1,6 +1,6 @@
 import { endOfMonth, startOfDay, startOfMonth } from "date-fns";
 
-import { DayPickerBase } from "../../../types/DayPickerBase";
+import { PropsBase } from "../../../types/PropsBase";
 
 /**
  * Return the `fromDate` and `toDate` prop values values parsing the DayPicker
@@ -8,7 +8,7 @@ import { DayPickerBase } from "../../../types/DayPickerBase";
  */
 export function parseFromToProps(
   props: Pick<
-    DayPickerBase,
+    PropsBase,
     "fromYear" | "toYear" | "fromDate" | "toDate" | "fromMonth" | "toMonth"
   >
 ): { fromDate: Date | undefined; toDate: Date | undefined } {
diff --git a/src/contexts/Modifiers/utils/getInternalModifiers.ts b/src/contexts/Modifiers/utils/getInternalModifiers.ts
index 9d94fb27d..93f3d7d42 100644
--- a/src/contexts/Modifiers/utils/getInternalModifiers.ts
+++ b/src/contexts/Modifiers/utils/getInternalModifiers.ts
@@ -1,9 +1,9 @@
 import { DayPickerContextValue } from "../../../contexts/DayPicker";
 import { SelectMultipleContextValue } from "../../../contexts/SelectMultiple";
 import { SelectRangeContextValue } from "../../../contexts/SelectRange";
-import { isDayPickerMultiple } from "../../../types/DayPickerMultiple";
-import { isDayPickerRange } from "../../../types/DayPickerRange";
 import { InternalModifier, InternalModifiers } from "../../../types/Modifiers";
+import { isDayPickerMultiple } from "../../../types/PropsMulti";
+import { isDayPickerRange } from "../../../types/PropsRange";
 
 import { matcherToArray } from "./matcherToArray";
 
diff --git a/src/contexts/SelectMultiple/SelectMultipleContext.tsx b/src/contexts/SelectMultiple/SelectMultipleContext.tsx
index bcc002be3..05ff3ac4b 100644
--- a/src/contexts/SelectMultiple/SelectMultipleContext.tsx
+++ b/src/contexts/SelectMultiple/SelectMultipleContext.tsx
@@ -2,13 +2,10 @@ import { createContext, ReactNode, useContext } from "react";
 
 import { isSameDay } from "date-fns";
 
-import { DayPickerBase } from "../../types/DayPickerBase";
-import {
-  DayPickerMultipleProps,
-  isDayPickerMultiple
-} from "../../types/DayPickerMultiple";
-import { DayClickEventHandler } from "../../types/EventHandlers";
 import { InternalModifier, Modifiers } from "../../types/Modifiers";
+import { PropsBase } from "../../types/PropsBase";
+import { PropsMulti, isDayPickerMultiple } from "../../types/PropsMulti";
+import { DayClickEventHandler } from "../../types/events";
 
 /** Represent the modifiers that are changed by the multiple selection. */
 export type SelectMultipleModifiers = Pick<
@@ -37,7 +34,7 @@ export const SelectMultipleContext = createContext<
 >(undefined);
 
 export type SelectMultipleProviderProps = {
-  initialProps: DayPickerBase;
+  initialProps: PropsBase;
   children?: ReactNode;
 };
 
@@ -68,7 +65,7 @@ export function SelectMultipleProvider(
 
 /** @private */
 export interface SelectMultipleProviderInternalProps {
-  initialProps: DayPickerMultipleProps;
+  initialProps: PropsMulti;
   children?: ReactNode;
 }
 
diff --git a/src/contexts/SelectRange/SelectRangeContext.tsx b/src/contexts/SelectRange/SelectRangeContext.tsx
index 4b840b6b1..ce9350168 100644
--- a/src/contexts/SelectRange/SelectRangeContext.tsx
+++ b/src/contexts/SelectRange/SelectRangeContext.tsx
@@ -7,14 +7,11 @@ import {
   subDays
 } from "date-fns";
 
-import { DayPickerBase } from "../../types/DayPickerBase";
-import {
-  DayPickerRangeProps,
-  isDayPickerRange
-} from "../../types/DayPickerRange";
-import { DayClickEventHandler } from "../../types/EventHandlers";
 import { DateRange } from "../../types/Matchers";
 import { InternalModifier, Modifiers } from "../../types/Modifiers";
+import { PropsBase } from "../../types/PropsBase";
+import { PropsRange, isDayPickerRange } from "../../types/PropsRange";
+import { DayClickEventHandler } from "../../types/events";
 
 import { addToRange } from "./utils/addToRange";
 
@@ -48,7 +45,7 @@ export const SelectRangeContext = createContext<
 >(undefined);
 
 export interface SelectRangeProviderProps {
-  initialProps: DayPickerBase;
+  initialProps: PropsBase;
   children?: ReactNode;
 }
 
@@ -82,7 +79,7 @@ export function SelectRangeProvider(
 
 /** @private */
 export interface SelectRangeProviderInternalProps {
-  initialProps: DayPickerRangeProps;
+  initialProps: PropsRange;
   children?: ReactNode;
 }
 
diff --git a/src/contexts/SelectSingle/SelectSingleContext.tsx b/src/contexts/SelectSingle/SelectSingleContext.tsx
index f67f5b9c7..17c4ca296 100644
--- a/src/contexts/SelectSingle/SelectSingleContext.tsx
+++ b/src/contexts/SelectSingle/SelectSingleContext.tsx
@@ -1,11 +1,8 @@
 import { createContext, ReactNode, useContext } from "react";
 
-import { DayPickerBase } from "../../types/DayPickerBase";
-import {
-  DayPickerSingleProps,
-  isDayPickerSingle
-} from "../../types/DayPickerSingle";
-import { DayClickEventHandler } from "../../types/EventHandlers";
+import { PropsBase } from "../../types/PropsBase";
+import { PropsSingle, isDayPickerSingle } from "../../types/PropsSingle";
+import { DayClickEventHandler } from "../../types/events";
 
 /** Represents the value of a {@link SelectSingleContext}. */
 export interface SelectSingleContextValue {
@@ -26,7 +23,7 @@ export const SelectSingleContext = createContext<
 >(undefined);
 
 export interface SelectSingleProviderProps {
-  initialProps: DayPickerBase;
+  initialProps: PropsBase;
   children?: ReactNode;
 }
 
@@ -54,7 +51,7 @@ export function SelectSingleProvider(
 
 /** @private */
 export interface SelectSingleProviderInternal {
-  initialProps: DayPickerSingleProps;
+  initialProps: PropsSingle;
   children?: ReactNode;
 }
 
diff --git a/src/hooks/useDayEventHandlers/useDayEventHandlers.tsx b/src/hooks/useDayEventHandlers/useDayEventHandlers.tsx
index edca31258..3431fe2dd 100644
--- a/src/hooks/useDayEventHandlers/useDayEventHandlers.tsx
+++ b/src/hooks/useDayEventHandlers/useDayEventHandlers.tsx
@@ -12,10 +12,10 @@ import { useFocusContext } from "../../contexts/Focus";
 import { useSelectMultiple } from "../../contexts/SelectMultiple";
 import { useSelectRange } from "../../contexts/SelectRange";
 import { useSelectSingle } from "../../contexts/SelectSingle";
-import { isDayPickerMultiple } from "../../types/DayPickerMultiple";
-import { isDayPickerRange } from "../../types/DayPickerRange";
-import { isDayPickerSingle } from "../../types/DayPickerSingle";
 import { ActiveModifiers } from "../../types/Modifiers";
+import { isDayPickerMultiple } from "../../types/PropsMulti";
+import { isDayPickerRange } from "../../types/PropsRange";
+import { isDayPickerSingle } from "../../types/PropsSingle";
 
 export type EventName =
   | "onClick"
diff --git a/src/hooks/useInput/index.ts b/src/hooks/useInput/index.ts
deleted file mode 100644
index a550f966d..000000000
--- a/src/hooks/useInput/index.ts
+++ /dev/null
@@ -1,1 +0,0 @@
-export * from "./useInput";
diff --git a/src/hooks/useInput/useInput.ts b/src/hooks/useInput/useInput.ts
deleted file mode 100644
index 52fb7fcef..000000000
--- a/src/hooks/useInput/useInput.ts
+++ /dev/null
@@ -1,183 +0,0 @@
-import {
-  ChangeEventHandler,
-  FocusEventHandler,
-  InputHTMLAttributes,
-  useState
-} from "react";
-
-import { differenceInCalendarDays, format as _format, parse } from "date-fns";
-import { enUS } from "date-fns/locale";
-
-import { parseFromToProps } from "../../contexts/DayPicker/utils";
-import { DayPickerBase } from "../../types/DayPickerBase";
-import { DayPickerSingleProps } from "../../types/DayPickerSingle";
-import {
-  DayClickEventHandler,
-  MonthChangeEventHandler
-} from "../../types/EventHandlers";
-
-import { isValidDate } from "./utils/isValidDate";
-
-/** The props to attach to the input field when using {@link useInput}. */
-export type InputProps = Pick<
-  InputHTMLAttributes<HTMLInputElement>,
-  "onBlur" | "onChange" | "onFocus" | "value" | "placeholder"
->;
-
-/** The props to attach to the DayPicker component when using {@link useInput}. */
-export type InputDayPickerProps = Pick<
-  DayPickerSingleProps,
-  | "fromDate"
-  | "toDate"
-  | "locale"
-  | "month"
-  | "onDayClick"
-  | "onMonthChange"
-  | "selected"
-  | "today"
->;
-
-export interface UseInputOptions
-  extends Pick<
-    DayPickerBase,
-    | "locale"
-    | "fromDate"
-    | "toDate"
-    | "fromMonth"
-    | "toMonth"
-    | "fromYear"
-    | "toYear"
-    | "today"
-  > {
-  /** The initially selected date */
-  defaultSelected?: Date;
-  /**
-   * The format string for formatting the input field. See
-   * https://date-fns.org/docs/format for a list of format strings.
-   *
-   * @defaultValue PP
-   */
-  format?: string;
-  /** Make the selection required. */
-  required?: boolean;
-}
-
-/** Represent the value returned by {@link useInput}. */
-export interface UseInputValue {
-  /** The props to pass to a DayPicker component. */
-  dayPickerProps: InputDayPickerProps;
-  /** The props to pass to an input field. */
-  inputProps: InputProps;
-  /** A function to reset to the initial state. */
-  reset: () => void;
-  /** A function to set the selected day. */
-  setSelected: (day: Date | undefined) => void;
-}
-
-/** Return props and setters for binding an input field to DayPicker. */
-export function useInput(options: UseInputOptions = {}): UseInputValue {
-  const {
-    locale = enUS,
-    required,
-    format = "PP",
-    defaultSelected,
-    today = new Date()
-  } = options;
-  const { fromDate, toDate } = parseFromToProps(options);
-
-  // Shortcut to the DateFns functions
-  const parseValue = (value: string) => parse(value, format, today, { locale });
-
-  // Initialize states
-  const [month, setMonth] = useState(defaultSelected ?? today);
-  const [selectedDay, setSelectedDay] = useState(defaultSelected);
-  const defaultInputValue = defaultSelected
-    ? _format(defaultSelected, format, { locale })
-    : "";
-  const [inputValue, setInputValue] = useState(defaultInputValue);
-
-  const reset = () => {
-    setSelectedDay(defaultSelected);
-    setMonth(defaultSelected ?? today);
-    setInputValue(defaultInputValue ?? "");
-  };
-
-  const setSelected = (date: Date | undefined) => {
-    setSelectedDay(date);
-    setMonth(date ?? today);
-    setInputValue(date ? _format(date, format, { locale }) : "");
-  };
-
-  const handleDayClick: DayClickEventHandler = (day, { selected }) => {
-    if (!required && selected) {
-      setSelectedDay(undefined);
-      setInputValue("");
-      return;
-    }
-    setSelectedDay(day);
-    setInputValue(day ? _format(day, format, { locale }) : "");
-  };
-
-  const handleMonthChange: MonthChangeEventHandler = (month) => {
-    setMonth(month);
-  };
-
-  // When changing the input field, save its value in state and check if the
-  // string is a valid date. If it is a valid day, set it as selected and update
-  // the calendar’s month.
-  const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setInputValue(e.target.value);
-    const day = parseValue(e.target.value);
-    const isBefore = fromDate && differenceInCalendarDays(fromDate, day) > 0;
-    const isAfter = toDate && differenceInCalendarDays(day, toDate) > 0;
-    if (!isValidDate(day) || isBefore || isAfter) {
-      setSelectedDay(undefined);
-      return;
-    }
-    setSelectedDay(day);
-    setMonth(day);
-  };
-
-  // Special case for _required_ fields: on blur, if the value of the input is not
-  // a valid date, reset the calendar and the input value.
-  const handleBlur: FocusEventHandler<HTMLInputElement> = (e) => {
-    const day = parseValue(e.target.value);
-    if (!isValidDate(day)) {
-      reset();
-    }
-  };
-
-  // When focusing, make sure DayPicker visualizes the month of the date in the
-  // input field.
-  const handleFocus: FocusEventHandler<HTMLInputElement> = (e) => {
-    if (!e.target.value) {
-      reset();
-      return;
-    }
-    const day = parseValue(e.target.value);
-    if (isValidDate(day)) {
-      setMonth(day);
-    }
-  };
-
-  const dayPickerProps: InputDayPickerProps = {
-    month: month,
-    onDayClick: handleDayClick,
-    onMonthChange: handleMonthChange,
-    selected: selectedDay,
-    locale,
-    fromDate,
-    toDate,
-    today
-  };
-
-  const inputProps: InputProps = {
-    onBlur: handleBlur,
-    onChange: handleChange,
-    onFocus: handleFocus,
-    value: inputValue,
-    placeholder: _format(new Date(), format, { locale })
-  };
-
-  return { dayPickerProps, inputProps, reset, setSelected };
-}
diff --git a/src/hooks/useInput/utils/isValidDate.tsx b/src/hooks/useInput/utils/isValidDate.tsx
deleted file mode 100644
index c861c71c3..000000000
--- a/src/hooks/useInput/utils/isValidDate.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-/** @private */
-export function isValidDate(day: Date): boolean {
-  return !isNaN(day.getTime());
-}
diff --git a/src/hooks/useSelectedDays/useSelectedDays.ts b/src/hooks/useSelectedDays/useSelectedDays.ts
index 5b08ff50c..e4ec691c1 100644
--- a/src/hooks/useSelectedDays/useSelectedDays.ts
+++ b/src/hooks/useSelectedDays/useSelectedDays.ts
@@ -2,10 +2,10 @@ import { useDayPicker } from "../../contexts/DayPicker";
 import { useSelectMultiple } from "../../contexts/SelectMultiple";
 import { useSelectRange } from "../../contexts/SelectRange";
 import { useSelectSingle } from "../../contexts/SelectSingle";
-import { isDayPickerMultiple } from "../../types/DayPickerMultiple";
-import { isDayPickerRange } from "../../types/DayPickerRange";
-import { isDayPickerSingle } from "../../types/DayPickerSingle";
 import { DateRange } from "../../types/Matchers";
+import { isDayPickerMultiple } from "../../types/PropsMulti";
+import { isDayPickerRange } from "../../types/PropsRange";
+import { isDayPickerSingle } from "../../types/PropsSingle";
 
 export type SelectedDays = Date | Date[] | DateRange | undefined;
 
diff --git a/src/index.ts b/src/index.ts
index 2f82abfe2..41411157c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,7 +1,7 @@
 export * from "./DayPicker";
 
 export * from "./components/Button";
-export * from "./components/Caption";
+export * from "./components/MonthCaption";
 export * from "./components/CaptionDropdowns";
 export * from "./components/CaptionLabel";
 export * from "./components/CaptionNavigation";
@@ -10,37 +10,38 @@ export * from "./components/DayContent";
 export * from "./components/Dropdown";
 export * from "./components/Footer";
 export * from "./components/Head";
-export * from "./components/HeadRow";
+export * from "./components/WeekdaysRow";
 export * from "./components/IconDropdown";
 export * from "./components/IconRight";
 export * from "./components/IconLeft";
 export * from "./components/Months";
-export * from "./components/Row";
-export * from "./components/WeekNumber";
+export * from "./components/WeekRow";
+export * from "./components/WeekNumberRowHeader";
 
-export * from "./hooks/useInput";
 export * from "./hooks/useDayRender";
 export * from "./hooks/useActiveModifiers";
 
 export * from "./contexts/DayPicker";
 export * from "./contexts/Focus";
 export * from "./contexts/Navigation";
-export * from "./contexts/RootProvider";
+export * from "./contexts/ContextProviders";
 export * from "./contexts/SelectMultiple";
 export * from "./contexts/SelectRange";
 export * from "./contexts/SelectSingle";
 
-export * from "./types/DayPickerBase";
-export * from "./types/DayPickerDefault";
-export * from "./types/DayPickerMultiple";
-export * from "./types/DayPickerRange";
-export * from "./types/DayPickerSingle";
-export * from "./types/EventHandlers";
+export * from "./types/PropsBase";
+export * from "./types/PropsDefault";
+export * from "./types/PropsMulti";
+export * from "./types/PropsRange";
+export * from "./types/PropsSingle";
+export * from "./types/events";
 export * from "./types/Formatters";
 export * from "./types/Labels";
 export * from "./types/Matchers";
 export * from "./types/Modifiers";
 export * from "./types/Styles";
 
+export * from "./types/deprecated";
+
 export * from "./contexts/Modifiers/utils/isMatch";
 export * from "./contexts/SelectRange/utils/addToRange";
diff --git a/src/types/Formatters.ts b/src/types/Formatters.ts
index caf801f32..98f785dbb 100644
--- a/src/types/Formatters.ts
+++ b/src/types/Formatters.ts
@@ -1,5 +1,3 @@
-import { ReactNode } from "react";
-
 import { Locale } from "date-fns";
 
 /** Represents a function to format a date. */
@@ -8,7 +6,7 @@ export type DateFormatter = (
   options?: {
     locale?: Locale;
   }
-) => ReactNode;
+) => string;
 
 /** Represent a map of formatters used to render localized content. */
 export type Formatters = {
@@ -32,4 +30,4 @@ export type WeekNumberFormatter = (
   options?: {
     locale?: Locale;
   }
-) => ReactNode;
+) => string;
diff --git a/src/types/Labels.ts b/src/types/Labels.ts
index 109ff4f32..944ac9aa9 100644
--- a/src/types/Labels.ts
+++ b/src/types/Labels.ts
@@ -1,54 +1,46 @@
-import { Locale } from "date-fns";
-
-import { ActiveModifiers } from "./Modifiers";
+import {
+  labelDay,
+  labelMonthDropdown,
+  labelNext,
+  labelPrevious,
+  labelWeekNumber,
+  labelWeekNumberHeader,
+  labelWeekday,
+  labelYearDropdown
+} from "../contexts/DayPicker/labels";
 
 /** Map of functions to translate ARIA labels for the relative elements. */
 export type Labels = {
-  labelMonthDropdown: () => string;
-  labelYearDropdown: () => string;
-  labelNext: NavButtonLabel;
-  labelPrevious: NavButtonLabel;
+  /** Return the label for the month dropdown. */
+  labelMonthDropdown: typeof labelMonthDropdown;
+  /** Return the label for the year dropdown. */
+  labelYearDropdown: typeof labelYearDropdown;
+  /** Return the label for the next month button. */
+  labelNext: typeof labelNext;
+  /** Return the label for the previous month button. */
+  labelPrevious: typeof labelPrevious;
+  /** Return the label for the day cell. */
+  labelDay: typeof labelDay;
+  /** Return the label for the weekday. */
+  labelWeekday: typeof labelWeekday;
+  /** Return the label for the week number. */
+  labelWeekNumber: typeof labelWeekNumber;
   /**
-   * @deprecated This label is not used anymore and this function will be
-   *   removed in the future.
+   * Return the label for the column of the week number.
+   *
+   * @since 9.0.0
    */
-  labelDay: DayLabel;
-  labelWeekday: WeekdayLabel;
-  labelWeekNumber: WeekNumberLabel;
+  labelWeekNumberHeader: typeof labelWeekNumberHeader;
 };
 
-/** Return the ARIA label for the {@link Day} component. */
-export type DayLabel = (
-  day: Date,
-  activeModifiers: ActiveModifiers,
-  options?: {
-    locale?: Locale;
-  }
-) => string;
+/** @deprecated Use `typeof labelDay` instead. */
+export type DayLabel = typeof labelDay;
 
-/**
- * Return the ARIA label for the "next month" / "prev month" buttons in the
- * navigation.
- */
-export type NavButtonLabel = (
-  month?: Date,
-  options?: {
-    locale?: Locale;
-  }
-) => string;
+/** @deprecated Use `typeof labelNext` or `typeof labelPrevious` instead. */
+export type NavButtonLabel = typeof labelNext;
 
-/** Return the ARIA label for the Head component. */
-export type WeekdayLabel = (
-  day: Date,
-  options?: {
-    locale?: Locale;
-  }
-) => string;
+/** @deprecated Use `typeof labelWeekday` instead. */
+export type WeekdayLabel = typeof labelWeekday;
 
-/** Return the ARIA label of the week number. */
-export type WeekNumberLabel = (
-  n: number,
-  options?: {
-    locale?: Locale;
-  }
-) => string;
+/** @deprecated Use `typeof labelWeekNumber` instead. */
+export type WeekNumberLabel = typeof labelWeekNumber;
diff --git a/src/types/Matchers.ts b/src/types/Matchers.ts
index 679b2cb2d..3458c84a4 100644
--- a/src/types/Matchers.ts
+++ b/src/types/Matchers.ts
@@ -1,8 +1,8 @@
 /**
  * A value or a function that matches a specific day.
  *
- * Matchers are passed to DayPicker via {@link DayPickerBase.disabled},
- * {@link DayPickerBase.hidden]] or [[DayPickerProps.selected} and are used to
+ * Matchers are passed to DayPicker via {@link PropsBase.disabled},
+ * {@link PropsBase.hidden]] or [[DayPickerProps.selected} and are used to
  * determine if a day should get a {@link Modifier}.
  *
  * Matchers can be of different types:
diff --git a/src/types/Modifiers.ts b/src/types/Modifiers.ts
index d72a3f48e..c5813cd8d 100644
--- a/src/types/Modifiers.ts
+++ b/src/types/Modifiers.ts
@@ -70,7 +70,7 @@ export type ModifiersStyles = Record<Modifier, CSSProperties> &
 export type ModifiersClassNames = Record<Modifier, string> &
   Partial<Record<InternalModifier, string>>;
 
-/** The custom modifiers passed to the {@link DayPickerBase.modifiers}. */
+/** The custom modifiers passed to the {@link PropsBase.modifiers}. */
 export type DayModifiers = Record<Modifier, Matcher | Matcher[]>;
 
 /**
diff --git a/src/types/DayPickerBase.ts b/src/types/PropsBase.ts
similarity index 75%
rename from src/types/DayPickerBase.ts
rename to src/types/PropsBase.ts
index 303a33037..fe5728842 100644
--- a/src/types/DayPickerBase.ts
+++ b/src/types/PropsBase.ts
@@ -2,16 +2,18 @@ import { CSSProperties, ReactNode } from "react";
 
 import { Locale } from "date-fns";
 
-import { CaptionLayout, CaptionProps } from "../components/Caption";
-import { CaptionLabelProps } from "../components/CaptionLabel";
-import { DayProps } from "../components/Day";
-import { DayContentProps } from "../components/DayContent";
-import { DropdownProps } from "../components/Dropdown";
-import { FooterProps } from "../components/Footer";
-import { MonthsProps } from "../components/Months";
-import { RowProps } from "../components/Row";
-import { WeekNumberProps } from "../components/WeekNumber";
+import { CaptionLayout } from "../components/MonthCaption";
+import * as components from "../components/custom-components";
 
+import { Formatters } from "./Formatters";
+import { Labels } from "./Labels";
+import { Matcher } from "./Matchers";
+import {
+  DayModifiers,
+  ModifiersClassNames,
+  ModifiersStyles
+} from "./Modifiers";
+import { ClassNames, Styles } from "./Styles";
 import {
   DayClickEventHandler,
   DayFocusEventHandler,
@@ -21,16 +23,7 @@ import {
   DayTouchEventHandler,
   MonthChangeEventHandler,
   WeekNumberClickEventHandler
-} from "./EventHandlers";
-import { Formatters } from "./Formatters";
-import { Labels } from "./Labels";
-import { Matcher } from "./Matchers";
-import {
-  DayModifiers,
-  ModifiersClassNames,
-  ModifiersStyles
-} from "./Modifiers";
-import { ClassNames, StyledComponent, Styles } from "./Styles";
+} from "./events";
 
 /**
  * Selection modes supported by DayPicker.
@@ -39,15 +32,15 @@ import { ClassNames, StyledComponent, Styles } from "./Styles";
  * - `multiple`: allow selecting multiple days.
  * - `range`: use DayPicker to select a range of days
  * - `default`: disable the built-in selection behavior. Customize what is
- *   selected by using {@link DayPickerBase.onDayClick}.
+ *   selected by using {@link PropsBase.onDayClick}.
  */
-export type DaySelectionMode = "single" | "multiple" | "range" | "default";
+export type Mode = "single" | "multiple" | "range" | "default";
 
 /**
  * The base props for the {@link DayPicker} component and the
  * {@link DayPickerContext}.
  */
-export interface DayPickerBase {
+export interface PropsBase {
   /**
    * The CSS class to add to the container element. To change the name of the
    * class instead, use `classNames.root`.
@@ -87,8 +80,8 @@ export interface DayPickerBase {
   /**
    * The month displayed in the calendar.
    *
-   * As opposed to {@link DayPickerBase.defaultMonth}, use this prop with
-   * {@link DayPickerBase.onMonthChange} to change the month programmatically.
+   * As opposed to {@link PropsBase.defaultMonth}, use this prop with
+   * {@link PropsBase.onMonthChange} to change the month programmatically.
    */
   month?: Date;
   /** Event fired when the user navigates between months. */
@@ -315,47 +308,7 @@ export interface DayPickerBase {
   onDayTouchStart?: DayTouchEventHandler;
 }
 
-/**
- * Map of the components that can be changed using the `components` prop.
- *
- * @see https://github.com/gpbl/react-day-picker/tree/main/src/components
- */
-export interface CustomComponents {
-  /** The component for the caption element. */
-  Caption?: (props: CaptionProps) => JSX.Element | null;
-  /** The component for the caption element. */
-  CaptionLabel?: (props: CaptionLabelProps) => JSX.Element | null;
-  /**
-   * The component for the day element.
-   *
-   * Each `Day` in DayPicker should render one of the following, according to
-   * the return value of {@link useDayRender}.
-   *
-   * - An empty `Fragment`, to render if `isHidden` is true
-   * - A `button` element, when the day is interactive, e.g. is selectable
-   * - A `div` or a `span` element, when the day is not interactive
-   */
-  Day?: (props: DayProps) => JSX.Element | null;
-  /** The component for the content of the day element. */
-  DayContent?: (props: DayContentProps) => JSX.Element | null;
-  /** The component for the drop-down elements. */
-  Dropdown?: (props: DropdownProps) => JSX.Element | null;
-  /** The component for the table footer. */
-  Footer?: (props: FooterProps) => JSX.Element | null;
-  /** The component for the table’s head. */
-  Head?: () => JSX.Element | null;
-  /** The component for the table’s head row. */
-  HeadRow?: () => JSX.Element | null;
-  /** The component for the small icon in the drop-downs. */
-  IconDropdown?: (props: StyledComponent) => JSX.Element | null;
-  /** The arrow right icon (used for the Navigation buttons). */
-  IconRight?: (props: StyledComponent) => JSX.Element | null;
-  /** The arrow left icon (used for the Navigation buttons). */
-  IconLeft?: (props: StyledComponent) => JSX.Element | null;
-  /** The component wrapping the month grids. */
-  Months?: (props: MonthsProps) => JSX.Element | null;
-  /** The component for the table rows. */
-  Row?: (props: RowProps) => JSX.Element | null;
-  /** The component for the week number in the table rows. */
-  WeekNumber?: (props: WeekNumberProps) => JSX.Element | null;
-}
+/** The components that can be changed using the `components` prop. */
+export type CustomComponents = {
+  [key in keyof typeof components]?: (typeof components)[key];
+};
diff --git a/src/types/DayPickerDefault.ts b/src/types/PropsDefault.ts
similarity index 58%
rename from src/types/DayPickerDefault.ts
rename to src/types/PropsDefault.ts
index 9e18beadb..91a31ff43 100644
--- a/src/types/DayPickerDefault.ts
+++ b/src/types/PropsDefault.ts
@@ -1,18 +1,18 @@
 import { DayPickerProps } from "../DayPicker";
 
-import { DayPickerBase } from "./DayPickerBase";
+import { PropsBase } from "./PropsBase";
 
 /**
  * The props for the {@link DayPicker} component when using `mode="default"` or
  * `undefined`.
  */
-export interface DayPickerDefaultProps extends DayPickerBase {
+export interface PropsDefault extends PropsBase {
   mode?: undefined | "default";
 }
 
-/** Returns true when the props are of type {@link DayPickerDefaultProps}. */
+/** Returns true when the props are of type {@link PropsDefault}. */
 export function isDayPickerDefault(
   props: DayPickerProps
-): props is DayPickerDefaultProps {
+): props is PropsDefault {
   return props.mode === undefined || props.mode === "default";
 }
diff --git a/src/types/DayPickerMultiple.ts b/src/types/PropsMulti.ts
similarity index 69%
rename from src/types/DayPickerMultiple.ts
rename to src/types/PropsMulti.ts
index 3b361baea..000741d8e 100644
--- a/src/types/DayPickerMultiple.ts
+++ b/src/types/PropsMulti.ts
@@ -1,11 +1,11 @@
 import { DayPickerProps } from "../DayPicker";
 import { DayPickerContextValue } from "../contexts/DayPicker";
 
-import { DayPickerBase } from "./DayPickerBase";
-import { SelectMultipleEventHandler } from "./EventHandlers";
+import { PropsBase } from "./PropsBase";
+import { SelectMultipleEventHandler } from "./events";
 
 /** The props for the {@link DayPicker} component when using `mode="multiple"`. */
-export interface DayPickerMultipleProps extends DayPickerBase {
+export interface PropsMulti extends PropsBase {
   mode: "multiple";
   /** The selected days. */
   selected?: Date[] | undefined;
@@ -17,9 +17,9 @@ export interface DayPickerMultipleProps extends DayPickerBase {
   max?: number;
 }
 
-/** Returns true when the props are of type {@link DayPickerMultipleProps}. */
+/** Returns true when the props are of type {@link PropsMulti}. */
 export function isDayPickerMultiple(
   props: DayPickerProps | DayPickerContextValue
-): props is DayPickerMultipleProps {
+): props is PropsMulti {
   return props.mode === "multiple";
 }
diff --git a/src/types/DayPickerRange.ts b/src/types/PropsRange.ts
similarity index 71%
rename from src/types/DayPickerRange.ts
rename to src/types/PropsRange.ts
index ec15d93e2..7a17b1844 100644
--- a/src/types/DayPickerRange.ts
+++ b/src/types/PropsRange.ts
@@ -1,12 +1,12 @@
 import { DayPickerProps } from "../DayPicker";
 import { DayPickerContextValue } from "../contexts/DayPicker";
 
-import { DayPickerBase } from "./DayPickerBase";
-import { SelectRangeEventHandler } from "./EventHandlers";
 import { DateRange } from "./Matchers";
+import { PropsBase } from "./PropsBase";
+import { SelectRangeEventHandler } from "./events";
 
 /** The props for the {@link DayPicker} component when using `mode="range"`. */
-export interface DayPickerRangeProps extends DayPickerBase {
+export interface PropsRange extends PropsBase {
   mode: "range";
   /** The selected range of days. */
   selected?: DateRange | undefined;
@@ -18,9 +18,9 @@ export interface DayPickerRangeProps extends DayPickerBase {
   max?: number;
 }
 
-/** Returns true when the props are of type {@link DayPickerRangeProps}. */
+/** Returns true when the props are of type {@link PropsRange}. */
 export function isDayPickerRange(
   props: DayPickerProps | DayPickerContextValue
-): props is DayPickerRangeProps {
+): props is PropsRange {
   return props.mode === "range";
 }
diff --git a/src/types/DayPickerSingle.ts b/src/types/PropsSingle.ts
similarity index 65%
rename from src/types/DayPickerSingle.ts
rename to src/types/PropsSingle.ts
index e06c8df19..dcfc776ed 100644
--- a/src/types/DayPickerSingle.ts
+++ b/src/types/PropsSingle.ts
@@ -1,11 +1,11 @@
 import { DayPickerProps } from "../DayPicker";
 import { DayPickerContextValue } from "../contexts/DayPicker";
 
-import { DayPickerBase } from "./DayPickerBase";
-import { SelectSingleEventHandler } from "./EventHandlers";
+import { PropsBase } from "./PropsBase";
+import { SelectSingleEventHandler } from "./events";
 
 /** The props for the {@link DayPicker} component when using `mode="single"`. */
-export interface DayPickerSingleProps extends DayPickerBase {
+export interface PropsSingle extends PropsBase {
   mode: "single";
   /** The selected day. */
   selected?: Date | undefined;
@@ -15,9 +15,9 @@ export interface DayPickerSingleProps extends DayPickerBase {
   required?: boolean;
 }
 
-/** Returns true when the props are of type {@link DayPickerSingleProps}. */
+/** Returns true when the props are of type {@link PropsSingle}. */
 export function isDayPickerSingle(
   props: DayPickerProps | DayPickerContextValue
-): props is DayPickerSingleProps {
+): props is PropsSingle {
   return props.mode === "single";
 }
diff --git a/src/types/deprecated.ts b/src/types/deprecated.ts
new file mode 100644
index 000000000..dfc28c7fc
--- /dev/null
+++ b/src/types/deprecated.ts
@@ -0,0 +1,143 @@
+import { Calendar, CalendarProps } from "../components/Calendar";
+import { MonthCaption, MonthCaptionProps } from "../components/MonthCaption";
+import { MonthGrid, MonthGridProps } from "../components/MonthGrid";
+import {
+  WeekNumberRowHeader,
+  WeekNumberRowHeaderProps
+} from "../components/WeekNumberRowHeader";
+import { WeekRow, WeekRowProps } from "../components/WeekRow";
+import { WeekdaysRow } from "../components/WeekdaysRow";
+import {
+  ContextProviders,
+  type ContextProvidersProps
+} from "../contexts/ContextProviders";
+
+import { Mode } from "./PropsBase";
+import { PropsDefault } from "./PropsDefault";
+import { PropsMulti } from "./PropsMulti";
+import { PropsRange } from "./PropsRange";
+import { PropsSingle } from "./PropsSingle";
+
+/**
+ * @deprecated This type has been renamed. Use {@link ContextProviders} instead.
+ *   (deprecated since v9.0.0)
+ * @see https://react-day-picker.js.org/upgrading#v9
+ */
+export const RootProvider = ContextProviders;
+
+/**
+ * @deprecated This type has been renamed. Use {@link ContextProvidersProps}
+ *   instead. (deprecated since v9.0.0)
+ * @see https://react-day-picker.js.org/upgrading#v9
+ */
+export type RootProviderProps = ContextProvidersProps;
+
+/**
+ * @deprecated This type has been renamed. Use {@link Calendar} instead.
+ *   (deprecated since v9.0.0)
+ * @see https://react-day-picker.js.org/upgrading#v9
+ */
+export const Root = Calendar;
+
+/**
+ * @deprecated This type has been renamed. Use {@link CalendarProps} instead.
+ *   (deprecated since v9.0.0)
+ * @see https://react-day-picker.js.org/upgrading#v9
+ */
+export type RootProps = CalendarProps;
+
+/**
+ * @deprecated This type has been renamed. Use {@link MonthGrid} instead.
+ *   (deprecated since v9.0.0)
+ * @see https://react-day-picker.js.org/upgrading#v9
+ */
+export const Month = MonthGrid;
+
+/**
+ * @deprecated This type has been renamed. Use {@link MonthGridProps} instead.
+ *   (deprecated since v9.0.0)
+ * @see https://react-day-picker.js.org/upgrading#v9
+ */
+export type MonthProps = MonthGridProps;
+
+/**
+ * @deprecated This type has been renamed. Use {@link MonthCaption} instead.
+ *   (deprecated since v9.0.0)
+ * @see https://react-day-picker.js.org/upgrading#v9
+ */
+export const Caption = MonthCaption;
+
+/**
+ * @deprecated This type has been renamed. Use {@link MonthCaptionProps} instead.
+ *   (deprecated since v9.0.0)
+ * @see https://react-day-picker.js.org/upgrading#v9
+ */
+export type CaptionProps = MonthCaptionProps;
+
+/**
+ * @deprecated This type has been renamed. Use {@link WeekdaysRow} instead.
+ *   (deprecated since v9.0.0)
+ * @see https://react-day-picker.js.org/upgrading#v9
+ */
+export const HeadRow = WeekdaysRow;
+
+/**
+ * @deprecated This type has been renamed. Use {@link WeekRow} instead. (This
+ *   type has been deprecated sinc) v9
+ * @see https://react-day-picker.js.org/upgrading#v9
+ */
+export const Row = WeekRow;
+
+/**
+ * @deprecated This type has been renamed. Use {@link WeekRowProps} instead.
+ *   (deprecated since v9.0.0)
+ * @see https://react-day-picker.js.org/upgrading#v9
+ */
+export type RowProps = WeekRowProps;
+
+/**
+ * @deprecated This type has been renamed. Use {@link WeekNumberRowHeader}
+ *   instead. (deprecated since v9.0.0)
+ * @see https://react-day-picker.js.org/upgrading#v9
+ */
+export const WeekNumber = WeekNumberRowHeader;
+
+/**
+ * @deprecated This type has been renamed. Use {@link WeekNumberRowHeaderProps}
+ *   instead. (deprecated since v9.0.0)
+ * @see https://react-day-picker.js.org/upgrading#v9
+ */
+export type WeekNumberProps = WeekNumberRowHeaderProps;
+
+/**
+ * @deprecated This type has been renamed. Use {@link PropsSingle} instead.
+ *   (deprecated since v9.0.0)
+ * @see https://react-day-picker.js.org/upgrading#v9
+ */
+export type DayPickerSingleProps = PropsSingle;
+/**
+ * @deprecated This type has been renamed. Use {@link PropsMulti} instead.
+ *   (deprecated since v9.0.0)
+ * @see https://react-day-picker.js.org/upgrading#v9
+ */
+export type DayPickerMultipleProps = PropsMulti;
+/**
+ * @deprecated This type has been renamed. Use {@link PropsRange} instead.
+ *   (deprecated since v9.0.0)
+ * @see https://react-day-picker.js.org/upgrading#v9
+ */
+export type DayPickerRangeProps = PropsRange;
+
+/**
+ * @deprecated This type has been renamed. Use {@link PropsDefault} instead.
+ *   (deprecated since v9.0.0)
+ * @see https://react-day-picker.js.org/upgrading#v9
+ */
+export type DayPickerDefaultProps = PropsDefault;
+
+/**
+ * @deprecated This type has been renamed. Use {@link Mode} instead. (deprecated
+ *   since v9.0.0)
+ * @see https://react-day-picker.js.org/upgrading#v9
+ */
+export type DaySelectionMode = Mode;
diff --git a/src/types/EventHandlers.ts b/src/types/events.ts
similarity index 71%
rename from src/types/EventHandlers.ts
rename to src/types/events.ts
index 0595b4bca..9dd0faf1c 100644
--- a/src/types/EventHandlers.ts
+++ b/src/types/events.ts
@@ -1,48 +1,38 @@
-import {
-  FocusEvent,
-  KeyboardEvent,
-  MouseEvent,
-  PointerEvent,
-  TouchEvent
-} from "react";
+import { MouseEvent, TouchEvent } from "react";
 
 import { DateRange } from "./Matchers";
 import { ActiveModifiers } from "./Modifiers";
 
-/** The event handler when a day is clicked. */
-export type DayClickEventHandler = (
-  day: Date,
-  activeModifiers: ActiveModifiers,
-  e: MouseEvent
+export type DayEventHandler<T> = (
+  /** The date that has triggered the event. */
+  date: Date,
+  /** The modifiers belonging to the date. */
+  modifiers: ActiveModifiers,
+  /** The DOM event that triggered this event. */
+  e: T
 ) => void;
 
+/**
+ * The event handler when a day is clicked.
+ *
+ * @deprecated This type has been renamed. Use {@link DayMouseEventHandler}
+ *   instead. (deprecated since v9.0.0)
+ */
+export type DayClickEventHandler = DayEventHandler<React.MouseEvent>;
+
 /** The event handler when a day is focused. */
-export type DayFocusEventHandler = (
-  day: Date,
-  activeModifiers: ActiveModifiers,
-  e: FocusEvent | KeyboardEvent
-) => void;
+export type DayFocusEventHandler = DayEventHandler<
+  React.FocusEvent | React.KeyboardEvent
+>;
 
 /** The event handler when a day gets a keyboard event. */
-export type DayKeyboardEventHandler = (
-  day: Date,
-  activeModifiers: ActiveModifiers,
-  e: KeyboardEvent
-) => void;
+export type DayKeyboardEventHandler = DayEventHandler<React.KeyboardEvent>;
 
 /** The event handler when a day gets a mouse event. */
-export type DayMouseEventHandler = (
-  day: Date,
-  activeModifiers: ActiveModifiers,
-  e: MouseEvent
-) => void;
+export type DayMouseEventHandler = DayEventHandler<React.MouseEvent>;
 
 /** The event handler when a day gets a pointer event. */
-export type DayPointerEventHandler = (
-  day: Date,
-  activeModifiers: ActiveModifiers,
-  e: PointerEvent
-) => void;
+export type DayPointerEventHandler = DayEventHandler<React.PointerEvent>;
 
 /** The event handler when a month is changed in the calendar. */
 export type MonthChangeEventHandler = (month: Date) => void;
diff --git a/website/docs/README.md b/website/docs/README.md
index c59a98396..82e6829e7 100644
--- a/website/docs/README.md
+++ b/website/docs/README.md
@@ -9,7 +9,7 @@ slug: /
 DayPicker is a [React](https://react.dev) component to create date pickers, calendars, and date inputs for web applications.
 
 ```bash npm2yarn
-npm install react-day-picker date-fns
+npm install react-day-picker@next date-fns
 ```
 
 ## Features
diff --git a/website/docs/advanced-guides/custom-components.mdx b/website/docs/advanced-guides/custom-components.mdx
index c82082fd7..b4ba3acfd 100644
--- a/website/docs/advanced-guides/custom-components.mdx
+++ b/website/docs/advanced-guides/custom-components.mdx
@@ -45,7 +45,7 @@ import { CustomDayContent } from "./CustomDayContent";
 
 ## Supported Components
 
-The customizable components are defined in the [`CustomComponents`](/api/interfaces/CustomComponents) interface. Pass any of these to the `components` prop.
+The customizable components are defined by [`CustomComponents`](../api/type-aliases/CustomComponents). Pass any of these to the `components` prop.
 
 :::warning
 
@@ -53,22 +53,22 @@ The custom components are not part of the stable API yet, and may change in futu
 
 :::
 
-| Component                                        | Description                                                                                  |
-| ------------------------------------------------ | -------------------------------------------------------------------------------------------- |
-| [`Caption`](/api/functions/Caption.md)           | The caption for each month.                                                                  |
-| [`CaptionLabel`](/api/functions/CaptionLabel.md) | The caption for each month.                                                                  |
-| [`Day`](/api/functions/Day.md)                   | The day cell.                                                                                |
-| [`DayContent`](/api/functions/DayContent.md)     | The content of the day cell.                                                                 |
-| [`Dropdown`](/api/functions/Dropdown.md)         | The [dropdown](../using-daypicker/customization.mdx#dropdown-navigation) used for navigation |
-| [`Footer`](/api/functions/Footer.md)             | The footer element.                                                                          |
-| [`Head`](/api/functions/Head.md)                 | The head of the grid.                                                                        |
-| [`HeadRow`](/api/functions/HeadRow.md)           | The row with the week names.                                                                 |
-| [`IconDropdown`](/api/functions/IconDropdown.md) | The icon used for the dropdown.                                                              |
-| [`IconLeft`](/api/functions/IconLeft.md)         | The icon used for the previous month navigation.                                             |
-| [`IconRight`](/api/functions/IconRight.md)       | The icon used for the next month navigation.                                                 |
-| [`Months`](/api/functions/Months.md)             | Wrapper for the Months grid.                                                                 |
-| [`Row`](/api/functions/Row.md)                   | Render the grid row.                                                                         |
-| [`WeekNumber`](/api/functions/WeekNumber.md)     | Render the week number.                                                                      |
+| Component                                                        | Description                                                                                  |
+| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
+| [`MonthCaption`](../api/functions/MonthCaption.md)               | The caption for each month.                                                                  |
+| [`CaptionLabel`](../api/functions/CaptionLabel.md)               | The caption for each month.                                                                  |
+| [`Day`](../api/functions/Day.md)                                 | The day cell.                                                                                |
+| [`DayContent`](../api/functions/DayContent.md)                   | The content of the day cell.                                                                 |
+| [`Dropdown`](../api/functions/Dropdown.md)                       | The [dropdown](../using-daypicker/customization.mdx#dropdown-navigation) used for navigation |
+| [`Footer`](../api/functions/Footer.md)                           | The footer element.                                                                          |
+| [`Head`](../api/functions/Head.md)                               | The head of the grid.                                                                        |
+| [`WeekdaysRow`](../api/functions/WeekdaysRow.md)                 | The row with the weekdays names.                                                             |
+| [`IconDropdown`](../api/functions/IconDropdown.md)               | The icon used for the dropdown.                                                              |
+| [`IconLeft`](../api/functions/IconLeft.md)                       | The icon used for the previous month navigation.                                             |
+| [`IconRight`](../api/functions/IconRight.md)                     | The icon used for the next month navigation.                                                 |
+| [`Months`](../api/functions/Months.md)                           | Wrapper for the Months grid.                                                                 |
+| [`WeekRow`](../api/functions/WeekRow.md)                         | Render the row with the week.                                                                |
+| [`WeekNumberRowHeader`](../api/functions/WeekNumberRowHeader.md) | Render the week number.                                                                      |
 
 ## DayPicker Hooks
 
@@ -78,19 +78,19 @@ When creating custom components, you will find useful the DayPicker hooks.
 import { useDayPicker } from "react-day-picker";
 ```
 
-| Hook                                                         | Returns                                                               | Description                                        |
-| ------------------------------------------------------------ | --------------------------------------------------------------------- | -------------------------------------------------- |
-| [`useDayPicker`](/api/functions/useDayPicker.md)             | [`DayPickerContextValue`](/api/interfaces/DayPickerContextValue.md)   | Get the props passed to DayPicker.                 |
-| [`useNavigation`](/api/functions/useNavigation.md)           | [`NavigationContextValue`](/api/interfaces/NavigationContextValue.md) | Navigate between months and years .                |
-| [`useDayRender`](/api/functions/useDayRender.md)             | [`DayRender`](/api/type-aliases/DayRender.md)                         | Render the day cell from a custom `Day` component. |
-| [`useFocusContext`](/api/functions/useFocusContext.md)       | [`FocusContextValue`](/api/type-aliases/FocusContextValue.md)         | Handle the focus between elements.                 |
-| [`useActiveModifiers`](/api/functions/useActiveModifiers.md) | [`ActiveModifiers`](/api/type-aliases/ActiveModifiers.md)             | Returns the modifiers applied to a day.            |
+| Hook                                                           | Returns                                                                 | Description                                        |
+| -------------------------------------------------------------- | ----------------------------------------------------------------------- | -------------------------------------------------- |
+| [`useDayPicker`](../api/functions/useDayPicker.md)             | [`DayPickerContextValue`](../api/interfaces/DayPickerContextValue.md)   | Get the props passed to DayPicker.                 |
+| [`useNavigation`](../api/functions/useNavigation.md)           | [`NavigationContextValue`](../api/interfaces/NavigationContextValue.md) | Navigate between months and years .                |
+| [`useDayRender`](../api/functions/useDayRender.md)             | [`DayRender`](../api/type-aliases/DayRender.md)                         | Render the day cell from a custom `Day` component. |
+| [`useFocusContext`](../api/functions/useFocusContext.md)       | [`FocusContextValue`](../api/type-aliases/FocusContextValue.md)         | Handle the focus between elements.                 |
+| [`useActiveModifiers`](../api/functions/useActiveModifiers.md) | [`ActiveModifiers`](../api/type-aliases/ActiveModifiers.md)             | Returns the modifiers applied to a day.            |
 
 ## Examples
 
 ### Custom Caption
 
-Implement a custom `Caption` component with next/previous buttons. Note the use of the [useNavigation hook](/api/functions/useNavigation) to navigate between months.
+Implement a custom `Caption` component with next/previous buttons. Note the use of the [useNavigation hook](../api/functions/useNavigation) to navigate between months.
 
 ```tsx
 import { format } from "date-fns";
diff --git a/website/docs/advanced-guides/custom-modifiers.mdx b/website/docs/advanced-guides/custom-modifiers.mdx
index 991d662ae..6ba18c84e 100644
--- a/website/docs/advanced-guides/custom-modifiers.mdx
+++ b/website/docs/advanced-guides/custom-modifiers.mdx
@@ -36,7 +36,7 @@ When in selection mode, use the `selected` prop to add the `selected` modifier t
 
 ## Disabling Days
 
-Use the `disabled` modifier to disable one or more days. Pass a [`Matcher`](/api/type-aliases/Matcher.md) or an array of `Matchers` to choose the disabled days:
+Use the `disabled` modifier to disable one or more days. Pass a [`Matcher`](../api/type-aliases/Matcher.md) or an array of `Matchers` to choose the disabled days:
 
 ```tsx
 // Disable Sundays and Saturdays
diff --git a/website/docs/start.mdx b/website/docs/start.mdx
index e7d5b6ba8..b448bb017 100644
--- a/website/docs/start.mdx
+++ b/website/docs/start.mdx
@@ -9,7 +9,7 @@ pagination_next: using-daypicker/styling
 DayPicker is available as `react-day-picker` npm package. It requires [date-fns](https://date-fns.org) as a peer dependency.
 
 ```bash npm2yarn
-npm install react-day-picker date-fns
+npm install react-day-picker@next date-fns
 ```
 
 - See #1087 if you are interested in DayPicker supporting different date
@@ -20,7 +20,7 @@ npm install react-day-picker date-fns
 To create a simple date picker calendar,
 
 1. Import the component and its default style from `react-day-picker`.
-2. Choose a [selection mode](/using-daypicker/selection-modes) using the `mode` prop.
+2. Choose a [selection mode](./using-daypicker/selection-modes) using the `mode` prop.
 3. Assign the `selected` and `onSelect` props to manage the selected date.
 
 ```tsx
@@ -41,20 +41,20 @@ export function MyDatePicker() {
 
 ## Learn More
 
-{/* - [DayPicker Anatomy](/using-daypicker/anatomy) - Understand the parts composing a DayPicker component. */}
-{/* - [DayPicker Playground](/playground) - Play with the props to try the different customization options. */}
+{/* - [DayPicker Anatomy](./using-daypicker/anatomy) - Understand the parts composing a DayPicker component. */}
+{/* - [DayPicker Playground](./playground) - Play with the props to try the different customization options. */}
 
 ### Using DayPicker
 
-- [Styling](/using-daypicker/styling) - Change the style to make DayPicker match your app's look and feel.
-- [Customization](/using-daypicker/customization) - Explore the options available to customize the calendar and the months navigation.
-- [Selection Modes](/using-daypicker/selection-modes) - Enable users to select days with single, multiple or range selections.
-- [Localization](/using-daypicker/localization) - Configure DayPicker to display the calendar in different languages and date formats.
-- [Accessible Date Pickers](/using-daypicker/accessibility) - Make your date picker accessible to all users.
+- [Styling](./using-daypicker/styling) - Change the style to make DayPicker match your app's look and feel.
+- [Customization](./using-daypicker/customization) - Explore the options available to customize the calendar and the months navigation.
+- [Selection Modes](./using-daypicker/selection-modes) - Enable users to select days with single, multiple or range selections.
+- [Localization](./using-daypicker/localization) - Configure DayPicker to display the calendar in different languages and date formats.
+- [Accessible Date Pickers](./using-daypicker/accessibility) - Make your date picker accessible to all users.
 
 ### Advanced Guides
 
-- [Input Fields](/advanced-guides/input-fields) - Learn how to use DayPicker with input fields and form libraries.
-- [Custom Selections](/advanced-guides/custom-selections) - Create custom selection rules.
-- [Custom Components](/advanced-guides/custom-components) - Use custom components to create a fully customized date picker.
-- [Custom Modifiers](/advanced-guides/custom-modifiers) - Create custom modifiers to highlight specific days in the calendar.
+- [Input Fields](./advanced-guides/input-fields) - Learn how to use DayPicker with input fields and form libraries.
+- [Custom Selections](./advanced-guides/custom-selections) - Create custom selection rules.
+- [Custom Components](./advanced-guides/custom-components) - Use custom components to create a fully customized date picker.
+- [Custom Modifiers](./advanced-guides/custom-modifiers) - Create custom modifiers to highlight specific days in the calendar.
diff --git a/website/docs/upgrading.mdx b/website/docs/upgrading.mdx
index 53aa88f48..39b6386fc 100644
--- a/website/docs/upgrading.mdx
+++ b/website/docs/upgrading.mdx
@@ -4,46 +4,61 @@ sidebar_position: 5
 
 # Upgrading
 
-## Upgrade to v8
+## Upgrade from v8 to v9 alpha
 
-DayPicker v8 is a major upgrade for DayPicker with new props and styles. Follow the checklist for a smooth upgrade.
+This major version introduce some important breaking changes.
+
+- Updated HTML Structure for better accessibility
+- Updated ARIA labels
+- Deprecated and renamed types
+- Formatters return type is now a string
+- Updated build script (rollup removed)
+- Removed useInput hook (see docs for alternatives)
 
 ### Checklist
 
-1. **Upgrade the dependency**. DayPicker now has [date-fns](https://date-fns.org/) as peer dependency.
-   ```bash npm2yarn
-   npm install react-day-picker@latest date-fns
-   ```
-2. **Remove the types package**, if you were using it:
-   ```bash npm2yarn
-   npm uninstall @types/react-day-picker
-   ```
-3. **Update the CSS import**:
-   ```diff
-   - import `react-day-picker/lib/style.css`
-   + import `react-day-picker/dist/style.css`
-   ```
-4. **Update your custom styles**. See the [Styling Guide](/using-daypicker/styling.mdx) for more information.
-5. **Update the changed props**. See the list below.
-6. **Replace `DateUtils` with date-fns**. Use [date-fns](https://date-fns.org/) instead of [DateUtils](https://react-day-picker-v7.netlify.app/api/DateUtils) to handle dates.
-   - Replace `addDayToRange` with [addToRange](../api/functions/addToRange), which is still exported in v8
-
-### Updated Props
-
-- `showWeekNumbers` has been renamed to `showWeekNumber`
-- `todayButton` has been removed. See [Controlling the current month](https://daypicker.dev/basics/navigation#controlling-the-current-month) for an example implementing the same feature.
-- `initialMonth` has been renamed to `defaultMonth`. See [Navigating months](https://daypicker.dev/basics/navigation) for more details about using `month` and `defaultMonth`.
-- `canChangeMonth` has been renamed to `disableNavigation`
-- `selectedDays` has been renamed to `selected`. See also: [Selecting Days guide](https://daypicker.dev/basics/selecting-days).
-- `disabledDays` has been renamed to `disabled`. See also: [Disabling days](https://daypicker.dev/basics/modifiers#disabling-days).
-
-### ISO weeks
-
-This version use the locale setting to calculate the week days and numbers. The previous versions were using [ISO week dates](https://en.wikipedia.org/wiki/ISO_week_date). To toggle the ISO week dates, use the `ISOWeek` prop.
-
-### DayPickerInput
-
-The `DayPickerInput` component has been removed. If you upgrade to v8, you will need to rewrite your implementation:
-
-- See [Input Fields Guide](/advanced-guides/input-fields) for an example
-- Please note that [~useInput hook~](../api/functions/useInput) has been deprecated since v8.10.0.
+Follow these steps to upgrade your project from v8 to v9:
+
+#### 1. Upgrade to the next version
+
+```bash npm2yarn
+npm install react-day-picker@next date-fns
+```
+
+#### 2. Update test selectors
+
+The following ARIA labels have been updated:
+
+- `Week nr.` to `Week`
+- `Previous Month` and `NextMonth`
+
+You may need to update your test selectors - for example:
+
+```diff
+- screen.getByRole('button', 'Go to previous month');
++ screen.getByRole('button', 'Previous Month');
+```
+
+#### 3. Formatters return type
+
+The formatters now return a string instead of a ReactNode. If you were using the formatters in a React component, you may need to update your code:
+
+```diff
+- const MyComponent = () => <DayPicker formatters={{ caption: () => <strong>My caption</strong> }} />;
++ const MyComponent = () => <DayPicker formatters={{ caption: () => 'My caption' }} />;
+```
+
+#### 4. Rename deprecated typings
+
+Many typings have been deprecated in favor of clarity and shorter names. If you were using the typings, you may need to update your code or it will break in the next major version.
+
+```diff
+- import { DayPickerDefaultProps } from 'react-day-picker';
++ import { PropsDefault } from 'react-day-picker/types';
+```
+
+---
+
+## Upgrade from v7 to v8
+
+See the [migration guide](https://react-day-picker.js.org/upgrading) for the changes introduced in v8.
diff --git a/website/docs/using-daypicker/accessibility.mdx b/website/docs/using-daypicker/accessibility.mdx
index cee832669..04a4b3d96 100644
--- a/website/docs/using-daypicker/accessibility.mdx
+++ b/website/docs/using-daypicker/accessibility.mdx
@@ -6,11 +6,11 @@ sidebar_position: 6
 
 DayPicker is designed to adhere to the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/) for date pickers. This includes features such as keyboard navigation, focus management, and labeling.
 
-Depending on your design, you may need to add new accessibility features. For instance, when working with [Input Fields](/advanced-guides/input-fields), there could be some restrictions depending on the level of accessibility you aim to achieve. Stay updated with the best practices by following the [ARIA Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/).
+Depending on your design, you may need to add new accessibility features. For instance, when working with [Input Fields](../advanced-guides/input-fields), there could be some restrictions depending on the level of accessibility you aim to achieve. Stay updated with the best practices by following the [ARIA Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/).
 
 ## ARIA Labels Translation
 
-When translating the date picker to another language, it's necessary to update the ARIA labels to match the new language. Refer to [Localization](/using-daypicker/localization#aria-labels) for more information.
+When translating the date picker to another language, it's necessary to update the ARIA labels to match the new language. Refer to [Localization](../using-daypicker/localization#aria-labels) for more information.
 
 ## Keyboard Navigation
 
@@ -28,10 +28,6 @@ When translating the date picker to another language, it's necessary to update t
 | <kbd>End</kbd>               | Move focus to the end of the week   |
 | <kbd>Enter/Space</kbd>       | Select the focused day              |
 
-{/* <Flex my="8" justify="center">
-  <Examples.Keyboard />
-</Flex> */}
-
 ## Reporting Issues With Accessibility
 
 Accessibility is a field that is constantly evolving. If you encounter any issues with DayPicker, please [open an issue](https://github.com/gpbl/react-day-picker/issues/new/choose) or share
diff --git a/website/docs/using-daypicker/selection-modes.mdx b/website/docs/using-daypicker/selection-modes.mdx
index 6ae4208e5..aed3bed2e 100644
--- a/website/docs/using-daypicker/selection-modes.mdx
+++ b/website/docs/using-daypicker/selection-modes.mdx
@@ -9,7 +9,7 @@ DayPicker comes with some predefined rules for selecting days:
 - [Single mode](#single-mode): only one day can be selected.
 - [Multiple mode](#multiple-mode): select multiple days.
 - [Range mode](#range-mode): select a continuous range of days.
-- Create [custom selection](/advanced-guides/custom-selections.mdx) rules for more complex scenarios.
+- Create [custom selection](../advanced-guides/custom-selections.mdx) rules for more complex scenarios.
 
 To make days selectable, set the `mode` prop. Disallow the selection of specific days by using the `disabled` prop.
 
@@ -231,4 +231,4 @@ To disable specific days, use the `disabled` prop. The prop accepts a [`Matcher`
 
 ## Custom Mode
 
-- See the [Custom Selections](/advanced-guides/custom-selections.mdx) guide to create custom selection modes.
+- See the [Custom Selections](../advanced-guides/custom-selections.mdx) guide to create custom selection modes.
diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
index 775d88e49..6f5667f34 100644
--- a/website/docusaurus.config.ts
+++ b/website/docusaurus.config.ts
@@ -1,6 +1,7 @@
 import type * as Preset from "@docusaurus/preset-classic";
 import type { Config } from "@docusaurus/types";
 import { themes as prismThemes } from "prism-react-renderer";
+import pkg from "react-day-picker/package.json";
 
 const config: Config = {
   title: "React DayPicker",
@@ -41,7 +42,7 @@ const config: Config = {
               badge: false
             },
             current: {
-              label: "9.0.0-alpha",
+              label: `${pkg.version}`,
               path: "next"
             }
           }
@@ -143,7 +144,7 @@ const config: Config = {
     },
     footer: undefined,
     prism: {
-      additionalLanguages: ["bash"],
+      additionalLanguages: ["bash", "diff"],
       theme: prismThemes.vsLight,
       darkTheme: prismThemes.dracula
     },
diff --git a/website/examples/CustomCaption.tsx b/website/examples/CustomCaption.tsx
index 5a3e80ac4..f74248456 100644
--- a/website/examples/CustomCaption.tsx
+++ b/website/examples/CustomCaption.tsx
@@ -1,7 +1,7 @@
 import { format } from "date-fns";
-import { CaptionProps, DayPicker, useNavigation } from "react-day-picker";
+import { MonthCaptionProps, DayPicker, useNavigation } from "react-day-picker";
 
-function CustomCaptionComponent(props: CaptionProps) {
+function CustomMonthCaption(props: MonthCaptionProps) {
   const { goToMonth, nextMonth, previousMonth } = useNavigation();
   return (
     <h2>
@@ -26,7 +26,7 @@ export function CustomCaption() {
   return (
     <DayPicker
       components={{
-        Caption: CustomCaptionComponent
+        MonthCaption: CustomMonthCaption
       }}
     />
   );
diff --git a/website/examples/CustomDisableRow.tsx b/website/examples/CustomDisableRow.tsx
index 6244371b0..fe68311af 100644
--- a/website/examples/CustomDisableRow.tsx
+++ b/website/examples/CustomDisableRow.tsx
@@ -1,21 +1,21 @@
 import { differenceInCalendarDays } from "date-fns";
-import { DayPicker, Row, RowProps } from "react-day-picker";
+import { DayPicker, WeekRow, WeekRowProps } from "react-day-picker";
 
 function isPastDate(date: Date) {
   return differenceInCalendarDays(date, new Date()) < 0;
 }
 
-function OnlyFutureRow(props: RowProps) {
+function OnlyFutureRow(props: WeekRowProps) {
   const isPastRow = props.dates.every((date) => isPastDate(date));
   if (isPastRow) return <tr role="presentation" />;
-  return <Row {...props} />;
+  return <WeekRow {...props} />;
 }
 
 export function CustomDisableRow() {
   return (
     <DayPicker
       fromDate={new Date()}
-      components={{ Row: OnlyFutureRow }}
+      components={{ WeekRow: OnlyFutureRow }}
       hidden={isPastDate}
       showOutsideDays
       today={new Date(2021, 10, 25)}
diff --git a/website/examples/Formatters.tsx b/website/examples/Formatters.tsx
index adcb6d58c..8996f4395 100644
--- a/website/examples/Formatters.tsx
+++ b/website/examples/Formatters.tsx
@@ -18,14 +18,7 @@ const getSeason = (month: Date): string => {
 
 const formatCaption: DateFormatter = (month, options) => {
   const season = getSeason(month);
-  return (
-    <>
-      <span role="img" aria-label={season}>
-        {seasonEmoji[season]}
-      </span>{" "}
-      {format(month, "LLLL", { locale: options?.locale })}
-    </>
-  );
+  return `${seasonEmoji[season]} ${format(month, "LLLL", { locale: options?.locale })}`;
 };
 
 export function Formatters() {
diff --git a/website/examples/Keyboard.tsx b/website/examples/Keyboard.tsx
index 69f800f68..c955cf70f 100644
--- a/website/examples/Keyboard.tsx
+++ b/website/examples/Keyboard.tsx
@@ -1,8 +1,8 @@
 import { useState } from "react";
 
-import { DayPicker, DayPickerSingleProps } from "react-day-picker";
+import { DayPicker, PropsSingle } from "react-day-picker";
 
-export function Keyboard(props: DayPickerSingleProps) {
+export function Keyboard(props: PropsSingle) {
   const [selected, setSelected] = useState<Date | undefined>(undefined);
   return (
     <DayPicker
diff --git a/website/package.json b/website/package.json
index 306ca2baa..5a38b0af9 100644
--- a/website/package.json
+++ b/website/package.json
@@ -41,6 +41,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "ts-jest": "^29.1.2",
     "typedoc": "^0.25.13",
+    "typedoc-plugin-frontmatter": "^1.0.0",
     "typedoc-plugin-markdown": "^4.0.2",
     "typescript": "~5.4.5"
   },
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 4a13b4538..39e52f4bc 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -133,7 +133,7 @@ html[data-theme="dark"] {
 }
 
 .markdown > h4 {
-  font-size: 1.4rem;
+  font-size: 1.2rem;
   font-weight: 600;
   letter-spacing: -0.015em;
 }
@@ -347,3 +347,21 @@ div[class^="admonitionHeading"] {
 pre code {
   white-space: pre;
 }
+
+.theme-doc-version-banner {
+  font-size: 0.875rem;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.theme-doc-version-banner a {
+  text-decoration-color: currentColor;
+  text-decoration-thickness: revert !important;
+}
+.theme-doc-version-banner div.margin-top--md {
+  margin-top: 0 !important;
+}
+.theme-doc-version-badge {
+  font-size: 0.75rem;
+  border-radius: 0.25rem;
+  font-weight: normal;
+}
diff --git a/website/versioned_docs/version-8.10.1/advanced-guides/custom-components.mdx b/website/versioned_docs/version-8.10.1/advanced-guides/custom-components.mdx
index c82082fd7..ba68dc873 100644
--- a/website/versioned_docs/version-8.10.1/advanced-guides/custom-components.mdx
+++ b/website/versioned_docs/version-8.10.1/advanced-guides/custom-components.mdx
@@ -45,7 +45,7 @@ import { CustomDayContent } from "./CustomDayContent";
 
 ## Supported Components
 
-The customizable components are defined in the [`CustomComponents`](/api/interfaces/CustomComponents) interface. Pass any of these to the `components` prop.
+The customizable components are defined in the [`CustomComponents`](../api/interfaces/CustomComponents) interface. Pass any of these to the `components` prop.
 
 :::warning
 
@@ -53,22 +53,22 @@ The custom components are not part of the stable API yet, and may change in futu
 
 :::
 
-| Component                                        | Description                                                                                  |
-| ------------------------------------------------ | -------------------------------------------------------------------------------------------- |
-| [`Caption`](/api/functions/Caption.md)           | The caption for each month.                                                                  |
-| [`CaptionLabel`](/api/functions/CaptionLabel.md) | The caption for each month.                                                                  |
-| [`Day`](/api/functions/Day.md)                   | The day cell.                                                                                |
-| [`DayContent`](/api/functions/DayContent.md)     | The content of the day cell.                                                                 |
-| [`Dropdown`](/api/functions/Dropdown.md)         | The [dropdown](../using-daypicker/customization.mdx#dropdown-navigation) used for navigation |
-| [`Footer`](/api/functions/Footer.md)             | The footer element.                                                                          |
-| [`Head`](/api/functions/Head.md)                 | The head of the grid.                                                                        |
-| [`HeadRow`](/api/functions/HeadRow.md)           | The row with the week names.                                                                 |
-| [`IconDropdown`](/api/functions/IconDropdown.md) | The icon used for the dropdown.                                                              |
-| [`IconLeft`](/api/functions/IconLeft.md)         | The icon used for the previous month navigation.                                             |
-| [`IconRight`](/api/functions/IconRight.md)       | The icon used for the next month navigation.                                                 |
-| [`Months`](/api/functions/Months.md)             | Wrapper for the Months grid.                                                                 |
-| [`Row`](/api/functions/Row.md)                   | Render the grid row.                                                                         |
-| [`WeekNumber`](/api/functions/WeekNumber.md)     | Render the week number.                                                                      |
+| Component                                          | Description                                                                                  |
+| -------------------------------------------------- | -------------------------------------------------------------------------------------------- |
+| [`Caption`](../api/functions/Caption.md)           | The caption for each month.                                                                  |
+| [`CaptionLabel`](../api/functions/CaptionLabel.md) | The caption for each month.                                                                  |
+| [`Day`](../api/functions/Day.md)                   | The day cell.                                                                                |
+| [`DayContent`](../api/functions/DayContent.md)     | The content of the day cell.                                                                 |
+| [`Dropdown`](../api/functions/Dropdown.md)         | The [dropdown](../using-daypicker/customization.mdx#dropdown-navigation) used for navigation |
+| [`Footer`](../api/functions/Footer.md)             | The footer element.                                                                          |
+| [`Head`](../api/functions/Head.md)                 | The head of the grid.                                                                        |
+| [`HeadRow`](../api/functions/HeadRow.md)           | The row with the week names.                                                                 |
+| [`IconDropdown`](../api/functions/IconDropdown.md) | The icon used for the dropdown.                                                              |
+| [`IconLeft`](../api/functions/IconLeft.md)         | The icon used for the previous month navigation.                                             |
+| [`IconRight`](../api/functions/IconRight.md)       | The icon used for the next month navigation.                                                 |
+| [`Months`](../api/functions/Months.md)             | Wrapper for the Months grid.                                                                 |
+| [`Row`](../api/functions/Row.md)                   | Render the grid row.                                                                         |
+| [`WeekNumber`](../api/functions/WeekNumber.md)     | Render the week number.                                                                      |
 
 ## DayPicker Hooks
 
@@ -78,19 +78,19 @@ When creating custom components, you will find useful the DayPicker hooks.
 import { useDayPicker } from "react-day-picker";
 ```
 
-| Hook                                                         | Returns                                                               | Description                                        |
-| ------------------------------------------------------------ | --------------------------------------------------------------------- | -------------------------------------------------- |
-| [`useDayPicker`](/api/functions/useDayPicker.md)             | [`DayPickerContextValue`](/api/interfaces/DayPickerContextValue.md)   | Get the props passed to DayPicker.                 |
-| [`useNavigation`](/api/functions/useNavigation.md)           | [`NavigationContextValue`](/api/interfaces/NavigationContextValue.md) | Navigate between months and years .                |
-| [`useDayRender`](/api/functions/useDayRender.md)             | [`DayRender`](/api/type-aliases/DayRender.md)                         | Render the day cell from a custom `Day` component. |
-| [`useFocusContext`](/api/functions/useFocusContext.md)       | [`FocusContextValue`](/api/type-aliases/FocusContextValue.md)         | Handle the focus between elements.                 |
-| [`useActiveModifiers`](/api/functions/useActiveModifiers.md) | [`ActiveModifiers`](/api/type-aliases/ActiveModifiers.md)             | Returns the modifiers applied to a day.            |
+| Hook                                                           | Returns                                                                 | Description                                        |
+| -------------------------------------------------------------- | ----------------------------------------------------------------------- | -------------------------------------------------- |
+| [`useDayPicker`](../api/functions/useDayPicker.md)             | [`DayPickerContextValue`](../api/interfaces/DayPickerContextValue.md)   | Get the props passed to DayPicker.                 |
+| [`useNavigation`](../api/functions/useNavigation.md)           | [`NavigationContextValue`](../api/interfaces/NavigationContextValue.md) | Navigate between months and years .                |
+| [`useDayRender`](../api/functions/useDayRender.md)             | [`DayRender`](../api/type-aliases/DayRender.md)                         | Render the day cell from a custom `Day` component. |
+| [`useFocusContext`](../api/functions/useFocusContext.md)       | [`FocusContextValue`](../api/type-aliases/FocusContextValue.md)         | Handle the focus between elements.                 |
+| [`useActiveModifiers`](../api/functions/useActiveModifiers.md) | [`ActiveModifiers`](../api/type-aliases/ActiveModifiers.md)             | Returns the modifiers applied to a day.            |
 
 ## Examples
 
 ### Custom Caption
 
-Implement a custom `Caption` component with next/previous buttons. Note the use of the [useNavigation hook](/api/functions/useNavigation) to navigate between months.
+Implement a custom `Caption` component with next/previous buttons. Note the use of the [useNavigation hook](../api/functions/useNavigation) to navigate between months.
 
 ```tsx
 import { format } from "date-fns";
diff --git a/website/versioned_docs/version-8.10.1/advanced-guides/custom-modifiers.mdx b/website/versioned_docs/version-8.10.1/advanced-guides/custom-modifiers.mdx
index 991d662ae..6ba18c84e 100644
--- a/website/versioned_docs/version-8.10.1/advanced-guides/custom-modifiers.mdx
+++ b/website/versioned_docs/version-8.10.1/advanced-guides/custom-modifiers.mdx
@@ -36,7 +36,7 @@ When in selection mode, use the `selected` prop to add the `selected` modifier t
 
 ## Disabling Days
 
-Use the `disabled` modifier to disable one or more days. Pass a [`Matcher`](/api/type-aliases/Matcher.md) or an array of `Matchers` to choose the disabled days:
+Use the `disabled` modifier to disable one or more days. Pass a [`Matcher`](../api/type-aliases/Matcher.md) or an array of `Matchers` to choose the disabled days:
 
 ```tsx
 // Disable Sundays and Saturdays
diff --git a/website/versioned_docs/version-8.10.1/start.mdx b/website/versioned_docs/version-8.10.1/start.mdx
index e7d5b6ba8..a888a5529 100644
--- a/website/versioned_docs/version-8.10.1/start.mdx
+++ b/website/versioned_docs/version-8.10.1/start.mdx
@@ -20,7 +20,7 @@ npm install react-day-picker date-fns
 To create a simple date picker calendar,
 
 1. Import the component and its default style from `react-day-picker`.
-2. Choose a [selection mode](/using-daypicker/selection-modes) using the `mode` prop.
+2. Choose a [selection mode](../using-daypicker/selection-modes) using the `mode` prop.
 3. Assign the `selected` and `onSelect` props to manage the selected date.
 
 ```tsx
@@ -41,20 +41,20 @@ export function MyDatePicker() {
 
 ## Learn More
 
-{/* - [DayPicker Anatomy](/using-daypicker/anatomy) - Understand the parts composing a DayPicker component. */}
-{/* - [DayPicker Playground](/playground) - Play with the props to try the different customization options. */}
+{/* - [DayPicker Anatomy](../using-daypicker/anatomy) - Understand the parts composing a DayPicker component. */}
+{/* - [DayPicker Playground](../playground) - Play with the props to try the different customization options. */}
 
 ### Using DayPicker
 
-- [Styling](/using-daypicker/styling) - Change the style to make DayPicker match your app's look and feel.
-- [Customization](/using-daypicker/customization) - Explore the options available to customize the calendar and the months navigation.
-- [Selection Modes](/using-daypicker/selection-modes) - Enable users to select days with single, multiple or range selections.
-- [Localization](/using-daypicker/localization) - Configure DayPicker to display the calendar in different languages and date formats.
-- [Accessible Date Pickers](/using-daypicker/accessibility) - Make your date picker accessible to all users.
+- [Styling](../using-daypicker/styling) - Change the style to make DayPicker match your app's look and feel.
+- [Customization](../using-daypicker/customization) - Explore the options available to customize the calendar and the months navigation.
+- [Selection Modes](../using-daypicker/selection-modes) - Enable users to select days with single, multiple or range selections.
+- [Localization](../using-daypicker/localization) - Configure DayPicker to display the calendar in different languages and date formats.
+- [Accessible Date Pickers](../using-daypicker/accessibility) - Make your date picker accessible to all users.
 
 ### Advanced Guides
 
-- [Input Fields](/advanced-guides/input-fields) - Learn how to use DayPicker with input fields and form libraries.
-- [Custom Selections](/advanced-guides/custom-selections) - Create custom selection rules.
-- [Custom Components](/advanced-guides/custom-components) - Use custom components to create a fully customized date picker.
-- [Custom Modifiers](/advanced-guides/custom-modifiers) - Create custom modifiers to highlight specific days in the calendar.
+- [Input Fields](../advanced-guides/input-fields) - Learn how to use DayPicker with input fields and form libraries.
+- [Custom Selections](../advanced-guides/custom-selections) - Create custom selection rules.
+- [Custom Components](../advanced-guides/custom-components) - Use custom components to create a fully customized date picker.
+- [Custom Modifiers](../advanced-guides/custom-modifiers) - Create custom modifiers to highlight specific days in the calendar.
diff --git a/website/versioned_docs/version-8.10.1/upgrading.mdx b/website/versioned_docs/version-8.10.1/upgrading.mdx
index 53aa88f48..01f039f9f 100644
--- a/website/versioned_docs/version-8.10.1/upgrading.mdx
+++ b/website/versioned_docs/version-8.10.1/upgrading.mdx
@@ -23,7 +23,7 @@ DayPicker v8 is a major upgrade for DayPicker with new props and styles. Follow
    - import `react-day-picker/lib/style.css`
    + import `react-day-picker/dist/style.css`
    ```
-4. **Update your custom styles**. See the [Styling Guide](/using-daypicker/styling.mdx) for more information.
+4. **Update your custom styles**. See the [Styling Guide](./using-daypicker/styling.mdx) for more information.
 5. **Update the changed props**. See the list below.
 6. **Replace `DateUtils` with date-fns**. Use [date-fns](https://date-fns.org/) instead of [DateUtils](https://react-day-picker-v7.netlify.app/api/DateUtils) to handle dates.
    - Replace `addDayToRange` with [addToRange](../api/functions/addToRange), which is still exported in v8
@@ -45,5 +45,5 @@ This version use the locale setting to calculate the week days and numbers. The
 
 The `DayPickerInput` component has been removed. If you upgrade to v8, you will need to rewrite your implementation:
 
-- See [Input Fields Guide](/advanced-guides/input-fields) for an example
+- See [Input Fields Guide](./advanced-guides/input-fields) for an example
 - Please note that [~useInput hook~](../api/functions/useInput) has been deprecated since v8.10.0.
diff --git a/website/versioned_docs/version-8.10.1/using-daypicker/accessibility.mdx b/website/versioned_docs/version-8.10.1/using-daypicker/accessibility.mdx
index cee832669..444fe6869 100644
--- a/website/versioned_docs/version-8.10.1/using-daypicker/accessibility.mdx
+++ b/website/versioned_docs/version-8.10.1/using-daypicker/accessibility.mdx
@@ -28,10 +28,6 @@ When translating the date picker to another language, it's necessary to update t
 | <kbd>End</kbd>               | Move focus to the end of the week   |
 | <kbd>Enter/Space</kbd>       | Select the focused day              |
 
-{/* <Flex my="8" justify="center">
-  <Examples.Keyboard />
-</Flex> */}
-
 ## Reporting Issues With Accessibility
 
 Accessibility is a field that is constantly evolving. If you encounter any issues with DayPicker, please [open an issue](https://github.com/gpbl/react-day-picker/issues/new/choose) or share
diff --git a/website/versioned_docs/version-8.10.1/using-daypicker/selection-modes.mdx b/website/versioned_docs/version-8.10.1/using-daypicker/selection-modes.mdx
index 6ae4208e5..aed3bed2e 100644
--- a/website/versioned_docs/version-8.10.1/using-daypicker/selection-modes.mdx
+++ b/website/versioned_docs/version-8.10.1/using-daypicker/selection-modes.mdx
@@ -9,7 +9,7 @@ DayPicker comes with some predefined rules for selecting days:
 - [Single mode](#single-mode): only one day can be selected.
 - [Multiple mode](#multiple-mode): select multiple days.
 - [Range mode](#range-mode): select a continuous range of days.
-- Create [custom selection](/advanced-guides/custom-selections.mdx) rules for more complex scenarios.
+- Create [custom selection](../advanced-guides/custom-selections.mdx) rules for more complex scenarios.
 
 To make days selectable, set the `mode` prop. Disallow the selection of specific days by using the `disabled` prop.
 
@@ -231,4 +231,4 @@ To disable specific days, use the `disabled` prop. The prop accepts a [`Matcher`
 
 ## Custom Mode
 
-- See the [Custom Selections](/advanced-guides/custom-selections.mdx) guide to create custom selection modes.
+- See the [Custom Selections](../advanced-guides/custom-selections.mdx) guide to create custom selection modes.


Test patch:
diff --git a/src/components/CaptionDropdowns.test.tsx b/src/components/CaptionDropdowns.test.tsx
index b7ee2b4b1..9b8c7e45a 100644
--- a/src/components/CaptionDropdowns.test.tsx
+++ b/src/components/CaptionDropdowns.test.tsx
@@ -12,10 +12,10 @@ import { user } from "@/test/user";
 import { freezeBeforeAll } from "@/test/utils";
 
 import { DayPickerProps } from "../DayPicker";
-import { CustomComponents } from "../types/DayPickerBase";
+import { CustomComponents } from "../types/PropsBase";
 
-import { CaptionProps } from "./Caption";
 import { CaptionDropdowns } from "./CaptionDropdowns";
+import { MonthCaptionProps } from "./MonthCaption";
 
 const today = new Date(2021, 8);
 const fromYear = 2020;
@@ -23,7 +23,7 @@ const toYear = 2025;
 
 freezeBeforeAll(today);
 
-function setup(props: CaptionProps, dayPickerProps?: DayPickerProps) {
+function setup(props: MonthCaptionProps, dayPickerProps?: DayPickerProps) {
   customRender(<CaptionDropdowns {...props} />, dayPickerProps);
 }
 
diff --git a/src/components/Day.test.tsx b/src/components/Day.test.tsx
index c152b3339..c77a2f63c 100644
--- a/src/components/Day.test.tsx
+++ b/src/components/Day.test.tsx
@@ -4,7 +4,7 @@ import { customRender } from "@/test/render";
 import { freezeBeforeAll } from "@/test/utils";
 
 import { DayPickerProps } from "../DayPicker";
-import { CustomComponents } from "../types/DayPickerBase";
+import { CustomComponents } from "../types/PropsBase";
 
 import { Day, DayProps } from "./Day";
 
diff --git a/src/components/Dropdown.test.tsx b/src/components/Dropdown.test.tsx
index 943345847..49f76ca1f 100644
--- a/src/components/Dropdown.test.tsx
+++ b/src/components/Dropdown.test.tsx
@@ -5,7 +5,7 @@ import { freezeBeforeAll } from "@/test/utils";
 
 import { DayPickerProps } from "../DayPicker";
 import { defaultClassNames } from "../contexts/DayPicker/defaultClassNames";
-import { CustomComponents } from "../types/DayPickerBase";
+import { CustomComponents } from "../types/PropsBase";
 
 import { Dropdown, DropdownProps } from "./Dropdown";
 
diff --git a/src/components/Head.test.tsx b/src/components/Head.test.tsx
index 6d9ce9c98..2b2446da5 100644
--- a/src/components/Head.test.tsx
+++ b/src/components/Head.test.tsx
@@ -46,12 +46,12 @@ describe("when rendered", () => {
   });
 });
 
-describe("when using a custom HeadRow component", () => {
+describe("when using a custom WeekdaysRow component", () => {
   beforeEach(() => {
     setup({
       ...dayPickerProps,
       components: {
-        HeadRow: () => (
+        WeekdaysRow: () => (
           <tr>
             <td>custom head</td>
           </tr>
diff --git a/src/components/Caption.test.tsx b/src/components/MonthCaption.test.tsx
similarity index 87%
rename from src/components/Caption.test.tsx
rename to src/components/MonthCaption.test.tsx
index 059974a76..210ee046d 100644
--- a/src/components/Caption.test.tsx
+++ b/src/components/MonthCaption.test.tsx
@@ -13,16 +13,16 @@ import {
 import { freezeBeforeAll } from "@/test/utils";
 
 import { DayPickerProps } from "../DayPicker";
-import { CustomComponents } from "../types/DayPickerBase";
+import { CustomComponents } from "../types/PropsBase";
 
-import { Caption, CaptionProps } from "./Caption";
+import { MonthCaption, MonthCaptionProps } from "./MonthCaption";
 
 const today = new Date(2021, 8);
 
 freezeBeforeAll(today);
 
-function setup(props: CaptionProps, dayPickerProps?: DayPickerProps) {
-  customRender(<Caption {...props} />, dayPickerProps);
+function setup(props: MonthCaptionProps, dayPickerProps?: DayPickerProps) {
+  customRender(<MonthCaption {...props} />, dayPickerProps);
 }
 
 describe("when navigation is disabled", () => {
@@ -74,11 +74,11 @@ describe('when the caption layout is "buttons"', () => {
     captionLayout: "buttons"
   };
   test("should render the next month button", () => {
-    customRender(<Caption displayMonth={today} />, dayPickerProps);
+    customRender(<MonthCaption displayMonth={today} />, dayPickerProps);
     expect(getNextButton()).toBeInTheDocument();
   });
   test("should render the previous month button", () => {
-    customRender(<Caption displayMonth={today} />, dayPickerProps);
+    customRender(<MonthCaption displayMonth={today} />, dayPickerProps);
     expect(getPrevButton()).toBeInTheDocument();
   });
 });
diff --git a/src/components/Month.test.tsx b/src/components/MonthGrid.test.tsx
similarity index 94%
rename from src/components/Month.test.tsx
rename to src/components/MonthGrid.test.tsx
index e8b369931..aaecc193b 100644
--- a/src/components/Month.test.tsx
+++ b/src/components/MonthGrid.test.tsx
@@ -4,9 +4,9 @@ import { customRender } from "@/test/render";
 import { getMonthCaption, getMonthGrid } from "@/test/selectors";
 
 import { DayPickerProps } from "../DayPicker";
-import { CustomComponents } from "../types/DayPickerBase";
+import { CustomComponents } from "../types/PropsBase";
 
-import { Month, MonthProps } from "./Month";
+import { MonthGrid, MonthGridProps } from "./MonthGrid";
 
 let root: HTMLDivElement;
 
@@ -26,14 +26,14 @@ const testClassNames: Record<string, string> = {
 };
 
 type Test = {
-  monthProps: MonthProps;
+  monthProps: MonthGridProps;
   dayPickerProps: DayPickerProps;
   expected: string[];
   notExpected: string[];
 };
 
-function setup(props: MonthProps, dayPickerProps?: DayPickerProps) {
-  const view = customRender(<Month {...props} />, dayPickerProps);
+function setup(props: MonthGridProps, dayPickerProps?: DayPickerProps) {
+  const view = customRender(<MonthGrid {...props} />, dayPickerProps);
   root = view.container.firstChild as HTMLDivElement;
 }
 describe("when rendered", () => {
@@ -65,7 +65,7 @@ describe("when rendered with a custom id", () => {
 
 describe("when using a custom Caption component", () => {
   const components: CustomComponents = {
-    Caption: () => <>custom caption foo</>
+    MonthCaption: () => <>custom caption foo</>
   };
   beforeEach(() => {
     setup({ displayIndex: 0, displayMonth }, { components });
diff --git a/src/components/Root.test.tsx b/src/components/Root.test.tsx
index 84dce92e1..9ccff0dd1 100644
--- a/src/components/Root.test.tsx
+++ b/src/components/Root.test.tsx
@@ -9,8 +9,8 @@ import { DayPickerProps } from "../DayPicker";
 import { defaultClassNames } from "../contexts/DayPicker/defaultClassNames";
 import { ClassNames } from "../types/Styles";
 
+import { Calendar } from "./Calendar";
 import { MonthsProps } from "./Months";
-import { Root } from "./Root";
 
 const today = new Date(2020, 10, 4);
 freezeBeforeAll(today);
@@ -19,7 +19,10 @@ let container: HTMLElement;
 let view: RenderResult;
 
 function render(dayPickerProps: DayPickerProps = {}) {
-  view = customRender(<Root initialProps={dayPickerProps} />, dayPickerProps);
+  view = customRender(
+    <Calendar initialProps={dayPickerProps} />,
+    dayPickerProps
+  );
   container = view.container;
 }
 
diff --git a/src/components/Row.test.tsx b/src/components/Row.test.tsx
index 1e856c3e4..7b390ce24 100644
--- a/src/components/Row.test.tsx
+++ b/src/components/Row.test.tsx
@@ -3,22 +3,22 @@ import { screen } from "@testing-library/react";
 import { customRender } from "@/test/render/customRender";
 
 import { DayPickerProps } from "../DayPicker";
-import { CustomComponents } from "../types/DayPickerBase";
+import { CustomComponents } from "../types/PropsBase";
 
-import { Row, RowProps } from "./Row";
+import { WeekRow, WeekRowProps } from "./WeekRow";
 
-function setup(props: RowProps, dayPickerProps?: DayPickerProps) {
+function setup(props: WeekRowProps, dayPickerProps?: DayPickerProps) {
   customRender(
     <table>
       <tbody>
-        <Row {...props} />
+        <WeekRow {...props} />
       </tbody>
     </table>,
     dayPickerProps
   );
 }
 
-const props: RowProps = {
+const props: WeekRowProps = {
   displayMonth: new Date(2020, 1),
   weekNumber: 4,
   dates: [new Date(2020, 1, 1), new Date(2020, 1, 2), new Date(2020, 1, 3)]
@@ -60,15 +60,15 @@ describe("when using a custom Day component", () => {
   });
 });
 
-describe("when using a custom WeekNumber component", () => {
+describe("when using a custom WeekNumberRowHeader component", () => {
   const components: CustomComponents = {
-    WeekNumber: () => <div>WeekNumber</div>
+    WeekNumberRowHeader: () => <div>WeekNumberRowHeader</div>
   };
   const dayPickerProps: DayPickerProps = { components, showWeekNumber: true };
   beforeEach(() => {
     setup(props, dayPickerProps);
   });
   test("it should render the custom component instead", () => {
-    expect(screen.getByText("WeekNumber")).toBeInTheDocument();
+    expect(screen.getByText("WeekNumberRowHeader")).toBeInTheDocument();
   });
 });
diff --git a/src/components/Table.test.tsx b/src/components/Table.test.tsx
index 315a08cde..5e087d9e2 100644
--- a/src/components/Table.test.tsx
+++ b/src/components/Table.test.tsx
@@ -40,7 +40,7 @@ describe("when using custom components", () => {
           </tr>
         </thead>
       ),
-      Row: () => (
+      WeekRow: () => (
         <tr>
           <td>CustomRow</td>
         </tr>
diff --git a/src/components/WeekNumber.test.tsx b/src/components/WeekNumber.test.tsx
index 6c8872a84..d44392c91 100644
--- a/src/components/WeekNumber.test.tsx
+++ b/src/components/WeekNumber.test.tsx
@@ -5,13 +5,19 @@ import { customRender } from "@/test/render/customRender";
 
 import { DayPickerProps } from "../DayPicker";
 
-import { WeekNumber, WeekNumberProps } from "./WeekNumber";
+import {
+  WeekNumberRowHeader,
+  WeekNumberRowHeaderProps
+} from "./WeekNumberRowHeader";
 
-function setup(props: WeekNumberProps, dayPickerProps?: DayPickerProps) {
-  return customRender(<WeekNumber {...props} />, dayPickerProps);
+function setup(
+  props: WeekNumberRowHeaderProps,
+  dayPickerProps?: DayPickerProps
+) {
+  return customRender(<WeekNumberRowHeader {...props} />, dayPickerProps);
 }
 
-const props: WeekNumberProps = {
+const props: WeekNumberRowHeaderProps = {
   number: 10,
   dates: [new Date(), new Date()]
 };
diff --git a/src/components/HeadRow.test.tsx b/src/components/WeekdaysRow.test.tsx
similarity index 97%
rename from src/components/HeadRow.test.tsx
rename to src/components/WeekdaysRow.test.tsx
index 479923cae..35496375a 100644
--- a/src/components/HeadRow.test.tsx
+++ b/src/components/WeekdaysRow.test.tsx
@@ -4,7 +4,7 @@ import { customRender } from "@/test/render";
 
 import { DayPickerProps } from "../DayPicker";
 
-import { HeadRow } from "./HeadRow";
+import { WeekdaysRow } from "./WeekdaysRow";
 
 let container: HTMLElement;
 let view: RenderResult;
@@ -15,7 +15,7 @@ function setup(dayPickerProps: DayPickerProps = {}) {
   view = customRender(
     <table>
       <thead>
-        <HeadRow />
+        <WeekdaysRow />
       </thead>
     </table>,
     dayPickerProps
diff --git a/src/components/__snapshots__/WeekNumber.test.tsx.snap b/src/components/__snapshots__/WeekNumber.test.tsx.snap
index 9fa11dbed..4ddf73cf9 100644
--- a/src/components/__snapshots__/WeekNumber.test.tsx.snap
+++ b/src/components/__snapshots__/WeekNumber.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`with "onWeekNumberClick" prop it should return a button element 1`] = `
 <button
-  aria-label="Week n. 10"
+  aria-label="Week 10"
   class="rdp-button_reset rdp-button rdp-weeknumber"
   name="week-number"
   type="button"
diff --git a/src/contexts/DayPicker/DayPickerContext.test.ts b/src/contexts/DayPicker/DayPickerContext.test.ts
index bce3a389c..456c2136f 100644
--- a/src/contexts/DayPicker/DayPickerContext.test.ts
+++ b/src/contexts/DayPicker/DayPickerContext.test.ts
@@ -4,16 +4,16 @@ import { es } from "date-fns/locale";
 import { renderDayPickerHook } from "../../../test/render";
 import { freezeBeforeAll } from "../../../test/utils";
 import { DayPickerProps } from "../../DayPicker";
-import { CaptionLayout } from "../../components/Caption";
+import { CaptionLayout } from "../../components/MonthCaption";
 import { DayPickerContextValue, useDayPicker } from "../../contexts/DayPicker";
 import {
   DefaultContextProps,
   getDefaultContextValues
 } from "../../contexts/DayPicker/defaultContextValues";
-import { DaySelectionMode } from "../../types/DayPickerBase";
 import { Formatters } from "../../types/Formatters";
 import { Labels } from "../../types/Labels";
 import { DayModifiers, ModifiersClassNames } from "../../types/Modifiers";
+import { Mode } from "../../types/PropsBase";
 import { ClassNames, Styles } from "../../types/Styles";
 
 const today = new Date(2022, 5, 13);
@@ -199,7 +199,7 @@ describe('when passing an "id" from props', () => {
 });
 
 describe("when in selection mode", () => {
-  const mode: DaySelectionMode = "multiple";
+  const mode: Mode = "multiple";
   const onSelect = jest.fn();
   test('should return the "onSelect" event handler', () => {
     const result = renderHook({ mode, onSelect });
diff --git a/src/contexts/DayPicker/labels/labelNext.test.ts b/src/contexts/DayPicker/labels/labelNext.test.ts
index c57eddc04..c5a0c5342 100644
--- a/src/contexts/DayPicker/labels/labelNext.test.ts
+++ b/src/contexts/DayPicker/labels/labelNext.test.ts
@@ -1,5 +1,5 @@
 import { labelNext } from "./labelNext";
 
 test("should return the label", () => {
-  expect(labelNext()).toEqual("Go to next month");
+  expect(labelNext()).toEqual("Next Month");
 });
diff --git a/src/contexts/DayPicker/labels/labelPrevious.test.ts b/src/contexts/DayPicker/labels/labelPrevious.test.ts
index 522e2ce44..49030d8c7 100644
--- a/src/contexts/DayPicker/labels/labelPrevious.test.ts
+++ b/src/contexts/DayPicker/labels/labelPrevious.test.ts
@@ -1,5 +1,5 @@
 import { labelPrevious } from "./labelPrevious";
 
 test("should return the label", () => {
-  expect(labelPrevious()).toEqual("Go to previous month");
+  expect(labelPrevious(new Date(), {})).toEqual("Previous Month");
 });
diff --git a/src/contexts/DayPicker/labels/labelWeekNumber.test.ts b/src/contexts/DayPicker/labels/labelWeekNumber.test.ts
index a7df32f8f..f81a66f1d 100644
--- a/src/contexts/DayPicker/labels/labelWeekNumber.test.ts
+++ b/src/contexts/DayPicker/labels/labelWeekNumber.test.ts
@@ -1,5 +1,5 @@
 import { labelWeekNumber } from "./labelWeekNumber";
 
 test("should return the label", () => {
-  expect(labelWeekNumber(2)).toEqual("Week n. 2");
+  expect(labelWeekNumber(2)).toEqual("Week 2");
 });
diff --git a/src/contexts/DayPicker/labels/labelWeekNumberHeader.test.ts b/src/contexts/DayPicker/labels/labelWeekNumberHeader.test.ts
new file mode 100644
index 000000000..efe97fc87
--- /dev/null
+++ b/src/contexts/DayPicker/labels/labelWeekNumberHeader.test.ts
@@ -0,0 +1,5 @@
+import { labelWeekNumberHeader } from "./labelWeekNumberHeader";
+
+test("should return the label", () => {
+  expect(labelWeekNumberHeader()).toEqual("Week Number");
+});
diff --git a/src/contexts/DayPicker/labels/labelWeekday.test.ts b/src/contexts/DayPicker/labels/labelWeekday.test.ts
index 9e627b7b6..716469ed3 100644
--- a/src/contexts/DayPicker/labels/labelWeekday.test.ts
+++ b/src/contexts/DayPicker/labels/labelWeekday.test.ts
@@ -1,11 +1,11 @@
-import { es } from "date-fns/locale";
+import { es } from "date-fns/locale/es";
 
 import { labelWeekday } from "./labelWeekday";
 
 const weekDay = new Date(2022, 10, 21);
 
 test("should return the formatted weekday name", () => {
-  expect(labelWeekday(weekDay)).toEqual("Monday");
+  expect(labelWeekday(weekDay, {})).toEqual("Monday");
 });
 
 describe("when a locale is passed in", () => {
diff --git a/src/contexts/SelectMultiple/SelectMultipleContext.test.ts b/src/contexts/SelectMultiple/SelectMultipleContext.test.ts
index e4d3724fe..a51fa846a 100644
--- a/src/contexts/SelectMultiple/SelectMultipleContext.test.ts
+++ b/src/contexts/SelectMultiple/SelectMultipleContext.test.ts
@@ -6,8 +6,8 @@ import { renderDayPickerHook } from "../../../test/render";
 import { freezeBeforeAll } from "../../../test/utils";
 import { DayPickerProps } from "../../DayPicker";
 import { isMatch } from "../../contexts/Modifiers/utils/isMatch";
-import { DayPickerMultipleProps } from "../../types/DayPickerMultiple";
 import { ActiveModifiers } from "../../types/Modifiers";
+import { PropsMulti } from "../../types/PropsMulti";
 
 import {
   SelectMultipleContextValue,
@@ -34,7 +34,7 @@ describe("when is not a multiple select DayPicker", () => {
   });
 });
 
-const initialProps: DayPickerMultipleProps = {
+const initialProps: PropsMulti = {
   mode: "multiple",
   onDayClick: jest.fn(),
   onSelect: jest.fn()
@@ -46,7 +46,7 @@ const selectedDay3 = addDays(today, 4);
 
 describe("when days are selected", () => {
   const selected = [selectedDay1, selectedDay2, selectedDay3];
-  const dayPickerProps: DayPickerMultipleProps = {
+  const dayPickerProps: PropsMulti = {
     ...initialProps,
     selected
   };
@@ -115,7 +115,7 @@ describe("when days are selected", () => {
 
 describe("when the maximum number of days are selected", () => {
   const selected = [selectedDay1, selectedDay2, selectedDay3];
-  const dayPickerProps: DayPickerMultipleProps = {
+  const dayPickerProps: PropsMulti = {
     ...initialProps,
     selected,
     max: selected.length
@@ -159,7 +159,7 @@ describe("when the maximum number of days are selected", () => {
 
 describe("when the minimum number of days are selected", () => {
   const selected = [selectedDay1, selectedDay2, selectedDay3];
-  const dayPickerProps: DayPickerMultipleProps = {
+  const dayPickerProps: PropsMulti = {
     ...initialProps,
     selected,
     min: selected.length
diff --git a/src/contexts/SelectRange/SelectRangeContext.test.ts b/src/contexts/SelectRange/SelectRangeContext.test.ts
index c31d58233..059a58bd0 100644
--- a/src/contexts/SelectRange/SelectRangeContext.test.ts
+++ b/src/contexts/SelectRange/SelectRangeContext.test.ts
@@ -11,8 +11,8 @@ import { renderDayPickerHook } from "../../../test/render";
 import { freezeBeforeAll } from "../../../test/utils";
 import { DayPickerProps } from "../../DayPicker";
 import { isMatch } from "../../contexts/Modifiers/utils/isMatch";
-import { DayPickerRangeProps } from "../../types/DayPickerRange";
 import { ActiveModifiers } from "../../types/Modifiers";
+import { PropsRange } from "../../types/PropsRange";
 
 import { SelectRangeContextValue, useSelectRange } from "./SelectRangeContext";
 
@@ -29,7 +29,7 @@ describe("when is not a multiple select DayPicker", () => {
   });
 });
 
-const initialProps: DayPickerRangeProps = {
+const initialProps: PropsRange = {
   mode: "range",
   onDayClick: jest.fn(),
   onSelect: jest.fn()
@@ -74,7 +74,7 @@ describe("when no days are selected", () => {
 
 describe('when only the "from" day is selected', () => {
   const selected = { from, to: undefined };
-  const dayPickerProps: DayPickerRangeProps = {
+  const dayPickerProps: PropsRange = {
     ...initialProps,
     selected
   };
@@ -94,7 +94,7 @@ describe('when only the "from" day is selected', () => {
 
 describe('when only the "to" day is selected', () => {
   const selected = { from: undefined, to };
-  const dayPickerProps: DayPickerRangeProps = {
+  const dayPickerProps: PropsRange = {
     ...initialProps,
     selected
   };
@@ -114,7 +114,7 @@ describe('when only the "to" day is selected', () => {
 
 describe("when a complete range of days is selected", () => {
   const selected = { from, to };
-  const dayPickerProps: DayPickerRangeProps = {
+  const dayPickerProps: PropsRange = {
     ...initialProps,
     selected
   };
@@ -164,7 +164,7 @@ describe("when a complete range of days is selected", () => {
 describe('when "from" and "to" are the same', () => {
   const date = new Date();
   const selected = { from: date, to: date };
-  const dayPickerProps: DayPickerRangeProps = {
+  const dayPickerProps: PropsRange = {
     ...initialProps,
     selected
   };
@@ -186,7 +186,7 @@ describe("when the max number of the selected days is reached", () => {
   const from = today;
   const to = addDays(today, 6);
   const selected = { from, to };
-  const dayPickerProps: DayPickerRangeProps = {
+  const dayPickerProps: PropsRange = {
     ...initialProps,
     selected,
     max: 7
@@ -225,7 +225,7 @@ describe("when the max number of the selected days is reached", () => {
 
 describe("when the minimum number of days are selected", () => {
   const selected = { from, to };
-  const dayPickerProps: DayPickerRangeProps = {
+  const dayPickerProps: PropsRange = {
     ...initialProps,
     selected,
     min: Math.abs(differenceInCalendarDays(to, from))
diff --git a/src/contexts/SelectSingle/SelectSingleContext.test.ts b/src/contexts/SelectSingle/SelectSingleContext.test.ts
index 1648a93ac..df3dbbd7e 100644
--- a/src/contexts/SelectSingle/SelectSingleContext.test.ts
+++ b/src/contexts/SelectSingle/SelectSingleContext.test.ts
@@ -3,8 +3,8 @@ import { MouseEvent } from "react";
 import { renderDayPickerHook } from "../../../test/render";
 import { freezeBeforeAll } from "../../../test/utils";
 import { DayPickerProps } from "../../DayPicker";
-import { DayPickerSingleProps } from "../../types/DayPickerSingle";
 import { ActiveModifiers } from "../../types/Modifiers";
+import { PropsSingle } from "../../types/PropsSingle";
 
 import {
   SelectSingleContextValue,
@@ -26,7 +26,7 @@ describe("when is not a single select DayPicker", () => {
 
 describe("when a day is selected from DayPicker props", () => {
   test("the selected day should be today", () => {
-    const dayPickerProps: DayPickerSingleProps = {
+    const dayPickerProps: PropsSingle = {
       mode: "single",
       selected: today
     };
@@ -35,7 +35,7 @@ describe("when a day is selected from DayPicker props", () => {
   });
 });
 describe("when onDayClick is called", () => {
-  const dayPickerProps: DayPickerSingleProps = {
+  const dayPickerProps: PropsSingle = {
     mode: "single",
     onSelect: jest.fn(),
     onDayClick: jest.fn()
@@ -62,7 +62,7 @@ describe("when onDayClick is called", () => {
   });
 });
 describe("if a selected day is not required", () => {
-  const dayPickerProps: DayPickerSingleProps = {
+  const dayPickerProps: PropsSingle = {
     mode: "single",
     onSelect: jest.fn(),
     required: false
diff --git a/test/render/customRender.tsx b/test/render/customRender.tsx
index 5692b20f3..4c12019b4 100644
--- a/test/render/customRender.tsx
+++ b/test/render/customRender.tsx
@@ -3,14 +3,16 @@ import { ReactElement } from "react";
 import { RenderResult, render } from "@testing-library/react";
 
 import { DayPickerProps } from "../../src/DayPicker";
-import { RootProvider } from "../../src/contexts/RootProvider";
+import { ContextProviders } from "../../src/contexts/ContextProviders";
 
-/** Render a React Element wrapped with the Root Provider. */
+/** Render a React Element wrapped with the context providers. */
 export function customRender(
   /** The element to render. */
   element: ReactElement,
-  /** The initial DayPicker props to pass to the Root Provider. */
+  /** The initial DayPicker props to pass to the context providers. */
   dayPickerProps: DayPickerProps = {}
 ): RenderResult {
-  return render(<RootProvider {...dayPickerProps}>{element}</RootProvider>);
+  return render(
+    <ContextProviders {...dayPickerProps}>{element}</ContextProviders>
+  );
 }
diff --git a/test/render/renderDayPickerHook.tsx b/test/render/renderDayPickerHook.tsx
index 97eca9907..a1775b9b5 100644
--- a/test/render/renderDayPickerHook.tsx
+++ b/test/render/renderDayPickerHook.tsx
@@ -1,8 +1,8 @@
 import { render } from "@testing-library/react";
 
 import { DayPickerProps } from "../../src/DayPicker";
+import { ContextProviders } from "../../src/contexts/ContextProviders";
 import { FocusContext, FocusContextValue } from "../../src/contexts/Focus";
-import { RootProvider } from "../../src/contexts/RootProvider";
 import {
   SelectMultipleContext,
   SelectMultipleContextValue
@@ -16,7 +16,7 @@ import {
   SelectSingleContextValue
 } from "../../src/contexts/SelectSingle";
 
-/** Render a DayPicker hook inside the {@link RootProvider}. */
+/** Render a DayPicker hook inside the {@link ContextProviders}. */
 export type RenderHookResult<TResult> = {
   current: TResult;
 };
@@ -38,7 +38,7 @@ export function renderDayPickerHook<TResult>(
     return <></>;
   }
   render(
-    <RootProvider {...dayPickerProps}>
+    <ContextProviders {...dayPickerProps}>
       {contexts ? (
         <SelectSingleContext.Provider value={contexts.single}>
           <SelectMultipleContext.Provider value={contexts.multiple}>
@@ -52,7 +52,7 @@ export function renderDayPickerHook<TResult>(
       ) : (
         <Test />
       )}
-    </RootProvider>
+    </ContextProviders>
   );
   return returnVal;
 }
diff --git a/test/selectors.ts b/test/selectors.ts
index 6b75b61c4..173c00eb8 100644
--- a/test/selectors.ts
+++ b/test/selectors.ts
@@ -57,19 +57,19 @@ export function queryTableFooter() {
 }
 
 export function getPrevButton() {
-  return screen.getByRole("button", { name: "Go to previous month" });
+  return screen.getByRole("button", { name: "Previous Month" });
 }
 
 export function queryPrevButton() {
-  return screen.queryByRole("button", { name: "Go to previous month" });
+  return screen.queryByRole("button", { name: "Previous Month" });
 }
 
 export function getNextButton() {
-  return screen.getByRole("button", { name: "Go to next month" });
+  return screen.getByRole("button", { name: "Next Month" });
 }
 
 export function queryNextButton() {
-  return screen.queryByRole("button", { name: "Go to next month" });
+  return screen.queryByRole("button", { name: "Next Month" });
 }
 
 export function getMonthCaption(displayIndex = 0) {
diff --git a/website/examples/Formatters.test.tsx b/website/examples/Formatters.test.tsx
index af410425d..3b238034a 100644
--- a/website/examples/Formatters.test.tsx
+++ b/website/examples/Formatters.test.tsx
@@ -12,5 +12,5 @@ beforeEach(() => {
 });
 
 test("should display the autumn emoji", () => {
-  expect(screen.getByRole("img", { name: "autumn" })).toBeInTheDocument();
+  expect(screen.getByText("🍂 November")).toBeInTheDocument();
 });
diff --git a/website/examples/Weeknumber.test.tsx b/website/examples/Weeknumber.test.tsx
index 6cd664b05..fc63f8fa1 100644
--- a/website/examples/Weeknumber.test.tsx
+++ b/website/examples/Weeknumber.test.tsx
@@ -7,7 +7,7 @@ mockDate(today);
 
 function getWeekButton(week: number) {
   return screen.getByRole("button", {
-    name: `Week n. ${week}`
+    name: `Week ${week}`
   });
 }
 
diff --git a/website/examples/__snapshots__/Range.test.tsx.snap b/website/examples/__snapshots__/Range.test.tsx.snap
index e3ffd78dc..4238968e2 100644
--- a/website/examples/__snapshots__/Range.test.tsx.snap
+++ b/website/examples/__snapshots__/Range.test.tsx.snap
@@ -30,7 +30,7 @@ exports[`should match the snapshot 1`] = `
               class="rdp-nav"
             >
               <button
-                aria-label="Go to previous month"
+                aria-label="Previous Month"
                 class="rdp-button_reset rdp-button rdp-nav_button rdp-nav_button_previous"
                 name="previous-month"
                 type="button"
@@ -49,7 +49,7 @@ exports[`should match the snapshot 1`] = `
                 </svg>
               </button>
               <button
-                aria-label="Go to next month"
+                aria-label="Next Month"
                 class="rdp-button_reset rdp-button rdp-nav_button rdp-nav_button_next"
                 name="next-month"
                 type="button"
@@ -673,7 +673,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               class="rdp-nav"
             >
               <button
-                aria-label="Go to previous month"
+                aria-label="Previous Month"
                 class="rdp-button_reset rdp-button rdp-nav_button rdp-nav_button_previous"
                 name="previous-month"
                 type="button"
@@ -692,7 +692,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 </svg>
               </button>
               <button
-                aria-label="Go to next month"
+                aria-label="Next Month"
                 class="rdp-button_reset rdp-button rdp-nav_button rdp-nav_button_next"
                 name="next-month"
                 type="button"
diff --git a/website/examples/__snapshots__/StylingCssModules.test.tsx.snap b/website/examples/__snapshots__/StylingCssModules.test.tsx.snap
index e3ec30f39..43d0c663e 100644
--- a/website/examples/__snapshots__/StylingCssModules.test.tsx.snap
+++ b/website/examples/__snapshots__/StylingCssModules.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`should match the snapshot 1`] = `
             class="rdp-nav"
           >
             <button
-              aria-label="Go to previous month"
+              aria-label="Previous Month"
               class="rdp-button_reset rdp-button rdp-nav_button rdp-nav_button_previous"
               name="previous-month"
               type="button"
@@ -47,7 +47,7 @@ exports[`should match the snapshot 1`] = `
               </svg>
             </button>
             <button
-              aria-label="Go to next month"
+              aria-label="Next Month"
               class="rdp-button_reset rdp-button rdp-nav_button rdp-nav_button_next"
               name="next-month"
               type="button"
diff --git a/website/test/index.tsx b/website/test/index.tsx
index de39d6df0..94f2e7158 100644
--- a/website/test/index.tsx
+++ b/website/test/index.tsx
@@ -37,11 +37,11 @@ export function renderApp(children: React.ReactNode) {
 }
 
 export function prevButton() {
-  return screen.getByRole("button", { name: "Go to previous month" });
+  return screen.getByRole("button", { name: "Previous Month" });
 }
 
 export function nextButton() {
-  return screen.getByRole("button", { name: "Go to next month" });
+  return screen.getByRole("button", { name: "Next Month" });
 }
 
 export function focusedElement() {