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);
+}