chore(deps): Upgrade DayPicker to v10

AGENTS.md

@@ -3,13 +3,13 @@
 ## Testing instructions
 
 - Find the CI plan in the .github/workflows folder.
-- From the package root you can just call `npm test`. The commit should pass all tests before you merge.
+- From the package root you can just call `pnpm test`. The commit should pass all tests before you merge.
 - Fix any test or type errors until the whole suite is green.
 - Add or update tests for the code you change, even if nobody asked.
 
 ## PR instructions
 
-- Always run `npm lint` and `npm test` before committing.
+- Always run `pnpm lint` and `pnpm test` before committing.
 
 ## Code Review Checklist
 

package.json

@@ -62,6 +62,7 @@
     }
   ],
   "dependencies": {
+    "@daypicker/react": "^10.0.1",
     "@emotion/react": "^11.14.0",
     "@hyphen/hyphen-design-tokens": "^7.6.0",
     "@radix-ui/react-aspect-ratio": "^1.1.8",
@@ -76,7 +77,6 @@
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
     "formik": "^2.4.9",
-    "react-day-picker": "^9.11.3",
     "react-focus-lock": "^2.13.2",
     "react-modal": "^3.16.3",
     "react-remove-scroll": "^2.6.3",
@@ -107,6 +107,8 @@
     "@types/react-modal": "^3.16.3",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
+    "@vitest/browser-playwright": "^4.1.8",
+    "@vitest/coverage-v8": "^4.1.8",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.1.3",
     "chromatic": "^13.3.5",
@@ -128,6 +130,7 @@
     "jest-environment-jsdom": "^30.2.0",
     "jest-preview": "^0.3.1",
     "mini-css-extract-plugin": "^2.9.1",
+    "playwright": "^1.60.0",
     "postcss": "^8.4.47",
     "postcss-loader": "^7.3.4",
     "postcss-modules": "^6.0.0",
@@ -145,12 +148,9 @@
     "typescript": "^5.9.3",
     "url-loader": "^4.1.1",
     "vite": "^6.4.2",
+    "vitest": "^4.1.8",
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",
-    "webpack-fix-style-only-entries": "^0.6.1",
-    "vitest": "^4.1.8",
-    "playwright": "^1.60.0",
-    "@vitest/browser-playwright": "^4.1.8",
-    "@vitest/coverage-v8": "^4.1.8"
+    "webpack-fix-style-only-entries": "^0.6.1"
   }
 }

src/components/Calendar/Calendar.stories.tsx

@@ -2,7 +2,7 @@ import { Calendar } from './Calendar';
 
 import type { Meta } from '@storybook/react-vite';
 import React, { useState, ChangeEvent } from 'react';
-import { type DateRange } from 'react-day-picker';
+import { type DateRange } from '@daypicker/react';
 import { TextInput } from '../TextInput/TextInput';
 import { format, isValid, parse } from 'date-fns';
 

src/components/Calendar/Calendar.test.tsx

@@ -76,7 +76,6 @@ describe('Calendar', () => {
         />
       );
 
-      // In react-day-picker v9, we need to click the button inside the day cell
       const dayButton = screen.getByRole('button', { name: /June 16th/i });
       fireEvent.click(dayButton);
 
@@ -214,6 +213,13 @@ describe('Calendar', () => {
         '--rdp-accent-color': 'var(--color-font-base)',
       });
     });
+
+    test('applies table width class to the month grid', () => {
+      const { container } = render(<Calendar />);
+      const monthGrid = container.querySelector('.rdp-month_grid');
+
+      expect(monthGrid).toHaveClass('w-100');
+    });
   });
 
   describe('Chevron icons', () => {

src/components/Calendar/Calendar.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import classNames from 'classnames';
 import {
   DayPicker,
-  DayPickerProps,
   getDefaultClassNames,
-  Matcher,
-} from 'react-day-picker';
-import 'react-day-picker/style.css';
+  type DayPickerProps,
+  type Matcher,
+} from '@daypicker/react';
+import '@daypicker/react/style.css';
 import { Icon } from '../Icon/Icon';
 
 export type CalendarProps = DayPickerProps;
@@ -74,11 +74,10 @@ function Calendar({
         selected: classNames(
           'font-color-inverse background-color-inverse hover:font-color-inverse'
         ),
-        month_grid: classNames(defaultClassNames.month_grid, 'm-top-lg'),
+        month_grid: classNames(defaultClassNames.month_grid, 'm-top-lg w-100'),
         day: classNames(defaultClassNames.day, 'hover:font-color-base'),
         day_button: classNames(defaultClassNames.day_button),
         range_middle: classNames(defaultClassNames.range_middle),
-        table: classNames('w-100'),
         dropdowns: classNames(defaultClassNames.dropdowns, 'h-100'),
         caption_label: classNames(defaultClassNames.caption_label, 'g-2xs'),
       }}