diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 25af6cb1a2..7751fce28f 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -30,6 +30,7 @@ const config = {
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off",
     "import/no-unresolved": "off",
+    "import/namespace": "off",
     "prettier/prettier": "warn",
     "no-console": "warn",
     "@typescript-eslint/no-unused-vars": "off",
diff --git a/jest.config.ts b/jest.config.ts
index 4110631f81..b9a1b22ce5 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -6,7 +6,8 @@ const config: Config.InitialOptions = {
   moduleNameMapper: {
     "@/test/(.*)": ["<rootDir>/test/$1"],
     "react-day-picker": ["<rootDir>/src/index.ts"],
-    "react-day-picker/(.*)": ["<rootDir>/src/$1"]
+    "react-day-picker/(.*)": ["<rootDir>/src/$1.js"],
+    "^(\\.\\.?\\/.+)\\.jsx?$": "$1" // see https://github.com/kulshekhar/ts-jest/issues/1057
   },
   testEnvironment: "jsdom",
   coverageReporters: ["lcov", "text", "clover"],
diff --git a/package.json b/package.json
index 0733c66808..d63b07428e 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   "types": "./dist/cjs/index.d.ts",
   "module": "./dist/esm/index.js",
   "style": "./src/style.css",
+  "type": "module",
   "exports": {
     ".": {
       "require": {
diff --git a/src/DayPicker.tsx b/src/DayPicker.tsx
index a22c31013c..fd6ecc8d03 100644
--- a/src/DayPicker.tsx
+++ b/src/DayPicker.tsx
@@ -1,8 +1,8 @@
 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..eabddd2dbe 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.ts b/src/classes/CalendarDay.ts
index ed928ce090..7a4ba57910 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.ts b/src/classes/CalendarMonth.ts
index 1693873f62..cd76ed82f3 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.ts b/src/classes/CalendarWeek.ts
index b56fa5f0f3..09aec66848 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/classes/index.ts b/src/classes/index.ts
index 998d86db68..a163cb8ca8 100644
--- a/src/classes/index.ts
+++ b/src/classes/index.ts
@@ -1,3 +1,3 @@
-export * from "./CalendarDay";
-export * from "./CalendarMonth";
-export * from "./CalendarWeek";
+export * from "./CalendarDay.js";
+export * from "./CalendarMonth.js";
+export * from "./CalendarWeek.js";
diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
index 14767b924b..a408a93afb 100644
--- a/src/components/Calendar.tsx
+++ b/src/components/Calendar.tsx
@@ -1,12 +1,12 @@
 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..09f8b70e6a 100644
--- a/src/components/Chevron.tsx
+++ b/src/components/Chevron.tsx
@@ -1,7 +1,7 @@
 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..91031b7bfa 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 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..cbcf3e1414 100644
--- a/src/components/DayDate.tsx
+++ b/src/components/DayDate.tsx
@@ -1,7 +1,7 @@
 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..a6eb336e49 100644
--- a/src/components/DayWrapper.tsx
+++ b/src/components/DayWrapper.tsx
@@ -1,15 +1,20 @@
 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..0a12873902 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -1,11 +1,11 @@
 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..fbdd33da2e 100644
--- a/src/components/DropdownNav.tsx
+++ b/src/components/DropdownNav.tsx
@@ -1,11 +1,11 @@
 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/Month.tsx b/src/components/Month.tsx
index 59e5ab533f..d7e4904afe 100644
--- a/src/components/Month.tsx
+++ b/src/components/Month.tsx
@@ -1,12 +1,12 @@
 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..bab1d117b7 100644
--- a/src/components/MonthCaption.tsx
+++ b/src/components/MonthCaption.tsx
@@ -1,10 +1,10 @@
 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/MonthsDropdown.tsx b/src/components/MonthsDropdown.tsx
index 7d9ad88043..398fc62a1e 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 { 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.tsx b/src/components/Nav.tsx
index a387e67a90..6d50c0d709 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -1,10 +1,10 @@
 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/Week.tsx b/src/components/Week.tsx
index d77c2754d5..3e1087a434 100644
--- a/src/components/Week.tsx
+++ b/src/components/Week.tsx
@@ -1,11 +1,11 @@
 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..f4817cdcce 100644
--- a/src/components/WeekNumber.tsx
+++ b/src/components/WeekNumber.tsx
@@ -1,8 +1,8 @@
 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..5d9f3f3076 100644
--- a/src/components/Weekday.tsx
+++ b/src/components/Weekday.tsx
@@ -1,7 +1,7 @@
 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..ed27b28c56 100644
--- a/src/components/Weekdays.tsx
+++ b/src/components/Weekdays.tsx
@@ -1,10 +1,10 @@
 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..dd291e30ca 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 { 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/components/custom-components.ts b/src/components/custom-components.ts
index 8d47247e0d..331a1d87ea 100644
--- a/src/components/custom-components.ts
+++ b/src/components/custom-components.ts
@@ -1,19 +1,19 @@
-export * from "./Button";
-export * from "./Chevron";
-export * from "./Day";
-export * from "./DayDate";
-export * from "./Dropdown";
-export * from "./DropdownNav";
-export * from "./Footer";
-export * from "./Month";
-export * from "./MonthCaption";
-export * from "./Months";
-export * from "./MonthsDropdown";
-export * from "./Nav";
-export * from "./Option";
-export * from "./Select";
-export * from "./Week";
-export * from "./Weekday";
-export * from "./Weekdays";
-export * from "./WeekNumber";
-export * from "./YearsDropdown";
+export * from "./Button.js";
+export * from "./Chevron.js";
+export * from "./Day.js";
+export * from "./DayDate.js";
+export * from "./Dropdown.js";
+export * from "./DropdownNav.js";
+export * from "./Footer.js";
+export * from "./Month.js";
+export * from "./MonthCaption.js";
+export * from "./Months.js";
+export * from "./MonthsDropdown.js";
+export * from "./Nav.js";
+export * from "./Option.js";
+export * from "./Select.js";
+export * from "./Week.js";
+export * from "./Weekday.js";
+export * from "./Weekdays.js";
+export * from "./WeekNumber.js";
+export * from "./YearsDropdown.js";
diff --git a/src/contexts/index.ts b/src/contexts/index.ts
index d563e62465..edf91675c8 100644
--- a/src/contexts/index.ts
+++ b/src/contexts/index.ts
@@ -1,4 +1,4 @@
-export * from "./useCalendar";
-export * from "./useFocus";
-export * from "./useModifiers";
-export * from "./useProps";
+export * from "./useCalendar.js";
+export * from "./useFocus.js";
+export * from "./useModifiers.js";
+export * from "./useProps.js";
diff --git a/src/contexts/providers.tsx b/src/contexts/providers.tsx
index 47c355ddee..4a22dd60a1 100644
--- a/src/contexts/providers.tsx
+++ b/src/contexts/providers.tsx
@@ -1,7 +1,11 @@
 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 +13,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.tsx b/src/contexts/useCalendar.tsx
index 44bca7177a..5efa3eadb6 100644
--- a/src/contexts/useCalendar.tsx
+++ b/src/contexts/useCalendar.tsx
@@ -1,20 +1,24 @@
 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 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.tsx b/src/contexts/useFocus.tsx
index 3adcbb0167..997114b6cd 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..3502f8971d 100644
--- a/src/contexts/useModifiers.tsx
+++ b/src/contexts/useModifiers.tsx
@@ -1,21 +1,21 @@
 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 { dateMatchModifiers } from "../utils/dateMatchModifiers.js";
+import { isDateInRange } from "../utils/index.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..3d45bfac51 100644
--- a/src/contexts/useProps.tsx
+++ b/src/contexts/useProps.tsx
@@ -1,12 +1,12 @@
 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.ts b/src/formatters/formatCaption.ts
index e567fdb8ef..0c836fde96 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.ts b/src/formatters/formatDay.ts
index a8d3ce3b2d..d00e3a3a04 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 type { FormatOptions } from "../lib/dateLib.js";
+import { dateLib as defaultDateLib } from "../lib/index.js";
+import type { DateLib } from "../types/index.js";
 
 /**
  * The default formatter for the day grid cell element.
diff --git a/src/formatters/formatMonthDropdown.ts b/src/formatters/formatMonthDropdown.ts
index 73ae298e7f..1783df7378 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/formatWeekdayName.ts b/src/formatters/formatWeekdayName.ts
index 0f1618039d..f321caa142 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 type { FormatOptions } from "../lib/dateLib.js";
+import { dateLib as defaultDateLib } from "../lib/index.js";
+import type { DateLib } from "../types/index.js";
 
 /**
  * The default formatter for the name of the weekday.
diff --git a/src/formatters/index.ts b/src/formatters/index.ts
index 5d069320a6..2221e54317 100644
--- a/src/formatters/index.ts
+++ b/src/formatters/index.ts
@@ -1,6 +1,6 @@
-export * from "./formatCaption";
-export * from "./formatDay";
-export * from "./formatMonthDropdown";
-export * from "./formatWeekNumber";
-export * from "./formatWeekdayName";
-export * from "./formatYearDropdown";
+export * from "./formatCaption.js";
+export * from "./formatDay.js";
+export * from "./formatMonthDropdown.js";
+export * from "./formatWeekNumber.js";
+export * from "./formatWeekdayName.js";
+export * from "./formatYearDropdown.js";
diff --git a/src/helpers/getClassNamesForModifiers.ts b/src/helpers/getClassNamesForModifiers.ts
index c693ea3028..fbeee8f4c6 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.tsx b/src/helpers/getDataAttributes.tsx
index 6c98716f68..04ef1d5e4d 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.ts b/src/helpers/getDates.ts
index faf00f0393..aacea768b5 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;
diff --git a/src/helpers/getDays.ts b/src/helpers/getDays.ts
index 3d7e10bac5..34b81c77f3 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.ts b/src/helpers/getDefaultClassNames.ts
index 96291d1069..1c216293a4 100644
--- a/src/helpers/getDefaultClassNames.ts
+++ b/src/helpers/getDefaultClassNames.ts
@@ -5,8 +5,8 @@ import {
   ChevronFlag,
   WeekNumberFlag,
   SelectionState
-} from "../UI";
-import type { ClassNames } from "../types";
+} from "../UI.js";
+import type { ClassNames } from "../types/index.js";
 
 /**
  * Get the default class names for the UI elements.
diff --git a/src/helpers/getDisplayMonths.ts b/src/helpers/getDisplayMonths.ts
index ff3569c0d7..e03e2da854 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.ts b/src/helpers/getDropdownMonths.ts
index a6c28e24ae..87b313c543 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.ts b/src/helpers/getDropdownYears.ts
index 6a2a86bb34..dc598fee3a 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.ts b/src/helpers/getFormatters.ts
index eeb7a45311..822bbd2935 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.ts b/src/helpers/getInitialMonth.ts
index d6b645588b..5362ebf215 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.ts b/src/helpers/getMonths.ts
index 5698af16a7..cc6e4f3ac8 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(
diff --git a/src/helpers/getNextFocus.tsx b/src/helpers/getNextFocus.tsx
index 6f21eee704..2913bf86ee 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.ts b/src/helpers/getNextMonth.ts
index 6a00b286bd..b62471aaf6 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..6a7c2c09f1 100644
--- a/src/helpers/getPossibleFocusDate.test.ts
+++ b/src/helpers/getPossibleFocusDate.test.ts
@@ -11,10 +11,10 @@ import {
   endOfWeek
 } from "date-fns";
 
-import { dateLib } from "../";
 import type { PropsContextValue } from "../contexts/useProps";
 import type { MoveFocusBy, MoveFocusDir } from "../types";
 
+import { dateLib } from "..";
 import { getPossibleFocusDate } from "./getPossibleFocusDate";
 
 const baseDate = new Date(2023, 0, 1); // Jan 1, 2023
diff --git a/src/helpers/getPossibleFocusDate.ts b/src/helpers/getPossibleFocusDate.ts
index 7ee04886e0..db33118419 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..9aef4eb45c 100644
--- a/src/helpers/getPreviousMonth.test.ts
+++ b/src/helpers/getPreviousMonth.test.ts
@@ -1,5 +1,4 @@
-import { dateLib } from "../";
-
+import { dateLib } from "..";
 import { getPreviousMonth } from "./getPreviousMonth";
 
 it("should return undefined if navigation is disabled", () => {
diff --git a/src/helpers/getPreviousMonth.ts b/src/helpers/getPreviousMonth.ts
index 55674f98ad..e5a516e9e8 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.ts b/src/helpers/getStartEndMonths.ts
index 632bc202b4..8474493a0e 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.ts b/src/helpers/getStyleForModifiers.ts
index 73bc6b435e..2e4cebea60 100644
--- a/src/helpers/getStyleForModifiers.ts
+++ b/src/helpers/getStyleForModifiers.ts
@@ -1,7 +1,7 @@
 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.ts b/src/helpers/getWeekdays.ts
index 260872c389..fe83fbb5aa 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 type { Locale } from "../lib/dateLib.js";
+import { dateLib as defaultDateLib } from "../lib/index.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.ts b/src/helpers/getWeeks.ts
index fbce91b960..9a34238995 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/index.ts b/src/helpers/index.ts
index 5d90c92790..dd7fda5102 100644
--- a/src/helpers/index.ts
+++ b/src/helpers/index.ts
@@ -1,2 +1,2 @@
 // Only export helpers that can be useful to other developers.
-export * from "./getDefaultClassNames";
+export * from "./getDefaultClassNames.js";
diff --git a/src/index.ts b/src/index.ts
index 3182f1e003..001d5d6996 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,16 +1,16 @@
-export * from "./DayPicker";
-export * from "./types";
+export * from "./DayPicker.js";
+export * from "./types/index.js";
 
-export * from "./classes";
-export * from "./components/custom-components";
+export * from "./classes/index.js";
+export * from "./components/custom-components.js";
 
-export * from "./contexts";
-export * from "./selection";
+export * from "./contexts/index.js";
+export * from "./selection/index.js";
 
-export * from "./lib";
+export * from "./lib/index.js";
 
-export * from "./formatters";
-export * from "./helpers";
-export * from "./labels";
-export * from "./utils";
-export * from "./UI";
+export * from "./formatters/index.js";
+export * from "./helpers/index.js";
+export * from "./labels/index.js";
+export * from "./utils/index.js";
+export * from "./UI.js";
diff --git a/src/jalali.tsx b/src/jalali.tsx
index c9c22f4423..e9bdd554b8 100644
--- a/src/jalali.tsx
+++ b/src/jalali.tsx
@@ -2,7 +2,10 @@ import React from "react";
 
 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/index.ts b/src/labels/index.ts
index 36b8435a6b..afd033741d 100644
--- a/src/labels/index.ts
+++ b/src/labels/index.ts
@@ -1,9 +1,9 @@
-export * from "./labelDay";
-export * from "./labelCaption";
-export * from "./labelMonthDropdown";
-export * from "./labelNext";
-export * from "./labelPrevious";
-export * from "./labelWeekday";
-export * from "./labelWeekNumber";
-export * from "./labelWeekNumberHeader";
-export * from "./labelYearDropdown";
+export * from "./labelDay.js";
+export * from "./labelCaption.js";
+export * from "./labelMonthDropdown.js";
+export * from "./labelNext.js";
+export * from "./labelPrevious.js";
+export * from "./labelWeekday.js";
+export * from "./labelWeekNumber.js";
+export * from "./labelWeekNumberHeader.js";
+export * from "./labelYearDropdown.js";
diff --git a/src/labels/labelCaption.ts b/src/labels/labelCaption.ts
index 36901aa365..1af1ab21c0 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 type { FormatOptions } from "../lib/dateLib.js";
+import { dateLib as defaultDateLib } from "../lib/index.js";
 
 /**
  * Return an ARIA label for the month caption. The label is used in an aria-live
diff --git a/src/labels/labelDay.ts b/src/labels/labelDay.ts
index fbb68b8659..9eed24af92 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 type { FormatOptions } from "../lib/dateLib.js";
+import { dateLib as defaultDateLib } from "../lib/index.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..df0dcccad1 100644
--- a/src/labels/labelGrid.ts
+++ b/src/labels/labelGrid.ts
@@ -1,7 +1,7 @@
 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.ts b/src/labels/labelMonthDropdown.ts
index c63497cbc7..19a06ed90c 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.ts b/src/labels/labelNext.ts
index 5c8961916d..b0a80bbef3 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.ts b/src/labels/labelPrevious.ts
index de206158be..1dca861ab7 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.ts b/src/labels/labelWeekNumber.ts
index 1b38ed08e1..562835aa83 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.ts b/src/labels/labelWeekNumberHeader.ts
index b4aee1ab56..ace58c8b0e 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.ts b/src/labels/labelWeekday.ts
index 56be7febe1..fa60444d18 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 type { FormatOptions } from "../lib/dateLib.js";
+import { dateLib as defaultDateLib } from "../lib/index.js";
+import type { DateLib } from "../types/index.js";
 
 /**
  * Return he default ARIA label for the Weekday element.
diff --git a/src/labels/labelYearDropdown.ts b/src/labels/labelYearDropdown.ts
index af67f58ee7..8e30ba7fd4 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/index.ts b/src/lib/index.ts
index 00d9486dab..49cb6efb67 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1 +1 @@
-export * from "./dateLib";
+export * from "./dateLib.js";
diff --git a/src/selection/index.ts b/src/selection/index.ts
index 5aba5e776b..8330934a7c 100644
--- a/src/selection/index.ts
+++ b/src/selection/index.ts
@@ -1,3 +1,3 @@
-export * from "./useSingle";
-export * from "./useMulti";
-export * from "./useRange";
+export * from "./useSingle.js";
+export * from "./useMulti.js";
+export * from "./useRange.js";
diff --git a/src/selection/useMulti.tsx b/src/selection/useMulti.tsx
index e66fe0d694..90cbf41f7b 100644
--- a/src/selection/useMulti.tsx
+++ b/src/selection/useMulti.tsx
@@ -1,7 +1,7 @@
 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 60657de550..91d9911fcf 100644
--- a/src/selection/useRange.tsx
+++ b/src/selection/useRange.tsx
@@ -1,9 +1,9 @@
 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..ac5a1246f1 100644
--- a/src/selection/useSingle.tsx
+++ b/src/selection/useSingle.tsx
@@ -1,7 +1,7 @@
 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..c8ac2726ff 100644
--- a/src/types/deprecated.ts
+++ b/src/types/deprecated.ts
@@ -1,16 +1,21 @@
 /* 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 type { PropsMulti, PropsRange, PropsSingle } from "./props";
-import type { Mode, DayEventHandler } from "./shared";
+} from "../components/MonthCaption.js";
+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.js";
+import type { Mode, DayEventHandler } from "./shared.js";
 
 /**
  * @deprecated This type will be removed.
diff --git a/src/types/index.ts b/src/types/index.ts
index cf18a0c265..15827096b9 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,3 +1,3 @@
-export * from "./deprecated";
-export * from "./shared";
-export * from "./props";
+export * from "./deprecated.js";
+export * from "./shared.js";
+export * from "./props.js";
diff --git a/src/types/props.ts b/src/types/props.ts
index 1d6cd00cf2..1d34454697 100644
--- a/src/types/props.ts
+++ b/src/types/props.ts
@@ -1,6 +1,6 @@
 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..27f59e7d30 100644
--- a/src/types/shared.ts
+++ b/src/types/shared.ts
@@ -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.
diff --git a/src/utc.tsx b/src/utc.tsx
index 38838d5512..93b1b6c982 100644
--- a/src/utc.tsx
+++ b/src/utc.tsx
@@ -2,7 +2,10 @@ import React from "react";
 
 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.ts b/src/utils/addToRange.ts
index 739a21e123..0c57879472 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.ts b/src/utils/dateMatchModifiers.ts
index 2777240b60..73d1a5a1e4 100644
--- a/src/utils/dateMatchModifiers.ts
+++ b/src/utils/dateMatchModifiers.ts
@@ -1,14 +1,14 @@
-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,
   isDateInterval,
   isDateRange,
   isDayOfWeekType
-} from "./typeguards";
+} from "./typeguards.js";
 
 /** Returns true if `value` is a Date type. */
 function isDateType(value: unknown): value is Date {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index ff20c96fa4..5af61224cb 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,4 +1,4 @@
-export * from "./addToRange";
-export * from "./dateMatchModifiers";
-export * from "./isDateInRange";
-export * from "./typeguards";
+export * from "./addToRange.js";
+export * from "./dateMatchModifiers.js";
+export * from "./isDateInRange.js";
+export * from "./typeguards.js";
diff --git a/src/utils/isDateInRange.ts b/src/utils/isDateInRange.ts
index 1b562f0f67..8dcf8cbb0d 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.