diff --git a/src/DayPicker.test.tsx b/src/DayPicker.test.tsx
index 4b55b1e35f..a525df467c 100644
--- a/src/DayPicker.test.tsx
+++ b/src/DayPicker.test.tsx
@@ -1,8 +1,8 @@
-import React from "react";
+import React from "react"
 
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react"
 
-import { DayPicker } from "./DayPicker";
+import { DayPicker } from "./DayPicker.js"
 
 test("should render a date picker component", () => {
   render(<DayPicker data-testid="test" />);
diff --git a/src/DayPicker.tsx b/src/DayPicker.tsx
index a22c31013c..ec02df0cfc 100644
--- a/src/DayPicker.tsx
+++ b/src/DayPicker.tsx
@@ -1,8 +1,8 @@
-import React from "react";
+import React from "react"
 
-import { Calendar } from "./components/Calendar";
-import { ContextProviders } from "./contexts/providers";
-import type { DayPickerProps } from "./types";
+import { Calendar } from "./components/Calendar.js"
+import { ContextProviders } from "./contexts/providers.js"
+import type { DayPickerProps } from "./types/index.js"
 
 /**
  * Render the date picker calendar.
diff --git a/src/UI.ts b/src/UI.ts
index f8705cf4c7..e3c696f990 100644
--- a/src/UI.ts
+++ b/src/UI.ts
@@ -1,4 +1,4 @@
-import type { CustomComponents, ClassNames, Styles } from "./types";
+import type { CustomComponents, ClassNames, Styles } from "./types/index.js"
 
 /**
  * The UI elements composing DayPicker. These elements are mapped to
diff --git a/src/classes/CalendarDay.test.ts b/src/classes/CalendarDay.test.ts
index 8a250af2cd..4c9066f676 100644
--- a/src/classes/CalendarDay.test.ts
+++ b/src/classes/CalendarDay.test.ts
@@ -1,4 +1,4 @@
-import { CalendarDay } from "./CalendarDay";
+import { CalendarDay } from "./CalendarDay.js"
 
 it("should set `displayMonth` to undefined when date and `displayMonth` are in the same month", () => {
   const date = new Date(2020, 0, 1);
diff --git a/src/classes/CalendarDay.ts b/src/classes/CalendarDay.ts
index ed928ce090..4a1c0643d8 100644
--- a/src/classes/CalendarDay.ts
+++ b/src/classes/CalendarDay.ts
@@ -1,5 +1,5 @@
-import { dateLib as defaultDateLib } from "../lib";
-import type { DateLib } from "../types";
+import { dateLib as defaultDateLib } from "../lib/index.js"
+import type { DateLib } from "../types/index.js"
 
 /**
  * Represent the day displayed in the calendar.
diff --git a/src/classes/CalendarMonth.test.ts b/src/classes/CalendarMonth.test.ts
index deb245bc29..962bbb1b8e 100644
--- a/src/classes/CalendarMonth.test.ts
+++ b/src/classes/CalendarMonth.test.ts
@@ -1,6 +1,6 @@
-import { CalendarDay } from "./CalendarDay";
-import { CalendarMonth } from "./CalendarMonth";
-import { CalendarWeek } from "./CalendarWeek";
+import { CalendarDay } from "./CalendarDay.js"
+import { CalendarMonth } from "./CalendarMonth.js"
+import { CalendarWeek } from "./CalendarWeek.js"
 
 let month: CalendarMonth;
 let date: Date;
diff --git a/src/classes/CalendarMonth.ts b/src/classes/CalendarMonth.ts
index 1693873f62..338a9b58a3 100644
--- a/src/classes/CalendarMonth.ts
+++ b/src/classes/CalendarMonth.ts
@@ -1,4 +1,4 @@
-import { CalendarWeek } from "./CalendarWeek";
+import { CalendarWeek } from "./CalendarWeek.js"
 
 /** Represent a month in a calendar year. Contains the weeks within the month. */
 export class CalendarMonth {
diff --git a/src/classes/CalendarWeek.test.ts b/src/classes/CalendarWeek.test.ts
index 9d2c2be9ff..711fa210d6 100644
--- a/src/classes/CalendarWeek.test.ts
+++ b/src/classes/CalendarWeek.test.ts
@@ -1,5 +1,5 @@
-import { CalendarDay } from "./CalendarDay";
-import { CalendarWeek } from "./CalendarWeek";
+import { CalendarDay } from "./CalendarDay.js"
+import { CalendarWeek } from "./CalendarWeek.js"
 
 let week: CalendarWeek;
 const days = [
diff --git a/src/classes/CalendarWeek.ts b/src/classes/CalendarWeek.ts
index b56fa5f0f3..964351eb2c 100644
--- a/src/classes/CalendarWeek.ts
+++ b/src/classes/CalendarWeek.ts
@@ -1,4 +1,4 @@
-import { CalendarDay } from "./CalendarDay";
+import { CalendarDay } from "./CalendarDay.js"
 
 /** Represent a week in a calendar month. */
 export class CalendarWeek {
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 05ca2e41d1..5924e34786 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,4 +1,4 @@
-import React, { type ButtonHTMLAttributes } from "react";
+import React, { type ButtonHTMLAttributes } from "react"
 
 /**
  * Render the button elements in the calendar.
diff --git a/src/components/Calendar.test.tsx b/src/components/Calendar.test.tsx
index 847564f121..6a645b3da6 100644
--- a/src/components/Calendar.test.tsx
+++ b/src/components/Calendar.test.tsx
@@ -1,9 +1,9 @@
-import React from "react";
+import React from "react"
 
-import { grid, nav } from "@/test/elements";
-import { render } from "@/test/render";
+import { grid, nav } from "@/test/elements.js"
+import { render } from "@/test/render.js"
 
-import { Calendar } from "./Calendar";
+import { Calendar } from "./Calendar.js"
 
 it("should render the navigation and month grids", () => {
   render(<Calendar />);
diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
index 14767b924b..b539b2f3cd 100644
--- a/src/components/Calendar.tsx
+++ b/src/components/Calendar.tsx
@@ -1,12 +1,12 @@
-import React from "react";
+import React from "react"
 
-import { UI, CalendarFlag } from "../UI";
-import { useCalendar, useProps } from "../contexts";
+import { UI, CalendarFlag } from "../UI.js"
+import { useCalendar, useProps } from "../contexts/index.js"
 
-import { Footer as DefaultFooter } from "./Footer";
-import { Month as DefaultMonth } from "./Month";
-import { Months as DefaultMonths } from "./Months";
-import { Nav as DefaultNav } from "./Nav";
+import { Footer as DefaultFooter } from "./Footer.js"
+import { Month as DefaultMonth } from "./Month.js"
+import { Months as DefaultMonths } from "./Months.js"
+import { Nav as DefaultNav } from "./Nav.js"
 
 /**
  * Render the DayPicker Calendar with navigation and the month grids.
diff --git a/src/components/Chevron.tsx b/src/components/Chevron.tsx
index 984936ad3d..cc00d09866 100644
--- a/src/components/Chevron.tsx
+++ b/src/components/Chevron.tsx
@@ -1,7 +1,7 @@
-import React from "react";
+import React from "react"
 
-import { ChevronFlag, UI } from "../UI";
-import { useProps } from "../contexts";
+import { ChevronFlag, UI } from "../UI.js"
+import { useProps } from "../contexts/index.js"
 
 /**
  * Render the chevron icon used in the navigation buttons and dropdowns.
diff --git a/src/components/Day.tsx b/src/components/Day.tsx
index efc3589eae..4b90f4defa 100644
--- a/src/components/Day.tsx
+++ b/src/components/Day.tsx
@@ -1,8 +1,8 @@
-import React from "react";
-import type { ReactNode } from "react";
+import React from "react"
+import type { ReactNode } from "react"
 
-import type { CalendarDay } from "../classes";
-import type { Modifiers } from "../types";
+import type { CalendarDay } from "../classes/index.js"
+import type { Modifiers } from "../types/index.js"
 
 /**
  * Render the gridcell of a day in the calendar and handle the interaction and
diff --git a/src/components/DayDate.tsx b/src/components/DayDate.tsx
index b6c7abbb32..3e762f6486 100644
--- a/src/components/DayDate.tsx
+++ b/src/components/DayDate.tsx
@@ -1,7 +1,7 @@
-import React from "react";
+import React from "react"
 
-import type { CalendarDay } from "../classes";
-import type { Modifiers } from "../types";
+import type { CalendarDay } from "../classes/index.js"
+import type { Modifiers } from "../types/index.js"
 
 /**
  * Render the date as string inside the day grid cell.
diff --git a/src/components/DayWrapper.tsx b/src/components/DayWrapper.tsx
index 46136edd8d..79ed48398f 100644
--- a/src/components/DayWrapper.tsx
+++ b/src/components/DayWrapper.tsx
@@ -1,15 +1,15 @@
-import React from "react";
+import React from "react"
 
-import { UI, DayFlag } from "../UI";
-import { CalendarDay } from "../classes/CalendarDay";
-import { useCalendar, useFocus, useModifiers, useProps } from "../contexts";
-import { debounce } from "../helpers/debounce";
-import { getClassNamesForModifiers } from "../helpers/getClassNamesForModifiers";
-import { getStyleForModifiers } from "../helpers/getStyleForModifiers";
-import { useMulti, useRange, useSingle } from "../selection";
+import { UI, DayFlag } from "../UI.js"
+import { CalendarDay } from "../classes/CalendarDay.js"
+import { useCalendar, useFocus, useModifiers, useProps } from "../contexts/index.js"
+import { debounce } from "../helpers/debounce.js"
+import { getClassNamesForModifiers } from "../helpers/getClassNamesForModifiers.js"
+import { getStyleForModifiers } from "../helpers/getStyleForModifiers.js"
+import { useMulti, useRange, useSingle } from "../selection/index.js"
 
-import { type DayProps, Day as DefaultDay } from "./Day";
-import { type DayDateProps, DayDate as DefaultDayDate } from "./DayDate";
+import { type DayProps, Day as DefaultDay } from "./Day.js"
+import { type DayDateProps, DayDate as DefaultDayDate } from "./DayDate.js"
 
 /**
  * Provides a `Day` the day state and the html attributes. Developers may use a
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index fb395cbebc..2a79c6d1f4 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -1,11 +1,11 @@
-import React, { type SelectHTMLAttributes } from "react";
+import React, { type SelectHTMLAttributes } from "react"
 
-import { UI } from "../UI";
-import { useProps } from "../contexts";
+import { UI } from "../UI.js"
+import { useProps } from "../contexts/index.js"
 
-import { Chevron as DefaultChevron } from "./Chevron";
-import { Option as DefaultOption } from "./Option";
-import { Select as DefaultSelect } from "./Select";
+import { Chevron as DefaultChevron } from "./Chevron.js"
+import { Option as DefaultOption } from "./Option.js"
+import { Select as DefaultSelect } from "./Select.js"
 
 /** An option to use in the dropdown. Maps to the `<option>` HTML element. */
 export type DropdownOption = {
diff --git a/src/components/DropdownNav.tsx b/src/components/DropdownNav.tsx
index e77233ef00..2f7b3e2391 100644
--- a/src/components/DropdownNav.tsx
+++ b/src/components/DropdownNav.tsx
@@ -1,11 +1,11 @@
-import React from "react";
+import React from "react"
 
-import { UI } from "../UI";
-import type { CalendarMonth } from "../classes";
-import { useProps } from "../contexts";
+import { UI } from "../UI.js"
+import type { CalendarMonth } from "../classes/index.js"
+import { useProps } from "../contexts/index.js"
 
-import { MonthsDropdown } from "./MonthsDropdown";
-import { YearsDropdown } from "./YearsDropdown";
+import { MonthsDropdown } from "./MonthsDropdown.js"
+import { YearsDropdown } from "./YearsDropdown.js"
 
 /**
  * Render the dropdowns to navigate between months.
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 8e77fd6dfc..fd4f50d412 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,4 +1,4 @@
-import React, { type HTMLProps } from "react";
+import React, { type HTMLProps } from "react"
 
 /**
  * Component wrapping the footer.
diff --git a/src/components/Month.tsx b/src/components/Month.tsx
index 59e5ab533f..f54123c079 100644
--- a/src/components/Month.tsx
+++ b/src/components/Month.tsx
@@ -1,12 +1,12 @@
-import React from "react";
+import React from "react"
 
-import { UI } from "../UI";
-import type { CalendarMonth } from "../classes/CalendarMonth";
-import { useProps } from "../contexts";
+import { UI } from "../UI.js"
+import type { CalendarMonth } from "../classes/CalendarMonth.js"
+import { useProps } from "../contexts/index.js"
 
-import { MonthCaption as DefaultMonthCaption } from "./MonthCaption";
-import { Week as DefaultWeek } from "./Week";
-import { Weekdays as DefaultWeekdays } from "./Weekdays";
+import { MonthCaption as DefaultMonthCaption } from "./MonthCaption.js"
+import { Week as DefaultWeek } from "./Week.js"
+import { Weekdays as DefaultWeekdays } from "./Weekdays.js"
 
 /**
  * Render the grid with the weekday header row and the weeks for the given
diff --git a/src/components/MonthCaption.tsx b/src/components/MonthCaption.tsx
index ba960700b7..1ec7571c8a 100644
--- a/src/components/MonthCaption.tsx
+++ b/src/components/MonthCaption.tsx
@@ -1,10 +1,10 @@
-import React from "react";
+import React from "react"
 
-import { UI } from "../UI";
-import type { CalendarMonth } from "../classes";
-import { useProps } from "../contexts";
+import { UI } from "../UI.js"
+import type { CalendarMonth } from "../classes/index.js"
+import { useProps } from "../contexts/index.js"
 
-import { DropdownNav } from "./DropdownNav";
+import { DropdownNav } from "./DropdownNav.js"
 
 /**
  * Render the caption of a month in the calendar.
diff --git a/src/components/Months.tsx b/src/components/Months.tsx
index 84463d2e48..42ba25a35b 100644
--- a/src/components/Months.tsx
+++ b/src/components/Months.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import type { HTMLProps } from "react";
+import React from "react"
+import type { HTMLProps } from "react"
 
 /**
  * Component wrapping the month grids.
diff --git a/src/components/MonthsDropdown.tsx b/src/components/MonthsDropdown.tsx
index 7d9ad88043..ba4389b6a0 100644
--- a/src/components/MonthsDropdown.tsx
+++ b/src/components/MonthsDropdown.tsx
@@ -1,11 +1,11 @@
-import React from "react";
-import type { ChangeEventHandler } from "react";
+import React from "react"
+import type { ChangeEventHandler } from "react"
 
-import { UI } from "../UI";
-import type { CalendarMonth } from "../classes";
-import { useCalendar, useProps } from "../contexts";
+import { UI } from "../UI.js"
+import type { CalendarMonth } from "../classes/index.js"
+import { useCalendar, useProps } from "../contexts/index.js"
 
-import { Dropdown as DefaultDropdown } from "./Dropdown";
+import { Dropdown as DefaultDropdown } from "./Dropdown.js"
 
 /**
  * Render the dropdown to change the month.
diff --git a/src/components/Nav.test.tsx b/src/components/Nav.test.tsx
index e0a8c7c89b..622b7796f6 100644
--- a/src/components/Nav.test.tsx
+++ b/src/components/Nav.test.tsx
@@ -1,10 +1,10 @@
-import React from "react";
+import React from "react"
 
-import { nextButton, previousButton } from "@/test/elements";
-import { render } from "@/test/render";
-import { user } from "@/test/user";
+import { nextButton, previousButton } from "@/test/elements.js"
+import { render } from "@/test/render.js"
+import { user } from "@/test/user.js"
 
-import { Nav } from "./Nav";
+import { Nav } from "./Nav.js"
 
 describe("when clicking the next button", () => {
   test("should call the onNextClick callback", async () => {
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index a387e67a90..1e691f9922 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -1,10 +1,10 @@
-import React from "react";
+import React from "react"
 
-import { UI } from "../UI";
-import { useCalendar, useProps } from "../contexts";
+import { UI } from "../UI.js"
+import { useCalendar, useProps } from "../contexts/index.js"
 
-import { Button as DefaultButton } from "./Button";
-import { Chevron as DefaultChevron } from "./Chevron";
+import { Button as DefaultButton } from "./Button.js"
+import { Chevron as DefaultChevron } from "./Chevron.js"
 
 /**
  * Render the navigation buttons to change the month.
diff --git a/src/components/Option.tsx b/src/components/Option.tsx
index 12d85876db..82346dd636 100644
--- a/src/components/Option.tsx
+++ b/src/components/Option.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import type { OptionHTMLAttributes } from "react";
+import React from "react"
+import type { OptionHTMLAttributes } from "react"
 
 /**
  * Render the `option` element.
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 8c6ee7da25..366619a664 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import type { SelectHTMLAttributes } from "react";
+import React from "react"
+import type { SelectHTMLAttributes } from "react"
 
 /**
  * Render the `select` element.
diff --git a/src/components/Week.tsx b/src/components/Week.tsx
index d77c2754d5..25a56ec021 100644
--- a/src/components/Week.tsx
+++ b/src/components/Week.tsx
@@ -1,11 +1,11 @@
-import React from "react";
+import React from "react"
 
-import { UI } from "../UI";
-import type { CalendarDay, CalendarWeek } from "../classes";
-import { useProps } from "../contexts";
+import { UI } from "../UI.js"
+import type { CalendarDay, CalendarWeek } from "../classes/index.js"
+import { useProps } from "../contexts/index.js"
 
-import { DayWrapper } from "./DayWrapper";
-import { WeekNumber as DefaultWeekNumber } from "./WeekNumber";
+import { DayWrapper } from "./DayWrapper.js"
+import { WeekNumber as DefaultWeekNumber } from "./WeekNumber.js"
 
 /**
  * Render a row in the calendar, with the days and the week number.
diff --git a/src/components/WeekNumber.tsx b/src/components/WeekNumber.tsx
index 46dcd656ae..0ace7732cc 100644
--- a/src/components/WeekNumber.tsx
+++ b/src/components/WeekNumber.tsx
@@ -1,8 +1,8 @@
-import React from "react";
+import React from "react"
 
-import { UI, WeekNumberFlag } from "../UI";
-import type { CalendarWeek } from "../classes";
-import { useProps } from "../contexts";
+import { UI, WeekNumberFlag } from "../UI.js"
+import type { CalendarWeek } from "../classes/index.js"
+import { useProps } from "../contexts/index.js"
 
 /**
  * Render the cell with the number of the week.
diff --git a/src/components/Weekday.tsx b/src/components/Weekday.tsx
index ca2c10cf59..a0ffdf57ca 100644
--- a/src/components/Weekday.tsx
+++ b/src/components/Weekday.tsx
@@ -1,7 +1,7 @@
-import React from "react";
+import React from "react"
 
-import { UI } from "../UI";
-import { useProps } from "../contexts";
+import { UI } from "../UI.js"
+import { useProps } from "../contexts/index.js"
 
 /**
  * Render the column header with the weekday name (e.g. "Mo", "Tu", etc.).
diff --git a/src/components/Weekdays.tsx b/src/components/Weekdays.tsx
index 6249e6475f..880e000965 100644
--- a/src/components/Weekdays.tsx
+++ b/src/components/Weekdays.tsx
@@ -1,10 +1,10 @@
-import React from "react";
+import React from "react"
 
-import { UI } from "../UI";
-import { useProps } from "../contexts";
-import { getWeekdays } from "../helpers/getWeekdays";
+import { UI } from "../UI.js"
+import { useProps } from "../contexts/index.js"
+import { getWeekdays } from "../helpers/getWeekdays.js"
 
-import { Weekday as DefaultWeekday } from "./Weekday";
+import { Weekday as DefaultWeekday } from "./Weekday.js"
 
 /**
  * Render the row with the weekday names.
diff --git a/src/components/YearsDropdown.tsx b/src/components/YearsDropdown.tsx
index e8b42e5d17..7b6af702cf 100644
--- a/src/components/YearsDropdown.tsx
+++ b/src/components/YearsDropdown.tsx
@@ -1,11 +1,11 @@
-import React from "react";
-import type { ChangeEventHandler } from "react";
+import React from "react"
+import type { ChangeEventHandler } from "react"
 
-import { UI } from "../UI";
-import type { CalendarMonth } from "../classes/CalendarMonth";
-import { useCalendar, useProps } from "../contexts";
+import { UI } from "../UI.js"
+import type { CalendarMonth } from "../classes/CalendarMonth.js"
+import { useCalendar, useProps } from "../contexts/index.js"
 
-import { Dropdown as DefaultDropdown } from "./Dropdown";
+import { Dropdown as DefaultDropdown } from "./Dropdown.js"
 
 /**
  * Render the dropdown to change the year.
diff --git a/src/contexts/providers.tsx b/src/contexts/providers.tsx
index 47c355ddee..5106df7156 100644
--- a/src/contexts/providers.tsx
+++ b/src/contexts/providers.tsx
@@ -1,7 +1,7 @@
-import React from "react";
-import type { PropsWithChildren } from "react";
+import React from "react"
+import type { PropsWithChildren } from "react"
 
-import { MultiProvider, RangeProvider, SingleProvider } from "../selection";
+import { MultiProvider, RangeProvider, SingleProvider } from "../selection/index.js"
 import type {
   DayPickerProps,
   PropsMulti,
@@ -9,10 +9,10 @@ import type {
   PropsSingle
 } from "../types";
 
-import { CalendarContextProvider } from "./useCalendar";
-import { FocusContextProvider } from "./useFocus";
-import { ModifiersContextProvider } from "./useModifiers";
-import { PropsContextProvider, useProps } from "./useProps";
+import { CalendarContextProvider } from "./useCalendar.js"
+import { FocusContextProvider } from "./useFocus.js"
+import { ModifiersContextProvider } from "./useModifiers.js"
+import { PropsContextProvider, useProps } from "./useProps.js"
 
 function SelectionProviders({ children }: PropsWithChildren) {
   const props = useProps();
diff --git a/src/contexts/useCalendar.test.ts b/src/contexts/useCalendar.test.ts
index f1f2f0cc6c..9da30898a9 100644
--- a/src/contexts/useCalendar.test.ts
+++ b/src/contexts/useCalendar.test.ts
@@ -1,6 +1,6 @@
-import { renderHook } from "@/test/renderHook";
+import { renderHook } from "@/test/renderHook.js"
 
-import { useCalendar } from "./useCalendar";
+import { useCalendar } from "./useCalendar.js"
 
 it("should return the next month", () => {
   const { result } = renderHook(useCalendar, {
diff --git a/src/contexts/useCalendar.tsx b/src/contexts/useCalendar.tsx
index 44bca7177a..a19f8bd097 100644
--- a/src/contexts/useCalendar.tsx
+++ b/src/contexts/useCalendar.tsx
@@ -1,20 +1,20 @@
-import React, { type ReactElement, createContext, useContext } from "react";
-
-import type { CalendarWeek, CalendarDay, CalendarMonth } from "../classes";
-import type { DropdownOption } from "../components/Dropdown";
-import { getDates } from "../helpers/getDates";
-import { getDays } from "../helpers/getDays";
-import { getDisplayMonths } from "../helpers/getDisplayMonths";
-import { getDropdownMonths } from "../helpers/getDropdownMonths";
-import { getDropdownYears } from "../helpers/getDropdownYears";
-import { getInitialMonth } from "../helpers/getInitialMonth";
-import { getMonths } from "../helpers/getMonths";
-import { getNextMonth } from "../helpers/getNextMonth";
-import { getPreviousMonth } from "../helpers/getPreviousMonth";
-import { getWeeks } from "../helpers/getWeeks";
-import { useControlledValue } from "../helpers/useControlledValue";
-
-import { useProps } from "./useProps";
+import React, { type ReactElement, createContext, useContext } from "react"
+
+import type { CalendarWeek, CalendarDay, CalendarMonth } from "../classes/index.js"
+import type { DropdownOption } from "../components/Dropdown.js"
+import { getDates } from "../helpers/getDates.js"
+import { getDays } from "../helpers/getDays.js"
+import { getDisplayMonths } from "../helpers/getDisplayMonths.js"
+import { getDropdownMonths } from "../helpers/getDropdownMonths.js"
+import { getDropdownYears } from "../helpers/getDropdownYears.js"
+import { getInitialMonth } from "../helpers/getInitialMonth.js"
+import { getMonths } from "../helpers/getMonths.js"
+import { getNextMonth } from "../helpers/getNextMonth.js"
+import { getPreviousMonth } from "../helpers/getPreviousMonth.js"
+import { getWeeks } from "../helpers/getWeeks.js"
+import { useControlledValue } from "../helpers/useControlledValue.js"
+
+import { useProps } from "./useProps.js"
 
 /** @private */
 const CalendarContext = createContext<CalendarContextValue | undefined>(
diff --git a/src/contexts/useFocus.test.tsx b/src/contexts/useFocus.test.tsx
index c3b27f0f36..33d2d44780 100644
--- a/src/contexts/useFocus.test.tsx
+++ b/src/contexts/useFocus.test.tsx
@@ -1,6 +1,6 @@
-import { renderHook } from "@/test/renderHook";
+import { renderHook } from "@/test/renderHook.js"
 
-import { useFocus } from "./useFocus";
+import { useFocus } from "./useFocus.js"
 
 const month = new Date(2020, 0, 1);
 const today = new Date(2020, 0, 14);
diff --git a/src/contexts/useFocus.tsx b/src/contexts/useFocus.tsx
index 3adcbb0167..0eeaeaf2c5 100644
--- a/src/contexts/useFocus.tsx
+++ b/src/contexts/useFocus.tsx
@@ -6,14 +6,14 @@ import React, {
   useState
 } from "react";
 
-import { DayFlag } from "../UI";
-import type { CalendarDay } from "../classes";
-import { getNextFocus } from "../helpers/getNextFocus";
-import type { MoveFocusBy, MoveFocusDir, Mode } from "../types";
-
-import { useCalendar } from "./useCalendar";
-import { useModifiers } from "./useModifiers";
-import { useProps } from "./useProps";
+import { DayFlag } from "../UI.js"
+import type { CalendarDay } from "../classes/index.js"
+import { getNextFocus } from "../helpers/getNextFocus.js"
+import type { MoveFocusBy, MoveFocusDir, Mode } from "../types/index.js"
+
+import { useCalendar } from "./useCalendar.js"
+import { useModifiers } from "./useModifiers.js"
+import { useProps } from "./useProps.js"
 
 const FocusContext = createContext<FocusContextValue | undefined>(undefined);
 
diff --git a/src/contexts/useModifiers.tsx b/src/contexts/useModifiers.tsx
index f02eeaafed..6de0399432 100644
--- a/src/contexts/useModifiers.tsx
+++ b/src/contexts/useModifiers.tsx
@@ -1,21 +1,21 @@
-import React, { type ReactElement, createContext, useContext } from "react";
+import React, { type ReactElement, createContext, useContext } from "react"
 
-import { DayFlag, SelectionState } from "../UI";
-import { CalendarDay } from "../classes";
-import { useMulti } from "../selection/useMulti";
-import { useRange } from "../selection/useRange";
-import { useSingle } from "../selection/useSingle";
+import { DayFlag, SelectionState } from "../UI.js"
+import { CalendarDay } from "../classes/index.js"
+import { useMulti } from "../selection/useMulti.js"
+import { useRange } from "../selection/useRange.js"
+import { useSingle } from "../selection/useSingle.js"
 import type {
   CustomModifiers,
   DayFlags,
   Modifiers,
   SelectionStates
 } from "../types";
-import { isDateInRange } from "../utils";
-import { dateMatchModifiers } from "../utils/dateMatchModifiers";
+import { isDateInRange } from "../utils/index.js"
+import { dateMatchModifiers } from "../utils/dateMatchModifiers.js"
 
-import { useCalendar } from "./useCalendar";
-import { useProps } from "./useProps";
+import { useCalendar } from "./useCalendar.js"
+import { useProps } from "./useProps.js"
 
 /** @private */
 const ModifiersContext = createContext<ModifiersContextValue | undefined>(
diff --git a/src/contexts/useProps.tsx b/src/contexts/useProps.tsx
index bfa3ac521e..960a893c8b 100644
--- a/src/contexts/useProps.tsx
+++ b/src/contexts/useProps.tsx
@@ -1,12 +1,12 @@
-import React from "react";
+import React from "react"
 
-import * as customComponents from "../components/custom-components";
-import { getDataAttributes } from "../helpers/getDataAttributes";
-import { getDefaultClassNames } from "../helpers/getDefaultClassNames";
-import { getFormatters } from "../helpers/getFormatters";
-import { getStartEndMonths } from "../helpers/getStartEndMonths";
-import * as defaultLabels from "../labels";
-import { dateLib as defaultDateLib } from "../lib";
+import * as customComponents from "../components/custom-components.js"
+import { getDataAttributes } from "../helpers/getDataAttributes.js"
+import { getDefaultClassNames } from "../helpers/getDefaultClassNames.js"
+import { getFormatters } from "../helpers/getFormatters.js"
+import { getStartEndMonths } from "../helpers/getStartEndMonths.js"
+import * as defaultLabels from "../labels/index.js"
+import { dateLib as defaultDateLib } from "../lib/index.js"
 import type {
   ClassNames,
   CustomComponents,
diff --git a/src/formatters/formatCaption.test.ts b/src/formatters/formatCaption.test.ts
index 2606958ace..265ee75a71 100644
--- a/src/formatters/formatCaption.test.ts
+++ b/src/formatters/formatCaption.test.ts
@@ -1,8 +1,8 @@
-import { es } from "date-fns/locale/es";
+import { es } from "date-fns/locale/es.js"
 
-import { dateLib } from "../lib";
+import { dateLib } from "../lib/index.js"
 
-import { formatCaption } from "./formatCaption";
+import { formatCaption } from "./formatCaption.js"
 
 const date = new Date(2022, 10, 21);
 
diff --git a/src/formatters/formatCaption.ts b/src/formatters/formatCaption.ts
index e567fdb8ef..ad6552c195 100644
--- a/src/formatters/formatCaption.ts
+++ b/src/formatters/formatCaption.ts
@@ -1,5 +1,5 @@
-import { FormatOptions, dateLib as defaultDateLib } from "../lib";
-import type { DateLib } from "../types";
+import { FormatOptions, dateLib as defaultDateLib } from "../lib/index.js"
+import type { DateLib } from "../types/index.js"
 
 /**
  * The default formatter for the caption element.
diff --git a/src/formatters/formatDay.test.ts b/src/formatters/formatDay.test.ts
index 07288958e7..ad2f5d3cd7 100644
--- a/src/formatters/formatDay.test.ts
+++ b/src/formatters/formatDay.test.ts
@@ -1,4 +1,4 @@
-import { formatDay } from "./formatDay";
+import { formatDay } from "./formatDay.js"
 
 const date = new Date(2022, 10, 21);
 
diff --git a/src/formatters/formatDay.ts b/src/formatters/formatDay.ts
index a8d3ce3b2d..e133afcffe 100644
--- a/src/formatters/formatDay.ts
+++ b/src/formatters/formatDay.ts
@@ -1,6 +1,6 @@
-import { dateLib as defaultDateLib } from "../lib";
-import type { FormatOptions } from "../lib/dateLib";
-import type { DateLib } from "../types";
+import { dateLib as defaultDateLib } from "../lib/index.js"
+import type { FormatOptions } from "../lib/dateLib.js"
+import type { DateLib } from "../types/index.js"
 
 /**
  * The default formatter for the day grid cell element.
diff --git a/src/formatters/formatMonthDropdown.test.ts b/src/formatters/formatMonthDropdown.test.ts
index 58133b6179..8ca20217b0 100644
--- a/src/formatters/formatMonthDropdown.test.ts
+++ b/src/formatters/formatMonthDropdown.test.ts
@@ -1,6 +1,6 @@
-import { es } from "date-fns/locale/es";
+import { es } from "date-fns/locale/es.js"
 
-import { formatMonthDropdown } from "./formatMonthDropdown";
+import { formatMonthDropdown } from "./formatMonthDropdown.js"
 
 const date = new Date(2022, 10, 21);
 
diff --git a/src/formatters/formatMonthDropdown.ts b/src/formatters/formatMonthDropdown.ts
index 73ae298e7f..92f6d27715 100644
--- a/src/formatters/formatMonthDropdown.ts
+++ b/src/formatters/formatMonthDropdown.ts
@@ -1,5 +1,5 @@
-import type { DateFnsMonth } from "../lib/dateLib";
-import { enUS } from "../lib/locales";
+import type { DateFnsMonth } from "../lib/dateLib.js"
+import { enUS } from "../lib/locales.js"
 
 /**
  * The default formatter for the month dropdown value.
diff --git a/src/formatters/formatWeekNumber.test.ts b/src/formatters/formatWeekNumber.test.ts
index 38546510d4..cf47750796 100644
--- a/src/formatters/formatWeekNumber.test.ts
+++ b/src/formatters/formatWeekNumber.test.ts
@@ -1,4 +1,4 @@
-import { formatWeekNumber } from "./formatWeekNumber";
+import { formatWeekNumber } from "./formatWeekNumber.js"
 
 test("should return the formatted week number", () => {
   expect(formatWeekNumber(10)).toEqual("10");
diff --git a/src/formatters/formatWeekdayName.test.ts b/src/formatters/formatWeekdayName.test.ts
index c625b043a2..ea40745077 100644
--- a/src/formatters/formatWeekdayName.test.ts
+++ b/src/formatters/formatWeekdayName.test.ts
@@ -1,6 +1,6 @@
-import { es } from "date-fns/locale/es";
+import { es } from "date-fns/locale/es.js"
 
-import { formatWeekdayName } from "./formatWeekdayName";
+import { formatWeekdayName } from "./formatWeekdayName.js"
 
 const date = new Date(2022, 10, 21);
 
diff --git a/src/formatters/formatWeekdayName.ts b/src/formatters/formatWeekdayName.ts
index 0f1618039d..a5e6614c93 100644
--- a/src/formatters/formatWeekdayName.ts
+++ b/src/formatters/formatWeekdayName.ts
@@ -1,6 +1,6 @@
-import { dateLib as defaultDateLib } from "../lib";
-import type { FormatOptions } from "../lib/dateLib";
-import type { DateLib } from "../types";
+import { dateLib as defaultDateLib } from "../lib/index.js"
+import type { FormatOptions } from "../lib/dateLib.js"
+import type { DateLib } from "../types/index.js"
 
 /**
  * The default formatter for the name of the weekday.
diff --git a/src/formatters/formatYearDropdown.test.ts b/src/formatters/formatYearDropdown.test.ts
index a4cb1765a2..8322887367 100644
--- a/src/formatters/formatYearDropdown.test.ts
+++ b/src/formatters/formatYearDropdown.test.ts
@@ -1,4 +1,4 @@
-import { formatYearDropdown } from "./formatYearDropdown";
+import { formatYearDropdown } from "./formatYearDropdown.js"
 
 test("should return the formatted weekday name", () => {
   expect(formatYearDropdown(2022)).toEqual("2022");
diff --git a/src/helpers/debounce.test.ts b/src/helpers/debounce.test.ts
index 97f7eddb3a..c2478241f3 100644
--- a/src/helpers/debounce.test.ts
+++ b/src/helpers/debounce.test.ts
@@ -1,4 +1,4 @@
-import { debounce } from "./debounce";
+import { debounce } from "./debounce.js"
 
 describe("debounce", () => {
   jest.useFakeTimers();
diff --git a/src/helpers/getClassNamesForModifiers.ts b/src/helpers/getClassNamesForModifiers.ts
index c693ea3028..39c9bc3e78 100644
--- a/src/helpers/getClassNamesForModifiers.ts
+++ b/src/helpers/getClassNamesForModifiers.ts
@@ -1,5 +1,5 @@
-import { DayFlag, SelectionState } from "../UI";
-import type { ModifiersClassNames, ClassNames } from "../types";
+import { DayFlag, SelectionState } from "../UI.js"
+import type { ModifiersClassNames, ClassNames } from "../types/index.js"
 
 export function getClassNamesForModifiers(
   modifiers: Record<string, boolean>,
diff --git a/src/helpers/getDataAttributes.test.tsx b/src/helpers/getDataAttributes.test.tsx
index f225733f0b..ebee29223a 100644
--- a/src/helpers/getDataAttributes.test.tsx
+++ b/src/helpers/getDataAttributes.test.tsx
@@ -1,4 +1,4 @@
-import { getDataAttributes } from "./getDataAttributes";
+import { getDataAttributes } from "./getDataAttributes.js"
 
 // Mocking the types that are defined elsewhere.
 // TODO: does it work? Replace the types with the actual types.
diff --git a/src/helpers/getDataAttributes.tsx b/src/helpers/getDataAttributes.tsx
index 6c98716f68..f9305ed8c8 100644
--- a/src/helpers/getDataAttributes.tsx
+++ b/src/helpers/getDataAttributes.tsx
@@ -1,4 +1,4 @@
-import type { DayPickerProps } from "../types";
+import type { DayPickerProps } from "../types/index.js"
 
 /** Return the `data-` attributes from the props. */
 export function getDataAttributes(
diff --git a/src/helpers/getDates.test.ts b/src/helpers/getDates.test.ts
index f4773814f9..441ca973a1 100644
--- a/src/helpers/getDates.test.ts
+++ b/src/helpers/getDates.test.ts
@@ -1,6 +1,6 @@
-import { dateLib } from "../lib";
+import { dateLib } from "../lib/index.js"
 
-import { getDates } from "./getDates";
+import { getDates } from "./getDates.js"
 
 describe("when the first month and the last month are the same", () => {
   describe("when the month has 6 weeks", () => {
diff --git a/src/helpers/getDates.ts b/src/helpers/getDates.ts
index faf00f0393..b3867a985a 100644
--- a/src/helpers/getDates.ts
+++ b/src/helpers/getDates.ts
@@ -1,4 +1,4 @@
-import { PropsContextValue } from "../contexts";
+import { PropsContextValue } from "../contexts/index.js"
 
 /** The number of days in a month when having 6 weeks. */
 const NrOfDaysWithFixedWeeks = 42;
@@ -32,16 +32,16 @@ export function getDates(
   const startWeekFirstDate = ISOWeek
     ? startOfISOWeek(firstMonth)
     : startOfWeek(firstMonth, {
-        weekStartsOn,
-        locale
-      });
+      weekStartsOn,
+      locale
+    });
 
   const endWeekLastDate = ISOWeek
     ? endOfISOWeek(endOfMonth(lastMonth))
     : endOfWeek(endOfMonth(lastMonth), {
-        weekStartsOn,
-        locale
-      });
+      weekStartsOn,
+      locale
+    });
 
   const nOfDays = differenceInCalendarDays(endWeekLastDate, startWeekFirstDate);
   const nOfMonths = differenceInCalendarMonths(lastMonth, firstMonth) + 1;
diff --git a/src/helpers/getDays.test.ts b/src/helpers/getDays.test.ts
index 90a1e4ab67..700b393e2b 100644
--- a/src/helpers/getDays.test.ts
+++ b/src/helpers/getDays.test.ts
@@ -1,6 +1,6 @@
-import { CalendarDay, CalendarWeek, CalendarMonth } from "../classes";
+import { CalendarDay, CalendarWeek, CalendarMonth } from "../classes/index.js"
 
-import { getDays } from "./getDays";
+import { getDays } from "./getDays.js"
 
 const days1 = [
   new CalendarDay(new Date(2023, 1, 12), new Date(2023, 1, 1)),
diff --git a/src/helpers/getDays.ts b/src/helpers/getDays.ts
index 3d7e10bac5..e8631199ee 100644
--- a/src/helpers/getDays.ts
+++ b/src/helpers/getDays.ts
@@ -1,4 +1,4 @@
-import type { CalendarDay, CalendarMonth } from "../classes";
+import type { CalendarDay, CalendarMonth } from "../classes/index.js"
 
 /**
  * Returns all the days belonging to the calendar by merging the days in the
diff --git a/src/helpers/getDefaultClassNames.test.ts b/src/helpers/getDefaultClassNames.test.ts
index caa9bb59b0..e61f5128ab 100644
--- a/src/helpers/getDefaultClassNames.test.ts
+++ b/src/helpers/getDefaultClassNames.test.ts
@@ -1,4 +1,4 @@
-import { getDefaultClassNames } from "./getDefaultClassNames";
+import { getDefaultClassNames } from "./getDefaultClassNames.js"
 
 test("should return the default classnames", () => {
   expect(getDefaultClassNames()).toStrictEqual({
diff --git a/src/helpers/getDefaultClassNames.ts b/src/helpers/getDefaultClassNames.ts
index 96291d1069..af2deba5f2 100644
--- a/src/helpers/getDefaultClassNames.ts
+++ b/src/helpers/getDefaultClassNames.ts
@@ -6,7 +6,7 @@ import {
   WeekNumberFlag,
   SelectionState
 } from "../UI";
-import type { ClassNames } from "../types";
+import type { ClassNames } from "../types/index.js"
 
 /**
  * Get the default class names for the UI elements.
diff --git a/src/helpers/getDisplayMonths.test.ts b/src/helpers/getDisplayMonths.test.ts
index ff96e0cfcb..8205499488 100644
--- a/src/helpers/getDisplayMonths.test.ts
+++ b/src/helpers/getDisplayMonths.test.ts
@@ -1,6 +1,6 @@
-import { dateLib } from "react-day-picker";
+import { dateLib } from "react-day-picker/index.js"
 
-import { getDisplayMonths } from "./getDisplayMonths";
+import { getDisplayMonths } from "./getDisplayMonths.js"
 
 describe("getDisplayMonths", () => {
   it("should return the months to display in the calendar", () => {
diff --git a/src/helpers/getDisplayMonths.ts b/src/helpers/getDisplayMonths.ts
index ff3569c0d7..53303a7184 100644
--- a/src/helpers/getDisplayMonths.ts
+++ b/src/helpers/getDisplayMonths.ts
@@ -1,4 +1,4 @@
-import type { PropsContextValue } from "../contexts";
+import type { PropsContextValue } from "../contexts/index.js"
 
 export function getDisplayMonths(
   firstDisplayedMonth: Date,
diff --git a/src/helpers/getDropdownMonths.test.ts b/src/helpers/getDropdownMonths.test.ts
index 213645eb75..a3c1427f78 100644
--- a/src/helpers/getDropdownMonths.test.ts
+++ b/src/helpers/getDropdownMonths.test.ts
@@ -1,9 +1,9 @@
-import { type Locale, format } from "date-fns";
-import { enUS as locale } from "date-fns/locale";
-import { dateLib } from "react-day-picker";
+import { type Locale, format } from "date-fns"
+import { enUS as locale } from "date-fns/locale.js"
+import { dateLib } from "react-day-picker/index.js"
 
-import { getDropdownMonths } from "./getDropdownMonths";
-import { getFormatters } from "./getFormatters";
+import { getDropdownMonths } from "./getDropdownMonths.js"
+import { getFormatters } from "./getFormatters.js"
 
 test("return correct dropdown options", () => {
   const displayMonth = new Date(2022, 0, 1); // January 2022
diff --git a/src/helpers/getDropdownMonths.ts b/src/helpers/getDropdownMonths.ts
index a6c28e24ae..18d8a73bb8 100644
--- a/src/helpers/getDropdownMonths.ts
+++ b/src/helpers/getDropdownMonths.ts
@@ -1,5 +1,5 @@
-import { DropdownOption } from "../components/Dropdown";
-import { PropsContextValue } from "../contexts";
+import { DropdownOption } from "../components/Dropdown.js"
+import { PropsContextValue } from "../contexts/index.js"
 
 /** Return the months to show in the dropdown. */
 export function getDropdownMonths(
diff --git a/src/helpers/getDropdownYears.test.ts b/src/helpers/getDropdownYears.test.ts
index 939e09d7e2..cf694e03c8 100644
--- a/src/helpers/getDropdownYears.test.ts
+++ b/src/helpers/getDropdownYears.test.ts
@@ -1,8 +1,8 @@
-import { enUS as locale } from "date-fns/locale";
-import { dateLib } from "react-day-picker";
+import { enUS as locale } from "date-fns/locale.js"
+import { dateLib } from "react-day-picker/index.js"
 
-import { getDropdownYears } from "./getDropdownYears";
-import { getFormatters } from "./getFormatters";
+import { getDropdownYears } from "./getDropdownYears.js"
+import { getFormatters } from "./getFormatters.js"
 
 test("return undefined if startMonth or endMonth is not provided", () => {
   const displayMonth = new Date(2022, 0, 1); // January 2022
diff --git a/src/helpers/getDropdownYears.ts b/src/helpers/getDropdownYears.ts
index 6a2a86bb34..9728f48c0c 100644
--- a/src/helpers/getDropdownYears.ts
+++ b/src/helpers/getDropdownYears.ts
@@ -1,5 +1,5 @@
-import { DropdownOption } from "../components/Dropdown";
-import { PropsContextValue } from "../contexts";
+import { DropdownOption } from "../components/Dropdown.js"
+import { PropsContextValue } from "../contexts/index.js"
 
 /** Return the years to show in the dropdown. */
 export function getDropdownYears(
diff --git a/src/helpers/getFormatters.test.ts b/src/helpers/getFormatters.test.ts
index 7fb7baf8c9..04a5ff12fb 100644
--- a/src/helpers/getFormatters.test.ts
+++ b/src/helpers/getFormatters.test.ts
@@ -1,7 +1,7 @@
-import * as defaultFormatters from "../formatters";
-import { dateLib } from "../lib";
+import * as defaultFormatters from "../formatters/index.js"
+import { dateLib } from "../lib/index.js"
 
-import { getFormatters } from "./getFormatters";
+import { getFormatters } from "./getFormatters.js"
 
 const customFormattersMock = {
   formatMonthCaption: jest.fn(),
diff --git a/src/helpers/getFormatters.ts b/src/helpers/getFormatters.ts
index eeb7a45311..0cc30f940c 100644
--- a/src/helpers/getFormatters.ts
+++ b/src/helpers/getFormatters.ts
@@ -1,5 +1,5 @@
-import * as defaultFormatters from "../formatters";
-import type { DayPickerProps } from "../types";
+import * as defaultFormatters from "../formatters/index.js"
+import type { DayPickerProps } from "../types/index.js"
 
 /** Return the formatters from the props merged with the default formatters. */
 export function getFormatters(customFormatters: DayPickerProps["formatters"]) {
diff --git a/src/helpers/getInitialMonth.test.ts b/src/helpers/getInitialMonth.test.ts
index 02c6ea5e07..e98591bead 100644
--- a/src/helpers/getInitialMonth.test.ts
+++ b/src/helpers/getInitialMonth.test.ts
@@ -1,7 +1,7 @@
-import { addMonths, isSameMonth } from "date-fns";
-import { dateLib } from "react-day-picker";
+import { addMonths, isSameMonth } from "date-fns"
+import { dateLib } from "react-day-picker/index.js"
 
-import { getInitialMonth } from "./getInitialMonth";
+import { getInitialMonth } from "./getInitialMonth.js"
 
 describe("when no endMonth is given", () => {
   describe("when month is in context", () => {
diff --git a/src/helpers/getInitialMonth.ts b/src/helpers/getInitialMonth.ts
index d6b645588b..b0964394bc 100644
--- a/src/helpers/getInitialMonth.ts
+++ b/src/helpers/getInitialMonth.ts
@@ -1,4 +1,4 @@
-import type { PropsContextValue } from "../contexts";
+import type { PropsContextValue } from "../contexts/index.js"
 
 /** Return the start month based on the props passed to DayPicker. */
 export function getInitialMonth(
diff --git a/src/helpers/getMonths.test.ts b/src/helpers/getMonths.test.ts
index 1d04ca8267..a1c74f85bd 100644
--- a/src/helpers/getMonths.test.ts
+++ b/src/helpers/getMonths.test.ts
@@ -1,8 +1,8 @@
-import { CalendarMonth } from "../classes";
-import type { PropsContextValue } from "../contexts/useProps";
-import { dateLib } from "../lib";
+import { CalendarMonth } from "../classes/index.js"
+import type { PropsContextValue } from "../contexts/useProps.js"
+import { dateLib } from "../lib/index.js"
 
-import { getMonths } from "./getMonths";
+import { getMonths } from "./getMonths.js"
 
 const mockDates = [
   new Date(2023, 4, 27), // May 1, 2023
diff --git a/src/helpers/getMonths.ts b/src/helpers/getMonths.ts
index 5698af16a7..729b9272aa 100644
--- a/src/helpers/getMonths.ts
+++ b/src/helpers/getMonths.ts
@@ -1,5 +1,5 @@
-import { CalendarWeek, CalendarDay, CalendarMonth } from "../classes";
-import type { PropsContextValue } from "../contexts";
+import { CalendarWeek, CalendarDay, CalendarMonth } from "../classes/index.js"
+import type { PropsContextValue } from "../contexts/index.js"
 
 /** Return the months to display in the calendar. */
 export function getMonths(
@@ -34,16 +34,16 @@ export function getMonths(
       const firstDateOfFirstWeek = props.ISOWeek
         ? startOfISOWeek(month)
         : startOfWeek(month, {
-            locale: props.locale,
-            weekStartsOn: props.weekStartsOn
-          });
+          locale: props.locale,
+          weekStartsOn: props.weekStartsOn
+        });
 
       const lastDateOfLastWeek = props.ISOWeek
         ? endOfISOWeek(endOfMonth(month))
         : endOfWeek(endOfMonth(month), {
-            locale: props.locale,
-            weekStartsOn: props.weekStartsOn
-          });
+          locale: props.locale,
+          weekStartsOn: props.weekStartsOn
+        });
 
       /** The dates to display in the month. */
       const monthDates = dates.filter((date) => {
@@ -64,10 +64,10 @@ export function getMonths(
           const weekNumber = props.ISOWeek
             ? getISOWeek(date)
             : getWeek(date, {
-                locale: props.locale,
-                weekStartsOn: props.weekStartsOn,
-                firstWeekContainsDate: props.firstWeekContainsDate
-              });
+              locale: props.locale,
+              weekStartsOn: props.weekStartsOn,
+              firstWeekContainsDate: props.firstWeekContainsDate
+            });
           const week = weeks.find((week) => week.weekNumber === weekNumber);
 
           const day = new CalendarDay(date, month, props.dateLib);
diff --git a/src/helpers/getNextFocus.test.tsx b/src/helpers/getNextFocus.test.tsx
index fe5f2b16cb..b33be9e1f6 100644
--- a/src/helpers/getNextFocus.test.tsx
+++ b/src/helpers/getNextFocus.test.tsx
@@ -1,9 +1,9 @@
-import { CalendarDay } from "../classes";
-import type { PropsContextValue } from "../contexts/useProps";
-import { dateLib } from "../lib";
-import type { MoveFocusBy, MoveFocusDir } from "../types";
+import { CalendarDay } from "../classes/index.js"
+import type { PropsContextValue } from "../contexts/useProps.js"
+import { dateLib } from "../lib/index.js"
+import type { MoveFocusBy, MoveFocusDir } from "../types/index.js"
 
-import { getNextFocus } from "./getNextFocus";
+import { getNextFocus } from "./getNextFocus.js"
 
 const props: Pick<
   PropsContextValue,
diff --git a/src/helpers/getNextFocus.tsx b/src/helpers/getNextFocus.tsx
index 6f21eee704..5c9f293223 100644
--- a/src/helpers/getNextFocus.tsx
+++ b/src/helpers/getNextFocus.tsx
@@ -1,9 +1,9 @@
-import { CalendarDay } from "../classes";
-import type { PropsContextValue } from "../contexts";
-import type { MoveFocusBy, MoveFocusDir } from "../types";
-import { dateMatchModifiers } from "../utils/dateMatchModifiers";
+import { CalendarDay } from "../classes/index.js"
+import type { PropsContextValue } from "../contexts/index.js"
+import type { MoveFocusBy, MoveFocusDir } from "../types/index.js"
+import { dateMatchModifiers } from "../utils/dateMatchModifiers.js"
 
-import { getPossibleFocusDate } from "./getPossibleFocusDate";
+import { getPossibleFocusDate } from "./getPossibleFocusDate.js"
 
 export type Options = Pick<
   PropsContextValue,
diff --git a/src/helpers/getNextMonth.test.ts b/src/helpers/getNextMonth.test.ts
index 2b7033347c..dd2103abe0 100644
--- a/src/helpers/getNextMonth.test.ts
+++ b/src/helpers/getNextMonth.test.ts
@@ -1,7 +1,7 @@
-import { addMonths, isSameMonth } from "date-fns";
-import { dateLib } from "react-day-picker";
+import { addMonths, isSameMonth } from "date-fns"
+import { dateLib } from "react-day-picker/index.js"
 
-import { getNextMonth } from "./getNextMonth";
+import { getNextMonth } from "./getNextMonth.js"
 
 const startingMonth = new Date(2020, 4, 31);
 
diff --git a/src/helpers/getNextMonth.ts b/src/helpers/getNextMonth.ts
index 6a00b286bd..98002d9951 100644
--- a/src/helpers/getNextMonth.ts
+++ b/src/helpers/getNextMonth.ts
@@ -1,4 +1,4 @@
-import { PropsContextValue } from "../contexts";
+import { PropsContextValue } from "../contexts/index.js"
 
 /**
  * Return the next month the user can navigate to according to the given
diff --git a/src/helpers/getPossibleFocusDate.test.ts b/src/helpers/getPossibleFocusDate.test.ts
index 2ff6c4f633..970aca463e 100644
--- a/src/helpers/getPossibleFocusDate.test.ts
+++ b/src/helpers/getPossibleFocusDate.test.ts
@@ -1,4 +1,4 @@
-import type { Locale } from "date-fns";
+import type { Locale } from "date-fns"
 // Adjust the import path
 import {
   addDays,
@@ -11,11 +11,11 @@ import {
   endOfWeek
 } from "date-fns";
 
-import { dateLib } from "../";
-import type { PropsContextValue } from "../contexts/useProps";
-import type { MoveFocusBy, MoveFocusDir } from "../types";
+import { dateLib } from "../index.js"
+import type { PropsContextValue } from "../contexts/useProps.js"
+import type { MoveFocusBy, MoveFocusDir } from "../types/index.js"
 
-import { getPossibleFocusDate } from "./getPossibleFocusDate";
+import { getPossibleFocusDate } from "./getPossibleFocusDate.js"
 
 const baseDate = new Date(2023, 0, 1); // Jan 1, 2023
 const options: Pick<
@@ -35,15 +35,15 @@ const testCases: {
   moveDir: MoveFocusDir;
   expectedFn: (date: Date | number, amount: number) => Date;
 }[] = [
-  { moveBy: "day", moveDir: "after", expectedFn: addDays },
-  { moveBy: "day", moveDir: "before", expectedFn: addDays },
-  { moveBy: "month", moveDir: "after", expectedFn: addMonths },
-  { moveBy: "month", moveDir: "before", expectedFn: addMonths },
-  { moveBy: "week", moveDir: "after", expectedFn: addWeeks },
-  { moveBy: "week", moveDir: "before", expectedFn: addWeeks },
-  { moveBy: "year", moveDir: "after", expectedFn: addYears },
-  { moveBy: "year", moveDir: "before", expectedFn: addYears }
-];
+    { moveBy: "day", moveDir: "after", expectedFn: addDays },
+    { moveBy: "day", moveDir: "before", expectedFn: addDays },
+    { moveBy: "month", moveDir: "after", expectedFn: addMonths },
+    { moveBy: "month", moveDir: "before", expectedFn: addMonths },
+    { moveBy: "week", moveDir: "after", expectedFn: addWeeks },
+    { moveBy: "week", moveDir: "before", expectedFn: addWeeks },
+    { moveBy: "year", moveDir: "after", expectedFn: addYears },
+    { moveBy: "year", moveDir: "before", expectedFn: addYears }
+  ];
 
 testCases.forEach(({ moveBy, moveDir, expectedFn }) => {
   test(`should move ${moveDir} by ${moveBy}`, () => {
@@ -60,15 +60,15 @@ const weekTestCases: {
     date: number | Date,
     options?:
       | {
-          locale?: Locale | undefined;
-          weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
-        }
+        locale?: Locale | undefined;
+        weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+      }
       | undefined
   ) => Date;
 }[] = [
-  { moveBy: "endOfWeek", moveDir: "after", expectedFn: endOfWeek },
-  { moveBy: "startOfWeek", moveDir: "after", expectedFn: startOfWeek }
-];
+    { moveBy: "endOfWeek", moveDir: "after", expectedFn: endOfWeek },
+    { moveBy: "startOfWeek", moveDir: "after", expectedFn: startOfWeek }
+  ];
 
 weekTestCases.forEach(({ moveBy, moveDir, expectedFn }) => {
   test(`should move ${moveDir} by ${moveBy}`, () => {
@@ -84,9 +84,9 @@ const ISOWeekTestCases: {
   moveDir: MoveFocusDir;
   expectedFn: (date: Date | number) => Date;
 }[] = [
-  { moveBy: "endOfWeek", moveDir: "after", expectedFn: endOfISOWeek },
-  { moveBy: "startOfWeek", moveDir: "after", expectedFn: startOfISOWeek }
-];
+    { moveBy: "endOfWeek", moveDir: "after", expectedFn: endOfISOWeek },
+    { moveBy: "startOfWeek", moveDir: "after", expectedFn: startOfISOWeek }
+  ];
 
 ISOWeekTestCases.forEach(({ moveBy, moveDir, expectedFn }) => {
   test(`should move ${moveDir} by ${moveBy} when ISOWeek is true`, () => {
diff --git a/src/helpers/getPossibleFocusDate.ts b/src/helpers/getPossibleFocusDate.ts
index 7ee04886e0..dace205144 100644
--- a/src/helpers/getPossibleFocusDate.ts
+++ b/src/helpers/getPossibleFocusDate.ts
@@ -1,5 +1,5 @@
-import type { PropsContextValue } from "../contexts";
-import type { MoveFocusBy, MoveFocusDir } from "../types";
+import type { PropsContextValue } from "../contexts/index.js"
+import type { MoveFocusBy, MoveFocusDir } from "../types/index.js"
 
 /** Return the next date that should be focused. */
 export function getPossibleFocusDate(
diff --git a/src/helpers/getPreviousMonth.test.ts b/src/helpers/getPreviousMonth.test.ts
index 79e1e1b98b..e5e323617b 100644
--- a/src/helpers/getPreviousMonth.test.ts
+++ b/src/helpers/getPreviousMonth.test.ts
@@ -1,6 +1,6 @@
-import { dateLib } from "../";
+import { dateLib } from "../index.js"
 
-import { getPreviousMonth } from "./getPreviousMonth";
+import { getPreviousMonth } from "./getPreviousMonth.js"
 
 it("should return undefined if navigation is disabled", () => {
   const firstDisplayedMonth = new Date(2022, 0, 1); // January 2022
diff --git a/src/helpers/getPreviousMonth.ts b/src/helpers/getPreviousMonth.ts
index 55674f98ad..a4779e1d33 100644
--- a/src/helpers/getPreviousMonth.ts
+++ b/src/helpers/getPreviousMonth.ts
@@ -1,4 +1,4 @@
-import type { PropsContextValue } from "../contexts";
+import type { PropsContextValue } from "../contexts/index.js"
 
 /**
  * Return the next previous the user can navigate to, according to the given
diff --git a/src/helpers/getStartEndMonths.test.ts b/src/helpers/getStartEndMonths.test.ts
index 805d734399..4931819826 100644
--- a/src/helpers/getStartEndMonths.test.ts
+++ b/src/helpers/getStartEndMonths.test.ts
@@ -1,4 +1,4 @@
-import { getStartEndMonths } from "./getStartEndMonths";
+import { getStartEndMonths } from "./getStartEndMonths.js"
 
 describe('when "startMonth" is not passed in', () => {
   test('"startMonth" should be undefined', () => {
diff --git a/src/helpers/getStartEndMonths.ts b/src/helpers/getStartEndMonths.ts
index 632bc202b4..3eb69e4ce8 100644
--- a/src/helpers/getStartEndMonths.ts
+++ b/src/helpers/getStartEndMonths.ts
@@ -1,5 +1,5 @@
-import { dateLib } from "../lib";
-import type { DayPickerProps } from "../types";
+import { dateLib } from "../lib/index.js"
+import type { DayPickerProps } from "../types/index.js"
 
 /**
  * Return the `fromMonth` and `toMonth` prop values values parsing the DayPicker
diff --git a/src/helpers/getStyleForModifiers.test.ts b/src/helpers/getStyleForModifiers.test.ts
index a0fc7666dc..c4087c2540 100644
--- a/src/helpers/getStyleForModifiers.test.ts
+++ b/src/helpers/getStyleForModifiers.test.ts
@@ -1,10 +1,10 @@
-import type { CSSProperties } from "react";
+import type { CSSProperties } from "react"
 
 // Update the path as needed
-import { UI } from "../UI";
-import type { Modifiers, ModifiersStyles, Styles } from "../types";
+import { UI } from "../UI.js"
+import type { Modifiers, ModifiersStyles, Styles } from "../types/index.js"
 
-import { getStyleForModifiers } from "./getStyleForModifiers";
+import { getStyleForModifiers } from "./getStyleForModifiers.js"
 
 const baseDayStyle: CSSProperties = {
   backgroundColor: "white",
diff --git a/src/helpers/getStyleForModifiers.ts b/src/helpers/getStyleForModifiers.ts
index 73bc6b435e..649153a62a 100644
--- a/src/helpers/getStyleForModifiers.ts
+++ b/src/helpers/getStyleForModifiers.ts
@@ -1,7 +1,7 @@
-import type { CSSProperties } from "react";
+import type { CSSProperties } from "react"
 
-import { UI } from "../UI";
-import type { Modifiers, ModifiersStyles, Styles } from "../types";
+import { UI } from "../UI.js"
+import type { Modifiers, ModifiersStyles, Styles } from "../types/index.js"
 
 export function getStyleForModifiers(
   dayModifiers: Modifiers,
diff --git a/src/helpers/getWeekdays.test.ts b/src/helpers/getWeekdays.test.ts
index 9a133cc7d6..97a30db426 100644
--- a/src/helpers/getWeekdays.test.ts
+++ b/src/helpers/getWeekdays.test.ts
@@ -1,8 +1,8 @@
-import { es } from "date-fns/locale/es";
+import { es } from "date-fns/locale/es.js"
 
-import { dateLib } from "../lib";
+import { dateLib } from "../lib/index.js"
 
-import { getWeekdays } from "./getWeekdays";
+import { getWeekdays } from "./getWeekdays.js"
 
 let result: Date[];
 
diff --git a/src/helpers/getWeekdays.ts b/src/helpers/getWeekdays.ts
index 260872c389..83661c0ff7 100644
--- a/src/helpers/getWeekdays.ts
+++ b/src/helpers/getWeekdays.ts
@@ -1,6 +1,6 @@
-import { dateLib as defaultDateLib } from "../lib";
-import type { Locale } from "../lib/dateLib";
-import type { DateLib } from "../types";
+import { dateLib as defaultDateLib } from "../lib/index.js"
+import type { Locale } from "../lib/dateLib.js"
+import type { DateLib } from "../types/index.js"
 
 /**
  * Generate a series of 7 days, starting from the week, to use for formatting
diff --git a/src/helpers/getWeeks.test.ts b/src/helpers/getWeeks.test.ts
index 2491e958ea..53ad2a725a 100644
--- a/src/helpers/getWeeks.test.ts
+++ b/src/helpers/getWeeks.test.ts
@@ -1,6 +1,6 @@
-import { CalendarDay, CalendarMonth, CalendarWeek } from "../classes";
+import { CalendarDay, CalendarMonth, CalendarWeek } from "../classes/index.js"
 
-import { getWeeks } from "./getWeeks";
+import { getWeeks } from "./getWeeks.js"
 
 const days1 = [
   new CalendarDay(new Date(2023, 1, 12), new Date(2023, 1, 1)),
diff --git a/src/helpers/getWeeks.ts b/src/helpers/getWeeks.ts
index fbce91b960..8c64d5c688 100644
--- a/src/helpers/getWeeks.ts
+++ b/src/helpers/getWeeks.ts
@@ -1,4 +1,4 @@
-import type { CalendarMonth, CalendarWeek } from "../classes";
+import type { CalendarMonth, CalendarWeek } from "../classes/index.js"
 
 /** Returns an array of calendar weeks from an array of calendar months. */
 export function getWeeks(months: CalendarMonth[]) {
diff --git a/src/helpers/useControlledValue.test.ts b/src/helpers/useControlledValue.test.ts
index 68679da5fe..d4065209dd 100644
--- a/src/helpers/useControlledValue.test.ts
+++ b/src/helpers/useControlledValue.test.ts
@@ -1,6 +1,6 @@
-import { act, renderHook } from "@testing-library/react";
+import { act, renderHook } from "@testing-library/react"
 
-import { useControlledValue } from "./useControlledValue";
+import { useControlledValue } from "./useControlledValue.js"
 
 describe("when the value is controlled", () => {
   const defaultValue: string | undefined = "foo"; // not controlled
diff --git a/src/helpers/useControlledValue.ts b/src/helpers/useControlledValue.ts
index 0e8845b53a..82d26b8d22 100644
--- a/src/helpers/useControlledValue.ts
+++ b/src/helpers/useControlledValue.ts
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState } from "react"
 
 export type DispatchStateAction<T> = React.Dispatch<React.SetStateAction<T>>;
 
diff --git a/src/jalali.tsx b/src/jalali.tsx
index c9c22f4423..88291aab35 100644
--- a/src/jalali.tsx
+++ b/src/jalali.tsx
@@ -1,8 +1,8 @@
-import React from "react";
+import React from "react"
 
-import * as jalaliDateLib from "date-fns-jalali";
+import * as jalaliDateLib from "date-fns-jalali"
 
-import { DayPicker as DayPickerComponent, type DayPickerProps } from "./";
+import { DayPicker as DayPickerComponent, type DayPickerProps } from "./index.js"
 
 export function DayPicker(props: DayPickerProps) {
   return <DayPickerComponent dateLib={jalaliDateLib} {...props} />;
diff --git a/src/labels/labelCaption.ts b/src/labels/labelCaption.ts
index 36901aa365..3d6c952e7f 100644
--- a/src/labels/labelCaption.ts
+++ b/src/labels/labelCaption.ts
@@ -1,6 +1,6 @@
-import type { DateLib } from "../";
-import { dateLib as defaultDateLib } from "../lib";
-import type { FormatOptions } from "../lib/dateLib";
+import type { DateLib } from "../index.js"
+import { dateLib as defaultDateLib } from "../lib/index.js"
+import type { FormatOptions } from "../lib/dateLib.js"
 
 /**
  * Return an ARIA label for the month caption. The label is used in an aria-live
diff --git a/src/labels/labelDay.test.ts b/src/labels/labelDay.test.ts
index f66ea3214a..b40191e1e7 100644
--- a/src/labels/labelDay.test.ts
+++ b/src/labels/labelDay.test.ts
@@ -1,8 +1,8 @@
-import { es } from "date-fns/locale/es";
+import { es } from "date-fns/locale/es.js"
 
-import type { Modifiers } from "../types";
+import type { Modifiers } from "../types/index.js"
 
-import { labelDay } from "./labelDay";
+import { labelDay } from "./labelDay.js"
 
 const day = new Date(2022, 10, 21);
 const dayModifiers: Modifiers = {
diff --git a/src/labels/labelDay.ts b/src/labels/labelDay.ts
index fbb68b8659..deab9a7689 100644
--- a/src/labels/labelDay.ts
+++ b/src/labels/labelDay.ts
@@ -1,7 +1,7 @@
-import type { DateLib } from "../";
-import { dateLib as defaultDateLib } from "../lib";
-import type { FormatOptions } from "../lib/dateLib";
-import type { Modifiers } from "../types";
+import type { DateLib } from "../index.js"
+import { dateLib as defaultDateLib } from "../lib/index.js"
+import type { FormatOptions } from "../lib/dateLib.js"
+import type { Modifiers } from "../types/index.js"
 
 /**
  * Return an ARIA label for the day button. By default, it returns an empty
diff --git a/src/labels/labelGrid.ts b/src/labels/labelGrid.ts
index cb72ace8d7..c48ed709d7 100644
--- a/src/labels/labelGrid.ts
+++ b/src/labels/labelGrid.ts
@@ -1,7 +1,7 @@
-import type { FormatOptions } from "date-fns";
+import type { FormatOptions } from "date-fns"
 
-import { dateLib as defaultDateLib } from "../lib";
-import type { DateLib } from "../types";
+import { dateLib as defaultDateLib } from "../lib/index.js"
+import type { DateLib } from "../types/index.js"
 
 /**
  * Return the default ARIA label for the month grid.
diff --git a/src/labels/labelMonthDropdown.test.ts b/src/labels/labelMonthDropdown.test.ts
index 1366705966..5c57279568 100644
--- a/src/labels/labelMonthDropdown.test.ts
+++ b/src/labels/labelMonthDropdown.test.ts
@@ -1,4 +1,4 @@
-import { labelMonthDropdown } from "./labelMonthDropdown";
+import { labelMonthDropdown } from "./labelMonthDropdown.js"
 
 test("should return the label", () => {
   expect(labelMonthDropdown({})).toEqual("Month: ");
diff --git a/src/labels/labelMonthDropdown.ts b/src/labels/labelMonthDropdown.ts
index c63497cbc7..bddca50f33 100644
--- a/src/labels/labelMonthDropdown.ts
+++ b/src/labels/labelMonthDropdown.ts
@@ -1,4 +1,4 @@
-import type { FormatOptions } from "../lib/dateLib";
+import type { FormatOptions } from "../lib/dateLib.js"
 
 /**
  * Return the default ARIA label for the WeekNumber element.
diff --git a/src/labels/labelNext.test.ts b/src/labels/labelNext.test.ts
index b8e189da08..9941dd0c7a 100644
--- a/src/labels/labelNext.test.ts
+++ b/src/labels/labelNext.test.ts
@@ -1,4 +1,4 @@
-import { labelNext } from "./labelNext";
+import { labelNext } from "./labelNext.js"
 
 test("should return the label", () => {
   expect(labelNext(new Date(), {})).toEqual("Next Month");
diff --git a/src/labels/labelNext.ts b/src/labels/labelNext.ts
index 5c8961916d..ca80caff38 100644
--- a/src/labels/labelNext.ts
+++ b/src/labels/labelNext.ts
@@ -1,4 +1,4 @@
-import type { FormatOptions } from "../lib/dateLib";
+import type { FormatOptions } from "../lib/dateLib.js"
 
 /**
  * Return the default ARIA label for next month button.
diff --git a/src/labels/labelPrevious.test.ts b/src/labels/labelPrevious.test.ts
index 49030d8c75..b0dd46a6a8 100644
--- a/src/labels/labelPrevious.test.ts
+++ b/src/labels/labelPrevious.test.ts
@@ -1,4 +1,4 @@
-import { labelPrevious } from "./labelPrevious";
+import { labelPrevious } from "./labelPrevious.js"
 
 test("should return the label", () => {
   expect(labelPrevious(new Date(), {})).toEqual("Previous Month");
diff --git a/src/labels/labelPrevious.ts b/src/labels/labelPrevious.ts
index de206158be..e217d3b1de 100644
--- a/src/labels/labelPrevious.ts
+++ b/src/labels/labelPrevious.ts
@@ -1,4 +1,4 @@
-import type { FormatOptions } from "../lib/dateLib";
+import type { FormatOptions } from "../lib/dateLib.js"
 
 /**
  * Return the default ARIA label for next month button.
diff --git a/src/labels/labelWeekNumber.test.ts b/src/labels/labelWeekNumber.test.ts
index f81a66f1d8..b459f2480e 100644
--- a/src/labels/labelWeekNumber.test.ts
+++ b/src/labels/labelWeekNumber.test.ts
@@ -1,4 +1,4 @@
-import { labelWeekNumber } from "./labelWeekNumber";
+import { labelWeekNumber } from "./labelWeekNumber.js"
 
 test("should return the label", () => {
   expect(labelWeekNumber(2)).toEqual("Week 2");
diff --git a/src/labels/labelWeekNumber.ts b/src/labels/labelWeekNumber.ts
index 1b38ed08e1..603791c376 100644
--- a/src/labels/labelWeekNumber.ts
+++ b/src/labels/labelWeekNumber.ts
@@ -1,4 +1,4 @@
-import type { FormatOptions } from "../lib/dateLib";
+import type { FormatOptions } from "../lib/dateLib.js"
 
 /**
  * Return the default ARIA label for the week number element.
diff --git a/src/labels/labelWeekNumberHeader.test.ts b/src/labels/labelWeekNumberHeader.test.ts
index efe97fc874..4c35366199 100644
--- a/src/labels/labelWeekNumberHeader.test.ts
+++ b/src/labels/labelWeekNumberHeader.test.ts
@@ -1,4 +1,4 @@
-import { labelWeekNumberHeader } from "./labelWeekNumberHeader";
+import { labelWeekNumberHeader } from "./labelWeekNumberHeader.js"
 
 test("should return the label", () => {
   expect(labelWeekNumberHeader()).toEqual("Week Number");
diff --git a/src/labels/labelWeekNumberHeader.ts b/src/labels/labelWeekNumberHeader.ts
index b4aee1ab56..02c12f654d 100644
--- a/src/labels/labelWeekNumberHeader.ts
+++ b/src/labels/labelWeekNumberHeader.ts
@@ -1,4 +1,4 @@
-import type { FormatOptions } from "../lib/dateLib";
+import type { FormatOptions } from "../lib/dateLib.js"
 
 /**
  * Return the default ARIA label for the week number header element.
diff --git a/src/labels/labelWeekday.test.ts b/src/labels/labelWeekday.test.ts
index 8b6283e45e..9f1ed6254a 100644
--- a/src/labels/labelWeekday.test.ts
+++ b/src/labels/labelWeekday.test.ts
@@ -1,6 +1,6 @@
-import { es } from "date-fns/locale/es";
+import { es } from "date-fns/locale/es.js"
 
-import { labelWeekday } from "./labelWeekday";
+import { labelWeekday } from "./labelWeekday.js"
 
 const weekDay = new Date(2022, 10, 21);
 
diff --git a/src/labels/labelWeekday.ts b/src/labels/labelWeekday.ts
index 56be7febe1..3d5e71824e 100644
--- a/src/labels/labelWeekday.ts
+++ b/src/labels/labelWeekday.ts
@@ -1,6 +1,6 @@
-import { dateLib as defaultDateLib } from "../lib";
-import type { FormatOptions } from "../lib/dateLib";
-import type { DateLib } from "../types";
+import { dateLib as defaultDateLib } from "../lib/index.js"
+import type { FormatOptions } from "../lib/dateLib.js"
+import type { DateLib } from "../types/index.js"
 
 /**
  * Return he default ARIA label for the Weekday element.
diff --git a/src/labels/labelYearDropdown.test.ts b/src/labels/labelYearDropdown.test.ts
index 17b61bd5ef..b2ebbd6eb5 100644
--- a/src/labels/labelYearDropdown.test.ts
+++ b/src/labels/labelYearDropdown.test.ts
@@ -1,4 +1,4 @@
-import { labelYearDropdown } from "./labelYearDropdown";
+import { labelYearDropdown } from "./labelYearDropdown.js"
 
 test("should return the label", () => {
   expect(labelYearDropdown()).toEqual("Year: ");
diff --git a/src/labels/labelYearDropdown.ts b/src/labels/labelYearDropdown.ts
index af67f58ee7..d59b165128 100644
--- a/src/labels/labelYearDropdown.ts
+++ b/src/labels/labelYearDropdown.ts
@@ -1,4 +1,4 @@
-import type { FormatOptions } from "../lib/dateLib";
+import type { FormatOptions } from "../lib/dateLib.js"
 
 /**
  * Return the default ARIA label for the years dropdown.
diff --git a/src/lib/dateLib.ts b/src/lib/dateLib.ts
index 0b1d6d07a2..1688d1d59f 100644
--- a/src/lib/dateLib.ts
+++ b/src/lib/dateLib.ts
@@ -1,33 +1,33 @@
-import { GenericDateConstructor } from "date-fns";
-import { addDays } from "date-fns/addDays";
-import { addMonths } from "date-fns/addMonths";
-import { addWeeks } from "date-fns/addWeeks";
-import { addYears } from "date-fns/addYears";
-import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
-import { differenceInCalendarMonths } from "date-fns/differenceInCalendarMonths";
-import { endOfISOWeek } from "date-fns/endOfISOWeek";
-import { endOfMonth } from "date-fns/endOfMonth";
-import { endOfWeek } from "date-fns/endOfWeek";
-import { endOfYear } from "date-fns/endOfYear";
-import { format } from "date-fns/format";
-import { getISOWeek } from "date-fns/getISOWeek";
-import { getUnixTime } from "date-fns/getUnixTime";
-import { getWeek } from "date-fns/getWeek";
-import { isAfter } from "date-fns/isAfter";
-import { isBefore } from "date-fns/isBefore";
-import { isDate } from "date-fns/isDate";
-import { isSameDay } from "date-fns/isSameDay";
-import { isSameMonth } from "date-fns/isSameMonth";
-import { isSameYear } from "date-fns/isSameYear";
-import { max } from "date-fns/max";
-import { min } from "date-fns/min";
-import { setMonth } from "date-fns/setMonth";
-import { setYear } from "date-fns/setYear";
-import { startOfDay } from "date-fns/startOfDay";
-import { startOfISOWeek } from "date-fns/startOfISOWeek";
-import { startOfMonth } from "date-fns/startOfMonth";
-import { startOfWeek } from "date-fns/startOfWeek";
-import { startOfYear } from "date-fns/startOfYear";
+import { GenericDateConstructor } from "date-fns"
+import { addDays } from "date-fns/addDays.js"
+import { addMonths } from "date-fns/addMonths.js"
+import { addWeeks } from "date-fns/addWeeks.js"
+import { addYears } from "date-fns/addYears.js"
+import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays.js"
+import { differenceInCalendarMonths } from "date-fns/differenceInCalendarMonths.js"
+import { endOfISOWeek } from "date-fns/endOfISOWeek.js"
+import { endOfMonth } from "date-fns/endOfMonth.js"
+import { endOfWeek } from "date-fns/endOfWeek.js"
+import { endOfYear } from "date-fns/endOfYear.js"
+import { format } from "date-fns/format.js"
+import { getISOWeek } from "date-fns/getISOWeek.js"
+import { getUnixTime } from "date-fns/getUnixTime.js"
+import { getWeek } from "date-fns/getWeek.js"
+import { isAfter } from "date-fns/isAfter.js"
+import { isBefore } from "date-fns/isBefore.js"
+import { isDate } from "date-fns/isDate.js"
+import { isSameDay } from "date-fns/isSameDay.js"
+import { isSameMonth } from "date-fns/isSameMonth.js"
+import { isSameYear } from "date-fns/isSameYear.js"
+import { max } from "date-fns/max.js"
+import { min } from "date-fns/min.js"
+import { setMonth } from "date-fns/setMonth.js"
+import { setYear } from "date-fns/setYear.js"
+import { startOfDay } from "date-fns/startOfDay.js"
+import { startOfISOWeek } from "date-fns/startOfISOWeek.js"
+import { startOfMonth } from "date-fns/startOfMonth.js"
+import { startOfWeek } from "date-fns/startOfWeek.js"
+import { startOfYear } from "date-fns/startOfYear.js"
 
 /** @private */
 export type { Locale } from "date-fns";
diff --git a/src/selection/useMulti.tsx b/src/selection/useMulti.tsx
index e66fe0d694..d5ef388465 100644
--- a/src/selection/useMulti.tsx
+++ b/src/selection/useMulti.tsx
@@ -1,7 +1,7 @@
-import React from "react";
+import React from "react"
 
-import { useProps } from "../contexts";
-import type { Modifiers, PropsMulti } from "../types";
+import { useProps } from "../contexts/index.js"
+import type { Modifiers, PropsMulti } from "../types/index.js"
 
 export type MultiContextValue<T> = {
   setSelected: (
diff --git a/src/selection/useRange.tsx b/src/selection/useRange.tsx
index 0072aa3b19..6cffe79f32 100644
--- a/src/selection/useRange.tsx
+++ b/src/selection/useRange.tsx
@@ -1,9 +1,9 @@
-import React from "react";
+import React from "react"
 
-import { useProps } from "../contexts";
-import { DateRange, Modifiers, PropsRange } from "../types";
-import { addToRange, dateMatchModifiers } from "../utils";
-import { isDateInRange } from "../utils/isDateInRange";
+import { useProps } from "../contexts/index.js"
+import { DateRange, Modifiers, PropsRange } from "../types/index.js"
+import { addToRange, dateMatchModifiers } from "../utils/index.js"
+import { isDateInRange } from "../utils/isDateInRange.js"
 
 export type RangeContextValue<T> = {
   setSelected: (
diff --git a/src/selection/useSingle.tsx b/src/selection/useSingle.tsx
index 46cfb1dee5..4868ef5666 100644
--- a/src/selection/useSingle.tsx
+++ b/src/selection/useSingle.tsx
@@ -1,7 +1,7 @@
-import React from "react";
+import React from "react"
 
-import { useProps } from "../contexts";
-import { Modifiers, PropsSingle } from "../types";
+import { useProps } from "../contexts/index.js"
+import { Modifiers, PropsSingle } from "../types/index.js"
 
 export type SingleContextValue<T> = {
   setSelected: (
diff --git a/src/types/deprecated.ts b/src/types/deprecated.ts
index 2bd78edc7f..dddd7e1fb1 100644
--- a/src/types/deprecated.ts
+++ b/src/types/deprecated.ts
@@ -1,16 +1,16 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Calendar } from "../components/Calendar";
+import { Calendar } from "../components/Calendar.js"
 import {
   MonthCaption,
   type MonthCaptionProps
 } from "../components/MonthCaption";
-import { Week, type WeekProps } from "../components/Week";
-import { useCalendar } from "../contexts";
-import { useProps, type PropsContextValue } from "../contexts";
-import { labelDay, labelNext, labelWeekday, labelWeekNumber } from "../labels";
+import { Week, type WeekProps } from "../components/Week.js"
+import { useCalendar } from "../contexts/index.js"
+import { useProps, type PropsContextValue } from "../contexts/index.js"
+import { labelDay, labelNext, labelWeekday, labelWeekNumber } from "../labels/index.js"
 
-import type { PropsMulti, PropsRange, PropsSingle } from "./props";
-import type { Mode, DayEventHandler } from "./shared";
+import type { PropsMulti, PropsRange, PropsSingle } from "./props.js"
+import type { Mode, DayEventHandler } from "./shared.js"
 
 /**
  * @deprecated This type will be removed.
diff --git a/src/types/props.test.tsx b/src/types/props.test.tsx
index b9a5b15568..f86263e143 100644
--- a/src/types/props.test.tsx
+++ b/src/types/props.test.tsx
@@ -1,6 +1,6 @@
-import React from "react";
+import React from "react"
 
-import { DayPicker } from "../DayPicker";
+import { DayPicker } from "../DayPicker.js"
 
 // @ts-expect-error THis is just for testing the types.
 const Test = () => {
diff --git a/src/types/props.ts b/src/types/props.ts
index 1d6cd00cf2..0e4504b9bb 100644
--- a/src/types/props.ts
+++ b/src/types/props.ts
@@ -1,6 +1,6 @@
-import React from "react";
+import React from "react"
 
-import type { Locale } from "../lib/dateLib";
+import type { Locale } from "../lib/dateLib.js"
 
 import type {
   ClassNames,
diff --git a/src/types/shared.ts b/src/types/shared.ts
index a928497482..1bb4694422 100644
--- a/src/types/shared.ts
+++ b/src/types/shared.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-types */
-import type { MouseEvent, CSSProperties } from "react";
+import type { MouseEvent, CSSProperties } from "react"
 
 import {
   UI,
@@ -9,7 +9,7 @@ import {
   WeekNumberFlag,
   SelectionState
 } from "../UI";
-import * as components from "../components/custom-components";
+import * as components from "../components/custom-components.js"
 import {
   formatCaption,
   formatDay,
@@ -31,7 +31,7 @@ import {
   labelWeekNumberHeader,
   labelYearDropdown
 } from "../labels";
-import { dateLib } from "../lib";
+import { dateLib } from "../lib/index.js"
 
 /**
  * Selection modes supported by DayPicker.
@@ -221,23 +221,23 @@ export type WeekNumberMouseEventHandler = (
 /** Maps user interface elements, selection states, and flags to a CSS style. */
 export type Styles = {
   [key in
-    | UI
-    | SelectionState
-    | DayFlag
-    | CalendarFlag
-    | ChevronFlag
-    | WeekNumberFlag]: CSSProperties | undefined;
+  | UI
+  | SelectionState
+  | DayFlag
+  | CalendarFlag
+  | ChevronFlag
+  | WeekNumberFlag]: CSSProperties | undefined;
 };
 
 /** Defines the class names for various UI components and states. */
 export type ClassNames = {
   [key in
-    | UI
-    | SelectionState
-    | DayFlag
-    | CalendarFlag
-    | ChevronFlag
-    | WeekNumberFlag]: string;
+  | UI
+  | SelectionState
+  | DayFlag
+  | CalendarFlag
+  | ChevronFlag
+  | WeekNumberFlag]: string;
 };
 
 /** The flags that are matching a day in the calendar. */
diff --git a/src/utc.tsx b/src/utc.tsx
index 38838d5512..4e8c7d16f6 100644
--- a/src/utc.tsx
+++ b/src/utc.tsx
@@ -1,8 +1,8 @@
-import React from "react";
+import React from "react"
 
-import { UTCDate } from "@date-fns/utc";
+import { UTCDate } from "@date-fns/utc"
 
-import { DayPicker as DayPickerComponent, type DayPickerProps } from "./";
+import { DayPicker as DayPickerComponent, type DayPickerProps } from "./index.js"
 
 export function DayPicker(props: DayPickerProps) {
   return <DayPickerComponent dateLib={{ Date: UTCDate }} {...props} />;
diff --git a/src/utils/addToRange.test.ts b/src/utils/addToRange.test.ts
index 830df5bd98..8eff68e95e 100644
--- a/src/utils/addToRange.test.ts
+++ b/src/utils/addToRange.test.ts
@@ -1,8 +1,8 @@
-import { addDays, subDays } from "date-fns";
+import { addDays, subDays } from "date-fns"
 
-import type { DateRange } from "../types";
+import type { DateRange } from "../types/index.js"
 
-import { addToRange } from "./addToRange";
+import { addToRange } from "./addToRange.js"
 
 describe('when no "from" is the range', () => {
   const range = { from: undefined };
diff --git a/src/utils/addToRange.ts b/src/utils/addToRange.ts
index 739a21e123..2b824aadca 100644
--- a/src/utils/addToRange.ts
+++ b/src/utils/addToRange.ts
@@ -1,5 +1,5 @@
-import { dateLib as defaultDateLib } from "../lib";
-import type { DateRange, DateLib } from "../types";
+import { dateLib as defaultDateLib } from "../lib/index.js"
+import type { DateRange, DateLib } from "../types/index.js"
 
 /**
  * Add a day to an existing range.
diff --git a/src/utils/dateMatchModifiers.test.ts b/src/utils/dateMatchModifiers.test.ts
index d9a784c63c..3ef4deec9e 100644
--- a/src/utils/dateMatchModifiers.test.ts
+++ b/src/utils/dateMatchModifiers.test.ts
@@ -1,6 +1,6 @@
-import { addDays, subDays } from "date-fns";
+import { addDays, subDays } from "date-fns"
 
-import { dateLib } from "../lib";
+import { dateLib } from "../lib/index.js"
 import {
   DateAfter,
   DateBefore,
@@ -9,7 +9,7 @@ import {
   DayOfWeek
 } from "../types";
 
-import { dateMatchModifiers } from "./dateMatchModifiers";
+import { dateMatchModifiers } from "./dateMatchModifiers.js"
 
 const testDay = new Date();
 
diff --git a/src/utils/dateMatchModifiers.ts b/src/utils/dateMatchModifiers.ts
index 2777240b60..10b91e38b8 100644
--- a/src/utils/dateMatchModifiers.ts
+++ b/src/utils/dateMatchModifiers.ts
@@ -1,7 +1,7 @@
-import { dateLib as defaultDateLib } from "../lib";
-import type { DateLib, Matcher } from "../types";
+import { dateLib as defaultDateLib } from "../lib/index.js"
+import type { DateLib, Matcher } from "../types/index.js"
 
-import { isDateInRange } from "./isDateInRange";
+import { isDateInRange } from "./isDateInRange.js"
 import {
   isDateAfterType,
   isDateBeforeType,
diff --git a/src/utils/isDateInRange.test.ts b/src/utils/isDateInRange.test.ts
index db33f14b23..06ee4c9cb1 100644
--- a/src/utils/isDateInRange.test.ts
+++ b/src/utils/isDateInRange.test.ts
@@ -1,8 +1,8 @@
-import { addDays } from "date-fns/addDays";
+import { addDays } from "date-fns/addDays.js"
 
-import { DateRange } from "../types";
+import { DateRange } from "../types/index.js"
 
-import { isDateInRange } from "./isDateInRange";
+import { isDateInRange } from "./isDateInRange.js"
 
 const date = new Date();
 
diff --git a/src/utils/isDateInRange.ts b/src/utils/isDateInRange.ts
index 1b562f0f67..5abb329f8e 100644
--- a/src/utils/isDateInRange.ts
+++ b/src/utils/isDateInRange.ts
@@ -1,5 +1,5 @@
-import { dateLib as defaultDateLib } from "../lib";
-import type { DateRange, DateLib } from "../types";
+import { dateLib as defaultDateLib } from "../lib/index.js"
+import type { DateRange, DateLib } from "../types/index.js"
 
 /**
  * Determines whether a given date is inside a specified date range.