docs: reorganize localization guides

examples/Numerals.tsx

@@ -1,6 +1,6 @@
-import { hi } from "date-fns/locale/hi";
 import React from "react";
 import { DayPicker } from "react-day-picker";
+import { hi } from "react-day-picker/locale";
 
 export function Numerals() {
   return <DayPicker numerals="deva" locale={hi} />;

examples/Spanish.tsx

@@ -1,6 +1,6 @@
-import { es } from "date-fns/locale/es";
 import React from "react";
 import { DayPicker } from "react-day-picker";
+import { es } from "react-day-picker/locale";
 
 export function Spanish() {
   return <DayPicker locale={es} />;

examples/SpanishWeekStartsOn.tsx

@@ -1,6 +1,6 @@
-import { es } from "date-fns/locale/es";
 import React from "react";
 import { DayPicker } from "react-day-picker";
+import { es } from "react-day-picker/locale";
 
 export function SpanishWeekStartsOn() {
   return <DayPicker locale={es} weekStartsOn={0} />;

examples/TimeZone.tsx

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import { DayPicker, TZDate } from "react-day-picker";
 
 export function TimeZone() {
-  const timeZone = "Pacific/Kiritimati";
+  const timeZone = "Pacific/Honolulu";
   const [selected, setSelected] = useState<Date | undefined>(
     TZDate.tz(timeZone),
   );

examples/timezone/TestCase2833.test.tsx

@@ -9,17 +9,27 @@ test("test should run in Australia/Adelaide timezone", () => {
   );
 });
 
-test("current date should be different than the date in Etc/GMT+12 timezone", () => {
+test("current date should be different than the date in Pacific/Honolulu timezone", () => {
   // This test ensures that the test is running in a timezone with a shifted date
-  const today = new Date();
-  const todayInTimezone = new Date(
-    today.toLocaleString("en-US", { timeZone: "Etc/GMT+12" }),
-  );
-  expect(todayInTimezone.getDate()).not.toBe(today.getDate());
+  const timeZone = "Pacific/Honolulu";
+  const instant = new Date(Date.UTC(2024, 0, 1, 0, 0, 0));
+  const localDay = new Intl.DateTimeFormat("en-CA", {
+    timeZone: "Australia/Adelaide",
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+  }).format(instant);
+  const dayInTimezone = new Intl.DateTimeFormat("en-CA", {
+    timeZone,
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+  }).format(instant);
+  expect(dayInTimezone).not.toBe(localDay);
 });
 
 test("today's date should not be disabled", () => {
-  const timeZone = "Etc/GMT+12";
+  const timeZone = "Pacific/Honolulu";
   const today = new Date().toISOString().slice(0, 10); // yyyy-MM-dd in current zone
   const { container } = render(<TestCase2833 />);
   const day = container.querySelector(`[data-day="${today}"]`);

examples/timezone/TestCase2833.tsx

@@ -5,7 +5,7 @@ import { DayPicker, TZDate } from "react-day-picker";
 const now = new Date();
 
 export function TestCase2833() {
-  const timeZone = "Etc/GMT+12";
+  const timeZone = "Pacific/Honolulu";
   return (
     <div>
       <p data-testid="now">now: {now.toString()}</p>

website/docs/guides/custom-components.mdx

@@ -22,7 +22,7 @@ When customizing components, familiarize yourself with the [API Reference](../ap
 
 :::note Custom Components vs Formatters
 
-Custom components allow you to extend DayPicker beyond just using [formatters](../docs/translation.mdx#custom-formatters). While formatters modify the content within the calendar, custom components enable you to alter the structure of the HTML elements.
+Custom components allow you to extend DayPicker beyond just using [formatters](./translation.mdx#custom-formatters). While formatters modify the content within the calendar, custom components enable you to alter the structure of the HTML elements.
 
 :::