From 10fa71e2a7073ee7312d70d511a3446e505757e4 Mon Sep 17 00:00:00 2001
From: Lebaud Antoine <lebaud.antoine131@gmail.com>
Date: Mon, 22 May 2023 17:00:25 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(react)=20add=20DatePicker=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Based on the Figma DS design by Alex, a mono date-picker
component has been added. It uses react-aria headless ui
component capabilities, with downshift headless ui component.
React-aria was not supporting by default dropdown menus to
select months and years. We could not reuse Popover component
from react-aria because we are not using their headless ui
component for the button one. Clicking on the toggle calendar
button triggers both the button and the popover click outside
events. React-aria button uses a custom onPress props that is
disabled by their popover. Instead, I have implemented a simple
custom hook. This is the first acceptable version of the component.
Some minor user interaction are missing. This first component
doesn't support time selection.
---
 .changeset/new-buckets-accept.md              |    5 +
 .../components/Forms/DatePicker/Calendar.tsx  |  323 +++++
 .../Forms/DatePicker/CalendarCell.tsx         |   44 +
 .../Forms/DatePicker/CalendarGrid.tsx         |   71 ++
 .../components/Forms/DatePicker/DateField.tsx |   88 ++
 .../src/components/Forms/DatePicker/index.mdx |  114 ++
 .../components/Forms/DatePicker/index.scss    |  291 +++++
 .../Forms/DatePicker/index.spec.tsx           | 1087 +++++++++++++++++
 .../Forms/DatePicker/index.stories.tsx        |  104 ++
 .../src/components/Forms/DatePicker/index.tsx |  174 +++
 .../src/components/Forms/DatePicker/tokens.ts |   23 +
 .../src/components/Forms/Select/index.scss    |    2 +-
 .../react/src/components/Popover/index.scss   |    5 +-
 packages/react/src/cunningham-tokens.css      |   19 +
 packages/react/src/cunningham-tokens.js       |    2 +-
 packages/react/src/cunningham-tokens.ts       |    2 +-
 packages/react/src/index.scss                 |    1 +
 packages/react/src/locales/en-US.json         |   11 +
 packages/react/src/locales/fr-FR.json         |   11 +
 packages/react/src/utils/index.scss           |    4 +
 20 files changed, 2377 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/new-buckets-accept.md
 create mode 100644 packages/react/src/components/Forms/DatePicker/Calendar.tsx
 create mode 100644 packages/react/src/components/Forms/DatePicker/CalendarCell.tsx
 create mode 100644 packages/react/src/components/Forms/DatePicker/CalendarGrid.tsx
 create mode 100644 packages/react/src/components/Forms/DatePicker/DateField.tsx
 create mode 100644 packages/react/src/components/Forms/DatePicker/index.mdx
 create mode 100644 packages/react/src/components/Forms/DatePicker/index.scss
 create mode 100644 packages/react/src/components/Forms/DatePicker/index.spec.tsx
 create mode 100644 packages/react/src/components/Forms/DatePicker/index.stories.tsx
 create mode 100644 packages/react/src/components/Forms/DatePicker/index.tsx
 create mode 100644 packages/react/src/components/Forms/DatePicker/tokens.ts

diff --git a/.changeset/new-buckets-accept.md b/.changeset/new-buckets-accept.md
new file mode 100644
index 0000000..d72857f
--- /dev/null
+++ b/.changeset/new-buckets-accept.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+add datepicker component
diff --git a/packages/react/src/components/Forms/DatePicker/Calendar.tsx b/packages/react/src/components/Forms/DatePicker/Calendar.tsx
new file mode 100644
index 0000000..4372ce3
--- /dev/null
+++ b/packages/react/src/components/Forms/DatePicker/Calendar.tsx
@@ -0,0 +1,323 @@
+import React, { useEffect, useMemo, useRef } from "react";
+import {
+  CalendarDate,
+  createCalendar,
+  DateValue,
+  GregorianCalendar,
+  toCalendar,
+} from "@internationalized/date";
+import { useDateFormatter, useLocale } from "@react-aria/i18n";
+import { useCalendarState } from "@react-stately/calendar";
+import { useCalendar } from "@react-aria/calendar";
+import {
+  useSelect,
+  UseSelectReturnValue,
+  UseSelectStateChange,
+} from "downshift";
+import classNames from "classnames";
+import { CalendarProps } from "react-aria";
+import { range } from ":/utils";
+import { Button } from ":/components/Button";
+import { CalendarGrid } from ":/components/Forms/DatePicker/CalendarGrid";
+import { useCunningham } from ":/components/Provider";
+
+// todo to be factorized with the select component
+interface Option {
+  value: number;
+  label: string;
+  disabled?: boolean;
+}
+
+// todo to be factorized with the select component
+const optionToString = (option: Option | null) => {
+  return option ? option.label : "";
+};
+
+type DropdownValuesProps = {
+  options: Array<Option>;
+  downShift: UseSelectReturnValue<Option>;
+};
+
+// todo to be factorized with the select component
+const DropdownValues = ({ options, downShift }: DropdownValuesProps) => (
+  <div
+    className={classNames("c__calendar__menu", {
+      "c__calendar__menu--opened": downShift.isOpen,
+    })}
+    {...downShift.getMenuProps()}
+  >
+    <ul>
+      {downShift.isOpen &&
+        options.map((item, index) => (
+          <li
+            key={`${item.value}${index}`}
+            {...downShift.getItemProps({
+              item,
+              index,
+              disabled: item.disabled,
+            })}
+            className={classNames("c__calendar__menu__item", {
+              "c__calendar__menu__item--highlight":
+                downShift.highlightedIndex === index,
+              "c__calendar__menu__item--selected":
+                downShift.selectedItem?.label === item.label,
+              "c__calendar__menu__item--disabled": item.disabled,
+            })}
+          >
+            <span>{item.label}</span>
+          </li>
+        ))}
+    </ul>
+  </div>
+);
+
+interface CalendarSubProps extends CalendarProps<DateValue> {
+  minYear?: number;
+  maxYear?: number;
+}
+
+export const Calendar = ({
+  minYear = 1900, // in gregorian calendar.
+  maxYear = 2050, // in gregorian calendar.
+  ...props
+}: CalendarSubProps) => {
+  const { locale } = useLocale();
+
+  const state = useCalendarState({
+    ...props,
+    locale,
+    createCalendar,
+  });
+
+  const ref = useRef(null);
+  const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(
+    props,
+    state
+  );
+
+  const monthItemsFormatter = useDateFormatter({
+    month: "long",
+    timeZone: state.timeZone,
+  });
+
+  const selectedMonthItemFormatter = useDateFormatter({
+    month: "short",
+    timeZone: state.timeZone,
+  });
+
+  const yearItemsFormatter = useDateFormatter({
+    year: "numeric",
+    timeZone: state.timeZone,
+  });
+
+  const monthItems: Array<Option> = useMemo(() => {
+    // Note that in some calendar systems, such as the Hebrew, the number of months may differ between years.
+    const numberOfMonths = state.focusedDate.calendar.getMonthsInYear(
+      state.focusedDate
+    );
+    return range(1, numberOfMonths).map((monthNumber) => {
+      const date = state.focusedDate.set({ month: monthNumber });
+      return {
+        value: monthNumber,
+        label: monthItemsFormatter.format(date.toDate(state.timeZone)),
+        disabled:
+          (!!state.minValue && state.minValue.month > monthNumber) ||
+          (!!state.maxValue && state.maxValue.month < monthNumber),
+      };
+    });
+  }, [state.maxValue, state.minValue, state.focusedDate.year]);
+
+  const downshiftMonth = useSelect({
+    items: monthItems,
+    itemToString: optionToString,
+    onSelectedItemChange: (e: UseSelectStateChange<Option>) => {
+      const updatedFocusedDate = state.focusedDate.set({
+        month: e?.selectedItem?.value,
+      });
+      state.setFocusedDate(updatedFocusedDate);
+    },
+  });
+
+  const yearItems: Array<Option> = useMemo(() => {
+    const calendarCurrentUser = createCalendar(
+      new Intl.DateTimeFormat().resolvedOptions().calendar
+    );
+    const minDate = toCalendar(
+      new CalendarDate(new GregorianCalendar(), minYear, 1, 1),
+      calendarCurrentUser
+    );
+    const maxDate = toCalendar(
+      new CalendarDate(new GregorianCalendar(), maxYear, 12, 31),
+      calendarCurrentUser
+    );
+    return range(minDate.year, maxDate.year).map((yearNumber) => {
+      const date = state.focusedDate.set({ year: yearNumber });
+      return {
+        value: yearNumber,
+        label: yearItemsFormatter.format(date.toDate(state.timeZone)),
+        disabled:
+          (!!state.minValue && state.minValue.year > yearNumber) ||
+          (!!state.maxValue && state.maxValue.year < yearNumber),
+      };
+    });
+  }, [state.focusedDate, state.timeZone, state.maxValue, state.minValue]);
+
+  const downshiftYear = useSelect({
+    items: yearItems,
+    itemToString: optionToString,
+    onSelectedItemChange: (e: UseSelectStateChange<Option>) => {
+      const updatedFocusedDate = state.focusedDate.set({
+        year: e?.selectedItem?.value,
+      });
+      state.setFocusedDate(updatedFocusedDate);
+    },
+    initialSelectedItem: yearItems.find(
+      (item) => item.value === state.focusedDate.year
+    ),
+  });
+
+  useEffect(() => {
+    if (downshiftMonth.selectedItem?.value === state.focusedDate.month) {
+      return;
+    }
+    const focusedMonth = monthItems.find(
+      (item) => item.value === state.focusedDate.month
+    );
+    if (focusedMonth) {
+      downshiftMonth.selectItem(focusedMonth);
+    }
+  }, [state.focusedDate.month]);
+
+  useEffect(() => {
+    if (downshiftYear.selectedItem?.value === state.focusedDate.year) {
+      return;
+    }
+    const focusedYear = yearItems.find(
+      (item) => item.value === state.focusedDate.year
+    );
+    if (focusedYear) {
+      downshiftYear.selectItem(focusedYear);
+    }
+  }, [state.focusedDate.year]);
+  const { t } = useCunningham();
+
+  // isDisabled and onPress props don't exist on the <Button /> component.
+  // remove them to avoid any warning.
+  const {
+    isDisabled: isPrevButtonDisabled,
+    onPress: onPressPrev,
+    ...prevButtonOtherProps
+  } = prevButtonProps;
+  const {
+    isDisabled: isNextButtonDisabled,
+    onPress: onPressNext,
+    ...nextButtonOtherProps
+  } = nextButtonProps;
+
+  return (
+    <div className="c__calendar">
+      <div
+        ref={ref}
+        {...calendarProps}
+        className={classNames("c__calendar__wrapper", {
+          "c__calendar__wrapper--opened":
+            !downshiftMonth.isOpen && !downshiftYear.isOpen,
+        })}
+      >
+        <div className="c__calendar__wrapper__header">
+          <div className="c__calendar__wrapper__header__actions">
+            <Button
+              color="tertiary"
+              size="small"
+              icon={<span className="material-icons">navigate_before</span>}
+              {...{
+                ...prevButtonOtherProps,
+                "aria-label": t(
+                  "components.forms.date_picker.previous_month_button_aria_label"
+                ),
+              }}
+              disabled={isPrevButtonDisabled}
+              onClick={() => state.focusPreviousSection()}
+            />
+            <Button
+              className="c__calendar__wrapper__header__actions__dropdown"
+              color="tertiary"
+              size="small"
+              iconPosition="right"
+              icon={<span className="material-icons">arrow_drop_down</span>}
+              {...downshiftMonth.getToggleButtonProps()}
+              aria-label={t(
+                "components.forms.date_picker.month_select_button_aria_label"
+              )}
+            >
+              {selectedMonthItemFormatter.format(
+                state.focusedDate.toDate(state.timeZone)
+              )}
+            </Button>
+            <Button
+              color="tertiary"
+              size="small"
+              icon={<span className="material-icons">navigate_next</span>}
+              {...{
+                ...nextButtonOtherProps,
+                "aria-label": t(
+                  "components.forms.date_picker.next_month_button_aria_label"
+                ),
+              }}
+              disabled={isNextButtonDisabled}
+              onClick={() => state.focusNextSection()}
+            />
+          </div>
+          <div className="c__calendar__wrapper__header__actions">
+            <Button
+              color="tertiary"
+              size="small"
+              icon={<span className="material-icons">navigate_before</span>}
+              onClick={() => state.focusPreviousSection(true)}
+              disabled={
+                !!state.minValue &&
+                state.minValue.year > state.focusedDate.add({ years: -1 }).year
+              }
+              aria-label={t(
+                "components.forms.date_picker.previous_year_button_aria_label"
+              )}
+            />
+            <Button
+              className="c__calendar__wrapper__header__actions__dropdown"
+              color="tertiary"
+              size="small"
+              iconPosition="right"
+              icon={<span className="material-icons">arrow_drop_down</span>}
+              {...downshiftYear.getToggleButtonProps()}
+              aria-label={t(
+                "components.forms.date_picker.year_select_button_aria_label"
+              )}
+            >
+              {yearItemsFormatter.format(
+                state.focusedDate.toDate(state.timeZone)
+              )}
+            </Button>
+            <Button
+              color="tertiary"
+              size="small"
+              icon={<span className="material-icons">navigate_next</span>}
+              onClick={() => state.focusNextSection(true)}
+              disabled={
+                !!state.maxValue &&
+                state.maxValue.year < state.focusedDate.add({ years: 1 }).year
+              }
+              aria-label={t(
+                "components.forms.date_picker.next_year_button_aria_label"
+              )}
+            />
+          </div>
+        </div>
+        {!downshiftMonth.isOpen && !downshiftYear.isOpen && (
+          <CalendarGrid state={state} />
+        )}
+      </div>
+      <DropdownValues options={monthItems} downShift={downshiftMonth} />
+      <DropdownValues options={yearItems} downShift={downshiftYear} />
+    </div>
+  );
+};
diff --git a/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx b/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx
new file mode 100644
index 0000000..8ea6672
--- /dev/null
+++ b/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx
@@ -0,0 +1,44 @@
+import React, { useRef } from "react";
+import classNames from "classnames";
+import { useCalendarCell } from "@react-aria/calendar";
+import {
+  CalendarDate,
+  getLocalTimeZone,
+  isToday,
+} from "@internationalized/date";
+import { CalendarState } from "@react-stately/calendar";
+import { Button } from ":/components/Button";
+
+interface CalendarCellProps {
+  state: CalendarState;
+  date: CalendarDate;
+}
+
+export const CalendarCell = ({ state, date }: CalendarCellProps) => {
+  const ref = useRef<HTMLButtonElement>(null);
+  const { cellProps, buttonProps, isSelected, formattedDate } = useCalendarCell(
+    { date },
+    state,
+    ref
+  );
+  return (
+    <td {...cellProps}>
+      <Button
+        size="small"
+        color={isSelected ? "primary" : "tertiary"}
+        className={classNames("c__calendar__wrapper__grid__week-row__button", {
+          "c__calendar__wrapper__grid__week-row__button--selected": isSelected,
+          "c__calendar__wrapper__grid__week-row__button--today": isToday(
+            date,
+            getLocalTimeZone()
+          ),
+        })}
+        disabled={!!cellProps["aria-disabled"]}
+        {...buttonProps}
+        ref={ref}
+      >
+        {formattedDate}
+      </Button>
+    </td>
+  );
+};
diff --git a/packages/react/src/components/Forms/DatePicker/CalendarGrid.tsx b/packages/react/src/components/Forms/DatePicker/CalendarGrid.tsx
new file mode 100644
index 0000000..8d0253c
--- /dev/null
+++ b/packages/react/src/components/Forms/DatePicker/CalendarGrid.tsx
@@ -0,0 +1,71 @@
+import React, { useMemo } from "react";
+import { useDateFormatter, useLocale } from "@react-aria/i18n";
+import {
+  endOfMonth,
+  getWeeksInMonth,
+  startOfWeek,
+  today,
+} from "@internationalized/date";
+import { useCalendarGrid } from "react-aria";
+import { CalendarState } from "@react-stately/calendar";
+import { CalendarCell } from ":/components/Forms/DatePicker/CalendarCell";
+import { range } from ":/utils";
+
+interface CalendarGridProps {
+  state: CalendarState;
+  defaultDaysInWeek?: number;
+}
+
+export const CalendarGrid = ({
+  state,
+  defaultDaysInWeek = 7,
+}: CalendarGridProps) => {
+  const { locale } = useLocale();
+
+  const weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
+
+  const { gridProps, headerProps } = useCalendarGrid(
+    {
+      startDate: state.visibleRange.start,
+      endDate: endOfMonth(state.visibleRange.start),
+    },
+    state
+  );
+
+  const shortDayFormatter = useDateFormatter({
+    weekday: "short",
+    timeZone: state.timeZone,
+  });
+
+  const weekDays = useMemo(() => {
+    const weekStart = startOfWeek(today(state.timeZone), locale);
+    return range(0, defaultDaysInWeek - 1).map((index) => {
+      const dateDay = weekStart.add({ days: index }).toDate(state.timeZone);
+      return shortDayFormatter.format(dateDay);
+    });
+  }, [locale, state.timeZone, shortDayFormatter]);
+
+  return (
+    <table {...gridProps} className="c__calendar__wrapper__grid">
+      <thead {...headerProps}>
+        <tr className="c__calendar__wrapper__grid__header-row">
+          {weekDays.map((day, index) => (
+            <th key={`${day}${index}`}>{day}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {range(0, weeksInMonth - 1).map((weekIndex) => (
+          <tr key={weekIndex} className="c__calendar__wrapper__grid__week-row">
+            {state
+              .getDatesInWeek(weekIndex)
+              .map(
+                (date, i) =>
+                  date && <CalendarCell key={i} state={state} date={date} />
+              )}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
diff --git a/packages/react/src/components/Forms/DatePicker/DateField.tsx b/packages/react/src/components/Forms/DatePicker/DateField.tsx
new file mode 100644
index 0000000..308fe7f
--- /dev/null
+++ b/packages/react/src/components/Forms/DatePicker/DateField.tsx
@@ -0,0 +1,88 @@
+import React, { useRef } from "react";
+import {
+  AriaDatePickerProps,
+  useDateField,
+  useDateSegment,
+} from "@react-aria/datepicker";
+import { useLocale } from "@react-aria/i18n";
+import {
+  DateFieldState,
+  useDateFieldState,
+  DateSegment,
+} from "@react-stately/datepicker";
+import { createCalendar, DateValue } from "@internationalized/date";
+import classNames from "classnames";
+import { Button } from ":/components/Button";
+import { useCunningham } from ":/components/Provider";
+
+interface DateSegmentProps {
+  currentSegment: DateSegment;
+  previousSegment: DateSegment;
+  state: DateFieldState;
+}
+
+export const DateSegmentInput = ({
+  currentSegment,
+  previousSegment,
+  state,
+}: DateSegmentProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const { segmentProps } = useDateSegment(currentSegment, state, ref);
+  return (
+    <div
+      ref={ref}
+      {...segmentProps}
+      className={classNames("c__date-picker__inner__value__segment", {
+        "c__date-picker__inner__value__segment--empty":
+          currentSegment.isPlaceholder ||
+          (currentSegment.type === "literal" && previousSegment?.isPlaceholder),
+      })}
+    >
+      {currentSegment.text}
+    </div>
+  );
+};
+
+export const DateField = (props: AriaDatePickerProps<DateValue>) => {
+  const { locale } = useLocale();
+  const state = useDateFieldState({
+    ...props,
+    locale,
+    createCalendar,
+  });
+  const ref = useRef<HTMLDivElement>(null);
+  const { fieldProps } = useDateField(props, state, ref);
+  const { t } = useCunningham();
+
+  return (
+    <>
+      <div className="c__date-picker__inner__value" {...fieldProps} ref={ref}>
+        {state.segments.map((segment, i, segments) => (
+          <DateSegmentInput
+            key={i}
+            currentSegment={segment}
+            previousSegment={segments[i - 1]}
+            state={state}
+          />
+        ))}
+      </div>
+      {!props.isDisabled && (
+        <Button
+          className={classNames("c__date-picker__inner__action", {
+            "c__date-picker__inner__action--empty": !state.value,
+          })}
+          color="tertiary"
+          size="small"
+          icon={<span className="material-icons">cancel</span>}
+          onClick={() => {
+            // "era" option doesn't clear partially filled dataField.
+            state.clearSegment("day");
+            state.clearSegment("month");
+            state.clearSegment("year");
+          }}
+          aria-label={t("components.forms.date_picker.clear_button_aria_label")}
+        />
+      )}
+    </>
+  );
+};
diff --git a/packages/react/src/components/Forms/DatePicker/index.mdx b/packages/react/src/components/Forms/DatePicker/index.mdx
new file mode 100644
index 0000000..20fe18e
--- /dev/null
+++ b/packages/react/src/components/Forms/DatePicker/index.mdx
@@ -0,0 +1,114 @@
+
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { DatePicker } from "./index";
+
+<Meta title="Components/Forms/DatePicker/Doc" component={DatePicker}/>
+
+
+# DatePicker
+
+
+Cunningham provides a versatile DatePicker component to select or input a date in your form. It uses the headless
+UI components provided by [React-Spectrum](https://react-spectrum.adobe.com/react-aria/useDatePicker.html) from Adobe.
+
+> For now it is only available for single date selection, a range date picker and time features will be available soon.
+
+
+## Basic
+
+<Canvas>
+  <Story id="components-forms-datepicker--default"/>
+</Canvas>
+
+## Default value
+You can use the following props to change the default value of the DatePicker component by using the `state` props.
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-datepicker--default-value"/>
+</Canvas>
+
+
+## States
+
+You can use the following props to change the state of the DatePicker component by using the `state` props.
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-datepicker--error"/>
+  <Story id="components-forms-datepicker--success"/>
+</Canvas>
+
+## Disabled
+
+As a regular input, you can disable it by using the `disabled` props.
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-datepicker--disabled"/>
+  <Story id="components-forms-datepicker--disabled-value"/>
+</Canvas>
+
+## Texts
+
+As the component uses [Field](?path=/story/components-forms-field-doc--page), you can use the `text` props to provide a description of the checkbox.
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-datepicker--with-text"/>
+</Canvas>
+
+## Controlled / Non Controlled
+
+Like a native input, you can use the DatePicker component in a controlled or non controlled way. You can see the example below
+using the component in a controlled way.
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-datepicker--controlled"/>
+</Canvas>
+
+## MinValue / MaxValue
+
+You can pass a date range that are valid using the `minValue` and `maxValue` props.
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-datepicker--min-max-value"/>
+</Canvas>
+
+## Invalid date
+
+When passing an invalid date, for example outside of the valid range, the DatePicker component would render invalid.
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-datepicker--invalid-value"/>
+</Canvas>
+
+## Props
+
+You can see the list of props below.
+
+<ArgsTable of={DatePicker} />
+
+
+## Design tokens
+
+Here are the custom design tokens defined by the datepicker.
+
+| Token        	| Description                 	|
+|---------------	|-----------------------------	|
+| background-color   	| Background color of the datepicker    	|
+| border-color   	| Border color of the datepicker    	|
+| border-color--hover   	| Border color of the datepicker on mouse hover   	|
+| border-color--focus   	| Border color of the datepicker when focus   	|
+| border-radius     	| Border radius of the datepicker      	|
+| border-width     	| Border width of the datepicker      	|
+| border-radius--hover   	| Border radius of the datepicker on mouse hover    	|
+| border-radius--focus   	| Border radius of the datepicker when focused    	|
+| color   	| Value color  	|
+| font-size        	| Value font size        	|
+| height | Height of the combo box |
+| item-background-color--hover | Background color of the item on mouse hover (months/years menus)   	|
+| item-background-color--selected | Background color of the selected item (months/years menus)   	|
+| item-color | Color of the item (months/years menus)    	|
+| item-font-size | Font size of the item (months/years menus)    	|
+| menu-background-color | Background color of the menu (months/years menus)    	|
+| grid-cell--border-color--today | Border color of the today grid-cell    	|
+| grid-cell--color--today | Value color of the today grid-cell    	|
+
+See also [Field](?path=/story/components-forms-field-doc--page)
diff --git a/packages/react/src/components/Forms/DatePicker/index.scss b/packages/react/src/components/Forms/DatePicker/index.scss
new file mode 100644
index 0000000..4408cdd
--- /dev/null
+++ b/packages/react/src/components/Forms/DatePicker/index.scss
@@ -0,0 +1,291 @@
+@use 'src/utils';
+
+
+.c__date-picker {
+  position: relative;
+
+
+  &__wrapper {
+    border-radius: var(--c--components--forms-datepicker--border-radius);
+    border-width: var(--c--components--forms-datepicker--border-width);
+    border-color: var(--c--components--forms-datepicker--border-color);
+    border-style: var(--c--components--forms-datepicker--border-style);
+    display: flex;
+    align-items: center;
+    transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
+    padding: 0 0.75rem;
+    gap: 1rem;
+    color: var(--c--components--forms-datepicker--color);
+    box-sizing: border-box;
+    height: var(--c--components--forms-datepicker--height);
+    background-color: var(--c--components--forms-datepicker--background-color);
+    position: relative;
+    overflow: hidden;
+
+    &--clickable {
+      cursor: pointer;
+    }
+  }
+
+  &__inner {
+    flex-grow: 1;
+    display: flex;
+    justify-content: space-between;
+    user-select: none;
+    min-width: 0;
+
+    &--clickable {
+      cursor: pointer;
+    }
+
+    &__value {
+      display: flex;
+      font-size: var(--c--components--forms-datepicker--font-size);
+      overflow: hidden;
+      flex-grow: 1;
+
+      &__segment {
+        &--empty {
+          color: var(--c--components--forms-field--color);
+        }
+      }
+    }
+
+    &__action {
+      display: flex;
+      align-items: center;
+      height: auto;
+
+      &.c__button--small.c__button--icon-only {
+        width: 1.25rem;
+      }
+
+      &--empty {
+        color: var(--c--components--forms-field--color);
+      }
+
+      .material-icons {
+        font-size: 1rem;
+      }
+    }
+  }
+
+
+  /** Modifiers */
+
+  &--disabled {
+    .c__date-picker__wrapper {
+      color: var(--c--theme--colors--greyscale-600);
+      border-color: var(--c--theme--colors--greyscale-300);
+      cursor: default;
+      pointer-events: none;
+
+      label {
+        color: var(--c--theme--colors--greyscale-400);
+      }
+
+      &__toggle {
+        color: var(--c--theme--colors--greyscale-400);
+      }
+
+      .c__date-picker__inner {
+        color: var(--c--theme--colors--greyscale-600);
+        &__action {
+          color: var(--c--theme--colors--greyscale-400);
+        }
+      }
+
+      label {
+        cursor: default;
+      }
+    }
+  }
+
+  &--invalid {
+    .c__date-picker__wrapper {
+      border-color: var(--c--theme--colors--danger-600);
+      border-radius: var(--c--components--forms-datepicker--border-radius);
+
+      &__toggle {
+        color: var(--c--theme--colors--danger-600);
+      }
+
+      label {
+        color: var(--c--theme--colors--danger-600);
+      }
+    }
+
+    &:not(.c__date-picker--disabled) {
+      &:hover {
+        .c__date-picker__wrapper {
+          border-color: var(--c--theme--colors--danger-200);
+          &__toggle {
+            color: var(--c--theme--colors--danger-200);
+          }
+        }
+      }
+    }
+  }
+
+  &--success {
+    .c__date-picker__wrapper {
+      border-color: var(--c--theme--colors--success-600);
+      border-radius: var(--c--components--forms-datepicker--border-radius);
+
+      &__toggle {
+        color: var(--c--theme--colors--success-600);
+      }
+
+      label {
+        color: var(--c--theme--colors--success-600);
+      }
+    }
+
+    &:not(.c__date-picker--disabled) {
+      &:hover {
+        .c__date-picker__wrapper {
+          border-color: var(--c--theme--colors--success-200);
+          &__toggle {
+            color: var(--c--theme--colors--success-200);
+          }
+        }
+      }
+    }
+  }
+
+  &--focused {
+    .c__date-picker__wrapper {
+      border-radius: var(--c--components--forms-datepicker--border-radius--focus);
+      border-color: var(--c--components--forms-datepicker--border-color--focus);
+
+      &__toggle {
+        color: var(--c--components--forms-datepicker--border-color--focus);
+      }
+    }}
+
+  &:not(&--focused):not(&--invalid):not(&--disabled):not(&--success) {
+    &:hover {
+      .c__date-picker__wrapper {
+        border-radius: var(--c--components--forms-datepicker--border-radius--hover);
+        border-color: var(--c--components--forms-datepicker--border-color--hover);
+      }
+    }
+  }
+
+}
+
+
+.c__calendar {
+  display: block;
+  transform: translate(2px, 0);
+
+  &__wrapper {
+    display: block;
+    padding: 0.75rem;
+
+    &--opened {
+      @extend %shadow;
+      background-color: var(--c--components--forms-datepicker--menu-background-color);
+    }
+
+    &__header {
+      display: flex;
+      justify-content: space-between;
+
+      &__actions {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        overflow: hidden;
+        white-space: nowrap;
+        min-width: 8.5rem;
+
+        &__dropdown {
+          padding: 0 0 0 0.5rem;
+        }
+      }
+    }
+
+    &__grid {
+      width: 100%;
+      padding-top: 0.5rem;
+      table-layout: fixed;
+
+      &__header-row {
+        line-height: 3rem;
+        font-size: var(--c--components--button--small-font-size);
+
+        th {
+          font-weight: var(--c--components--button--font-weight);
+          color: var(--c--theme--colors--greyscale-700);
+        }
+      }
+
+      &__week-row {
+        &__button {
+          margin: 0.2rem auto;
+          &--today {
+            border: 1px solid var(--c--components--forms-datepicker--grid-cell--border-color--today);
+          }
+          &--today:not(&--selected) {
+            color: var(--c--components--forms-datepicker--grid-cell--color--today);
+          }
+        }
+        .c__button--small {
+          height: auto;
+          width: 100%;
+          aspect-ratio: 1;
+          padding: 0;
+          align-items: center;
+          justify-content: center;
+          border-radius: 100%;
+        }
+      }
+    }
+  }
+
+  &__menu {
+    @extend %shadow;
+    position: absolute;
+    top: 0;
+    left: -2px;
+    overflow: auto;
+    width: 100%;
+    max-height: 25rem;
+    background-color: var(--c--components--forms-datepicker--menu-background-color);
+    transform: translate(2px, 0);
+    display: none;
+    z-index: 2;
+
+    &--opened {
+      display: block;
+    }
+
+    ul {
+      list-style-type: none;
+      padding: 0;
+      margin: 0;
+      padding-top: px-to-rem(3px);
+    }
+
+    &__item {
+      padding: 0.75rem;
+      font-size: var(--c--components--forms-datepicker--item-font-size);
+      color: var(--c--components--forms-datepicker--item-color);
+      cursor: pointer;
+
+      &--highlight {
+        background-color: var(--c--components--forms-datepicker--item-background-color--hover);
+      }
+
+      &--selected {
+        background-color: var(--c--components--forms-datepicker--item-background-color--selected);
+      }
+
+      &--disabled {
+        color: var(--c--theme--colors--greyscale-400);
+        pointer-events: none;
+      }
+    }
+  }
+}
diff --git a/packages/react/src/components/Forms/DatePicker/index.spec.tsx b/packages/react/src/components/Forms/DatePicker/index.spec.tsx
new file mode 100644
index 0000000..183f99a
--- /dev/null
+++ b/packages/react/src/components/Forms/DatePicker/index.spec.tsx
@@ -0,0 +1,1087 @@
+import userEvent from "@testing-library/user-event";
+import { render, screen, within } from "@testing-library/react";
+import React, { FormEvent, useState } from "react";
+import { expect, vi, afterEach } from "vitest";
+import { CunninghamProvider } from ":/components/Provider";
+import { DatePicker } from ":/components/Forms/DatePicker/index";
+import { Button } from ":/components/Button";
+
+describe("<DatePicker/>", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  const expectCalendarToBeClosed = () => {
+    expect(screen.queryByRole("group")).toBeNull();
+  };
+
+  const expectCalendarToBeOpen = () => {
+    const calendar = screen.queryByRole("group");
+    expect(calendar).toBeDefined();
+    expect(calendar).not.toBeNull();
+    expect(Array.from(calendar!.classList)).contains(
+      "c__calendar__wrapper--opened"
+    );
+  };
+
+  const expectDateFieldToBeHidden = () => {
+    expect(screen.queryByRole("presentation")).toBeNull();
+  };
+
+  const expectDateFieldToBeDisplayed = () => {
+    expect(screen.queryByRole("presentation")).toBeTruthy();
+  };
+
+  const expectDatesToBeEqual = (
+    firstDate: Date | string | undefined | null,
+    secondDate: Date | string | undefined | null
+  ) => {
+    expect(firstDate).toBeDefined();
+    expect(secondDate).toBeDefined();
+    expect(new Date(firstDate!).toLocaleDateString()).eq(
+      new Date(secondDate!).toLocaleDateString()
+    );
+  };
+
+  const expectFocusedMonthToBeEqual = (expectedDate: Date) => {
+    const focusedMonth = screen
+      .getByRole("combobox", {
+        name: "Select a month",
+      })!
+      .textContent?.replace("arrow_drop_down", "");
+    expect(focusedMonth).eq(
+      expectedDate.toLocaleString("default", { month: "short" })
+    );
+  };
+
+  const expectFocusedYearToBeEqual = (expectedDate: Date) => {
+    const focusedYear = screen
+      .getByRole("combobox", {
+        name: "Select a year",
+      })!
+      .textContent?.replace("arrow_drop_down", "");
+
+    expect(focusedYear).eq(
+      expectedDate.toLocaleString("default", { year: "numeric" })
+    );
+  };
+
+  const expectMenuToBeOpen = (menu: HTMLElement) => {
+    expect(Array.from(menu.classList)).contains("c__calendar__menu--opened");
+  };
+
+  const expectMenuToBeClosed = (menu: HTMLElement) => {
+    expect(Array.from(menu.classList)).not.contains(
+      "c__calendar__menu--opened"
+    );
+  };
+
+  const expectDatePickerStateToBe = async (state: string) => {
+    const input = (await screen.findAllByRole("button"))![0];
+    const classNames =
+      input.parentElement && Array.from(input.parentElement.classList);
+    expect(classNames).contains(`c__date-picker--${state}`);
+  };
+
+  it("toggles calendar", async () => {
+    const user = userEvent.setup();
+    render(
+      <CunninghamProvider>
+        <DatePicker label="Pick a date" name="datepicker" />
+      </CunninghamProvider>
+    );
+
+    const [input, button] = await screen.findAllByRole("button");
+
+    // It returns the clickable div.
+    expect(input.tagName).toEqual("DIV");
+
+    // It returns the toggle button.
+    expect(button.tagName).toEqual("BUTTON");
+
+    // Calendar is initially closed.
+    expectCalendarToBeClosed();
+    expectDateFieldToBeHidden();
+
+    // Toggle button opens the calendar.
+    await user.click(button);
+    expectCalendarToBeOpen();
+    expectDateFieldToBeDisplayed();
+
+    // Clicking again closes the calendar.
+    await user.click(button);
+    expectCalendarToBeClosed();
+    expectDateFieldToBeHidden();
+
+    // Click on the input opens the calendar.
+    await user.click(input);
+    expectCalendarToBeOpen();
+    expectDateFieldToBeDisplayed();
+
+    // Clicking again on the input should not close the calendar.
+    // Click could happen while selecting the date field input.
+    await user.click(input);
+    expectCalendarToBeOpen();
+    expectDateFieldToBeDisplayed();
+
+    // While the calendar open, clicking on
+    // the toggle button closes the calendar.
+    await user.click(button);
+    expectCalendarToBeClosed();
+  });
+
+  it("focuses in the right order with no picked date", async () => {
+    const user = userEvent.setup();
+    render(
+      <CunninghamProvider>
+        <DatePicker label="Pick a date" name="datepicker" />
+      </CunninghamProvider>
+    );
+    // Get elements that should receive focus when no date is picked.
+    const [input, toggleButton] = await screen.findAllByRole("button")!;
+
+    await user.keyboard("{Tab}");
+    expect(input).toHaveFocus();
+
+    await user.keyboard("{Tab}");
+    expect(toggleButton).toHaveFocus();
+
+    await user.keyboard("{Enter}");
+    expectCalendarToBeOpen();
+  });
+
+  it("focuses in the right order with a default value", async () => {
+    const user = userEvent.setup();
+    render(
+      <CunninghamProvider>
+        <DatePicker
+          label="Pick a date"
+          name="datepicker"
+          defaultValue="2023-04-25"
+        />
+      </CunninghamProvider>
+    );
+
+    // Get elements that should receive focus when a date is already picked.
+    const [input, toggleButton] = await screen.findAllByRole("button")!;
+    const clearButton = screen.getByRole("button", {
+      name: "Clear date",
+    });
+    const [monthSegment, daySegment, YearSegment] = await screen.findAllByRole(
+      "spinbutton"
+    )!;
+
+    // Navigate through elements using Tab.
+    await user.keyboard("{Tab}");
+    expect(input).toHaveFocus();
+
+    await user.keyboard("{Tab}");
+    expect(toggleButton).toHaveFocus();
+
+    await user.keyboard("{Tab}");
+    expect(monthSegment).toHaveFocus();
+
+    await user.keyboard("{Tab}");
+    expect(daySegment).toHaveFocus();
+
+    await user.keyboard("{Tab}");
+    expect(YearSegment).toHaveFocus();
+
+    await user.keyboard("{Tab}");
+    expect(clearButton).toHaveFocus();
+  });
+
+  it("picks a date", async () => {
+    const user = userEvent.setup();
+    render(
+      <CunninghamProvider>
+        <DatePicker label="Pick a date" name="datepicker" />
+      </CunninghamProvider>
+    );
+    const [input, toggleButton] = await screen.findAllByRole("button");
+    await user.click(input);
+
+    // Select all grid-cells.
+    const gridCells = await screen.findAllByRole("gridcell");
+
+    // Select the first clickable grid-cell.
+    const gridCellButton = within(
+      gridCells.filter(
+        (gridCell) => !gridCell.getAttribute("aria-disabled")
+      )![0]
+    ).getByRole("button")!;
+
+    // Pick a date.
+    await user.click(gridCellButton);
+    const gridCellDate = gridCellButton.getAttribute("aria-label");
+
+    // Calendar should close on date's selection.
+    expectCalendarToBeClosed();
+    expectDateFieldToBeDisplayed();
+
+    // Reopen the calendar.
+    await user.click(toggleButton);
+
+    // Get the selected date in calendar grid.
+    const selectedDate = within(
+      screen.getByRole("gridcell", {
+        selected: true,
+      })!
+    )
+      .getByRole("button")!
+      .getAttribute("aria-label")
+      ?.replace("selected", "");
+
+    expectDatesToBeEqual(selectedDate, gridCellDate);
+
+    // Get the selected date in the date field.
+    const dateFieldContent = screen.getByRole("presentation").textContent;
+    expectDatesToBeEqual(dateFieldContent, gridCellDate);
+  });
+
+  it("type a date", async () => {
+    const user = userEvent.setup();
+    render(
+      <CunninghamProvider>
+        <DatePicker
+          label="Pick a date"
+          name="datepicker"
+          defaultValue="2023-04-05"
+        />
+      </CunninghamProvider>
+    );
+    const [monthSegment, daySegment, yearSegment] = await screen.findAllByRole(
+      "spinbutton"
+    )!;
+    // Select the first segment, month one.
+    await user.click(monthSegment);
+    expect(monthSegment).toHaveFocus();
+
+    // Type month's value.
+    await user.keyboard("{1}{2}");
+    expect(daySegment).toHaveFocus();
+
+    // Type day's value.
+    await user.keyboard("{5}");
+    expect(yearSegment).toHaveFocus();
+
+    // Type year's value.
+    await user.keyboard("{2}{0}{2}{3}");
+
+    // Check date field value.
+    expectDateFieldToBeDisplayed();
+    const dateFieldContent = screen.getByRole("presentation").textContent;
+    expectDatesToBeEqual("2023-12-05", dateFieldContent);
+  });
+
+  it("type an invalid date", async () => {
+    const user = userEvent.setup();
+    render(
+      <CunninghamProvider>
+        <DatePicker
+          label="Pick a date"
+          name="datepicker"
+          defaultValue="2023-04-05"
+          minValue="2022-12-03"
+        />
+      </CunninghamProvider>
+    );
+    const [monthSegment, daySegment, yearSegment] = await screen.findAllByRole(
+      "spinbutton"
+    )!;
+    // Select the first segment, month one.
+    await user.click(monthSegment);
+    expect(monthSegment).toHaveFocus();
+
+    // Type month's value.
+    await user.keyboard("{1}{2}");
+    expect(daySegment).toHaveFocus();
+
+    // Type day's value.
+    await user.keyboard("{5}");
+    expect(yearSegment).toHaveFocus();
+
+    // Type year's value.
+    await user.keyboard("{2}{0}{2}{1}");
+
+    // Check date field value.
+    expectDateFieldToBeDisplayed();
+    const dateFieldContent = screen.getByRole("presentation").textContent;
+    expectDatesToBeEqual("2021-12-05", dateFieldContent);
+
+    // Make sure the date picker is showing error.
+    expectDatePickerStateToBe("invalid");
+  });
+
+  it.each([
+    "2022-05-25",
+    "2023-06-01T13:50",
+    "2025-03-25",
+    "Mar 25 2025",
+    "25 Mar 2025",
+    new Date("2025-04-23"),
+  ])("has a default value", async (defaultValue) => {
+    render(
+      <CunninghamProvider>
+        <DatePicker
+          label="Pick a date"
+          name="datepicker"
+          defaultValue={defaultValue}
+        />
+      </CunninghamProvider>
+    );
+    // Get picked date.
+    const dateFieldContent = screen.getByRole("presentation").textContent;
+    expectDatesToBeEqual(defaultValue, dateFieldContent);
+    expectDateFieldToBeDisplayed();
+  });
+
+  it("has an uncontrolled a controlled value", async () => {
+    const defaultValue = new Date("2023-05-24");
+    const value = new Date("2023-05-24");
+    vi.spyOn(console, "error").mockImplementation(() => undefined);
+    expect(() =>
+      render(
+        <CunninghamProvider>
+          <DatePicker
+            label="Pick a date"
+            name="datepicker"
+            defaultValue={defaultValue}
+            value={value}
+          />
+        </CunninghamProvider>
+      )
+    ).toThrow(
+      "You cannot use both defaultValue and value props on DatePicker component"
+    );
+  });
+
+  it.each(["this_not_a_valid_date", "2023-13-13", "2025-25-05"])(
+    "has not a valid date value",
+    async (invalidDate) => {
+      vi.spyOn(console, "error").mockImplementation(() => undefined);
+      expect(() =>
+        render(
+          <CunninghamProvider>
+            <DatePicker
+              label="Pick a date"
+              name="datepicker"
+              defaultValue={invalidDate}
+            />
+          </CunninghamProvider>
+        )
+      ).toThrow(
+        "Invalid date format when initializing props on DatePicker component"
+      );
+    }
+  );
+
+  it("clears date", async () => {
+    const defaultValue = new Date("2023-05-24");
+    const user = userEvent.setup();
+    render(
+      <CunninghamProvider>
+        <DatePicker
+          label="Pick a date"
+          name="datepicker"
+          defaultValue={defaultValue}
+        />
+      </CunninghamProvider>
+    );
+    const clearButton = screen.getByRole("button", {
+      name: "Clear date",
+    });
+    await user.click(clearButton);
+    expectCalendarToBeOpen();
+
+    // Date field's value should be set to a placeholder value.
+    const dateFieldContent = screen.getByRole("presentation").textContent;
+    expect(dateFieldContent).eq("mm/dd/yyyy");
+
+    const isGridCellSelected = screen
+      .getByRole("gridcell", { name: `${defaultValue.getDate()}` })!
+      .getAttribute("aria-selected");
+    expect(isGridCellSelected).toBeNull();
+
+    // Close the calendar.
+    const toggleButton = (await screen.findAllByRole("button"))![1];
+    await user.click(toggleButton);
+
+    // Make sure the empty date field is hidden when closing the calendar.
+    expectDateFieldToBeHidden();
+  });
+
+  it("has date inferior to minValue", async () => {
+    render(
+      <CunninghamProvider>
+        <DatePicker
+          label="Pick a date"
+          name="datepicker"
+          defaultValue="2023-01-01"
+          minValue="2023-02-01"
+        />
+      </CunninghamProvider>
+    );
+    await expectDatePickerStateToBe("invalid");
+  });
+
+  it("has date superior to maxValue", async () => {
+    render(
+      <CunninghamProvider>
+        <DatePicker
+          label="Pick a date"
+          name="datepicker"
+          defaultValue="2023-03-01"
+          maxValue="2023-02-01"
+        />
+      </CunninghamProvider>
+    );
+    await expectDatePickerStateToBe("invalid");
+  });
+
+  it("has an invalid value outside min/max range", async () => {
+    // Should be invalid if the picked date is outside the min/max range.
+    render(
+      <CunninghamProvider>
+        <DatePicker
+          label="Pick a date"
+          name="datepicker"
+          defaultValue="2023-03-01"
+          maxValue="2023-04-01"
+          minValue="2023-05-01"
+        />
+      </CunninghamProvider>
+    );
+    await expectDatePickerStateToBe("invalid");
+  });
+
+  it("works controlled", async () => {
+    const user = userEvent.setup();
+    const Wrapper = () => {
+      const [value, setValue] = useState<string | null>("2023-04-25");
+      return (
+        <CunninghamProvider>
+          <div>
+            <div>Value = {value}|</div>
+            <Button onClick={() => setValue(null)}>Clear</Button>
+            <DatePicker
+              label="Pick a date"
+              name="datepicker"
+              value={value}
+              onChange={(e) => setValue(e)}
+            />
+          </div>
+        </CunninghamProvider>
+      );
+    };
+    render(<Wrapper />);
+
+    // Make sure value is selected.
+    screen.getByText("Value = 2023-04-25|");
+
+    // Make sure value is initially render in the date field component.
+    const dateFieldContent = screen.getByRole("presentation").textContent;
+    expectDatesToBeEqual("2023-04-25", dateFieldContent);
+
+    // Open the calendar grid.
+    const toggleButton = (await screen.findAllByRole("button"))![1];
+    await user.click(toggleButton);
+    expectCalendarToBeOpen();
+
+    const gridCell = within(
+      await screen.getByRole("gridcell", { name: "12" })
+    ).getByRole("button")!;
+
+    // Select a new value in the calendar grid.
+    await user.click(gridCell);
+    expectCalendarToBeClosed();
+
+    // Make sure value is selected.
+    screen.getByText(`Value = 2023-04-12|`);
+
+    // Clear value.
+    const clearButton = screen.getByRole("button", {
+      name: "Clear",
+    });
+    await user.click(clearButton);
+
+    // Make sure value is cleared.
+    expectDateFieldToBeHidden();
+    screen.getByText("Value = |");
+  });
+
+  it("renders disabled", async () => {
+    render(
+      <CunninghamProvider>
+        <DatePicker
+          label="Pick a date"
+          name="datepicker"
+          defaultValue="2023-03-01"
+          disabled={true}
+        />
+      </CunninghamProvider>
+    );
+    await expectDatePickerStateToBe("disabled");
+
+    const [input, button] = await screen.findAllByRole("button");
+
+    // Make sure toggle button and click on input are disabled.
+    expect(input.getAttribute("aria-disabled")).eq("true");
+    expect(button).toBeDisabled();
+
+    // Make sure the clear button is not rendered.
+    expect(screen.queryByRole("button", { name: "Clear date" })).toBeNull();
+
+    // Make sure each segment of the date field is disabled.
+    const dateFieldInputs = await screen.queryAllByRole("spinbutton");
+    dateFieldInputs.forEach((dateFieldInput) =>
+      expect(dateFieldInput).toHaveAttribute("aria-disabled")
+    );
+  });
+
+  it("renders focused", async () => {
+    const user = userEvent.setup();
+    render(
+      <CunninghamProvider>
+        <DatePicker
+          label="Pick a date"
+          name="datepicker"
+          defaultValue="2023-03-01"
+        />
+      </CunninghamProvider>
+    );
+    const toggleButton = (await screen.findAllByRole("button"))![1];
+    await user.click(toggleButton);
+    expectCalendarToBeOpen();
+    await expectDatePickerStateToBe("focused");
+  });
+
+  it("submits forms data", async () => {
+    let formData: any;
+    const Wrapper = () => {
+      const onSubmit = (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        const data = new FormData(e.currentTarget);
+        formData = {
+          datepicker: data.get("datepicker"),
+        };
+      };
+
+      return (
+        <CunninghamProvider>
+          <div>
+            <form onSubmit={onSubmit}>
+              <DatePicker label="Pick a date" name="datepicker" />
+              <Button>Submit</Button>
+            </form>
+          </div>
+        </CunninghamProvider>
+      );
+    };
+    render(<Wrapper />);
+
+    const user = userEvent.setup();
+    const submitButton = screen.getByRole("button", {
+      name: "Submit",
+    });
+
+    // Submit the form being empty.
+    await user.click(submitButton);
+    expect(formData).toEqual({
+      datepicker: null,
+    });
+
+    // Open calendar
+    const toggleButton = (await screen.findAllByRole("button"))![1];
+    await user.click(toggleButton);
+
+    const monthSegment = await screen.getByRole("spinbutton", {
+      name: "month",
+    });
+    // Select the first segment, month one.
+    await user.click(monthSegment);
+    expect(monthSegment).toHaveFocus();
+
+    // Type date's value.
+    await user.keyboard("{1}{2}{5}{2}{0}{2}{3}");
+
+    // Submit form being filled with a date.
+    await user.click(submitButton);
+    expectCalendarToBeClosed();
+    expectDateFieldToBeDisplayed();
+
+    // Make sure form's value matches.
+    expect(formData).toEqual({
+      datepicker: "2023-12-05",
+    });
+
+    // Clear picked date.
+    const clearButton = screen.getByRole("button", {
+      name: "Clear date",
+    });
+    await user.click(clearButton);
+    expectDateFieldToBeDisplayed();
+
+    // Submit the form being empty.
+    await user.click(submitButton);
+
+    // Date field disappears when the user click outside the comppnent.
+    expectDateFieldToBeHidden();
+
+    // Make sure form's value is null.
+    expect(formData).toEqual({
+      datepicker: null,
+    });
+  });
+
+  it("clicks next and previous focused month", async () => {
+    const defaultValue = new Date("2023-05-24");
+    const user = userEvent.setup();
+    render(
+      <CunninghamProvider>
+        <DatePicker
+          label="Pick a date"
+          name="datepicker"
+          defaultValue={defaultValue}
+        />
+      </CunninghamProvider>
+    );
+    const toggleButton = (await screen.findAllByRole("button"))![1];
+    await user.click(toggleButton);
+
+    // Focused month of the calendar grid should be the one from the default value.
+    expectFocusedMonthToBeEqual(defaultValue);
+
+    const previousMonthButton = screen.getByRole("button", {
+      name: "Previous month",
+    });
+    const nextMonthButton = screen.getByRole("button", {
+      name: "Next month",
+    });
+
+    // Focus previous month.
+    await user.click(previousMonthButton);
+    defaultValue.setMonth(defaultValue.getMonth() - 1);
+    expectFocusedMonthToBeEqual(defaultValue);
+
+    // Get back to the default focused month.
+    await user.click(nextMonthButton);
+    defaultValue.setMonth(defaultValue.getMonth() + 1);
+    expectFocusedMonthToBeEqual(defaultValue);
+
+    // Focus next month.
+    await user.click(nextMonthButton);
+    defaultValue.setMonth(defaultValue.getMonth() + 1);
+    expectFocusedMonthToBeEqual(defaultValue);
+  });
+
+  it("clicks next and previous focused year", async () => {
+    const defaultValue = new Date("2023-05-24");
+    const user = userEvent.setup();
+    render(
+      <CunninghamProvider>
+        <DatePicker
+          label="Pick a date"
+          name="datepicker"
+          defaultValue={defaultValue}
+        />
+      </CunninghamProvider>
+    );
+    const toggleButton = (await screen.findAllByRole("button"))![1];
+    await user.click(toggleButton);
+
+    // Focused year of the calendar grid should be the one from the default value.
+    expectFocusedYearToBeEqual(defaultValue);
+
+    const previousYearButton = screen.getByRole("button", {
+      name: "Previous year",
+    });
+    const nextYearButton = screen.getByRole("button", {
+      name: "Next year",
+    });
+
+    // Focus previous year.
+    await user.click(previousYearButton);
+    defaultValue.setFullYear(defaultValue.getFullYear() - 1);
+    expectFocusedYearToBeEqual(defaultValue);
+
+    // Get back to the default focused month.
+    await user.click(nextYearButton);
+    defaultValue.setFullYear(defaultValue.getFullYear() + 1);
+    expectFocusedYearToBeEqual(defaultValue);
+
+    // Focus next year.
+    await user.click(nextYearButton);
+    defaultValue.setFullYear(defaultValue.getFullYear() + 1);
+    expectFocusedYearToBeEqual(defaultValue);
+  });
+
+  it("renders disabled next and previous month", async () => {
+    const defaultValue = new Date("2023-05-24");
+    const minValue = new Date("2023-05-22");
+    const maxValue = new Date("2023-05-26");
+    const user = userEvent.setup();
+    render(
+      <CunninghamProvider>
+        <DatePicker
+          label="Pick a date"
+          name="datepicker"
+          defaultValue={defaultValue}
+          minValue={minValue}
+          maxValue={maxValue}
+        />
+      </CunninghamProvider>
+    );
+
+    const toggleButton = (await screen.findAllByRole("button"))![1];
+    await user.click(toggleButton);
+
+    // minValue doesn't allow to navigate to previous month.
+    const previousMonthButton = screen.getByRole("button", {
+      name: "Previous month",
+    });
+    expect(previousMonthButton).toBeDisabled();
+
+    // maxValue doesn't allow to navigate to previous month.
+    const nextMonthButton = screen.getByRole("button", {
+      name: "Next month",
+    });
+    expect(nextMonthButton).toBeDisabled();
+  });
+
+  it("renders disabled next and previous year", async () => {
+    const defaultValue = new Date("2023-05-24");
+    const minValue = new Date("2023-05-22");
+    const maxValue = new Date("2023-05-26");
+    const user = userEvent.setup();
+    render(
+      <CunninghamProvider>
+        <DatePicker
+          label="Pick a date"
+          name="datepicker"
+          defaultValue={defaultValue}
+          minValue={minValue}
+          maxValue={maxValue}
+        />
+      </CunninghamProvider>
+    );
+
+    const toggleButton = (await screen.findAllByRole("button"))![1];
+    await user.click(toggleButton);
+
+    // minValue doesn't allow to navigate to previous year.
+    const previousYearButton = screen.getByRole("button", {
+      name: "Previous year",
+    });
+    expect(previousYearButton).toBeDisabled();
+
+    // maxValue doesn't allow to navigate to next year.
+    const nextYearButton = screen.getByRole("button", {
+      name: "Next year",
+    });
+    expect(nextYearButton).toBeDisabled();
+  });
+
+  it("renders partially disabled next and previous month", async () => {
+    const user = userEvent.setup();
+    const minValue = new Date("2023-04-23");
+    const maxValue = new Date("2023-06-23");
+    render(
+      <CunninghamProvider>
+        <DatePicker
+          label="Pick a date"
+          name="datepicker"
+          defaultValue="2023-05-23"
+          minValue={minValue}
+          maxValue={maxValue}
+        />
+      </CunninghamProvider>
+    );
+
+    // Open the calendar.
+    const toggleButton = (await screen.findAllByRole("button"))![1];
+    await user.click(toggleButton);
+
+    const previousMonthButton = screen.getByRole("button", {
+      name: "Previous month",
+    });
+    const nextMonthButton = screen.getByRole("button", {
+      name: "Next month",
+    });
+
+    // Previous and next month buttons should not be disabled.
+    // Some days in previous and next month can be selected.
+    expect(previousMonthButton).not.toBeDisabled();
+    expect(nextMonthButton).not.toBeDisabled();
+
+    // Month n-2 should not be accessible,
+    // as month n-1 is partially disabled,
+    // all days from month n-2 are disabled.
+    await user.click(previousMonthButton);
+    expect(previousMonthButton).toBeDisabled();
+    expect(nextMonthButton).not.toBeDisabled();
+
+    // Get all the calendar's cells to check their state.
+    let gridCells = await screen.findAllByRole("gridcell");
+
+    // By default, calendar's cells outside the focused month are disabled (month n-1 and n+1).
+    // Cells within the focused month superior to the minDate should be clickable.
+    // Cells inferior to the minDate should be disabled.
+    gridCells.forEach((gridCell) => {
+      const button = within(gridCell).getByRole("button")!;
+      const value = new Date(
+        button.getAttribute("aria-label")!.replace("First available date", "")
+      );
+      if (
+        value.getMonth() === minValue.getMonth() &&
+        value.getDate() < minValue.getDate()
+      ) {
+        expect(button).toBeDisabled();
+      } else if (value.getMonth() === minValue.getMonth()) {
+        expect(button).not.toBeDisabled();
+      } else {
+        expect(button).toBeDisabled();
+      }
+    });
+
+    await user.click(nextMonthButton);
+    expect(previousMonthButton).not.toBeDisabled();
+    expect(nextMonthButton).not.toBeDisabled();
+
+    await user.click(nextMonthButton);
+    expect(previousMonthButton).not.toBeDisabled();
+    expect(nextMonthButton).toBeDisabled();
+
+    gridCells = await screen.findAllByRole("gridcell");
+    gridCells.forEach((gridCell) => {
+      const button = within(gridCell).getByRole("button")!;
+      const buttonLabel = button
+        .getAttribute("aria-label")
+        ?.replace("Last available date", "");
+      expect(buttonLabel).toBeDefined();
+      const value = new Date(buttonLabel!);
+      if (
+        value.getMonth() === maxValue.getMonth() &&
+        value.getDate() > maxValue.getDate()
+      ) {
+        expect(button).toBeDisabled();
+      } else if (value.getMonth() === maxValue.getMonth()) {
+        expect(button).not.toBeDisabled();
+      } else {
+        expect(button).toBeDisabled();
+      }
+    });
+  });
+
+  it("selects a focused month", async () => {
+    const user = userEvent.setup();
+    const defaultValue = new Date("2023-05-23");
+    render(
+      <CunninghamProvider>
+        <DatePicker
+          label="Pick a date"
+          name="datepicker"
+          defaultValue={defaultValue}
+        />
+      </CunninghamProvider>
+    );
+    const toggleButton = (await screen.findAllByRole("button"))![1];
+    await user.click(toggleButton);
+
+    // Get month dropdown.
+    const monthDropdown = screen.getByRole("combobox", {
+      name: "Select a month",
+    });
+
+    const [monthMenu, yearMenu] = await screen.findAllByRole("listbox");
+
+    expectMenuToBeClosed(monthMenu);
+    expectMenuToBeClosed(yearMenu);
+
+    // Make sure the selected item matched the default value.
+    let focusedMonth = monthDropdown.textContent?.replace(
+      "arrow_drop_down",
+      ""
+    );
+    expect(focusedMonth).eq(
+      defaultValue.toLocaleString("default", { month: "short" })
+    );
+
+    // Open month dropdown.
+    await user.click(monthDropdown);
+    expectMenuToBeOpen(monthMenu);
+    expectMenuToBeClosed(yearMenu);
+
+    // Select a month option.
+    defaultValue.setMonth(8);
+    const option: HTMLLIElement = screen.getByRole("option", {
+      name: defaultValue.toLocaleString("default", { month: "long" }),
+    });
+    await user.click(option);
+
+    expectMenuToBeClosed(monthMenu);
+    expectMenuToBeClosed(yearMenu);
+
+    // Make sure focused month has properly updated.
+    focusedMonth = monthDropdown.textContent?.replace("arrow_drop_down", "");
+    expect(focusedMonth).eq(
+      defaultValue.toLocaleString("default", { month: "short" })
+    );
+  });
+
+  it("selects a focused year", async () => {
+    const user = userEvent.setup();
+    const defaultValue = new Date("2023-05-23");
+    render(
+      <CunninghamProvider>
+        <DatePicker
+          label="Pick a date"
+          name="datepicker"
+          defaultValue={defaultValue}
+        />
+      </CunninghamProvider>
+    );
+    const toggleButton = (await screen.findAllByRole("button"))![1];
+    await user.click(toggleButton);
+
+    // Get year dropdown.
+    const yearDropdown = screen.getByRole("combobox", {
+      name: "Select a year",
+    });
+
+    const [monthMenu, yearMenu] = await screen.findAllByRole("listbox");
+
+    expectMenuToBeClosed(yearMenu);
+    expectMenuToBeClosed(monthMenu);
+
+    // Make sure the selected item matched the default value.
+    let focusedMonth = yearDropdown.textContent?.replace("arrow_drop_down", "");
+    expect(focusedMonth).eq(
+      defaultValue.toLocaleString("default", { year: "numeric" })
+    );
+
+    await user.click(yearDropdown);
+    expectMenuToBeOpen(yearMenu);
+    expectMenuToBeClosed(monthMenu);
+
+    // Select a year option.
+    defaultValue.setFullYear(2024);
+    const option: HTMLLIElement = screen.getByRole("option", {
+      name: defaultValue.toLocaleString("default", { year: "numeric" }),
+    });
+    await user.click(option);
+
+    expectMenuToBeClosed(yearMenu);
+    expectMenuToBeClosed(monthMenu);
+
+    // Make sure focused month has properly updated.
+    focusedMonth = yearDropdown.textContent?.replace("arrow_drop_down", "");
+    expect(focusedMonth).eq(
+      defaultValue.toLocaleString("default", { year: "numeric" })
+    );
+  });
+
+  it("can not select cells outside the focused month", async () => {
+    const user = userEvent.setup();
+    const defaultValue = new Date("2023-05-23");
+    render(
+      <CunninghamProvider>
+        <DatePicker
+          label="Pick a date"
+          name="datepicker"
+          defaultValue={defaultValue}
+        />
+      </CunninghamProvider>
+    );
+    // Open the calendar.
+    const toggleButton = (await screen.findAllByRole("button"))![1];
+    await user.click(toggleButton);
+
+    // Get all gridcells from the calendar.
+    const gridCells = await screen.findAllByRole("gridcell");
+
+    // Make sure that gridcells outside of the focused month are disabled.
+    gridCells.forEach((gridCell) => {
+      const button = within(gridCell).getByRole("button")!;
+      const value = new Date(
+        button.getAttribute("aria-label")!.replace("selected", "")
+      );
+      if (defaultValue.getMonth() === value.getMonth()) {
+        expect(button).not.toBeDisabled();
+      } else {
+        expect(button).toBeDisabled();
+      }
+    });
+  });
+
+  it("navigate previous focused month with keyboard", async () => {
+    const user = userEvent.setup();
+    const defaultValue = new Date("2023-05-01");
+    render(
+      <CunninghamProvider>
+        <DatePicker
+          label="Pick a date"
+          name="datepicker"
+          defaultValue={defaultValue}
+        />
+      </CunninghamProvider>
+    );
+
+    const previousMonthValue = new Date(defaultValue);
+    previousMonthValue.setDate(defaultValue.getDate() - 1);
+
+    // Open calendar.
+    const toggleButton = (await screen.findAllByRole("button"))![1];
+    await user.click(toggleButton);
+
+    // Navigate to the previous month using keyboard.
+    // default value is the cell of the calendar grid.
+    // Thus, navigating one cell up, changes the focused month.
+    await user.keyboard("{ArrowUp}");
+    expectFocusedMonthToBeEqual(previousMonthValue);
+
+    // Reopen the calendar menu to reset the focused month.
+    await user.click(toggleButton);
+    await user.click(toggleButton);
+
+    expectFocusedMonthToBeEqual(defaultValue);
+
+    await user.keyboard("{ArrowLeft}");
+    expectFocusedMonthToBeEqual(previousMonthValue);
+  });
+
+  it("navigate next focused month with keyboard", async () => {
+    const user = userEvent.setup();
+    const defaultValue = new Date("2023-05-31");
+    render(
+      <CunninghamProvider>
+        <DatePicker
+          label="Pick a date"
+          name="datepicker"
+          defaultValue={defaultValue}
+        />
+      </CunninghamProvider>
+    );
+
+    const nextMonthValue = new Date(defaultValue);
+    nextMonthValue.setDate(defaultValue.getDate() + 1);
+
+    const toggleButton = (await screen.findAllByRole("button"))![1];
+    await user.click(toggleButton);
+
+    await user.keyboard("{ArrowDown}");
+    expectFocusedMonthToBeEqual(nextMonthValue);
+
+    // Reopen the calendar menu to reset the focused month.
+    await user.click(toggleButton);
+    await user.click(toggleButton);
+
+    expectFocusedMonthToBeEqual(defaultValue);
+
+    // Navigate to the previous month using keyboard.
+    // default value is the last cell of the calendar grid.
+    // Thus, navigating one cell right, changes the focused month.
+    await user.keyboard("{ArrowRight}");
+    expectFocusedMonthToBeEqual(nextMonthValue);
+  });
+});
diff --git a/packages/react/src/components/Forms/DatePicker/index.stories.tsx b/packages/react/src/components/Forms/DatePicker/index.stories.tsx
new file mode 100644
index 0000000..0c0928f
--- /dev/null
+++ b/packages/react/src/components/Forms/DatePicker/index.stories.tsx
@@ -0,0 +1,104 @@
+import { Meta, StoryFn } from "@storybook/react";
+import React, { useState } from "react";
+import { CunninghamProvider } from ":/components/Provider";
+import { Button } from ":/components/Button";
+import { DatePicker } from "./index";
+
+export default {
+  title: "Components/Forms/DatePicker",
+  component: DatePicker,
+} as Meta<typeof DatePicker>;
+
+const Template: StoryFn<typeof DatePicker> = (args) => (
+  <CunninghamProvider>
+    <DatePicker {...args} label="Pick a date" />
+  </CunninghamProvider>
+);
+
+export const Default = () => (
+  <div style={{ minHeight: "400px" }}>
+    <CunninghamProvider>
+      <DatePicker label="Pick a date" />
+    </CunninghamProvider>
+  </div>
+);
+
+export const Disabled = {
+  render: Template,
+  args: { disabled: true },
+};
+
+export const DefaultValue = {
+  render: Template,
+  args: { defaultValue: "2023-05-24" },
+};
+
+export const DisabledValue = {
+  render: Template,
+  args: { disabled: true, defaultValue: "2023-05-24" },
+};
+
+export const Error = {
+  render: Template,
+  args: {
+    defaultValue: "2023-05-24",
+    state: "error",
+    text: "Something went wrong",
+  },
+};
+
+export const Success = {
+  render: Template,
+  args: {
+    defaultValue: "2023-05-24",
+    state: "success",
+    text: "Well done",
+  },
+};
+
+export const MinMaxValue = {
+  render: Template,
+  args: {
+    defaultValue: "2023-05-24",
+    minValue: "2023-04-23",
+    maxValue: "2023-06-23",
+  },
+};
+
+export const InvalidValue = {
+  render: Template,
+  args: {
+    defaultValue: "2023-02-24",
+    minValue: "2023-04-23",
+    maxValue: "2023-06-23",
+  },
+};
+
+export const WithText = {
+  render: Template,
+  args: {
+    defaultValue: "2023-05-24",
+    text: "This is a text, you can display anything you want here like warnings, information or errors.",
+  },
+};
+
+export const Controlled = () => {
+  const [value, setValue] = useState<string | Date>("2023-05-26");
+  return (
+    <CunninghamProvider>
+      <div>
+        <div>
+          Value: <span>{value?.toString()}</span>
+        </div>
+        <DatePicker
+          label="Pick a date"
+          value={value}
+          onChange={(e: string) => {
+            setValue(e);
+          }}
+        />
+        <Button onClick={() => setValue("")}>Reset</Button>
+      </div>
+    </CunninghamProvider>
+  );
+};
diff --git a/packages/react/src/components/Forms/DatePicker/index.tsx b/packages/react/src/components/Forms/DatePicker/index.tsx
new file mode 100644
index 0000000..acab122
--- /dev/null
+++ b/packages/react/src/components/Forms/DatePicker/index.tsx
@@ -0,0 +1,174 @@
+import React, { PropsWithChildren, useMemo, useRef, useState } from "react";
+import {
+  CalendarDate,
+  DateValue,
+  parseAbsoluteToLocal,
+  toCalendarDate,
+} from "@internationalized/date";
+import {
+  DatePickerStateOptions,
+  useDatePickerState,
+} from "@react-stately/datepicker";
+import { useDatePicker } from "@react-aria/datepicker";
+import classNames from "classnames";
+import { Button } from ":/components/Button";
+import { Field, FieldProps } from ":/components/Forms/Field";
+import { LabelledBox } from ":/components/Forms/LabelledBox";
+import { DateField } from ":/components/Forms/DatePicker/DateField";
+import { Calendar } from ":/components/Forms/DatePicker/Calendar";
+import { Popover } from ":/components/Popover";
+import { useCunningham } from ":/components/Provider";
+
+type DatePickerProps = PropsWithChildren &
+  FieldProps & {
+    label: string;
+    name?: string;
+    value?: null | Date | string;
+    defaultValue?: Date | string;
+    minValue?: Date | string;
+    maxValue?: Date | string;
+    onChange?: (value: string) => void | undefined;
+    disabled?: boolean;
+  };
+
+export const DatePicker = ({
+  label,
+  name,
+  disabled = false,
+  ...props
+}: DatePickerProps) => {
+  if (props.defaultValue && props.value) {
+    throw new Error(
+      "You cannot use both defaultValue and value props on DatePicker component"
+    );
+  }
+
+  const parseCalendarDate = (
+    rawDate: Date | string | undefined
+  ): undefined | CalendarDate => {
+    if (!rawDate) {
+      return undefined;
+    }
+    try {
+      const ISODateString = new Date(rawDate).toISOString();
+      return toCalendarDate(parseAbsoluteToLocal(ISODateString));
+    } catch (e) {
+      throw new Error(
+        "Invalid date format when initializing props on DatePicker component"
+      );
+    }
+  };
+
+  const datePickerOptions: DatePickerStateOptions<DateValue> = {
+    value:
+      // Force clear the component's value when passing null or an empty string.
+      props.value === "" || props.value === null
+        ? null
+        : parseCalendarDate(props.value),
+    defaultValue: parseCalendarDate(props.defaultValue),
+    minValue: parseCalendarDate(props.minValue),
+    maxValue: parseCalendarDate(props.maxValue),
+    onChange: (value: DateValue | null) => {
+      props.onChange?.(value?.toString() || "");
+    },
+    shouldCloseOnSelect: true,
+    granularity: "day",
+    isDisabled: disabled,
+    label,
+  };
+
+  const state = useDatePickerState(datePickerOptions);
+  const pickerRef = useRef<HTMLDivElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const { t } = useCunningham();
+
+  const { fieldProps, buttonProps, groupProps, calendarProps } = useDatePicker(
+    datePickerOptions,
+    state,
+    wrapperRef
+  );
+
+  const [isFocused, setIsFocused] = useState(false);
+
+  const labelAsPlaceholder = useMemo(
+    () => !state.isOpen && !state.value,
+    [state.value, state.isOpen]
+  );
+
+  const isDateInvalid = useMemo(
+    () => state.validationState === "invalid" || props.state === "error",
+    [state.validationState, props.state]
+  );
+
+  // onPress props don't exist on the <Button /> component.
+  // Remove it to avoid any warning.
+  const { onPress: onPressToggleButton, ...otherButtonProps } = buttonProps;
+
+  return (
+    <Field {...props}>
+      <div
+        ref={pickerRef}
+        className={classNames("c__date-picker", {
+          "c__date-picker--disabled": disabled,
+          "c__date-picker--invalid": isDateInvalid,
+          "c__date-picker--success": props.state === "success",
+          "c__date-picker--focused":
+            !isDateInvalid && !disabled && (state.isOpen || isFocused),
+        })}
+      >
+        <div
+          className={classNames("c__date-picker__wrapper", {
+            "c__date-picker__wrapper--clickable": labelAsPlaceholder,
+          })}
+          ref={wrapperRef}
+          {...groupProps}
+          aria-label={label}
+          role="button"
+          tabIndex={0}
+          onClick={() => !state.isOpen && state.open()}
+        >
+          {state.value && (
+            <input type="hidden" name={name} value={state.value?.toString()} />
+          )}
+          <Button
+            {...{
+              ...otherButtonProps,
+              "aria-label": t(
+                state.isOpen
+                  ? "components.forms.date_picker.toggle_button_aria_label_close"
+                  : "components.forms.date_picker.toggle_button_aria_label_open"
+              ),
+            }}
+            color="tertiary"
+            size="small"
+            className="c__date-picker__wrapper__toggle"
+            onClick={state.toggle}
+            icon={<span className="material-icons">calendar_today</span>}
+            disabled={disabled}
+          />
+          <LabelledBox label={label} labelAsPlaceholder={labelAsPlaceholder}>
+            <div className="c__date-picker__inner">
+              {!labelAsPlaceholder && (
+                <DateField
+                  {...{
+                    ...fieldProps,
+                    onFocusChange: (focus) => setIsFocused(focus),
+                  }}
+                />
+              )}
+            </div>
+          </LabelledBox>
+        </div>
+        {state.isOpen && (
+          <Popover
+            parentRef={pickerRef}
+            onClickOutside={state.close}
+            borderless
+          >
+            <Calendar {...calendarProps} />
+          </Popover>
+        )}
+      </div>
+    </Field>
+  );
+};
diff --git a/packages/react/src/components/Forms/DatePicker/tokens.ts b/packages/react/src/components/Forms/DatePicker/tokens.ts
new file mode 100644
index 0000000..f7226db
--- /dev/null
+++ b/packages/react/src/components/Forms/DatePicker/tokens.ts
@@ -0,0 +1,23 @@
+import { DefaultTokens } from "@openfun/cunningham-tokens";
+
+export const tokens = (defaults: DefaultTokens) => ({
+  "border-color": defaults.theme.colors["greyscale-300"],
+  "border-color--focus": defaults.theme.colors["primary-600"],
+  "border-color--hover": defaults.theme.colors["greyscale-500"],
+  "border-radius": "8px",
+  "border-radius--focus": "2px",
+  "border-radius--hover": "2px",
+  "border-style": "solid",
+  "border-width": "2px",
+  color: defaults.theme.colors["greyscale-800"],
+  "font-size": defaults.theme.font.sizes.l,
+  height: "3.5rem",
+  "item-background-color--hover": defaults.theme.colors["greyscale-200"],
+  "item-background-color--selected": defaults.theme.colors["primary-100"],
+  "item-color": defaults.theme.colors["greyscale-800"],
+  "item-font-size": defaults.theme.font.sizes.l,
+  "background-color": "white",
+  "menu-background-color": "white",
+  "grid-cell--border-color--today": defaults.theme.colors["primary-600"],
+  "grid-cell--color--today": defaults.theme.colors["primary-600"],
+});
diff --git a/packages/react/src/components/Forms/Select/index.scss b/packages/react/src/components/Forms/Select/index.scss
index 8fb6297..49a2949 100644
--- a/packages/react/src/components/Forms/Select/index.scss
+++ b/packages/react/src/components/Forms/Select/index.scss
@@ -102,11 +102,11 @@
   }
 
   &__menu {
+    @extend %shadow;
     position: absolute;
     overflow: auto;
     width: calc(100% - 4px);
     max-height: 10rem;
-    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
     background-color: var(--c--components--forms-select--menu-background-color);
     transform: translate(2px, 0);
     display: none;
diff --git a/packages/react/src/components/Popover/index.scss b/packages/react/src/components/Popover/index.scss
index d6ccb21..46955d6 100644
--- a/packages/react/src/components/Popover/index.scss
+++ b/packages/react/src/components/Popover/index.scss
@@ -1,3 +1,6 @@
+@use 'src/utils';
+
+
 .c__popover {
   position: absolute;
   display: flex;
@@ -5,7 +8,7 @@
   z-index: 1;
 
   &:not(&--borderless) {
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+    @extend %shadow;
     background-color: var(--c--components--forms-datepicker--menu-background-color);
   }
 }
diff --git a/packages/react/src/cunningham-tokens.css b/packages/react/src/cunningham-tokens.css
index 131de5c..72ab8a3 100644
--- a/packages/react/src/cunningham-tokens.css
+++ b/packages/react/src/cunningham-tokens.css
@@ -142,6 +142,25 @@
 	--c--components--forms-field--width: 292px;
 	--c--components--forms-field--font-size: 0.6875rem;
 	--c--components--forms-field--color: #79818A;
+	--c--components--forms-datepicker--border-color: #E7E8EA;
+	--c--components--forms-datepicker--border-color--focus: #0556BF;
+	--c--components--forms-datepicker--border-color--hover: #9EA3AA;
+	--c--components--forms-datepicker--border-radius: 8px;
+	--c--components--forms-datepicker--border-radius--focus: 2px;
+	--c--components--forms-datepicker--border-radius--hover: 2px;
+	--c--components--forms-datepicker--border-style: solid;
+	--c--components--forms-datepicker--border-width: 2px;
+	--c--components--forms-datepicker--color: #303C4B;
+	--c--components--forms-datepicker--font-size: 1rem;
+	--c--components--forms-datepicker--height: 3.5rem;
+	--c--components--forms-datepicker--item-background-color--hover: #F3F4F4;
+	--c--components--forms-datepicker--item-background-color--selected: #EBF2FC;
+	--c--components--forms-datepicker--item-color: #303C4B;
+	--c--components--forms-datepicker--item-font-size: 1rem;
+	--c--components--forms-datepicker--background-color: white;
+	--c--components--forms-datepicker--menu-background-color: white;
+	--c--components--forms-datepicker--grid-cell--border-color--today: #0556BF;
+	--c--components--forms-datepicker--grid-cell--color--today: #0556BF;
 	--c--components--forms-checkbox--background-color--hover: #F3F4F4;
 	--c--components--forms-checkbox--background-color: white;
 	--c--components--forms-checkbox--font-size: 0.8125rem;
diff --git a/packages/react/src/cunningham-tokens.js b/packages/react/src/cunningham-tokens.js
index 73a5c94..5894ee3 100644
--- a/packages/react/src/cunningham-tokens.js
+++ b/packages/react/src/cunningham-tokens.js
@@ -1 +1 @@
-export const tokens = {"theme":{"colors":{"primary-text":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","greyscale-000":"#FFFFFF","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","success-text":"#FFFFFF","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","warning-text":"#FFFFFF","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-text":"#FFFFFF","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"}},"components":{"forms-switch":{"accent-color":"#419A14","rail-background-color":"#9EA3AA","rail-background-color--disabled":"#C2C6CA","rail-border-radius":"50vw","handle-background-color":"white","handle-background-color--disabled":"#F3F4F4","handle-border-radius":"50%"},"forms-select":{"border-color":"#E7E8EA","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","color":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-color--disabled":"#9EA3AA","item-font-size":"1rem","background-color":"white","menu-background-color":"white","label-color--focus":"#0556BF"},"forms-radio":{"border-color":"#E7E8EA","accent-color":"#419A14","background-color":"white"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","color":"#303C4B","label-color--focus":"#0556BF","background-color":"white"},"forms-field":{"width":"292px","font-size":"0.6875rem","color":"#79818A"},"forms-checkbox":{"background-color--hover":"#F3F4F4","background-color":"white","font-size":"0.8125rem","font-weight":500,"color":"#0C1A2B","border-color":"#E7E8EA","border-radius":"2px","accent-color":"#419A14","size":"1.5rem"},"button":{"border-radius":"8px","border-radius--active":"2px","medium-height":"48px","small-height":"32px","medium-font-size":"1rem","small-font-size":"0.8125rem","font-weight":400}}};
+export const tokens = {"theme":{"colors":{"primary-text":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","greyscale-000":"#FFFFFF","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","success-text":"#FFFFFF","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","warning-text":"#FFFFFF","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-text":"#FFFFFF","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"}},"components":{"forms-switch":{"accent-color":"#419A14","rail-background-color":"#9EA3AA","rail-background-color--disabled":"#C2C6CA","rail-border-radius":"50vw","handle-background-color":"white","handle-background-color--disabled":"#F3F4F4","handle-border-radius":"50%"},"forms-select":{"border-color":"#E7E8EA","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","color":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-color--disabled":"#9EA3AA","item-font-size":"1rem","background-color":"white","menu-background-color":"white","label-color--focus":"#0556BF"},"forms-radio":{"border-color":"#E7E8EA","accent-color":"#419A14","background-color":"white"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","color":"#303C4B","label-color--focus":"#0556BF","background-color":"white"},"forms-field":{"width":"292px","font-size":"0.6875rem","color":"#79818A"},"forms-datepicker":{"border-color":"#E7E8EA","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"2px","color":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-font-size":"1rem","background-color":"white","menu-background-color":"white","grid-cell--border-color--today":"#0556BF","grid-cell--color--today":"#0556BF"},"forms-checkbox":{"background-color--hover":"#F3F4F4","background-color":"white","font-size":"0.8125rem","font-weight":500,"color":"#0C1A2B","border-color":"#E7E8EA","border-radius":"2px","accent-color":"#419A14","size":"1.5rem"},"button":{"border-radius":"8px","border-radius--active":"2px","medium-height":"48px","small-height":"32px","medium-font-size":"1rem","small-font-size":"0.8125rem","font-weight":400}}};
diff --git a/packages/react/src/cunningham-tokens.ts b/packages/react/src/cunningham-tokens.ts
index 73a5c94..5894ee3 100644
--- a/packages/react/src/cunningham-tokens.ts
+++ b/packages/react/src/cunningham-tokens.ts
@@ -1 +1 @@
-export const tokens = {"theme":{"colors":{"primary-text":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","greyscale-000":"#FFFFFF","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","success-text":"#FFFFFF","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","warning-text":"#FFFFFF","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-text":"#FFFFFF","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"}},"components":{"forms-switch":{"accent-color":"#419A14","rail-background-color":"#9EA3AA","rail-background-color--disabled":"#C2C6CA","rail-border-radius":"50vw","handle-background-color":"white","handle-background-color--disabled":"#F3F4F4","handle-border-radius":"50%"},"forms-select":{"border-color":"#E7E8EA","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","color":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-color--disabled":"#9EA3AA","item-font-size":"1rem","background-color":"white","menu-background-color":"white","label-color--focus":"#0556BF"},"forms-radio":{"border-color":"#E7E8EA","accent-color":"#419A14","background-color":"white"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","color":"#303C4B","label-color--focus":"#0556BF","background-color":"white"},"forms-field":{"width":"292px","font-size":"0.6875rem","color":"#79818A"},"forms-checkbox":{"background-color--hover":"#F3F4F4","background-color":"white","font-size":"0.8125rem","font-weight":500,"color":"#0C1A2B","border-color":"#E7E8EA","border-radius":"2px","accent-color":"#419A14","size":"1.5rem"},"button":{"border-radius":"8px","border-radius--active":"2px","medium-height":"48px","small-height":"32px","medium-font-size":"1rem","small-font-size":"0.8125rem","font-weight":400}}};
+export const tokens = {"theme":{"colors":{"primary-text":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","greyscale-000":"#FFFFFF","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","success-text":"#FFFFFF","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","warning-text":"#FFFFFF","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-text":"#FFFFFF","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"}},"components":{"forms-switch":{"accent-color":"#419A14","rail-background-color":"#9EA3AA","rail-background-color--disabled":"#C2C6CA","rail-border-radius":"50vw","handle-background-color":"white","handle-background-color--disabled":"#F3F4F4","handle-border-radius":"50%"},"forms-select":{"border-color":"#E7E8EA","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","color":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-color--disabled":"#9EA3AA","item-font-size":"1rem","background-color":"white","menu-background-color":"white","label-color--focus":"#0556BF"},"forms-radio":{"border-color":"#E7E8EA","accent-color":"#419A14","background-color":"white"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","color":"#303C4B","label-color--focus":"#0556BF","background-color":"white"},"forms-field":{"width":"292px","font-size":"0.6875rem","color":"#79818A"},"forms-datepicker":{"border-color":"#E7E8EA","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"2px","color":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-font-size":"1rem","background-color":"white","menu-background-color":"white","grid-cell--border-color--today":"#0556BF","grid-cell--color--today":"#0556BF"},"forms-checkbox":{"background-color--hover":"#F3F4F4","background-color":"white","font-size":"0.8125rem","font-weight":500,"color":"#0C1A2B","border-color":"#E7E8EA","border-radius":"2px","accent-color":"#419A14","size":"1.5rem"},"button":{"border-radius":"8px","border-radius--active":"2px","medium-height":"48px","small-height":"32px","medium-font-size":"1rem","small-font-size":"0.8125rem","font-weight":400}}};
diff --git a/packages/react/src/index.scss b/packages/react/src/index.scss
index 128c26f..e642aa3 100644
--- a/packages/react/src/index.scss
+++ b/packages/react/src/index.scss
@@ -11,6 +11,7 @@
 @import './components/Forms/LabelledBox';
 @import './components/Forms/Select';
 @import './components/Forms/Switch';
+@import './components/Forms/DatePicker';
 @import './components/Loader';
 @import './components/Pagination';
 @import './components/Popover';
diff --git a/packages/react/src/locales/en-US.json b/packages/react/src/locales/en-US.json
index 0c47404..0744ede 100644
--- a/packages/react/src/locales/en-US.json
+++ b/packages/react/src/locales/en-US.json
@@ -22,6 +22,17 @@
       "select": {
         "toggle_button_aria_label": "Toggle dropdown",
         "clear_button_aria_label": "Clear selection"
+      },
+      "date_picker": {
+        "toggle_button_aria_label_open": "Open calendar",
+        "toggle_button_aria_label_close": "Close calendar",
+        "clear_button_aria_label": "Clear date",
+        "next_month_button_aria_label": "Next month",
+        "next_year_button_aria_label": "Next year",
+        "previous_month_button_aria_label": "Previous month",
+        "previous_year_button_aria_label": "Previous year",
+        "year_select_button_aria_label": "Select a year",
+        "month_select_button_aria_label": "Select a month"
       }
     }
   }
diff --git a/packages/react/src/locales/fr-FR.json b/packages/react/src/locales/fr-FR.json
index 5a360ed..8c99ffd 100644
--- a/packages/react/src/locales/fr-FR.json
+++ b/packages/react/src/locales/fr-FR.json
@@ -20,6 +20,17 @@
       "select": {
         "toggle_button_aria_label": "Ouvrir le menu",
         "clear_button_aria_label": "Effacer la sélection"
+      },
+      "date_picker": {
+        "toggle_button_aria_label_open": "Ouvrir le calendrier",
+        "toggle_button_aria_label_close": "Fermer le calendrier",
+        "clear_button_aria_label": "Effacer la date",
+        "next_month_button_aria_label": "Mois suivant",
+        "next_year_button_aria_label": "Année suivante",
+        "previous_month_button_aria_label": "Mois précédent",
+        "previous_year_button_aria_label": "Année précédente",
+        "year_select_button_aria_label": "Sélectionner une année",
+        "month_select_button_aria_label": "Sélectionner un mois"
       }
     }
   }
diff --git a/packages/react/src/utils/index.scss b/packages/react/src/utils/index.scss
index ab8cd41..033f001 100644
--- a/packages/react/src/utils/index.scss
+++ b/packages/react/src/utils/index.scss
@@ -29,3 +29,7 @@
 @function px-to-rem($size, $base-font-size:16px) {
   @return math.div(strip-unit($size), strip-unit($base-font-size)) * 1rem;
 }
+
+%shadow {
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+}