From 96173456060eeccbc337b0093b2ce151acbc58ff Mon Sep 17 00:00:00 2001
From: lisa <llupi@scaleway.com>
Date: Tue, 12 Nov 2024 17:56:37 +0100
Subject: [PATCH] fix: change value in input

---
 .../{DateInputV2 => DateInput}/Context.tsx    |    45 +-
 .../__stories__/Controlled.stories.tsx        |    20 +-
 .../__stories__/Disabled.stories.tsx          |     8 +
 .../DateInput/__stories__/Error.stories.tsx   |     8 +
 .../DateInput/__stories__/Exclude.stories.tsx |    22 +-
 .../DateInput/__stories__/I18n.stories.tsx    |     1 +
 .../DateInput/__stories__/Months.stories.tsx  |    43 +-
 .../__stories__/Playground.stories.tsx        |    12 +-
 .../DateInput/__stories__/Range.stories.tsx   |    64 +-
 .../DateInput/__stories__/Size.stories.tsx    |     4 +
 .../DateInput/__stories__/Template.tsx        |     4 +-
 .../__stories__/Uncontrolled.stories.tsx      |    19 -
 .../DateInput/__stories__/index.stories.tsx   |    17 +-
 .../__snapshots__/index.test.tsx.snap         | 13194 +++++++++-------
 .../DateInput/__tests__/index.test.tsx        |   240 +-
 .../components}/CalendarDaily.tsx             |   106 +-
 .../components}/CalendarMonthly.tsx           |    70 +-
 .../components}/Popup.tsx                     |    25 +-
 .../ui/src/components/DateInput/constants.ts  |    48 +
 .../src/components/DateInput/datepicker.css   |     1 -
 .../{DateInputV2 => DateInput}/helpers.ts     |    52 +-
 .../helpersLocale.ts                          |     0
 .../ui/src/components/DateInput/index.tsx     |   536 +-
 .../__stories__/Controlled.stories.tsx        |    36 -
 .../__stories__/Disabled.stories.tsx          |    16 -
 .../DateInputV2/__stories__/Error.stories.tsx |    24 -
 .../__stories__/Exclude.stories.tsx           |    38 -
 .../DateInputV2/__stories__/I18n.stories.tsx  |    78 -
 .../__stories__/Localized.stories.tsx         |    41 -
 .../__stories__/MinMax.stories.tsx            |    18 -
 .../__stories__/Months.stories.tsx            |    17 -
 .../__stories__/Playground.stories.tsx        |    15 -
 .../DateInputV2/__stories__/Range.stories.tsx |    76 -
 .../__stories__/Required.stories.tsx          |     8 -
 .../DateInputV2/__stories__/Size.stories.tsx  |    11 -
 .../DateInputV2/__stories__/Template.tsx      |    12 -
 .../DateInputV2/__stories__/index.stories.tsx |    19 -
 .../__snapshots__/index.test.tsx.snap         | 10123 ------------
 .../DateInputV2/__tests__/index.test.tsx      |   379 -
 .../ui/src/components/DateInputV2/index.tsx   |   263 -
 packages/ui/src/components/index.ts           |     1 -
 41 files changed, 8049 insertions(+), 17665 deletions(-)
 rename packages/ui/src/components/{DateInputV2 => DateInput}/Context.tsx (73%)
 delete mode 100644 packages/ui/src/components/DateInput/__stories__/Uncontrolled.stories.tsx
 rename packages/ui/src/components/{DateInputV2 => DateInput/components}/CalendarDaily.tsx (75%)
 rename packages/ui/src/components/{DateInputV2 => DateInput/components}/CalendarMonthly.tsx (71%)
 rename packages/ui/src/components/{DateInputV2 => DateInput/components}/Popup.tsx (88%)
 create mode 100644 packages/ui/src/components/DateInput/constants.ts
 delete mode 100644 packages/ui/src/components/DateInput/datepicker.css
 rename packages/ui/src/components/{DateInputV2 => DateInput}/helpers.ts (53%)
 rename packages/ui/src/components/{DateInputV2 => DateInput}/helpersLocale.ts (100%)
 delete mode 100644 packages/ui/src/components/DateInputV2/__stories__/Controlled.stories.tsx
 delete mode 100644 packages/ui/src/components/DateInputV2/__stories__/Disabled.stories.tsx
 delete mode 100644 packages/ui/src/components/DateInputV2/__stories__/Error.stories.tsx
 delete mode 100644 packages/ui/src/components/DateInputV2/__stories__/Exclude.stories.tsx
 delete mode 100644 packages/ui/src/components/DateInputV2/__stories__/I18n.stories.tsx
 delete mode 100644 packages/ui/src/components/DateInputV2/__stories__/Localized.stories.tsx
 delete mode 100644 packages/ui/src/components/DateInputV2/__stories__/MinMax.stories.tsx
 delete mode 100644 packages/ui/src/components/DateInputV2/__stories__/Months.stories.tsx
 delete mode 100644 packages/ui/src/components/DateInputV2/__stories__/Playground.stories.tsx
 delete mode 100644 packages/ui/src/components/DateInputV2/__stories__/Range.stories.tsx
 delete mode 100644 packages/ui/src/components/DateInputV2/__stories__/Required.stories.tsx
 delete mode 100644 packages/ui/src/components/DateInputV2/__stories__/Size.stories.tsx
 delete mode 100644 packages/ui/src/components/DateInputV2/__stories__/Template.tsx
 delete mode 100644 packages/ui/src/components/DateInputV2/__stories__/index.stories.tsx
 delete mode 100644 packages/ui/src/components/DateInputV2/__tests__/__snapshots__/index.test.tsx.snap
 delete mode 100644 packages/ui/src/components/DateInputV2/__tests__/index.test.tsx
 delete mode 100644 packages/ui/src/components/DateInputV2/index.tsx

diff --git a/packages/ui/src/components/DateInputV2/Context.tsx b/packages/ui/src/components/DateInput/Context.tsx
similarity index 73%
rename from packages/ui/src/components/DateInputV2/Context.tsx
rename to packages/ui/src/components/DateInput/Context.tsx
index 36751d757b..ea805d4896 100644
--- a/packages/ui/src/components/DateInputV2/Context.tsx
+++ b/packages/ui/src/components/DateInput/Context.tsx
@@ -1,5 +1,6 @@
 import { createContext } from 'react'
 import type { Dispatch, SetStateAction } from 'react'
+import { DAYS_DEFAULT, MONTHS_ARR_DEFAULT, MONTHS_DEFAULT } from './constants'
 
 export type ContextProps = {
   showMonthYearPicker?: boolean
@@ -23,6 +24,7 @@ export type ContextProps = {
   DAYS: Record<string, string>
   MONTHS_ARR: string[]
   setValue: Dispatch<SetStateAction<Date | null>>
+  setInputValue: Dispatch<SetStateAction<string | undefined>>
   value?: Date | null
   range?: {
     start: Date | null
@@ -36,6 +38,7 @@ export type ContextProps = {
   >
   startDate?: Date | null
   endDate?: Date | null
+  format?: (value?: Date) => string | undefined
 } & (
   | {
       selectsRange: true
@@ -52,51 +55,11 @@ export type ContextProps = {
       ) => void
     }
 )
-const DAYS_DEFAULT = {
-  Sunday: 'Su',
-  Monday: 'Mo',
-  Tuesday: 'Tu',
-  Wednesday: 'We',
-  Thursday: 'Th',
-  Friday: 'Fr',
-  Saturday: 'Sa',
-}
-
-// Calendar months names and short names
-const MONTHS_DEFAULT = {
-  January: 'Jan',
-  February: 'Feb',
-  March: 'Mar',
-  April: 'Apr',
-  May: 'May',
-  June: 'Jun',
-  July: 'Jul',
-  August: 'Aug',
-  September: 'Sep',
-  October: 'Oct',
-  November: 'Nov',
-  December: 'Dec',
-}
-
-export const MONTHS_ARR_DEFAULT = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-]
-
 export const DateInputContext = createContext<ContextProps>({
   showMonthYearPicker: false,
   disabled: false,
   setValue: () => null,
+  setInputValue: () => null,
   monthToShow: 1,
   yearToShow: 2000,
   setMonthToShow: () => null,
diff --git a/packages/ui/src/components/DateInput/__stories__/Controlled.stories.tsx b/packages/ui/src/components/DateInput/__stories__/Controlled.stories.tsx
index 1e7e3d40df..b9c73559e9 100644
--- a/packages/ui/src/components/DateInput/__stories__/Controlled.stories.tsx
+++ b/packages/ui/src/components/DateInput/__stories__/Controlled.stories.tsx
@@ -2,6 +2,8 @@ import type { StoryFn } from '@storybook/react'
 import type { ComponentProps } from 'react'
 import { useState } from 'react'
 import { DateInput } from '..'
+import { Button } from '../../Button'
+import { Stack } from '../../Stack'
 
 export const Controlled: StoryFn<ComponentProps<typeof DateInput>> = args => {
   const [value, setValue] = useState<
@@ -9,12 +11,18 @@ export const Controlled: StoryFn<ComponentProps<typeof DateInput>> = args => {
   >(new Date('December 17, 1995 03:24:00'))
 
   return (
-    <DateInput
-      {...args}
-      label="Date"
-      value={value as Date}
-      onChange={setValue}
-    />
+    <Stack gap={2}>
+      <DateInput
+        {...args}
+        label="Date"
+        value={value as Date}
+        onChange={setValue}
+      />
+      Selected date : {value?.toString()}
+      <Button onClick={() => setValue(new Date('December 26, 1995 03:24:00'))}>
+        Set date to 1995-12-26
+      </Button>
+    </Stack>
   )
 }
 
diff --git a/packages/ui/src/components/DateInput/__stories__/Disabled.stories.tsx b/packages/ui/src/components/DateInput/__stories__/Disabled.stories.tsx
index cd6cd1a35a..62d5b222b4 100644
--- a/packages/ui/src/components/DateInput/__stories__/Disabled.stories.tsx
+++ b/packages/ui/src/components/DateInput/__stories__/Disabled.stories.tsx
@@ -6,3 +6,11 @@ Disabled.args = {
   label: 'Disabled',
   disabled: true,
 }
+
+Disabled.decorators = [
+  StoryComponent => (
+    <div style={{ height: '350px' }}>
+      <StoryComponent />
+    </div>
+  ),
+]
diff --git a/packages/ui/src/components/DateInput/__stories__/Error.stories.tsx b/packages/ui/src/components/DateInput/__stories__/Error.stories.tsx
index 3468b8cbd1..0861094ff1 100644
--- a/packages/ui/src/components/DateInput/__stories__/Error.stories.tsx
+++ b/packages/ui/src/components/DateInput/__stories__/Error.stories.tsx
@@ -14,3 +14,11 @@ Error.args = {
   label: 'Error',
   error: 'This is an error',
 }
+
+Error.decorators = [
+  StoryComponent => (
+    <div style={{ height: '350px' }}>
+      <StoryComponent />
+    </div>
+  ),
+]
diff --git a/packages/ui/src/components/DateInput/__stories__/Exclude.stories.tsx b/packages/ui/src/components/DateInput/__stories__/Exclude.stories.tsx
index 1a9b7b4d51..1c38d4ed81 100644
--- a/packages/ui/src/components/DateInput/__stories__/Exclude.stories.tsx
+++ b/packages/ui/src/components/DateInput/__stories__/Exclude.stories.tsx
@@ -1,7 +1,23 @@
-import { Template } from './Template'
-
-export const Exclude = Template.bind({})
+import type { StoryFn } from '@storybook/react'
+import type { ComponentProps } from 'react'
+import { DateInput } from '..'
+import { Stack } from '../../Stack'
 
+export const Exclude: StoryFn<ComponentProps<typeof DateInput>> = args => (
+  <Stack gap={3}>
+    <DateInput {...args} />
+    <DateInput
+      {...args}
+      showMonthYearPicker
+      label="With months"
+      excludeDates={[
+        new Date('November 1, 1995 03:24:00'),
+        new Date('January 14, 1995 03:24:00'),
+        new Date('March 22, 1995 03:24:00'),
+      ]}
+    />
+  </Stack>
+)
 Exclude.parameters = {
   docs: {
     description: {
diff --git a/packages/ui/src/components/DateInput/__stories__/I18n.stories.tsx b/packages/ui/src/components/DateInput/__stories__/I18n.stories.tsx
index 7a453df8a2..9c4a511638 100644
--- a/packages/ui/src/components/DateInput/__stories__/I18n.stories.tsx
+++ b/packages/ui/src/components/DateInput/__stories__/I18n.stories.tsx
@@ -62,6 +62,7 @@ export const I18n: StoryFn<ComponentProps<typeof DateInput>> = args => {
           setValue(v as Date)
         }}
         label={currentLocale}
+        selectsRange={false}
       />
     </div>
   )
diff --git a/packages/ui/src/components/DateInput/__stories__/Months.stories.tsx b/packages/ui/src/components/DateInput/__stories__/Months.stories.tsx
index b3d8d642a5..ca4e792e11 100644
--- a/packages/ui/src/components/DateInput/__stories__/Months.stories.tsx
+++ b/packages/ui/src/components/DateInput/__stories__/Months.stories.tsx
@@ -1,34 +1,17 @@
-import type { StoryFn } from '@storybook/react'
-import { useState } from 'react'
-import { DateInput } from '..'
+import { Template } from './Template'
 
-export const Months: StoryFn = args => {
-  const [startDate, setStartDate] = useState<Date | null>(null)
-  const [endDate, setEndDate] = useState<Date | null>(null)
-  const onChange = (dates: [Date | null, Date | null]) => {
-    const [start, end] = dates
-    setStartDate(start)
-    setEndDate(end)
-  }
+export const Months = Template.bind({})
 
-  return (
-    <DateInput
-      label="Date"
-      startDate={startDate}
-      endDate={endDate}
-      onChange={onChange}
-      showMonthYearPicker
-      selectsRange
-      {...args}
-    />
-  )
+Months.args = {
+  label: 'Months',
+  showMonthYearPicker: true,
+  disabled: false,
 }
 
-Months.parameters = {
-  docs: {
-    description: {
-      story:
-        'Using prop `showMonthYearPicker` you can select only months and years.',
-    },
-  },
-}
+Months.decorators = [
+  StoryComponent => (
+    <div style={{ height: '350px' }}>
+      <StoryComponent />
+    </div>
+  ),
+]
diff --git a/packages/ui/src/components/DateInput/__stories__/Playground.stories.tsx b/packages/ui/src/components/DateInput/__stories__/Playground.stories.tsx
index 515910c77a..a0e981bab6 100644
--- a/packages/ui/src/components/DateInput/__stories__/Playground.stories.tsx
+++ b/packages/ui/src/components/DateInput/__stories__/Playground.stories.tsx
@@ -2,4 +2,14 @@ import { Template } from './Template'
 
 export const Playground = Template.bind({})
 
-Playground.args = Template.args
+Playground.args = {
+  placeholder: 'YYYY-MM-DD',
+}
+
+Playground.decorators = [
+  StoryComponent => (
+    <div style={{ height: '350px' }}>
+      <StoryComponent />
+    </div>
+  ),
+]
diff --git a/packages/ui/src/components/DateInput/__stories__/Range.stories.tsx b/packages/ui/src/components/DateInput/__stories__/Range.stories.tsx
index 333b41d29e..fb16abfde9 100644
--- a/packages/ui/src/components/DateInput/__stories__/Range.stories.tsx
+++ b/packages/ui/src/components/DateInput/__stories__/Range.stories.tsx
@@ -1,25 +1,69 @@
 import type { StoryFn } from '@storybook/react'
+import type { ComponentProps } from 'react'
 import { useState } from 'react'
 import { DateInput } from '..'
+import { Stack } from '../../Stack'
 
-export const Range: StoryFn = args => {
+const months = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+]
+export const Range: StoryFn<ComponentProps<typeof DateInput>> = args => {
   const [startDate, setStartDate] = useState<Date | null>(null)
   const [endDate, setEndDate] = useState<Date | null>(null)
-  const onChange = (dates: [Date | null, Date | null]) => {
+
+  const [startMonth, setStartMonth] = useState<Date | null>(
+    new Date('March 2024'),
+  )
+  const [endMonth, setEndMonth] = useState<Date | null>(null)
+
+  const onChange = (dates: [Date | null, Date | null] | Date[]) => {
     const [start, end] = dates
     setStartDate(start)
     setEndDate(end)
   }
 
+  const onChangeMonth = (dates: [Date | null, Date | null] | Date[]) => {
+    const [start, end] = dates
+    setStartMonth(start)
+    setEndMonth(end)
+  }
+
   return (
-    <DateInput
-      label="Date"
-      onChange={onChange}
-      startDate={startDate}
-      endDate={endDate}
-      selectsRange
-      {...args}
-    />
+    <Stack>
+      <DateInput
+        label="Date"
+        onChange={onChange}
+        startDate={startDate}
+        endDate={endDate}
+        selectsRange
+        {...args}
+      />
+      Selected dates : {startDate?.toDateString()} - {endDate?.toDateString()}
+      <DateInput
+        label="Month"
+        onChange={onChangeMonth}
+        startDate={startMonth}
+        endDate={endMonth}
+        selectsRange
+        showMonthYearPicker
+        {...args}
+      />
+      Selected months : {startMonth ? months[startMonth.getMonth()] : null}
+      {startMonth?.getFullYear()} -
+      {endMonth ? months[endMonth.getMonth()] : null}
+      {endMonth?.getFullYear()}
+    </Stack>
   )
 }
 
diff --git a/packages/ui/src/components/DateInput/__stories__/Size.stories.tsx b/packages/ui/src/components/DateInput/__stories__/Size.stories.tsx
index 69acf72812..328b221fdc 100644
--- a/packages/ui/src/components/DateInput/__stories__/Size.stories.tsx
+++ b/packages/ui/src/components/DateInput/__stories__/Size.stories.tsx
@@ -9,3 +9,7 @@ export const Size: StoryFn<typeof DateInput> = args => (
     ))}
   </Stack>
 )
+
+Size.args = {
+  value: 'Sat 24 Dec 2024',
+}
diff --git a/packages/ui/src/components/DateInput/__stories__/Template.tsx b/packages/ui/src/components/DateInput/__stories__/Template.tsx
index 33815ece73..ded906ef38 100644
--- a/packages/ui/src/components/DateInput/__stories__/Template.tsx
+++ b/packages/ui/src/components/DateInput/__stories__/Template.tsx
@@ -1,12 +1,12 @@
 import type { StoryFn } from '@storybook/react'
-import type { ComponentProps } from 'react'
 import { DateInput } from '..'
 
-export const Template: StoryFn<ComponentProps<typeof DateInput>> = props => (
+export const Template: StoryFn<typeof DateInput> = props => (
   <DateInput {...props} />
 )
 
 Template.args = {
   label: 'Date Input',
   required: true,
+  placeholder: 'YYYY-MM-DD',
 }
diff --git a/packages/ui/src/components/DateInput/__stories__/Uncontrolled.stories.tsx b/packages/ui/src/components/DateInput/__stories__/Uncontrolled.stories.tsx
deleted file mode 100644
index ded4024c47..0000000000
--- a/packages/ui/src/components/DateInput/__stories__/Uncontrolled.stories.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { StoryFn } from '@storybook/react'
-import type { ComponentProps } from 'react'
-import { DateInput } from '..'
-import { Template } from './Template'
-
-export const Uncontrolled: StoryFn<
-  ComponentProps<typeof DateInput>
-> = props => <DateInput {...props} label="Date" />
-
-Uncontrolled.args = Template.args
-
-Uncontrolled.parameters = {
-  docs: {
-    description: {
-      story:
-        'DateInput can be used as an [uncontrolled component](https://reactjs.org/docs/uncontrolled-components.html).',
-    },
-  },
-}
diff --git a/packages/ui/src/components/DateInput/__stories__/index.stories.tsx b/packages/ui/src/components/DateInput/__stories__/index.stories.tsx
index 855c9cad77..b614423621 100644
--- a/packages/ui/src/components/DateInput/__stories__/index.stories.tsx
+++ b/packages/ui/src/components/DateInput/__stories__/index.stories.tsx
@@ -3,26 +3,17 @@ import { DateInput } from '..'
 
 export default {
   component: DateInput,
-  decorators: [
-    Stories => (
-      <div style={{ height: 360 }}>
-        <Stories />
-      </div>
-    ),
-  ],
   title: 'Components/Data Entry/DateInput',
 } as Meta
-
 export { Playground } from './Playground.stories'
 export { Size } from './Size.stories'
-export { Exclude } from './Exclude.stories'
-export { Range } from './Range.stories'
-export { Uncontrolled } from './Uncontrolled.stories'
-export { Controlled } from './Controlled.stories'
 export { Error } from './Error.stories'
 export { Disabled } from './Disabled.stories'
 export { Required } from './Required.stories'
 export { Months } from './Months.stories'
+export { Exclude } from './Exclude.stories'
+export { MinMax } from './MinMax.stories'
 export { Localized } from './Localized.stories'
+export { Controlled } from './Controlled.stories'
+export { Range } from './Range.stories'
 export { I18n } from './I18n.stories'
-export { MinMax } from './MinMax.stories'
diff --git a/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap
index 1c8d2ad47e..1ff5b09982 100644
--- a/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,210 +2,37 @@
 
 exports[`DateInput > render correctly with a array of dates to exclude 1`] = `
 <DocumentFragment>
-  .emotion-0 {
+  @keyframes animation-0 {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0px, 4px, 0);
+    -moz-transform: translate3d(0px, 4px, 0);
+    -ms-transform: translate3d(0px, 4px, 0);
+    transform: translate3d(0px, 4px, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translate3d(0px, 4px, 0);
+    -moz-transform: translate3d(0px, 4px, 0);
+    -ms-transform: translate3d(0px, 4px, 0);
+    transform: translate3d(0px, 4px, 0);
+  }
+}
+
+.emotion-0 {
   width: 100%;
 }
 
-.emotion-0 div.react-datepicker-wrapper {
-  display: block;
-}
-
-.emotion-0 div.react-datepicker__input-container {
-  display: block;
-}
-
-.emotion-0 div.react-datepicker__triangle {
-  display: none;
-}
-
-.emotion-0 div.react-datepicker__month-container {
-  padding: 1rem;
-  width: 20rem;
-}
-
-.emotion-0 .react-datepicker-popper {
-  z-index: 1000;
-}
-
-.emotion-0 .calendar {
-  font-family: Inter,Asap,sans-serif;
-  border-color: #e9eaeb;
-  background-color: #ffffff;
-  box-shadow:0: 0px 4px 8px 0px #22263829;
-  1: 0px 8px 24px 0px #2226383d;
-}
-
-.emotion-0 .calendar .react-datepicker__header {
-  color: #3f4250;
-  background-color: #ffffff;
-  border-bottom: none;
-  text-align: inherit;
-  display: block;
-  padding-top: 0;
-  position: inherit;
-}
-
-.emotion-0 .calendar .react-datepicker__triangle {
-  border-bottom-color: #f9f9fa;
-}
-
-.emotion-0 .calendar .react-datepicker__month {
-  margin: 0;
-}
-
-.emotion-0 .calendar .react-datepicker__day-names {
-  margin-top: 0.5rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-0 .calendar .react-datepicker__day-name {
-  font-family: Inter,Asap,sans-serif;
-  color: #3f4250;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  text-align: center;
-  margin: 0.25rem;
-  text-transform: capitalize;
-}
-
-.emotion-0 .calendar .react-datepicker__day,
-.emotion-0 .calendar .react-datepicker__month {
-  color: #727683;
-  font-weight: 500;
-  font-size: 1rem;
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
-.emotion-0 .calendar .react-datepicker__day {
-  width: 2rem;
-  height: 2rem;
-}
-
-.emotion-0 .calendar .react-datepicker__month-text {
-  height: 2rem;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-0 .calendar .react-datepicker__day--outside-month {
-  color: #b5b7bd;
-  font-weight: 500;
-  font-size: 1rem;
-}
-
-.emotion-0 .calendar .react-datepicker__day--selected,
-.emotion-0 .calendar .react-datepicker__month-text--selected {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--selected:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--selected:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range {
-  color: #641cb3;
-  background-color: #f1eefc;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-range {
-  color: #641cb3;
-  background-color: #f1eefc;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-start,
-.emotion-0 .calendar .react-datepicker__month-text--range-start {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-start:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-start:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-end,
-.emotion-0 .calendar .react-datepicker__month-text--range-end {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-end:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-end:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--keyboard-selected,
-.emotion-0 .calendar .react-datepicker__month-text--keyboard-selected {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day:hover,
-.emotion-0 .calendar .react-datepicker__month-text:hover {
-  color: #222638;
-  background-color: #e9eaeb;
-}
-
-.emotion-0 .calendar .react-datepicker__day--disabled,
-.emotion-0 .calendar .react-datepicker__month-text--disabled {
-  color: #b5b7bd;
+.emotion-2 {
+  display: inherit;
 }
 
-.emotion-0 .calendar .react-datepicker__day--disabled:hover,
-.emotion-0 .calendar .react-datepicker__month-text--disabled:hover {
-  color: #b5b7bd;
-  background-color: transparent;
+.emotion-2[data-container-full-width="true"] {
+  width: 100%;
 }
 
-.emotion-2 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -228,7 +55,7 @@ exports[`DateInput > render correctly with a array of dates to exclude 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -251,7 +78,7 @@ exports[`DateInput > render correctly with a array of dates to exclude 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
+.emotion-8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -274,7 +101,7 @@ exports[`DateInput > render correctly with a array of dates to exclude 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-8 {
+.emotion-10 {
   color: #222638;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -286,7 +113,7 @@ exports[`DateInput > render correctly with a array of dates to exclude 1`] = `
   text-decoration: none;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -298,71 +125,73 @@ exports[`DateInput > render correctly with a array of dates to exclude 1`] = `
   background: #ffffff;
   border: 1px solid #d9dadd;
   border-radius: 0.25rem;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+  border: 1px solid #8c40ef;
 }
 
-.emotion-10>.emotion-13 {
+.emotion-12>.emotion-15 {
   color: #3f4250;
 }
 
-.emotion-10>.emotion-13::-webkit-input-placeholder {
+.emotion-12>.emotion-15::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13::-moz-placeholder {
+.emotion-12>.emotion-15::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13:-ms-input-placeholder {
+.emotion-12>.emotion-15:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13::placeholder {
+.emotion-12>.emotion-15::placeholder {
   color: #727683;
 }
 
-.emotion-10[data-success='true'] {
+.emotion-12[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-10[data-error='true'] {
+.emotion-12[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-10[data-readonly='true'] {
+.emotion-12[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-10[data-disabled='true'] {
+.emotion-12[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13 {
+.emotion-12[data-disabled='true']>.emotion-15 {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::-webkit-input-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::-moz-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13:-ms-input-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-12 {
+.emotion-14 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -375,15 +204,15 @@ exports[`DateInput > render correctly with a array of dates to exclude 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-12[data-size='large'] {
+.emotion-14[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-12[data-size='small'] {
+.emotion-14[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-14 {
+.emotion-16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -409,306 +238,208 @@ exports[`DateInput > render correctly with a array of dates to exclude 1`] = `
   border-color: inherit;
 }
 
-.emotion-16 {
+.emotion-18 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 1em;
-  width: 1em;
-  min-width: 1em;
-  min-height: 1em;
+  height: 20px;
+  width: 20px;
+  min-width: 20px;
+  min-height: 20px;
 }
 
-.emotion-16 .fillStroke {
+.emotion-18 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-<div
-    data-testid="testing"
-  >
-    <div
-      class="emotion-0 emotion-1"
-    >
-      <div
-        class="react-datepicker-wrapper"
-      >
-        <div
-          class="react-datepicker__input-container"
-        >
-          <div
-            class=" emotion-2 emotion-3"
-          >
-            <div
-              class="emotion-4 emotion-3"
-            >
-              <div
-                class="emotion-6 emotion-3"
-              >
-                <label
-                  class="emotion-8 emotion-9"
-                  for=":r2a:"
-                >
-                  Date
-                </label>
-              </div>
-            </div>
-            <div>
-              <div
-                class="emotion-10 emotion-11"
-                data-disabled="false"
-                data-error="false"
-                data-readonly="false"
-                data-success="false"
-              >
-                <input
-                  aria-invalid="false"
-                  class="emotion-12 emotion-13"
-                  data-size="large"
-                  id=":r2a:"
-                  type="text"
-                  value="12/11/1995"
-                />
-                <div
-                  class="emotion-14 emotion-15"
-                >
-                  <svg
-                    class="emotion-16 emotion-17"
-                    viewBox="0 0 20 20"
-                  >
-                    <path
-                      d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                    />
-                    <path
-                      clip-rule="evenodd"
-                      d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DateInput > render correctly with a range of date 1`] = `
-<DocumentFragment>
-  .emotion-0 {
+.emotion-21 {
+  background: #151a2d;
+  color: #ffffff;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  text-align: center;
+  position: absolute;
+  max-width: 264px;
+  overflow-wrap: break-word;
+  font-size: 0.8rem;
+  inset: 0 auto auto 0;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  z-index: 1;
+  -webkit-transform: translate3d(0px, 4px, 0);
+  -moz-transform: translate3d(0px, 4px, 0);
+  -ms-transform: translate3d(0px, 4px, 0);
+  transform: translate3d(0px, 4px, 0);
   width: 100%;
-}
-
-.emotion-0 div.react-datepicker-wrapper {
-  display: block;
-}
-
-.emotion-0 div.react-datepicker__input-container {
-  display: block;
-}
-
-.emotion-0 div.react-datepicker__triangle {
-  display: none;
-}
-
-.emotion-0 div.react-datepicker__month-container {
+  background-color: #ffffff;
+  color: #3f4250;
+  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
   padding: 1rem;
-  width: 20rem;
-}
-
-.emotion-0 .react-datepicker-popper {
-  z-index: 1000;
+  border-radius: 0.25rem;
 }
 
-.emotion-0 .calendar {
-  font-family: Inter,Asap,sans-serif;
-  border-color: #e9eaeb;
-  background-color: #ffffff;
-  box-shadow:0: 0px 4px 8px 0px #22263829;
-  1: 0px 8px 24px 0px #2226383d;
+.emotion-21[data-animated="true"] {
+  -webkit-animation: 0ms animation-0 forwards;
+  animation: 0ms animation-0 forwards;
 }
 
-.emotion-0 .calendar .react-datepicker__header {
-  color: #3f4250;
-  background-color: #ffffff;
-  border-bottom: none;
-  text-align: inherit;
-  display: block;
-  padding-top: 0;
-  position: inherit;
+.emotion-21[data-has-arrow="true"]::after {
+  content: " ";
+  position: absolute;
+  top: -5px;
+  left: 0px;
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+  margin-left: -8px;
+  border-width: 8px;
+  border-style: solid;
+  border-color: #151a2d transparent transparent transparent;
+  pointer-events: none;
 }
 
-.emotion-0 .calendar .react-datepicker__triangle {
-  border-bottom-color: #f9f9fa;
+.emotion-21[data-visible-in-dom="false"] {
+  display: none;
 }
 
-.emotion-0 .calendar .react-datepicker__month {
-  margin: 0;
+.emotion-23 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 1rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
 }
 
-.emotion-0 .calendar .react-datepicker__day-names {
-  margin-top: 0.5rem;
+.emotion-25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-27 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: 1.5rem;
+  padding: 0 0.25rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0.25rem;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  width: 1.5rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-}
-
-.emotion-0 .calendar .react-datepicker__day-name {
+  outline-offset: 2px;
+  white-space: nowrap;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
-  color: #3f4250;
   font-weight: 500;
-  font-size: 0.875rem;
+  letter-spacing: 0;
   line-height: 1.25rem;
-  text-align: center;
-  margin: 0.25rem;
-  text-transform: capitalize;
-}
-
-.emotion-0 .calendar .react-datepicker__day,
-.emotion-0 .calendar .react-datepicker__month {
-  color: #727683;
-  font-weight: 500;
-  font-size: 1rem;
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
-.emotion-0 .calendar .react-datepicker__day {
-  width: 2rem;
-  height: 2rem;
-}
-
-.emotion-0 .calendar .react-datepicker__month-text {
-  height: 2rem;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-0 .calendar .react-datepicker__day--outside-month {
-  color: #b5b7bd;
-  font-weight: 500;
-  font-size: 1rem;
-}
-
-.emotion-0 .calendar .react-datepicker__day--selected,
-.emotion-0 .calendar .react-datepicker__month-text--selected {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--selected:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--selected:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range {
-  color: #641cb3;
-  background-color: #f1eefc;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-range {
-  color: #641cb3;
-  background-color: #f1eefc;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-start,
-.emotion-0 .calendar .react-datepicker__month-text--range-start {
-  color: #ffffff;
-  background-color: #8c40ef;
+  paragraph-spacing: 0;
+  text-case: none;
+  background: none;
+  border: none;
+  color: #3f4250;
 }
 
-.emotion-0 .calendar .react-datepicker__day--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-start:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-start:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
+.emotion-27:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
-.emotion-0 .calendar .react-datepicker__day--range-end,
-.emotion-0 .calendar .react-datepicker__month-text--range-end {
-  color: #ffffff;
-  background-color: #8c40ef;
+.emotion-27:active {
+  box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-0 .calendar .react-datepicker__day--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-end:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-end:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
+.emotion-27:hover,
+.emotion-27:active {
+  background: #e9eaeb;
+  color: #222638;
 }
 
-.emotion-0 .calendar .react-datepicker__day--keyboard-selected,
-.emotion-0 .calendar .react-datepicker__month-text--keyboard-selected {
-  color: #ffffff;
-  background-color: #8c40ef;
+.emotion-29 {
+  vertical-align: middle;
+  fill: currentColor;
+  height: 16px;
+  width: 16px;
+  min-width: 16px;
+  min-height: 16px;
 }
 
-.emotion-0 .calendar .react-datepicker__day:hover,
-.emotion-0 .calendar .react-datepicker__month-text:hover {
-  color: #222638;
-  background-color: #e9eaeb;
+.emotion-29 .fillStroke {
+  stroke: currentColor;
+  fill: none;
 }
 
-.emotion-0 .calendar .react-datepicker__day--disabled,
-.emotion-0 .calendar .react-datepicker__month-text--disabled {
-  color: #b5b7bd;
+.emotion-32 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: inline-block;
+  text-transform: lowercase;
 }
 
-.emotion-0 .calendar .react-datepicker__day--disabled:hover,
-.emotion-0 .calendar .react-datepicker__month-text--disabled:hover {
-  color: #b5b7bd;
-  background-color: transparent;
+.emotion-32::first-letter {
+  text-transform: uppercase;
 }
 
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0.25rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
+.emotion-38 {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.5rem;
   -webkit-align-items: normal;
   -webkit-box-align: normal;
   -ms-flex-align: normal;
@@ -717,60 +448,67 @@ exports[`DateInput > render correctly with a range of date 1`] = `
   -ms-flex-pack: normal;
   -webkit-justify-content: normal;
   justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
 }
 
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0.5rem;
+.emotion-62 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: 3rem;
+  padding: 0 1rem;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  width: auto;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
+  cursor: pointer;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  outline-offset: 2px;
+  white-space: nowrap;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  paragraph-spacing: 0;
+  text-case: none;
+  background: none;
+  border: none;
+  color: #3f4250;
+  height: 1.5625rem;
+  width: 100%;
+  padding: 0;
 }
 
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0.25rem;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: start;
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: start;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
+.emotion-62:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
-.emotion-8 {
+.emotion-62:active {
+  box-shadow: 0px 0px 0px 3px #151a2d5c;
+}
+
+.emotion-62:hover,
+.emotion-62:active {
+  background: #e9eaeb;
   color: #222638;
+}
+
+.emotion-64 {
+  color: #b5b7bd;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -781,141 +519,133 @@ exports[`DateInput > render correctly with a range of date 1`] = `
   text-decoration: none;
 }
 
-.emotion-10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
+.emotion-84 {
+  color: #727683;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-132 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: 3rem;
+  padding: 0 1rem;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  height: 3rem;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
+  gap: 0.5rem;
   border-radius: 0.25rem;
+  box-sizing: border-box;
+  width: auto;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  outline-offset: 2px;
+  white-space: nowrap;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  paragraph-spacing: 0;
+  text-case: none;
+  background: #8c40ef;
+  border: none;
+  color: #ffffff;
+  height: 1.5625rem;
+  width: 100%;
+  padding: 0;
 }
 
-.emotion-10>.emotion-13 {
-  color: #3f4250;
-}
-
-.emotion-10>.emotion-13::-webkit-input-placeholder {
-  color: #727683;
-}
-
-.emotion-10>.emotion-13::-moz-placeholder {
-  color: #727683;
-}
-
-.emotion-10>.emotion-13:-ms-input-placeholder {
-  color: #727683;
-}
-
-.emotion-10>.emotion-13::placeholder {
-  color: #727683;
+.emotion-132:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
-.emotion-10[data-success='true'] {
-  border-color: #22674e;
+.emotion-132:active {
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-10[data-error='true'] {
-  border-color: #b3144d;
+.emotion-132:hover,
+.emotion-132:active {
+  background: #792dd4;
+  color: #f9f9fa;
 }
 
-.emotion-10[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
+.emotion-134 {
+  color: #ffffff;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
-.emotion-10[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-}
-
-.emotion-10[data-disabled='true']>.emotion-13 {
-  color: #b5b7bd;
-}
-
-.emotion-10[data-disabled='true']>.emotion-13::-webkit-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-10[data-disabled='true']>.emotion-13::-moz-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-10[data-disabled='true']>.emotion-13:-ms-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-10[data-disabled='true']>.emotion-13::placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-10:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
-}
-
-.emotion-12 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  border: none;
-  outline: none;
-  height: 100%;
-  width: 100%;
-  padding-left: 1rem;
-  background: transparent;
-  font-size: 0.875rem;
-}
-
-.emotion-12[data-size='large'] {
-  font-size: 1rem;
-}
-
-.emotion-12[data-size='small'] {
-  padding-left: 0.5rem;
-}
-
-.emotion-14 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
+.emotion-137 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: 3rem;
+  padding: 0 1rem;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  width: auto;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  padding: 0 1rem;
-  border-left: 1px solid;
-  border-color: inherit;
-}
-
-.emotion-16 {
-  vertical-align: middle;
-  fill: #3f4250;
-  height: 1em;
-  width: 1em;
-  min-width: 1em;
-  min-height: 1em;
+  cursor: not-allowed;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  outline-offset: 2px;
+  white-space: nowrap;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  paragraph-spacing: 0;
+  text-case: none;
+  background: none;
+  border: none;
+  color: #3f4250;
+  color: #b5b7bd;
+  height: 1.5625rem;
+  width: 100%;
+  padding: 0;
 }
 
-.emotion-16 .fillStroke {
-  stroke: #3f4250;
-  fill: none;
+.emotion-137:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
 <div
@@ -925,300 +655,723 @@ exports[`DateInput > render correctly with a range of date 1`] = `
       class="emotion-0 emotion-1"
     >
       <div
-        class="react-datepicker-wrapper"
+        aria-controls=":rbc:"
+        aria-describedby=":rbc:"
+        class="emotion-2 emotion-3"
+        tabindex="0"
       >
         <div
-          class="react-datepicker__input-container"
+          class="emotion-4 emotion-5"
         >
           <div
-            class=" emotion-2 emotion-3"
+            class="emotion-6 emotion-5"
           >
             <div
-              class="emotion-4 emotion-3"
+              class="emotion-8 emotion-5"
             >
-              <div
-                class="emotion-6 emotion-3"
+              <label
+                class="emotion-10 emotion-11"
+                for=":rbd:"
               >
-                <label
-                  class="emotion-8 emotion-9"
-                  for=":r25:"
-                >
-                  Date
-                </label>
-              </div>
+                Date
+              </label>
             </div>
-            <div>
+          </div>
+          <div>
+            <div
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-error="false"
+              data-readonly="false"
+              data-success="false"
+            >
+              <input
+                aria-invalid="false"
+                autocomplete="false"
+                class="emotion-14 emotion-15"
+                data-size="large"
+                id=":rbd:"
+                placeholder="YYYY-MM-DD"
+                type="text"
+                value="1995/12/11"
+              />
               <div
-                class="emotion-10 emotion-11"
-                data-disabled="false"
-                data-error="false"
-                data-readonly="false"
-                data-success="false"
-              >
-                <input
-                  aria-invalid="false"
-                  class="emotion-12 emotion-13"
-                  data-size="large"
-                  id=":r25:"
-                  type="text"
-                  value="12/11/1995 - 12/25/1995"
-                />
-                <div
-                  class="emotion-14 emotion-15"
+                class="emotion-16 emotion-17"
+              >
+                <svg
+                  class="emotion-18 emotion-19"
+                  viewBox="0 0 20 20"
                 >
-                  <svg
-                    class="emotion-16 emotion-17"
-                    viewBox="0 0 20 20"
-                  >
-                    <path
-                      d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                    />
-                    <path
-                      clip-rule="evenodd"
-                      d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
+                  <path
+                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DateInput > render correctly with showMonthYearPicker 1`] = `
-<DocumentFragment>
-  .emotion-0 {
-  width: 100%;
-}
-
-.emotion-0 div.react-datepicker-wrapper {
-  display: block;
-}
-
-.emotion-0 div.react-datepicker__input-container {
-  display: block;
-}
-
-.emotion-0 div.react-datepicker__triangle {
-  display: none;
-}
-
-.emotion-0 div.react-datepicker__month-container {
-  padding: 1rem;
-  width: 20rem;
-}
-
-.emotion-0 .react-datepicker-popper {
-  z-index: 1000;
-}
-
-.emotion-0 .calendar {
-  font-family: Inter,Asap,sans-serif;
-  border-color: #e9eaeb;
-  background-color: #ffffff;
-  box-shadow:0: 0px 4px 8px 0px #22263829;
-  1: 0px 8px 24px 0px #2226383d;
-}
-
-.emotion-0 .calendar .react-datepicker__header {
-  color: #3f4250;
-  background-color: #ffffff;
-  border-bottom: none;
-  text-align: inherit;
-  display: block;
-  padding-top: 0;
-  position: inherit;
-}
-
-.emotion-0 .calendar .react-datepicker__triangle {
-  border-bottom-color: #f9f9fa;
-}
-
-.emotion-0 .calendar .react-datepicker__month {
-  margin: 0;
-}
-
-.emotion-0 .calendar .react-datepicker__day-names {
-  margin-top: 0.5rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-0 .calendar .react-datepicker__day-name {
-  font-family: Inter,Asap,sans-serif;
-  color: #3f4250;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  text-align: center;
-  margin: 0.25rem;
-  text-transform: capitalize;
-}
-
-.emotion-0 .calendar .react-datepicker__day,
-.emotion-0 .calendar .react-datepicker__month {
-  color: #727683;
-  font-weight: 500;
-  font-size: 1rem;
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
-.emotion-0 .calendar .react-datepicker__day {
-  width: 2rem;
-  height: 2rem;
-}
-
-.emotion-0 .calendar .react-datepicker__month-text {
-  height: 2rem;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-0 .calendar .react-datepicker__day--outside-month {
-  color: #b5b7bd;
-  font-weight: 500;
-  font-size: 1rem;
-}
-
-.emotion-0 .calendar .react-datepicker__day--selected,
-.emotion-0 .calendar .react-datepicker__month-text--selected {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--selected:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--selected:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range {
-  color: #641cb3;
-  background-color: #f1eefc;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-range {
-  color: #641cb3;
-  background-color: #f1eefc;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-start,
-.emotion-0 .calendar .react-datepicker__month-text--range-start {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-start:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-start:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-end,
-.emotion-0 .calendar .react-datepicker__month-text--range-end {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-end:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-end:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--keyboard-selected,
-.emotion-0 .calendar .react-datepicker__month-text--keyboard-selected {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day:hover,
-.emotion-0 .calendar .react-datepicker__month-text:hover {
-  color: #222638;
-  background-color: #e9eaeb;
-}
-
-.emotion-0 .calendar .react-datepicker__day--disabled,
-.emotion-0 .calendar .react-datepicker__month-text--disabled {
-  color: #b5b7bd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--disabled:hover,
-.emotion-0 .calendar .react-datepicker__month-text--disabled:hover {
-  color: #b5b7bd;
-  background-color: transparent;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0.25rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
+        <div
+          class="emotion-20 emotion-21 emotion-22"
+          data-animated="false"
+          data-has-arrow="false"
+          id=":rbc:"
+          role="dialog"
+          style="opacity: 1;"
+        >
+          <div
+            class="emotion-23 emotion-5"
+          >
+            <div
+              class="emotion-25 emotion-5"
+            >
+              <button
+                class="emotion-27 emotion-28"
+                data-testid="previous-month"
+                type="button"
+              >
+                <svg
+                  class="emotion-29 emotion-30"
+                  viewBox="0 0 16 16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M10.53 4.22a.75.75 0 0 1 0 1.06L7.81 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </button>
+              <span
+                class="emotion-31 emotion-32 emotion-11"
+              >
+                December 1995
+              </span>
+              <button
+                class="emotion-27 emotion-28"
+                data-testid="next-month"
+                type="button"
+              >
+                <svg
+                  class="emotion-29 emotion-30"
+                  viewBox="0 0 16 16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </button>
+            </div>
+            <div
+              class="emotion-38 emotion-39"
+            >
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                Mo
+              </p>
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                Tu
+              </p>
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                We
+              </p>
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                Th
+              </p>
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                Fr
+              </p>
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                Sa
+              </p>
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                Su
+              </p>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayLastMonth"
+                  >
+                    27
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayLastMonth"
+                  >
+                    28
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayLastMonth"
+                  >
+                    29
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayLastMonth"
+                  >
+                    30
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    1
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    2
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    3
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    4
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    5
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    6
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    7
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    8
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    9
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    10
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-132 emotion-133"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-134 emotion-11"
+                  >
+                    11
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-137 emotion-28"
+                disabled=""
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                  >
+                    12
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-137 emotion-28"
+                disabled=""
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                  >
+                    13
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-137 emotion-28"
+                disabled=""
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                  >
+                    14
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    15
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    16
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    17
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    18
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    19
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    20
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    21
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    22
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    23
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    24
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    25
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    26
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    27
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    28
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    29
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    30
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    31
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    1
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    2
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    3
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    4
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    5
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    6
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    7
+                  </span>
+                </div>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > render correctly with a range of date 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  width: 100%;
+}
+
+.emotion-2 {
+  display: inherit;
+}
+
+.emotion-2[data-container-full-width="true"] {
+  width: 100%;
+}
+
 .emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1241,7 +1394,7 @@ exports[`DateInput > render correctly with showMonthYearPicker 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
+.emotion-8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1264,7 +1417,7 @@ exports[`DateInput > render correctly with showMonthYearPicker 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-8 {
+.emotion-10 {
   color: #222638;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -1276,7 +1429,7 @@ exports[`DateInput > render correctly with showMonthYearPicker 1`] = `
   text-decoration: none;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1290,69 +1443,69 @@ exports[`DateInput > render correctly with showMonthYearPicker 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-10>.emotion-13 {
+.emotion-12>.emotion-15 {
   color: #3f4250;
 }
 
-.emotion-10>.emotion-13::-webkit-input-placeholder {
+.emotion-12>.emotion-15::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13::-moz-placeholder {
+.emotion-12>.emotion-15::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13:-ms-input-placeholder {
+.emotion-12>.emotion-15:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13::placeholder {
+.emotion-12>.emotion-15::placeholder {
   color: #727683;
 }
 
-.emotion-10[data-success='true'] {
+.emotion-12[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-10[data-error='true'] {
+.emotion-12[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-10[data-readonly='true'] {
+.emotion-12[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-10[data-disabled='true'] {
+.emotion-12[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13 {
+.emotion-12[data-disabled='true']>.emotion-15 {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::-webkit-input-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::-moz-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13:-ms-input-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-12 {
+.emotion-14 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -1365,15 +1518,15 @@ exports[`DateInput > render correctly with showMonthYearPicker 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-12[data-size='large'] {
+.emotion-14[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-12[data-size='small'] {
+.emotion-14[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-14 {
+.emotion-16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1399,16 +1552,16 @@ exports[`DateInput > render correctly with showMonthYearPicker 1`] = `
   border-color: inherit;
 }
 
-.emotion-16 {
+.emotion-18 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 1em;
-  width: 1em;
-  min-width: 1em;
-  min-height: 1em;
+  height: 20px;
+  width: 20px;
+  min-width: 20px;
+  min-height: 20px;
 }
 
-.emotion-16 .fillStroke {
+.emotion-18 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
@@ -1420,61 +1573,61 @@ exports[`DateInput > render correctly with showMonthYearPicker 1`] = `
       class="emotion-0 emotion-1"
     >
       <div
-        class="react-datepicker-wrapper"
+        aria-controls=":rb8:"
+        aria-describedby=":rb8:"
+        class="emotion-2 emotion-3"
+        tabindex="0"
       >
         <div
-          class="react-datepicker__input-container"
+          class="emotion-4 emotion-5"
         >
           <div
-            class=" emotion-2 emotion-3"
+            class="emotion-6 emotion-5"
           >
             <div
-              class="emotion-4 emotion-3"
+              class="emotion-8 emotion-5"
             >
-              <div
-                class="emotion-6 emotion-3"
+              <label
+                class="emotion-10 emotion-11"
+                for=":rb9:"
               >
-                <label
-                  class="emotion-8 emotion-9"
-                  for=":r20:"
-                >
-                  Date
-                </label>
-              </div>
+                Date
+              </label>
             </div>
-            <div>
+          </div>
+          <div>
+            <div
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-error="false"
+              data-readonly="false"
+              data-success="false"
+            >
+              <input
+                aria-invalid="false"
+                autocomplete="false"
+                class="emotion-14 emotion-15"
+                data-size="large"
+                id=":rb9:"
+                type="text"
+                value="1995/12/11 – 1995/12/25"
+              />
               <div
-                class="emotion-10 emotion-11"
-                data-disabled="false"
-                data-error="false"
-                data-readonly="false"
-                data-success="false"
-              >
-                <input
-                  aria-invalid="false"
-                  class="emotion-12 emotion-13"
-                  data-size="large"
-                  id=":r20:"
-                  type="text"
-                  value=""
-                />
-                <div
-                  class="emotion-14 emotion-15"
+                class="emotion-16 emotion-17"
+              >
+                <svg
+                  class="emotion-18 emotion-19"
+                  viewBox="0 0 20 20"
                 >
-                  <svg
-                    class="emotion-16 emotion-17"
-                    viewBox="0 0 20 20"
-                  >
-                    <path
-                      d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                    />
-                    <path
-                      clip-rule="evenodd"
-                      d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
+                  <path
+                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
               </div>
             </div>
           </div>
@@ -1485,212 +1638,21 @@ exports[`DateInput > render correctly with showMonthYearPicker 1`] = `
 </DocumentFragment>
 `;
 
-exports[`DateInput > renders correctly disabled 1`] = `
+exports[`DateInput > render correctly with showMonthYearPicker 1`] = `
 <DocumentFragment>
   .emotion-0 {
   width: 100%;
 }
 
-.emotion-0 div.react-datepicker-wrapper {
-  display: block;
+.emotion-2 {
+  display: inherit;
 }
 
-.emotion-0 div.react-datepicker__input-container {
-  display: block;
+.emotion-2[data-container-full-width="true"] {
+  width: 100%;
 }
 
-.emotion-0 div.react-datepicker__triangle {
-  display: none;
-}
-
-.emotion-0 div.react-datepicker__month-container {
-  padding: 1rem;
-  width: 20rem;
-}
-
-.emotion-0 .react-datepicker-popper {
-  z-index: 1000;
-}
-
-.emotion-0 .calendar {
-  font-family: Inter,Asap,sans-serif;
-  border-color: #e9eaeb;
-  background-color: #ffffff;
-  box-shadow:0: 0px 4px 8px 0px #22263829;
-  1: 0px 8px 24px 0px #2226383d;
-}
-
-.emotion-0 .calendar .react-datepicker__header {
-  color: #3f4250;
-  background-color: #ffffff;
-  border-bottom: none;
-  text-align: inherit;
-  display: block;
-  padding-top: 0;
-  position: inherit;
-}
-
-.emotion-0 .calendar .react-datepicker__triangle {
-  border-bottom-color: #f9f9fa;
-}
-
-.emotion-0 .calendar .react-datepicker__month {
-  margin: 0;
-}
-
-.emotion-0 .calendar .react-datepicker__day-names {
-  margin-top: 0.5rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-0 .calendar .react-datepicker__day-name {
-  font-family: Inter,Asap,sans-serif;
-  color: #3f4250;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  text-align: center;
-  margin: 0.25rem;
-  text-transform: capitalize;
-}
-
-.emotion-0 .calendar .react-datepicker__day,
-.emotion-0 .calendar .react-datepicker__month {
-  color: #727683;
-  font-weight: 500;
-  font-size: 1rem;
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
-.emotion-0 .calendar .react-datepicker__day {
-  width: 2rem;
-  height: 2rem;
-}
-
-.emotion-0 .calendar .react-datepicker__month-text {
-  height: 2rem;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-0 .calendar .react-datepicker__day--outside-month {
-  color: #b5b7bd;
-  font-weight: 500;
-  font-size: 1rem;
-}
-
-.emotion-0 .calendar .react-datepicker__day--selected,
-.emotion-0 .calendar .react-datepicker__month-text--selected {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--selected:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--selected:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range {
-  color: #641cb3;
-  background-color: #f1eefc;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-range {
-  color: #641cb3;
-  background-color: #f1eefc;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-start,
-.emotion-0 .calendar .react-datepicker__month-text--range-start {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-start:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-start:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-end,
-.emotion-0 .calendar .react-datepicker__month-text--range-end {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-end:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-end:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--keyboard-selected,
-.emotion-0 .calendar .react-datepicker__month-text--keyboard-selected {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day:hover,
-.emotion-0 .calendar .react-datepicker__month-text:hover {
-  color: #222638;
-  background-color: #e9eaeb;
-}
-
-.emotion-0 .calendar .react-datepicker__day--disabled,
-.emotion-0 .calendar .react-datepicker__month-text--disabled {
-  color: #b5b7bd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--disabled:hover,
-.emotion-0 .calendar .react-datepicker__month-text--disabled:hover {
-  color: #b5b7bd;
-  background-color: transparent;
-}
-
-.emotion-2 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1713,7 +1675,7 @@ exports[`DateInput > renders correctly disabled 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1736,7 +1698,7 @@ exports[`DateInput > renders correctly disabled 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
+.emotion-8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1759,7 +1721,7 @@ exports[`DateInput > renders correctly disabled 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-8 {
+.emotion-10 {
   color: #222638;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -1771,7 +1733,7 @@ exports[`DateInput > renders correctly disabled 1`] = `
   text-decoration: none;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1785,69 +1747,69 @@ exports[`DateInput > renders correctly disabled 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-10>.emotion-13 {
+.emotion-12>.emotion-15 {
   color: #3f4250;
 }
 
-.emotion-10>.emotion-13::-webkit-input-placeholder {
+.emotion-12>.emotion-15::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13::-moz-placeholder {
+.emotion-12>.emotion-15::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13:-ms-input-placeholder {
+.emotion-12>.emotion-15:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13::placeholder {
+.emotion-12>.emotion-15::placeholder {
   color: #727683;
 }
 
-.emotion-10[data-success='true'] {
+.emotion-12[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-10[data-error='true'] {
+.emotion-12[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-10[data-readonly='true'] {
+.emotion-12[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-10[data-disabled='true'] {
+.emotion-12[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13 {
+.emotion-12[data-disabled='true']>.emotion-15 {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::-webkit-input-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::-moz-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13:-ms-input-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-12 {
+.emotion-14 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -1860,15 +1822,15 @@ exports[`DateInput > renders correctly disabled 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-12[data-size='large'] {
+.emotion-14[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-12[data-size='small'] {
+.emotion-14[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-14 {
+.emotion-16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1894,17 +1856,17 @@ exports[`DateInput > renders correctly disabled 1`] = `
   border-color: inherit;
 }
 
-.emotion-16 {
+.emotion-18 {
   vertical-align: middle;
-  fill: #b5b7bd;
-  height: 1em;
-  width: 1em;
-  min-width: 1em;
-  min-height: 1em;
+  fill: #3f4250;
+  height: 20px;
+  width: 20px;
+  min-width: 20px;
+  min-height: 20px;
 }
 
-.emotion-16 .fillStroke {
-  stroke: #b5b7bd;
+.emotion-18 .fillStroke {
+  stroke: #3f4250;
   fill: none;
 }
 
@@ -1915,62 +1877,61 @@ exports[`DateInput > renders correctly disabled 1`] = `
       class="emotion-0 emotion-1"
     >
       <div
-        class="react-datepicker-wrapper"
+        aria-controls=":ra5:"
+        aria-describedby=":ra5:"
+        class="emotion-2 emotion-3"
+        tabindex="0"
       >
         <div
-          class="react-datepicker__input-container"
+          class="emotion-4 emotion-5"
         >
           <div
-            class=" emotion-2 emotion-3"
+            class="emotion-6 emotion-5"
           >
             <div
-              class="emotion-4 emotion-3"
+              class="emotion-8 emotion-5"
             >
-              <div
-                class="emotion-6 emotion-3"
+              <label
+                class="emotion-10 emotion-11"
+                for=":ra6:"
               >
-                <label
-                  class="emotion-8 emotion-9"
-                  for=":r7:"
-                >
-                  Date
-                </label>
-              </div>
+                Date
+              </label>
             </div>
-            <div>
+          </div>
+          <div>
+            <div
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-error="false"
+              data-readonly="false"
+              data-success="false"
+            >
+              <input
+                aria-invalid="false"
+                autocomplete="false"
+                class="emotion-14 emotion-15"
+                data-size="large"
+                id=":ra6:"
+                type="text"
+                value=""
+              />
               <div
-                class="emotion-10 emotion-11"
-                data-disabled="true"
-                data-error="false"
-                data-readonly="false"
-                data-success="false"
-              >
-                <input
-                  aria-invalid="false"
-                  class="emotion-12 emotion-13"
-                  data-size="large"
-                  disabled=""
-                  id=":r7:"
-                  type="text"
-                  value=""
-                />
-                <div
-                  class="emotion-14 emotion-15"
+                class="emotion-16 emotion-17"
+              >
+                <svg
+                  class="emotion-18 emotion-19"
+                  viewBox="0 0 20 20"
                 >
-                  <svg
-                    class="emotion-16 emotion-17"
-                    viewBox="0 0 20 20"
-                  >
-                    <path
-                      d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                    />
-                    <path
-                      clip-rule="evenodd"
-                      d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
+                  <path
+                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
               </div>
             </div>
           </div>
@@ -1981,293 +1942,120 @@ exports[`DateInput > renders correctly disabled 1`] = `
 </DocumentFragment>
 `;
 
-exports[`DateInput > renders correctly error 1`] = `
+exports[`DateInput > render correctly with showMonthYearPicker with default date 1`] = `
 <DocumentFragment>
-  .emotion-0 {
+  @keyframes animation-0 {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0px, 4px, 0);
+    -moz-transform: translate3d(0px, 4px, 0);
+    -ms-transform: translate3d(0px, 4px, 0);
+    transform: translate3d(0px, 4px, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translate3d(0px, 4px, 0);
+    -moz-transform: translate3d(0px, 4px, 0);
+    -ms-transform: translate3d(0px, 4px, 0);
+    transform: translate3d(0px, 4px, 0);
+  }
+}
+
+.emotion-0 {
   width: 100%;
 }
 
-.emotion-0 div.react-datepicker-wrapper {
-  display: block;
-}
-
-.emotion-0 div.react-datepicker__input-container {
-  display: block;
-}
-
-.emotion-0 div.react-datepicker__triangle {
-  display: none;
-}
-
-.emotion-0 div.react-datepicker__month-container {
-  padding: 1rem;
-  width: 20rem;
-}
-
-.emotion-0 .react-datepicker-popper {
-  z-index: 1000;
-}
-
-.emotion-0 .calendar {
-  font-family: Inter,Asap,sans-serif;
-  border-color: #e9eaeb;
-  background-color: #ffffff;
-  box-shadow:0: 0px 4px 8px 0px #22263829;
-  1: 0px 8px 24px 0px #2226383d;
+.emotion-2 {
+  display: inherit;
 }
 
-.emotion-0 .calendar .react-datepicker__header {
-  color: #3f4250;
-  background-color: #ffffff;
-  border-bottom: none;
-  text-align: inherit;
-  display: block;
-  padding-top: 0;
-  position: inherit;
+.emotion-2[data-container-full-width="true"] {
+  width: 100%;
 }
 
-.emotion-0 .calendar .react-datepicker__triangle {
-  border-bottom-color: #f9f9fa;
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
 }
 
-.emotion-0 .calendar .react-datepicker__month {
-  margin: 0;
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
 }
 
-.emotion-0 .calendar .react-datepicker__day-names {
-  margin-top: 0.5rem;
+.emotion-8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
+  gap: 0.25rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
 }
 
-.emotion-0 .calendar .react-datepicker__day-name {
+.emotion-10 {
+  color: #222638;
+  font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
-  color: #3f4250;
   font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  text-align: center;
-  margin: 0.25rem;
-  text-transform: capitalize;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
-.emotion-0 .calendar .react-datepicker__day,
-.emotion-0 .calendar .react-datepicker__month {
-  color: #727683;
-  font-weight: 500;
-  font-size: 1rem;
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
-.emotion-0 .calendar .react-datepicker__day {
-  width: 2rem;
-  height: 2rem;
-}
-
-.emotion-0 .calendar .react-datepicker__month-text {
-  height: 2rem;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-0 .calendar .react-datepicker__day--outside-month {
-  color: #b5b7bd;
-  font-weight: 500;
-  font-size: 1rem;
-}
-
-.emotion-0 .calendar .react-datepicker__day--selected,
-.emotion-0 .calendar .react-datepicker__month-text--selected {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--selected:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--selected:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range {
-  color: #641cb3;
-  background-color: #f1eefc;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-range {
-  color: #641cb3;
-  background-color: #f1eefc;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-start,
-.emotion-0 .calendar .react-datepicker__month-text--range-start {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-start:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-start:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-end,
-.emotion-0 .calendar .react-datepicker__month-text--range-end {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-end:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-end:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--keyboard-selected,
-.emotion-0 .calendar .react-datepicker__month-text--keyboard-selected {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day:hover,
-.emotion-0 .calendar .react-datepicker__month-text:hover {
-  color: #222638;
-  background-color: #e9eaeb;
-}
-
-.emotion-0 .calendar .react-datepicker__day--disabled,
-.emotion-0 .calendar .react-datepicker__month-text--disabled {
-  color: #b5b7bd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--disabled:hover,
-.emotion-0 .calendar .react-datepicker__month-text--disabled:hover {
-  color: #b5b7bd;
-  background-color: transparent;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0.25rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0.5rem;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0.25rem;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: start;
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: start;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-8 {
-  color: #222638;
-  font-size: 1rem;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 1.5rem;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2279,71 +2067,73 @@ exports[`DateInput > renders correctly error 1`] = `
   background: #ffffff;
   border: 1px solid #d9dadd;
   border-radius: 0.25rem;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+  border: 1px solid #8c40ef;
 }
 
-.emotion-10>.emotion-13 {
+.emotion-12>.emotion-15 {
   color: #3f4250;
 }
 
-.emotion-10>.emotion-13::-webkit-input-placeholder {
+.emotion-12>.emotion-15::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13::-moz-placeholder {
+.emotion-12>.emotion-15::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13:-ms-input-placeholder {
+.emotion-12>.emotion-15:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13::placeholder {
+.emotion-12>.emotion-15::placeholder {
   color: #727683;
 }
 
-.emotion-10[data-success='true'] {
+.emotion-12[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-10[data-error='true'] {
+.emotion-12[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-10[data-readonly='true'] {
+.emotion-12[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-10[data-disabled='true'] {
+.emotion-12[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13 {
+.emotion-12[data-disabled='true']>.emotion-15 {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::-webkit-input-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::-moz-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13:-ms-input-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-12 {
+.emotion-14 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -2356,20 +2146,20 @@ exports[`DateInput > renders correctly error 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-12[data-size='large'] {
+.emotion-14[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-12[data-size='small'] {
+.emotion-14[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-14 {
+.emotion-16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  gap: 0.5rem;
+  gap: 0rem;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -2386,35 +2176,89 @@ exports[`DateInput > renders correctly error 1`] = `
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
   padding: 0 1rem;
+  border-left: 1px solid;
+  border-color: inherit;
 }
 
-.emotion-16 {
+.emotion-18 {
   vertical-align: middle;
-  fill: #b3144d;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  fill: #3f4250;
+  height: 20px;
+  width: 20px;
+  min-width: 20px;
+  min-height: 20px;
 }
 
-.emotion-16 .fillStroke {
-  stroke: #b3144d;
+.emotion-18 .fillStroke {
+  stroke: #3f4250;
   fill: none;
 }
 
-.emotion-18 {
+.emotion-21 {
+  background: #151a2d;
+  color: #ffffff;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  text-align: center;
+  position: absolute;
+  max-width: 264px;
+  overflow-wrap: break-word;
+  font-size: 0.8rem;
+  inset: 0 auto auto 0;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  z-index: 1;
+  -webkit-transform: translate3d(0px, 4px, 0);
+  -moz-transform: translate3d(0px, 4px, 0);
+  -ms-transform: translate3d(0px, 4px, 0);
+  transform: translate3d(0px, 4px, 0);
+  width: 100%;
+  background-color: #ffffff;
+  color: #3f4250;
+  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
+  padding: 1rem;
+  border-radius: 0.25rem;
+}
+
+.emotion-21[data-animated="true"] {
+  -webkit-animation: 0ms animation-0 forwards;
+  animation: 0ms animation-0 forwards;
+}
+
+.emotion-21[data-has-arrow="true"]::after {
+  content: " ";
+  position: absolute;
+  top: -5px;
+  left: 0px;
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+  margin-left: -8px;
+  border-width: 8px;
+  border-style: solid;
+  border-color: #151a2d transparent transparent transparent;
+  pointer-events: none;
+}
+
+.emotion-21[data-visible-in-dom="false"] {
+  display: none;
+}
+
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  gap: 1rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
   -webkit-box-pack: normal;
   -ms-flex-pack: normal;
   -webkit-justify-content: normal;
@@ -2423,347 +2267,604 @@ exports[`DateInput > renders correctly error 1`] = `
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
-  padding: 0 1rem;
-  border-left: 1px solid;
-  border-color: inherit;
-}
-
-.emotion-20 {
-  vertical-align: middle;
-  fill: #3f4250;
-  height: 1em;
-  width: 1em;
-  min-width: 1em;
-  min-height: 1em;
 }
 
-.emotion-20 .fillStroke {
-  stroke: #3f4250;
-  fill: none;
+.emotion-25 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
 }
 
-.emotion-22 {
-  color: #b3144d;
-  font-size: 0.75rem;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 400;
-  letter-spacing: 0;
-  line-height: 1rem;
-  text-transform: none;
+.emotion-27 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: 1.5rem;
+  padding: 0 0.25rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0.25rem;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  width: 1.5rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  outline-offset: 2px;
+  white-space: nowrap;
   -webkit-text-decoration: none;
   text-decoration: none;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  paragraph-spacing: 0;
+  text-case: none;
+  background: none;
+  border: none;
+  color: #3f4250;
 }
 
-<div
-    data-testid="testing"
-  >
-    <div
-      class="emotion-0 emotion-1"
-    >
-      <div
-        class="react-datepicker-wrapper"
-      >
-        <div
-          class="react-datepicker__input-container"
-        >
-          <div
-            class=" emotion-2 emotion-3"
-          >
-            <div
-              class="emotion-4 emotion-3"
-            >
-              <div
-                class="emotion-6 emotion-3"
-              >
-                <label
-                  class="emotion-8 emotion-9"
-                  for=":rh:"
-                >
-                  Date
-                </label>
-              </div>
-            </div>
-            <div>
-              <div
-                class="emotion-10 emotion-11"
-                data-disabled="false"
-                data-error="true"
-                data-readonly="false"
-                data-success="false"
-              >
-                <input
-                  aria-invalid="true"
-                  class="emotion-12 emotion-13"
-                  data-size="large"
-                  id=":rh:"
-                  type="text"
-                  value=""
-                />
-                <div
-                  class="emotion-14 emotion-15"
-                >
-                  <svg
-                    class="emotion-16 emotion-17"
-                    viewBox="0 0 20 20"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0m-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5m0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-                <div
-                  class="emotion-18 emotion-19"
-                >
-                  <svg
-                    class="emotion-20 emotion-17"
-                    viewBox="0 0 20 20"
-                  >
-                    <path
-                      d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                    />
-                    <path
-                      clip-rule="evenodd"
-                      d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-              </div>
-            </div>
-            <p
-              class="emotion-22 emotion-9"
-            >
-              error
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DateInput > renders correctly error disabled 1`] = `
-<DocumentFragment>
-  .emotion-0 {
-  width: 100%;
-}
-
-.emotion-0 div.react-datepicker-wrapper {
-  display: block;
-}
-
-.emotion-0 div.react-datepicker__input-container {
-  display: block;
+.emotion-27:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
-.emotion-0 div.react-datepicker__triangle {
-  display: none;
+.emotion-27:active {
+  box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-0 div.react-datepicker__month-container {
-  padding: 1rem;
-  width: 20rem;
+.emotion-27:hover,
+.emotion-27:active {
+  background: #e9eaeb;
+  color: #222638;
 }
 
-.emotion-0 .react-datepicker-popper {
-  z-index: 1000;
+.emotion-29 {
+  vertical-align: middle;
+  fill: currentColor;
+  height: 16px;
+  width: 16px;
+  min-width: 16px;
+  min-height: 16px;
 }
 
-.emotion-0 .calendar {
-  font-family: Inter,Asap,sans-serif;
-  border-color: #e9eaeb;
-  background-color: #ffffff;
-  box-shadow:0: 0px 4px 8px 0px #22263829;
-  1: 0px 8px 24px 0px #2226383d;
+.emotion-29 .fillStroke {
+  stroke: currentColor;
+  fill: none;
 }
 
-.emotion-0 .calendar .react-datepicker__header {
+.emotion-32 {
   color: #3f4250;
-  background-color: #ffffff;
-  border-bottom: none;
-  text-align: inherit;
-  display: block;
-  padding-top: 0;
-  position: inherit;
-}
-
-.emotion-0 .calendar .react-datepicker__triangle {
-  border-bottom-color: #f9f9fa;
-}
-
-.emotion-0 .calendar .react-datepicker__month {
-  margin: 0;
-}
-
-.emotion-0 .calendar .react-datepicker__day-names {
-  margin-top: 0.5rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-0 .calendar .react-datepicker__day-name {
+  font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
-  color: #3f4250;
   font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  text-align: center;
-  margin: 0.25rem;
-  text-transform: capitalize;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: inline-block;
+  text-transform: lowercase;
 }
 
-.emotion-0 .calendar .react-datepicker__day,
-.emotion-0 .calendar .react-datepicker__month {
-  color: #727683;
-  font-weight: 500;
-  font-size: 1rem;
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
+.emotion-32::first-letter {
+  text-transform: uppercase;
 }
 
-.emotion-0 .calendar .react-datepicker__day {
-  width: 2rem;
-  height: 2rem;
+.emotion-38 {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 0.5rem;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
 }
 
-.emotion-0 .calendar .react-datepicker__month-text {
-  height: 2rem;
+.emotion-41 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
+  height: 3rem;
+  padding: 0 1rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  width: auto;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-}
-
-.emotion-0 .calendar .react-datepicker__day--outside-month {
-  color: #b5b7bd;
-  font-weight: 500;
+  cursor: pointer;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  outline-offset: 2px;
+  white-space: nowrap;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  paragraph-spacing: 0;
+  text-case: none;
+  background: none;
+  border: none;
+  color: #3f4250;
+  height: 1.5625rem;
+  width: 100%;
+  padding: 0;
 }
 
-.emotion-0 .calendar .react-datepicker__day--selected,
-.emotion-0 .calendar .react-datepicker__month-text--selected {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--selected:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--selected:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
+.emotion-41:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range {
-  color: #641cb3;
-  background-color: #f1eefc;
+.emotion-41:active {
+  box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
+.emotion-41:hover,
+.emotion-41:active {
+  background: #e9eaeb;
+  color: #222638;
 }
 
-.emotion-0 .calendar .react-datepicker__day--in-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-range {
-  color: #641cb3;
-  background-color: #f1eefc;
+.emotion-44 {
+  color: #727683;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: inline-block;
+  text-transform: lowercase;
 }
 
-.emotion-0 .calendar .react-datepicker__day--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
+.emotion-44::first-letter {
+  text-transform: uppercase;
 }
 
-.emotion-0 .calendar .react-datepicker__day--range-start,
-.emotion-0 .calendar .react-datepicker__month-text--range-start {
+.emotion-47 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: 3rem;
+  padding: 0 1rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  width: auto;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  outline-offset: 2px;
+  white-space: nowrap;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  paragraph-spacing: 0;
+  text-case: none;
+  background: #8c40ef;
+  border: none;
   color: #ffffff;
-  background-color: #8c40ef;
+  height: 1.5625rem;
+  width: 100%;
+  padding: 0;
 }
 
-.emotion-0 .calendar .react-datepicker__day--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-start:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-start:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
+.emotion-47:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
-.emotion-0 .calendar .react-datepicker__day--range-end,
-.emotion-0 .calendar .react-datepicker__month-text--range-end {
-  color: #ffffff;
-  background-color: #8c40ef;
+.emotion-47:active {
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-0 .calendar .react-datepicker__day--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-end:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-end:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
+.emotion-47:hover,
+.emotion-47:active {
+  background: #792dd4;
+  color: #f9f9fa;
 }
 
-.emotion-0 .calendar .react-datepicker__day--keyboard-selected,
-.emotion-0 .calendar .react-datepicker__month-text--keyboard-selected {
+.emotion-50 {
   color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day:hover,
-.emotion-0 .calendar .react-datepicker__month-text:hover {
-  color: #222638;
-  background-color: #e9eaeb;
-}
-
-.emotion-0 .calendar .react-datepicker__day--disabled,
-.emotion-0 .calendar .react-datepicker__month-text--disabled {
-  color: #b5b7bd;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: inline-block;
+  text-transform: lowercase;
 }
 
-.emotion-0 .calendar .react-datepicker__day--disabled:hover,
-.emotion-0 .calendar .react-datepicker__month-text--disabled:hover {
-  color: #b5b7bd;
-  background-color: transparent;
+.emotion-50::first-letter {
+  text-transform: uppercase;
 }
 
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0.25rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <div
+        aria-controls=":ra9:"
+        aria-describedby=":ra9:"
+        class="emotion-2 emotion-3"
+        tabindex="0"
+      >
+        <div
+          class="emotion-4 emotion-5"
+        >
+          <div
+            class="emotion-6 emotion-5"
+          >
+            <div
+              class="emotion-8 emotion-5"
+            >
+              <label
+                class="emotion-10 emotion-11"
+                for=":raa:"
+              >
+                Date
+              </label>
+            </div>
+          </div>
+          <div>
+            <div
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-error="false"
+              data-readonly="false"
+              data-success="false"
+            >
+              <input
+                aria-invalid="false"
+                autocomplete="false"
+                class="emotion-14 emotion-15"
+                data-size="large"
+                id=":raa:"
+                placeholder="YYYY-MM-DD"
+                type="text"
+                value="1995/02"
+              />
+              <div
+                class="emotion-16 emotion-17"
+              >
+                <svg
+                  class="emotion-18 emotion-19"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="emotion-20 emotion-21 emotion-22"
+          data-animated="false"
+          data-has-arrow="false"
+          id=":ra9:"
+          role="dialog"
+          style="opacity: 1;"
+        >
+          <div
+            class="emotion-23 emotion-5"
+          >
+            <div
+              class="emotion-25 emotion-5"
+            >
+              <button
+                class="emotion-27 emotion-28"
+                data-testid="previous-month"
+                type="button"
+              >
+                <svg
+                  class="emotion-29 emotion-30"
+                  viewBox="0 0 16 16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M10.53 4.22a.75.75 0 0 1 0 1.06L7.81 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </button>
+              <span
+                class="emotion-31 emotion-32 emotion-11"
+              >
+                 1995
+              </span>
+              <button
+                class="emotion-27 emotion-28"
+                data-testid="next-month"
+                type="button"
+              >
+                <svg
+                  class="emotion-29 emotion-30"
+                  viewBox="0 0 16 16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </button>
+            </div>
+            <div
+              class="emotion-38 emotion-39"
+            >
+              <button
+                class="emotion-40 emotion-41 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-43 emotion-44 emotion-11"
+                  >
+                    Jan
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-40 emotion-47 emotion-48"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-43 emotion-50 emotion-11"
+                  >
+                    Feb
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-40 emotion-41 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-43 emotion-44 emotion-11"
+                  >
+                    Mar
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-40 emotion-41 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-43 emotion-44 emotion-11"
+                  >
+                    Apr
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-40 emotion-41 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-43 emotion-44 emotion-11"
+                  >
+                    May
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-40 emotion-41 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-43 emotion-44 emotion-11"
+                  >
+                    Jun
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-40 emotion-41 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-43 emotion-44 emotion-11"
+                  >
+                    Jul
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-40 emotion-41 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-43 emotion-44 emotion-11"
+                  >
+                    Aug
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-40 emotion-41 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-43 emotion-44 emotion-11"
+                  >
+                    Sep
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-40 emotion-41 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-43 emotion-44 emotion-11"
+                  >
+                    Oct
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-40 emotion-41 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-43 emotion-44 emotion-11"
+                  >
+                    Nov
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-40 emotion-41 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-43 emotion-44 emotion-11"
+                  >
+                    Dec
+                  </span>
+                </div>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > render correctly with showMonthYearPicker with excluded months 1`] = `
+<DocumentFragment>
+  @keyframes animation-0 {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0px, 4px, 0);
+    -moz-transform: translate3d(0px, 4px, 0);
+    -ms-transform: translate3d(0px, 4px, 0);
+    transform: translate3d(0px, 4px, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translate3d(0px, 4px, 0);
+    -moz-transform: translate3d(0px, 4px, 0);
+    -ms-transform: translate3d(0px, 4px, 0);
+    transform: translate3d(0px, 4px, 0);
+  }
+}
+
+.emotion-0 {
+  width: 100%;
+}
+
+.emotion-2 {
+  display: inherit;
+}
+
+.emotion-2[data-container-full-width="true"] {
+  width: 100%;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
   -ms-flex-pack: normal;
   -webkit-justify-content: normal;
   justify-content: normal;
@@ -2773,7 +2874,7 @@ exports[`DateInput > renders correctly error disabled 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2796,7 +2897,7 @@ exports[`DateInput > renders correctly error disabled 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
+.emotion-8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2819,7 +2920,7 @@ exports[`DateInput > renders correctly error disabled 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-8 {
+.emotion-10 {
   color: #222638;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -2831,7 +2932,7 @@ exports[`DateInput > renders correctly error disabled 1`] = `
   text-decoration: none;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2843,71 +2944,73 @@ exports[`DateInput > renders correctly error disabled 1`] = `
   background: #ffffff;
   border: 1px solid #d9dadd;
   border-radius: 0.25rem;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+  border: 1px solid #8c40ef;
 }
 
-.emotion-10>.emotion-13 {
+.emotion-12>.emotion-15 {
   color: #3f4250;
 }
 
-.emotion-10>.emotion-13::-webkit-input-placeholder {
+.emotion-12>.emotion-15::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13::-moz-placeholder {
+.emotion-12>.emotion-15::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13:-ms-input-placeholder {
+.emotion-12>.emotion-15:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13::placeholder {
+.emotion-12>.emotion-15::placeholder {
   color: #727683;
 }
 
-.emotion-10[data-success='true'] {
+.emotion-12[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-10[data-error='true'] {
+.emotion-12[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-10[data-readonly='true'] {
+.emotion-12[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-10[data-disabled='true'] {
+.emotion-12[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13 {
+.emotion-12[data-disabled='true']>.emotion-15 {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::-webkit-input-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::-moz-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13:-ms-input-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-12 {
+.emotion-14 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -2920,20 +3023,20 @@ exports[`DateInput > renders correctly error disabled 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-12[data-size='large'] {
+.emotion-14[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-12[data-size='small'] {
+.emotion-14[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-14 {
+.emotion-16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  gap: 0.5rem;
+  gap: 0rem;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -2950,35 +3053,89 @@ exports[`DateInput > renders correctly error disabled 1`] = `
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
   padding: 0 1rem;
+  border-left: 1px solid;
+  border-color: inherit;
 }
 
-.emotion-16 {
+.emotion-18 {
   vertical-align: middle;
-  fill: #ffbbd3;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  fill: #3f4250;
+  height: 20px;
+  width: 20px;
+  min-width: 20px;
+  min-height: 20px;
 }
 
-.emotion-16 .fillStroke {
-  stroke: #ffbbd3;
+.emotion-18 .fillStroke {
+  stroke: #3f4250;
   fill: none;
 }
 
-.emotion-18 {
+.emotion-21 {
+  background: #151a2d;
+  color: #ffffff;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  text-align: center;
+  position: absolute;
+  max-width: 264px;
+  overflow-wrap: break-word;
+  font-size: 0.8rem;
+  inset: 0 auto auto 0;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  z-index: 1;
+  -webkit-transform: translate3d(0px, 4px, 0);
+  -moz-transform: translate3d(0px, 4px, 0);
+  -ms-transform: translate3d(0px, 4px, 0);
+  transform: translate3d(0px, 4px, 0);
+  width: 100%;
+  background-color: #ffffff;
+  color: #3f4250;
+  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
+  padding: 1rem;
+  border-radius: 0.25rem;
+}
+
+.emotion-21[data-animated="true"] {
+  -webkit-animation: 0ms animation-0 forwards;
+  animation: 0ms animation-0 forwards;
+}
+
+.emotion-21[data-has-arrow="true"]::after {
+  content: " ";
+  position: absolute;
+  top: -5px;
+  left: 0px;
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+  margin-left: -8px;
+  border-width: 8px;
+  border-style: solid;
+  border-color: #151a2d transparent transparent transparent;
+  pointer-events: none;
+}
+
+.emotion-21[data-visible-in-dom="false"] {
+  display: none;
+}
+
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  gap: 1rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
   -webkit-box-pack: normal;
   -ms-flex-pack: normal;
   -webkit-justify-content: normal;
@@ -2987,343 +3144,121 @@ exports[`DateInput > renders correctly error disabled 1`] = `
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
-  padding: 0 1rem;
-  border-left: 1px solid;
-  border-color: inherit;
-}
-
-.emotion-20 {
-  vertical-align: middle;
-  fill: #b5b7bd;
-  height: 1em;
-  width: 1em;
-  min-width: 1em;
-  min-height: 1em;
-}
-
-.emotion-20 .fillStroke {
-  stroke: #b5b7bd;
-  fill: none;
 }
 
-.emotion-22 {
-  color: #ffbbd3;
-  font-size: 0.75rem;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 400;
-  letter-spacing: 0;
-  line-height: 1rem;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
+.emotion-25 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
 }
 
-<div
-    data-testid="testing"
-  >
-    <div
-      class="emotion-0 emotion-1"
-    >
-      <div
-        class="react-datepicker-wrapper"
-      >
-        <div
-          class="react-datepicker__input-container"
-        >
-          <div
-            class=" emotion-2 emotion-3"
-          >
-            <div
-              class="emotion-4 emotion-3"
-            >
-              <div
-                class="emotion-6 emotion-3"
-              >
-                <label
-                  class="emotion-8 emotion-9"
-                  for=":rn:"
-                >
-                  Date
-                </label>
-              </div>
-            </div>
-            <div>
-              <div
-                class="emotion-10 emotion-11"
-                data-disabled="true"
-                data-error="true"
-                data-readonly="false"
-                data-success="false"
-              >
-                <input
-                  aria-invalid="true"
-                  class="emotion-12 emotion-13"
-                  data-size="large"
-                  disabled=""
-                  id=":rn:"
-                  type="text"
-                  value=""
-                />
-                <div
-                  class="emotion-14 emotion-15"
-                >
-                  <svg
-                    class="emotion-16 emotion-17"
-                    viewBox="0 0 20 20"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0m-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5m0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-                <div
-                  class="emotion-18 emotion-19"
-                >
-                  <svg
-                    class="emotion-20 emotion-17"
-                    viewBox="0 0 20 20"
-                  >
-                    <path
-                      d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                    />
-                    <path
-                      clip-rule="evenodd"
-                      d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-              </div>
-            </div>
-            <p
-              class="emotion-22 emotion-9"
-            >
-              error
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DateInput > renders correctly error disabled required 1`] = `
-<DocumentFragment>
-  .emotion-0 {
-  width: 100%;
-}
-
-.emotion-0 div.react-datepicker-wrapper {
-  display: block;
-}
-
-.emotion-0 div.react-datepicker__input-container {
-  display: block;
-}
-
-.emotion-0 div.react-datepicker__triangle {
-  display: none;
-}
-
-.emotion-0 div.react-datepicker__month-container {
-  padding: 1rem;
-  width: 20rem;
-}
-
-.emotion-0 .react-datepicker-popper {
-  z-index: 1000;
-}
-
-.emotion-0 .calendar {
-  font-family: Inter,Asap,sans-serif;
-  border-color: #e9eaeb;
-  background-color: #ffffff;
-  box-shadow:0: 0px 4px 8px 0px #22263829;
-  1: 0px 8px 24px 0px #2226383d;
-}
-
-.emotion-0 .calendar .react-datepicker__header {
-  color: #3f4250;
-  background-color: #ffffff;
-  border-bottom: none;
-  text-align: inherit;
-  display: block;
-  padding-top: 0;
-  position: inherit;
-}
-
-.emotion-0 .calendar .react-datepicker__triangle {
-  border-bottom-color: #f9f9fa;
-}
-
-.emotion-0 .calendar .react-datepicker__month {
-  margin: 0;
-}
-
-.emotion-0 .calendar .react-datepicker__day-names {
-  margin-top: 0.5rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-0 .calendar .react-datepicker__day-name {
-  font-family: Inter,Asap,sans-serif;
-  color: #3f4250;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  text-align: center;
-  margin: 0.25rem;
-  text-transform: capitalize;
-}
-
-.emotion-0 .calendar .react-datepicker__day,
-.emotion-0 .calendar .react-datepicker__month {
-  color: #727683;
-  font-weight: 500;
-  font-size: 1rem;
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
-.emotion-0 .calendar .react-datepicker__day {
-  width: 2rem;
-  height: 2rem;
-}
-
-.emotion-0 .calendar .react-datepicker__month-text {
-  height: 2rem;
+.emotion-27 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
+  height: 1.5rem;
+  padding: 0 0.25rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0.25rem;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  width: 1.5rem;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-}
-
-.emotion-0 .calendar .react-datepicker__day--outside-month {
-  color: #b5b7bd;
+  cursor: pointer;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  outline-offset: 2px;
+  white-space: nowrap;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
   font-weight: 500;
-  font-size: 1rem;
-}
-
-.emotion-0 .calendar .react-datepicker__day--selected,
-.emotion-0 .calendar .react-datepicker__month-text--selected {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--selected:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--selected:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range {
-  color: #641cb3;
-  background-color: #f1eefc;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-range {
-  color: #641cb3;
-  background-color: #f1eefc;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-start,
-.emotion-0 .calendar .react-datepicker__month-text--range-start {
-  color: #ffffff;
-  background-color: #8c40ef;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  paragraph-spacing: 0;
+  text-case: none;
+  background: none;
+  border: none;
+  color: #3f4250;
 }
 
-.emotion-0 .calendar .react-datepicker__day--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-start:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-start:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
+.emotion-27:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
-.emotion-0 .calendar .react-datepicker__day--range-end,
-.emotion-0 .calendar .react-datepicker__month-text--range-end {
-  color: #ffffff;
-  background-color: #8c40ef;
+.emotion-27:active {
+  box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-0 .calendar .react-datepicker__day--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-end:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-end:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
+.emotion-27:hover,
+.emotion-27:active {
+  background: #e9eaeb;
+  color: #222638;
 }
 
-.emotion-0 .calendar .react-datepicker__day--keyboard-selected,
-.emotion-0 .calendar .react-datepicker__month-text--keyboard-selected {
-  color: #ffffff;
-  background-color: #8c40ef;
+.emotion-29 {
+  vertical-align: middle;
+  fill: currentColor;
+  height: 16px;
+  width: 16px;
+  min-width: 16px;
+  min-height: 16px;
 }
 
-.emotion-0 .calendar .react-datepicker__day:hover,
-.emotion-0 .calendar .react-datepicker__month-text:hover {
-  color: #222638;
-  background-color: #e9eaeb;
+.emotion-29 .fillStroke {
+  stroke: currentColor;
+  fill: none;
 }
 
-.emotion-0 .calendar .react-datepicker__day--disabled,
-.emotion-0 .calendar .react-datepicker__month-text--disabled {
-  color: #b5b7bd;
+.emotion-32 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: inline-block;
+  text-transform: lowercase;
 }
 
-.emotion-0 .calendar .react-datepicker__day--disabled:hover,
-.emotion-0 .calendar .react-datepicker__month-text--disabled:hover {
-  color: #b5b7bd;
-  background-color: transparent;
+.emotion-32::first-letter {
+  text-transform: uppercase;
 }
 
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0.25rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
+.emotion-38 {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 0.5rem;
   -webkit-align-items: normal;
   -webkit-box-align: normal;
   -ms-flex-align: normal;
@@ -3332,60 +3267,67 @@ exports[`DateInput > renders correctly error disabled required 1`] = `
   -ms-flex-pack: normal;
   -webkit-justify-content: normal;
   justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
 }
 
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0.5rem;
+.emotion-41 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: 3rem;
+  padding: 0 1rem;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  width: auto;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
+  cursor: pointer;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  outline-offset: 2px;
+  white-space: nowrap;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  paragraph-spacing: 0;
+  text-case: none;
+  background: none;
+  border: none;
+  color: #3f4250;
+  height: 1.5625rem;
+  width: 100%;
+  padding: 0;
 }
 
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0.25rem;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: start;
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: start;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
+.emotion-41:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
-.emotion-8 {
+.emotion-41:active {
+  box-shadow: 0px 0px 0px 3px #151a2d5c;
+}
+
+.emotion-41:hover,
+.emotion-41:active {
+  background: #e9eaeb;
   color: #222638;
+}
+
+.emotion-44 {
+  color: #727683;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -3394,207 +3336,145 @@ exports[`DateInput > renders correctly error disabled required 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  display: inline-block;
+  text-transform: lowercase;
 }
 
-.emotion-10 {
-  vertical-align: middle;
-  fill: #b3144d;
-  height: 8px;
-  width: 8px;
-  min-width: 8px;
-  min-height: 8px;
-}
-
-.emotion-10 .fillStroke {
-  stroke: #b3144d;
-  fill: none;
+.emotion-44::first-letter {
+  text-transform: uppercase;
 }
 
-.emotion-12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
+.emotion-47 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   height: 3rem;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
-  border-radius: 0.25rem;
-}
-
-.emotion-12>.emotion-15 {
-  color: #3f4250;
-}
-
-.emotion-12>.emotion-15::-webkit-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::-moz-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15:-ms-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::placeholder {
-  color: #727683;
-}
-
-.emotion-12[data-success='true'] {
-  border-color: #22674e;
-}
-
-.emotion-12[data-error='true'] {
-  border-color: #b3144d;
-}
-
-.emotion-12[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-}
-
-.emotion-12[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15 {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
-}
-
-.emotion-14 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  border: none;
-  outline: none;
-  height: 100%;
-  width: 100%;
-  padding-left: 1rem;
-  background: transparent;
-  font-size: 0.875rem;
-}
-
-.emotion-14[data-size='large'] {
-  font-size: 1rem;
-}
-
-.emotion-14[data-size='small'] {
-  padding-left: 0.5rem;
-}
-
-.emotion-16 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0.5rem;
+  padding: 0 1rem;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  width: auto;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  padding: 0 1rem;
+  cursor: not-allowed;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  outline-offset: 2px;
+  white-space: nowrap;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  paragraph-spacing: 0;
+  text-case: none;
+  background: #8c40ef;
+  border: none;
+  color: #ffffff;
+  background: #e5dbfd;
+  color: #ffffff;
+  height: 1.5625rem;
+  width: 100%;
+  padding: 0;
 }
 
-.emotion-18 {
-  vertical-align: middle;
-  fill: #ffbbd3;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+.emotion-47:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
-.emotion-18 .fillStroke {
-  stroke: #ffbbd3;
-  fill: none;
+.emotion-50 {
+  color: #ffffff;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: inline-block;
+  text-transform: lowercase;
 }
 
-.emotion-20 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
+.emotion-50::first-letter {
+  text-transform: uppercase;
+}
+
+.emotion-95 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: 3rem;
+  padding: 0 1rem;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  width: auto;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  padding: 0 1rem;
-  border-left: 1px solid;
-  border-color: inherit;
-}
-
-.emotion-22 {
-  vertical-align: middle;
-  fill: #b5b7bd;
-  height: 1em;
-  width: 1em;
-  min-width: 1em;
-  min-height: 1em;
+  cursor: not-allowed;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  outline-offset: 2px;
+  white-space: nowrap;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  paragraph-spacing: 0;
+  text-case: none;
+  background: none;
+  border: none;
+  color: #3f4250;
+  color: #b5b7bd;
+  height: 1.5625rem;
+  width: 100%;
+  padding: 0;
 }
 
-.emotion-22 .fillStroke {
-  stroke: #b5b7bd;
-  fill: none;
+.emotion-95:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
-.emotion-24 {
-  color: #ffbbd3;
-  font-size: 0.75rem;
+.emotion-98 {
+  color: #b5b7bd;
+  font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
-  font-weight: 400;
+  font-weight: 500;
   letter-spacing: 0;
-  line-height: 1rem;
+  line-height: 1.5rem;
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  display: inline-block;
+  text-transform: lowercase;
+}
+
+.emotion-98::first-letter {
+  text-transform: uppercase;
 }
 
 <div
@@ -3604,92 +3484,270 @@ exports[`DateInput > renders correctly error disabled required 1`] = `
       class="emotion-0 emotion-1"
     >
       <div
-        class="react-datepicker-wrapper"
+        aria-controls=":r109:"
+        aria-describedby=":r109:"
+        class="emotion-2 emotion-3"
+        tabindex="0"
       >
         <div
-          class="react-datepicker__input-container"
+          class="emotion-4 emotion-5"
         >
           <div
-            class=" emotion-2 emotion-3"
+            class="emotion-6 emotion-5"
           >
             <div
-              class="emotion-4 emotion-3"
+              class="emotion-8 emotion-5"
+            >
+              <label
+                class="emotion-10 emotion-11"
+                for=":r10a:"
+              >
+                Date
+              </label>
+            </div>
+          </div>
+          <div>
+            <div
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-error="false"
+              data-readonly="false"
+              data-success="false"
             >
+              <input
+                aria-invalid="false"
+                autocomplete="false"
+                class="emotion-14 emotion-15"
+                data-size="large"
+                id=":r10a:"
+                placeholder="YYYY-MM-DD"
+                type="text"
+                value="1995/02"
+              />
               <div
-                class="emotion-6 emotion-3"
+                class="emotion-16 emotion-17"
               >
-                <label
-                  class="emotion-8 emotion-9"
-                  for=":rt:"
-                >
-                  Date
-                </label>
                 <svg
-                  class="emotion-10 emotion-11"
+                  class="emotion-18 emotion-19"
                   viewBox="0 0 20 20"
                 >
                   <path
-                    d="M10 2h4l-.79 7.91 6.45-4.64 2 3.46L14.42 12l7.24 3.27-2 3.46-6.45-4.64L14 22h-4l.79-7.91-6.45 4.64-2-3.46L9.58 12 2.34 8.73l2-3.46 6.45 4.64z"
+                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
+                    fill-rule="evenodd"
                   />
                 </svg>
               </div>
             </div>
-            <div>
-              <div
-                class="emotion-12 emotion-13"
-                data-disabled="true"
-                data-error="true"
-                data-readonly="false"
-                data-success="false"
-              >
-                <input
-                  aria-invalid="true"
-                  class="emotion-14 emotion-15"
-                  data-size="large"
-                  disabled=""
-                  id=":rt:"
-                  required=""
-                  type="text"
-                  value=""
-                />
-                <div
-                  class="emotion-16 emotion-17"
-                >
-                  <svg
-                    class="emotion-18 emotion-11"
-                    viewBox="0 0 20 20"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0m-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5m0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-                <div
-                  class="emotion-20 emotion-21"
-                >
-                  <svg
-                    class="emotion-22 emotion-11"
-                    viewBox="0 0 20 20"
-                  >
-                    <path
-                      d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                    />
-                    <path
-                      clip-rule="evenodd"
-                      d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-              </div>
-            </div>
-            <p
-              class="emotion-24 emotion-9"
+          </div>
+        </div>
+        <div
+          class="emotion-20 emotion-21 emotion-22"
+          data-animated="false"
+          data-has-arrow="false"
+          id=":r109:"
+          role="dialog"
+          style="opacity: 1;"
+        >
+          <div
+            class="emotion-23 emotion-5"
+          >
+            <div
+              class="emotion-25 emotion-5"
+            >
+              <button
+                class="emotion-27 emotion-28"
+                data-testid="previous-month"
+                type="button"
+              >
+                <svg
+                  class="emotion-29 emotion-30"
+                  viewBox="0 0 16 16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M10.53 4.22a.75.75 0 0 1 0 1.06L7.81 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </button>
+              <span
+                class="emotion-31 emotion-32 emotion-11"
+              >
+                 1995
+              </span>
+              <button
+                class="emotion-27 emotion-28"
+                data-testid="next-month"
+                type="button"
+              >
+                <svg
+                  class="emotion-29 emotion-30"
+                  viewBox="0 0 16 16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </button>
+            </div>
+            <div
+              class="emotion-38 emotion-39"
             >
-              error
-            </p>
+              <button
+                class="emotion-40 emotion-41 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-43 emotion-44 emotion-11"
+                  >
+                    Jan
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-40 emotion-47 emotion-48"
+                disabled=""
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-43 emotion-50 emotion-11"
+                  >
+                    Feb
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-40 emotion-41 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-43 emotion-44 emotion-11"
+                  >
+                    Mar
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-40 emotion-41 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-43 emotion-44 emotion-11"
+                  >
+                    Apr
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-40 emotion-41 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-43 emotion-44 emotion-11"
+                  >
+                    May
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-40 emotion-41 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-43 emotion-44 emotion-11"
+                  >
+                    Jun
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-40 emotion-41 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-43 emotion-44 emotion-11"
+                  >
+                    Jul
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-40 emotion-41 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-43 emotion-44 emotion-11"
+                  >
+                    Aug
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-40 emotion-41 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-43 emotion-44 emotion-11"
+                  >
+                    Sep
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-40 emotion-95 emotion-28"
+                disabled=""
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-43 emotion-98 emotion-11"
+                  >
+                    Oct
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-40 emotion-41 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-43 emotion-44 emotion-11"
+                  >
+                    Nov
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-40 emotion-41 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-43 emotion-44 emotion-11"
+                  >
+                    Dec
+                  </span>
+                </div>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -3698,212 +3756,21 @@ exports[`DateInput > renders correctly error disabled required 1`] = `
 </DocumentFragment>
 `;
 
-exports[`DateInput > renders correctly min-max 1`] = `
+exports[`DateInput > renders correctly custom format with range 1`] = `
 <DocumentFragment>
   .emotion-0 {
   width: 100%;
 }
 
-.emotion-0 div.react-datepicker-wrapper {
-  display: block;
-}
-
-.emotion-0 div.react-datepicker__input-container {
-  display: block;
-}
-
-.emotion-0 div.react-datepicker__triangle {
-  display: none;
-}
-
-.emotion-0 div.react-datepicker__month-container {
-  padding: 1rem;
-  width: 20rem;
-}
-
-.emotion-0 .react-datepicker-popper {
-  z-index: 1000;
-}
-
-.emotion-0 .calendar {
-  font-family: Inter,Asap,sans-serif;
-  border-color: #e9eaeb;
-  background-color: #ffffff;
-  box-shadow:0: 0px 4px 8px 0px #22263829;
-  1: 0px 8px 24px 0px #2226383d;
-}
-
-.emotion-0 .calendar .react-datepicker__header {
-  color: #3f4250;
-  background-color: #ffffff;
-  border-bottom: none;
-  text-align: inherit;
-  display: block;
-  padding-top: 0;
-  position: inherit;
-}
-
-.emotion-0 .calendar .react-datepicker__triangle {
-  border-bottom-color: #f9f9fa;
-}
-
-.emotion-0 .calendar .react-datepicker__month {
-  margin: 0;
-}
-
-.emotion-0 .calendar .react-datepicker__day-names {
-  margin-top: 0.5rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-0 .calendar .react-datepicker__day-name {
-  font-family: Inter,Asap,sans-serif;
-  color: #3f4250;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  text-align: center;
-  margin: 0.25rem;
-  text-transform: capitalize;
-}
-
-.emotion-0 .calendar .react-datepicker__day,
-.emotion-0 .calendar .react-datepicker__month {
-  color: #727683;
-  font-weight: 500;
-  font-size: 1rem;
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
-.emotion-0 .calendar .react-datepicker__day {
-  width: 2rem;
-  height: 2rem;
-}
-
-.emotion-0 .calendar .react-datepicker__month-text {
-  height: 2rem;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-0 .calendar .react-datepicker__day--outside-month {
-  color: #b5b7bd;
-  font-weight: 500;
-  font-size: 1rem;
-}
-
-.emotion-0 .calendar .react-datepicker__day--selected,
-.emotion-0 .calendar .react-datepicker__month-text--selected {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--selected:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--selected:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range {
-  color: #641cb3;
-  background-color: #f1eefc;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-range {
-  color: #641cb3;
-  background-color: #f1eefc;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-start,
-.emotion-0 .calendar .react-datepicker__month-text--range-start {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-start:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-start:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-end,
-.emotion-0 .calendar .react-datepicker__month-text--range-end {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-end:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-end:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--keyboard-selected,
-.emotion-0 .calendar .react-datepicker__month-text--keyboard-selected {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day:hover,
-.emotion-0 .calendar .react-datepicker__month-text:hover {
-  color: #222638;
-  background-color: #e9eaeb;
-}
-
-.emotion-0 .calendar .react-datepicker__day--disabled,
-.emotion-0 .calendar .react-datepicker__month-text--disabled {
-  color: #b5b7bd;
+.emotion-2 {
+  display: inherit;
 }
 
-.emotion-0 .calendar .react-datepicker__day--disabled:hover,
-.emotion-0 .calendar .react-datepicker__month-text--disabled:hover {
-  color: #b5b7bd;
-  background-color: transparent;
+.emotion-2[data-container-full-width="true"] {
+  width: 100%;
 }
 
-.emotion-2 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3926,7 +3793,7 @@ exports[`DateInput > renders correctly min-max 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3949,7 +3816,7 @@ exports[`DateInput > renders correctly min-max 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
+.emotion-8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3972,7 +3839,7 @@ exports[`DateInput > renders correctly min-max 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-8 {
+.emotion-10 {
   color: #222638;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -3984,7 +3851,7 @@ exports[`DateInput > renders correctly min-max 1`] = `
   text-decoration: none;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3998,69 +3865,69 @@ exports[`DateInput > renders correctly min-max 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-10>.emotion-13 {
+.emotion-12>.emotion-15 {
   color: #3f4250;
 }
 
-.emotion-10>.emotion-13::-webkit-input-placeholder {
+.emotion-12>.emotion-15::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13::-moz-placeholder {
+.emotion-12>.emotion-15::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13:-ms-input-placeholder {
+.emotion-12>.emotion-15:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13::placeholder {
+.emotion-12>.emotion-15::placeholder {
   color: #727683;
 }
 
-.emotion-10[data-success='true'] {
+.emotion-12[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-10[data-error='true'] {
+.emotion-12[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-10[data-readonly='true'] {
+.emotion-12[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-10[data-disabled='true'] {
+.emotion-12[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13 {
+.emotion-12[data-disabled='true']>.emotion-15 {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::-webkit-input-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::-moz-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13:-ms-input-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-12 {
+.emotion-14 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -4073,15 +3940,15 @@ exports[`DateInput > renders correctly min-max 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-12[data-size='large'] {
+.emotion-14[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-12[data-size='small'] {
+.emotion-14[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-14 {
+.emotion-16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4107,16 +3974,16 @@ exports[`DateInput > renders correctly min-max 1`] = `
   border-color: inherit;
 }
 
-.emotion-16 {
+.emotion-18 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 1em;
-  width: 1em;
-  min-width: 1em;
-  min-height: 1em;
+  height: 20px;
+  width: 20px;
+  min-width: 20px;
+  min-height: 20px;
 }
 
-.emotion-16 .fillStroke {
+.emotion-18 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
@@ -4128,61 +3995,62 @@ exports[`DateInput > renders correctly min-max 1`] = `
       class="emotion-0 emotion-1"
     >
       <div
-        class="react-datepicker-wrapper"
+        aria-controls=":r13o:"
+        aria-describedby=":r13o:"
+        class="emotion-2 emotion-3"
+        tabindex="0"
       >
         <div
-          class="react-datepicker__input-container"
+          class="emotion-4 emotion-5"
         >
           <div
-            class=" emotion-2 emotion-3"
+            class="emotion-6 emotion-5"
           >
             <div
-              class="emotion-4 emotion-3"
+              class="emotion-8 emotion-5"
             >
-              <div
-                class="emotion-6 emotion-3"
+              <label
+                class="emotion-10 emotion-11"
+                for=":r13p:"
               >
-                <label
-                  class="emotion-8 emotion-9"
-                  for=":r13:"
-                >
-                  Date
-                </label>
-              </div>
+                Date
+              </label>
             </div>
-            <div>
+          </div>
+          <div>
+            <div
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-error="false"
+              data-readonly="false"
+              data-success="false"
+            >
+              <input
+                aria-invalid="false"
+                autocomplete="false"
+                class="emotion-14 emotion-15"
+                data-size="large"
+                id=":r13p:"
+                name="test"
+                type="text"
+                value="1995-12-11T03:24:00.000Z – 1995-12-11T03:24:00.000Z"
+              />
               <div
-                class="emotion-10 emotion-11"
-                data-disabled="false"
-                data-error="false"
-                data-readonly="false"
-                data-success="false"
-              >
-                <input
-                  aria-invalid="false"
-                  class="emotion-12 emotion-13"
-                  data-size="large"
-                  id=":r13:"
-                  type="text"
-                  value=""
-                />
-                <div
-                  class="emotion-14 emotion-15"
+                class="emotion-16 emotion-17"
+              >
+                <svg
+                  class="emotion-18 emotion-19"
+                  viewBox="0 0 20 20"
                 >
-                  <svg
-                    class="emotion-16 emotion-17"
-                    viewBox="0 0 20 20"
-                  >
-                    <path
-                      d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                    />
-                    <path
-                      clip-rule="evenodd"
-                      d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
+                  <path
+                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
               </div>
             </div>
           </div>
@@ -4193,212 +4061,21 @@ exports[`DateInput > renders correctly min-max 1`] = `
 </DocumentFragment>
 `;
 
-exports[`DateInput > renders correctly required 1`] = `
+exports[`DateInput > renders correctly disabled 1`] = `
 <DocumentFragment>
   .emotion-0 {
   width: 100%;
 }
 
-.emotion-0 div.react-datepicker-wrapper {
-  display: block;
-}
-
-.emotion-0 div.react-datepicker__input-container {
-  display: block;
-}
-
-.emotion-0 div.react-datepicker__triangle {
-  display: none;
-}
-
-.emotion-0 div.react-datepicker__month-container {
-  padding: 1rem;
-  width: 20rem;
-}
-
-.emotion-0 .react-datepicker-popper {
-  z-index: 1000;
-}
-
-.emotion-0 .calendar {
-  font-family: Inter,Asap,sans-serif;
-  border-color: #e9eaeb;
-  background-color: #ffffff;
-  box-shadow:0: 0px 4px 8px 0px #22263829;
-  1: 0px 8px 24px 0px #2226383d;
-}
-
-.emotion-0 .calendar .react-datepicker__header {
-  color: #3f4250;
-  background-color: #ffffff;
-  border-bottom: none;
-  text-align: inherit;
-  display: block;
-  padding-top: 0;
-  position: inherit;
-}
-
-.emotion-0 .calendar .react-datepicker__triangle {
-  border-bottom-color: #f9f9fa;
+.emotion-2 {
+  display: inherit;
 }
 
-.emotion-0 .calendar .react-datepicker__month {
-  margin: 0;
+.emotion-2[data-container-full-width="true"] {
+  width: 100%;
 }
 
-.emotion-0 .calendar .react-datepicker__day-names {
-  margin-top: 0.5rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-0 .calendar .react-datepicker__day-name {
-  font-family: Inter,Asap,sans-serif;
-  color: #3f4250;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  text-align: center;
-  margin: 0.25rem;
-  text-transform: capitalize;
-}
-
-.emotion-0 .calendar .react-datepicker__day,
-.emotion-0 .calendar .react-datepicker__month {
-  color: #727683;
-  font-weight: 500;
-  font-size: 1rem;
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
-.emotion-0 .calendar .react-datepicker__day {
-  width: 2rem;
-  height: 2rem;
-}
-
-.emotion-0 .calendar .react-datepicker__month-text {
-  height: 2rem;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-0 .calendar .react-datepicker__day--outside-month {
-  color: #b5b7bd;
-  font-weight: 500;
-  font-size: 1rem;
-}
-
-.emotion-0 .calendar .react-datepicker__day--selected,
-.emotion-0 .calendar .react-datepicker__month-text--selected {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--selected:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--selected:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range {
-  color: #641cb3;
-  background-color: #f1eefc;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-range {
-  color: #641cb3;
-  background-color: #f1eefc;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-start,
-.emotion-0 .calendar .react-datepicker__month-text--range-start {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-start:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-start:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-end,
-.emotion-0 .calendar .react-datepicker__month-text--range-end {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-end:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-end:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--keyboard-selected,
-.emotion-0 .calendar .react-datepicker__month-text--keyboard-selected {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day:hover,
-.emotion-0 .calendar .react-datepicker__month-text:hover {
-  color: #222638;
-  background-color: #e9eaeb;
-}
-
-.emotion-0 .calendar .react-datepicker__day--disabled,
-.emotion-0 .calendar .react-datepicker__month-text--disabled {
-  color: #b5b7bd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--disabled:hover,
-.emotion-0 .calendar .react-datepicker__month-text--disabled:hover {
-  color: #b5b7bd;
-  background-color: transparent;
-}
-
-.emotion-2 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4421,7 +4098,7 @@ exports[`DateInput > renders correctly required 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4444,7 +4121,7 @@ exports[`DateInput > renders correctly required 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
+.emotion-8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4467,7 +4144,7 @@ exports[`DateInput > renders correctly required 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-8 {
+.emotion-10 {
   color: #222638;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -4479,20 +4156,6 @@ exports[`DateInput > renders correctly required 1`] = `
   text-decoration: none;
 }
 
-.emotion-10 {
-  vertical-align: middle;
-  fill: #b3144d;
-  height: 8px;
-  width: 8px;
-  min-width: 8px;
-  min-height: 8px;
-}
-
-.emotion-10 .fillStroke {
-  stroke: #b3144d;
-  fill: none;
-}
-
 .emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -4618,15 +4281,15 @@ exports[`DateInput > renders correctly required 1`] = `
 
 .emotion-18 {
   vertical-align: middle;
-  fill: #3f4250;
-  height: 1em;
-  width: 1em;
-  min-width: 1em;
-  min-height: 1em;
+  fill: #b5b7bd;
+  height: 20px;
+  width: 20px;
+  min-width: 20px;
+  min-height: 20px;
 }
 
 .emotion-18 .fillStroke {
-  stroke: #3f4250;
+  stroke: #b5b7bd;
   fill: none;
 }
 
@@ -4637,72 +4300,64 @@ exports[`DateInput > renders correctly required 1`] = `
       class="emotion-0 emotion-1"
     >
       <div
-        class="react-datepicker-wrapper"
+        aria-controls=":r4:"
+        aria-describedby=":r4:"
+        class="emotion-2 emotion-3"
+        tabindex="0"
       >
         <div
-          class="react-datepicker__input-container"
+          class="emotion-4 emotion-5"
         >
           <div
-            class=" emotion-2 emotion-3"
+            class="emotion-6 emotion-5"
           >
             <div
-              class="emotion-4 emotion-3"
+              class="emotion-8 emotion-5"
+            >
+              <label
+                class="emotion-10 emotion-11"
+                for=":r5:"
+              >
+                Date
+              </label>
+            </div>
+          </div>
+          <div>
+            <div
+              class="emotion-12 emotion-13"
+              data-disabled="true"
+              data-error="false"
+              data-readonly="false"
+              data-success="false"
             >
+              <input
+                aria-invalid="false"
+                autocomplete="false"
+                class="emotion-14 emotion-15"
+                data-size="large"
+                disabled=""
+                id=":r5:"
+                type="text"
+                value=""
+              />
               <div
-                class="emotion-6 emotion-3"
+                class="emotion-16 emotion-17"
               >
-                <label
-                  class="emotion-8 emotion-9"
-                  for=":rc:"
-                >
-                  Date
-                </label>
                 <svg
-                  class="emotion-10 emotion-11"
+                  class="emotion-18 emotion-19"
                   viewBox="0 0 20 20"
                 >
                   <path
-                    d="M10 2h4l-.79 7.91 6.45-4.64 2 3.46L14.42 12l7.24 3.27-2 3.46-6.45-4.64L14 22h-4l.79-7.91-6.45 4.64-2-3.46L9.58 12 2.34 8.73l2-3.46 6.45 4.64z"
+                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
+                    fill-rule="evenodd"
                   />
                 </svg>
               </div>
             </div>
-            <div>
-              <div
-                class="emotion-12 emotion-13"
-                data-disabled="false"
-                data-error="false"
-                data-readonly="false"
-                data-success="false"
-              >
-                <input
-                  aria-invalid="false"
-                  class="emotion-14 emotion-15"
-                  data-size="large"
-                  id=":rc:"
-                  required=""
-                  type="text"
-                  value=""
-                />
-                <div
-                  class="emotion-16 emotion-17"
-                >
-                  <svg
-                    class="emotion-18 emotion-11"
-                    viewBox="0 0 20 20"
-                  >
-                    <path
-                      d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                    />
-                    <path
-                      clip-rule="evenodd"
-                      d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-              </div>
-            </div>
           </div>
         </div>
       </div>
@@ -4711,212 +4366,21 @@ exports[`DateInput > renders correctly required 1`] = `
 </DocumentFragment>
 `;
 
-exports[`DateInput > renders correctly with date-fns locale es 1`] = `
+exports[`DateInput > renders correctly error 1`] = `
 <DocumentFragment>
   .emotion-0 {
   width: 100%;
 }
 
-.emotion-0 div.react-datepicker-wrapper {
-  display: block;
-}
-
-.emotion-0 div.react-datepicker__input-container {
-  display: block;
-}
-
-.emotion-0 div.react-datepicker__triangle {
-  display: none;
-}
-
-.emotion-0 div.react-datepicker__month-container {
-  padding: 1rem;
-  width: 20rem;
-}
-
-.emotion-0 .react-datepicker-popper {
-  z-index: 1000;
-}
-
-.emotion-0 .calendar {
-  font-family: Inter,Asap,sans-serif;
-  border-color: #e9eaeb;
-  background-color: #ffffff;
-  box-shadow:0: 0px 4px 8px 0px #22263829;
-  1: 0px 8px 24px 0px #2226383d;
-}
-
-.emotion-0 .calendar .react-datepicker__header {
-  color: #3f4250;
-  background-color: #ffffff;
-  border-bottom: none;
-  text-align: inherit;
-  display: block;
-  padding-top: 0;
-  position: inherit;
-}
-
-.emotion-0 .calendar .react-datepicker__triangle {
-  border-bottom-color: #f9f9fa;
-}
-
-.emotion-0 .calendar .react-datepicker__month {
-  margin: 0;
-}
-
-.emotion-0 .calendar .react-datepicker__day-names {
-  margin-top: 0.5rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-0 .calendar .react-datepicker__day-name {
-  font-family: Inter,Asap,sans-serif;
-  color: #3f4250;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  text-align: center;
-  margin: 0.25rem;
-  text-transform: capitalize;
-}
-
-.emotion-0 .calendar .react-datepicker__day,
-.emotion-0 .calendar .react-datepicker__month {
-  color: #727683;
-  font-weight: 500;
-  font-size: 1rem;
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
-.emotion-0 .calendar .react-datepicker__day {
-  width: 2rem;
-  height: 2rem;
-}
-
-.emotion-0 .calendar .react-datepicker__month-text {
-  height: 2rem;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-0 .calendar .react-datepicker__day--outside-month {
-  color: #b5b7bd;
-  font-weight: 500;
-  font-size: 1rem;
-}
-
-.emotion-0 .calendar .react-datepicker__day--selected,
-.emotion-0 .calendar .react-datepicker__month-text--selected {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--selected:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--selected:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range {
-  color: #641cb3;
-  background-color: #f1eefc;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-range {
-  color: #641cb3;
-  background-color: #f1eefc;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-start,
-.emotion-0 .calendar .react-datepicker__month-text--range-start {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-start:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-start:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-end,
-.emotion-0 .calendar .react-datepicker__month-text--range-end {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-end:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-end:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--keyboard-selected,
-.emotion-0 .calendar .react-datepicker__month-text--keyboard-selected {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day:hover,
-.emotion-0 .calendar .react-datepicker__month-text:hover {
-  color: #222638;
-  background-color: #e9eaeb;
-}
-
-.emotion-0 .calendar .react-datepicker__day--disabled,
-.emotion-0 .calendar .react-datepicker__month-text--disabled {
-  color: #b5b7bd;
+.emotion-2 {
+  display: inherit;
 }
 
-.emotion-0 .calendar .react-datepicker__day--disabled:hover,
-.emotion-0 .calendar .react-datepicker__month-text--disabled:hover {
-  color: #b5b7bd;
-  background-color: transparent;
+.emotion-2[data-container-full-width="true"] {
+  width: 100%;
 }
 
-.emotion-2 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4939,7 +4403,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4962,7 +4426,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
+.emotion-8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4985,7 +4449,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-8 {
+.emotion-10 {
   color: #222638;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -4997,7 +4461,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
   text-decoration: none;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5009,73 +4473,71 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
   background: #ffffff;
   border: 1px solid #d9dadd;
   border-radius: 0.25rem;
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
-  border: 1px solid #8c40ef;
 }
 
-.emotion-10>.emotion-13 {
+.emotion-12>.emotion-15 {
   color: #3f4250;
 }
 
-.emotion-10>.emotion-13::-webkit-input-placeholder {
+.emotion-12>.emotion-15::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13::-moz-placeholder {
+.emotion-12>.emotion-15::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13:-ms-input-placeholder {
+.emotion-12>.emotion-15:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13::placeholder {
+.emotion-12>.emotion-15::placeholder {
   color: #727683;
 }
 
-.emotion-10[data-success='true'] {
+.emotion-12[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-10[data-error='true'] {
+.emotion-12[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-10[data-readonly='true'] {
+.emotion-12[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-10[data-disabled='true'] {
+.emotion-12[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13 {
+.emotion-12[data-disabled='true']>.emotion-15 {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::-webkit-input-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::-moz-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13:-ms-input-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-12 {
+.emotion-14 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -5088,20 +4550,20 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-12[data-size='large'] {
+.emotion-14[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-12[data-size='small'] {
+.emotion-14[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-14 {
+.emotion-16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  gap: 0rem;
+  gap: 0.5rem;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -5118,25 +4580,23 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
   padding: 0 1rem;
-  border-left: 1px solid;
-  border-color: inherit;
 }
 
-.emotion-16 {
+.emotion-18 {
   vertical-align: middle;
-  fill: #3f4250;
-  height: 1em;
-  width: 1em;
-  min-width: 1em;
-  min-height: 1em;
+  fill: #b3144d;
+  height: 16px;
+  width: 16px;
+  min-width: 16px;
+  min-height: 16px;
 }
 
-.emotion-16 .fillStroke {
-  stroke: #3f4250;
+.emotion-18 .fillStroke {
+  stroke: #b3144d;
   fill: none;
 }
 
-.emotion-18 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5149,93 +4609,43 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
   -webkit-box-flex-wrap: nowrap;
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
-}
-
-.emotion-20 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 2rem;
-  padding: 0 0.5rem;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 0.5rem;
-  border-radius: 0.25rem;
-  box-sizing: border-box;
-  width: 2rem;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 0.875rem;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 1.25rem;
-  paragraph-spacing: 0;
-  text-case: none;
-  background: none;
-  border: none;
-  color: #3f4250;
-}
-
-.emotion-20:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-20:active {
-  box-shadow: 0px 0px 0px 3px #151a2d5c;
-}
-
-.emotion-20:hover,
-.emotion-20:active {
-  background: #e9eaeb;
-  color: #222638;
+  padding: 0 1rem;
+  border-left: 1px solid;
+  border-color: inherit;
 }
 
 .emotion-22 {
   vertical-align: middle;
-  fill: currentColor;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  fill: #3f4250;
+  height: 20px;
+  width: 20px;
+  min-width: 20px;
+  min-height: 20px;
 }
 
 .emotion-22 .fillStroke {
-  stroke: currentColor;
+  stroke: #3f4250;
   fill: none;
 }
 
-.emotion-25 {
-  font-size: 1rem;
+.emotion-24 {
+  color: #b3144d;
+  font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
+  font-weight: 400;
   letter-spacing: 0;
-  line-height: 1.5rem;
+  line-height: 1rem;
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
-  text-transform: capitalize;
 }
 
 <div
@@ -5245,899 +4655,2739 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
       class="emotion-0 emotion-1"
     >
       <div
-        class="react-datepicker-wrapper"
+        aria-controls=":rc:"
+        aria-describedby=":rc:"
+        class="emotion-2 emotion-3"
+        tabindex="0"
       >
         <div
-          class="react-datepicker__input-container"
+          class="emotion-4 emotion-5"
         >
           <div
-            class="react-datepicker-ignore-onclickoutside emotion-2 emotion-3"
+            class="emotion-6 emotion-5"
           >
             <div
-              class="emotion-4 emotion-3"
+              class="emotion-8 emotion-5"
             >
-              <div
-                class="emotion-6 emotion-3"
-              >
-                <label
-                  class="emotion-8 emotion-9"
-                  for=":r1g:"
-                >
-                  Date
-                </label>
-              </div>
-            </div>
-            <div>
-              <div
+              <label
                 class="emotion-10 emotion-11"
-                data-disabled="false"
-                data-error="false"
-                data-readonly="false"
-                data-success="false"
-              >
-                <input
-                  aria-invalid="false"
-                  class="emotion-12 emotion-13"
-                  data-size="large"
-                  id=":r1g:"
-                  type="text"
-                  value=""
-                />
-                <div
-                  class="emotion-14 emotion-15"
-                >
-                  <svg
-                    class="emotion-16 emotion-17"
-                    viewBox="0 0 20 20"
-                  >
-                    <path
-                      d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                    />
-                    <path
-                      clip-rule="evenodd"
-                      d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-              </div>
+                for=":rd:"
+              >
+                Date
+              </label>
             </div>
           </div>
-        </div>
-      </div>
-      <div
-        class="react-datepicker__tab-loop"
-      >
-        <div
-          class="react-datepicker__tab-loop__start"
-          tabindex="0"
-        />
-        <div
-          class="react-datepicker-popper"
-          data-placement="bottom-start"
-          style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 10px);"
-        >
-          <div
-            style="display: contents;"
-          >
+          <div>
             <div
-              aria-label="Choose Date"
-              aria-modal="true"
-              class="react-datepicker calendar"
-              role="dialog"
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-error="true"
+              data-readonly="false"
+              data-success="false"
             >
-              <span
-                aria-live="polite"
-                class="react-datepicker__aria-live"
-                role="alert"
+              <input
+                aria-invalid="true"
+                autocomplete="false"
+                class="emotion-14 emotion-15"
+                data-size="large"
+                id=":rd:"
+                type="text"
+                value=""
               />
               <div
-                class="react-datepicker__month-container"
+                class="emotion-16 emotion-17"
               >
-                <div
-                  class="react-datepicker__header react-datepicker__header--custom"
+                <svg
+                  class="emotion-18 emotion-19"
+                  viewBox="0 0 20 20"
                 >
-                  <div
-                    class="emotion-18 emotion-3"
-                  >
-                    <button
-                      class="emotion-20 emotion-21"
-                      type="button"
-                    >
-                      <svg
-                        class="emotion-22 emotion-23"
-                        viewBox="0 0 16 16"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.53 4.22a.75.75 0 0 1 0 1.06L7.81 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </button>
-                    <p
-                      class="emotion-24 emotion-25 emotion-9"
-                    >
-                      enero de 2021
-                    </p>
-                    <button
-                      class="emotion-20 emotion-21"
-                      type="button"
-                    >
-                      <svg
-                        class="emotion-22 emotion-23"
-                        viewBox="0 0 16 16"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                  <div
-                    class="react-datepicker__day-names"
-                  >
-                    <div
-                      aria-label="lunes"
-                      class="react-datepicker__day-name"
-                    >
-                      lu
-                    </div>
-                    <div
-                      aria-label="martes"
-                      class="react-datepicker__day-name"
-                    >
-                      ma
-                    </div>
-                    <div
-                      aria-label="miércoles"
-                      class="react-datepicker__day-name"
-                    >
-                      mi
-                    </div>
-                    <div
-                      aria-label="jueves"
-                      class="react-datepicker__day-name"
-                    >
-                      ju
-                    </div>
-                    <div
-                      aria-label="viernes"
-                      class="react-datepicker__day-name"
-                    >
-                      vi
-                    </div>
-                    <div
-                      aria-label="sábado"
-                      class="react-datepicker__day-name"
-                    >
-                      sá
-                    </div>
-                    <div
-                      aria-label="domingo"
-                      class="react-datepicker__day-name"
-                    >
-                      do
-                    </div>
-                  </div>
-                </div>
-                <div
-                  aria-label="Month enero, 2021"
-                  class="react-datepicker__month"
-                  role="listbox"
+                  <path
+                    clip-rule="evenodd"
+                    d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0m-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5m0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </div>
+              <div
+                class="emotion-20 emotion-21"
+              >
+                <svg
+                  class="emotion-22 emotion-19"
+                  viewBox="0 0 20 20"
                 >
-                  <div
-                    class="react-datepicker__week"
-                  >
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose lunes, 28 de diciembre de 2020"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--028 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      28
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose martes, 29 de diciembre de 2020"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--029 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      29
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose miércoles, 30 de diciembre de 2020"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--030 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      30
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose jueves, 31 de diciembre de 2020"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--031 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      31
-                    </div>
-                    <div
-                      aria-current="date"
-                      aria-disabled="false"
-                      aria-label="Choose viernes, 1 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--001 react-datepicker__day--keyboard-selected react-datepicker__day--today"
-                      role="option"
-                      tabindex="0"
-                      title=""
-                    >
-                      1
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose sábado, 2 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--002 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      2
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose domingo, 3 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--003 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      3
-                    </div>
-                  </div>
-                  <div
-                    class="react-datepicker__week"
-                  >
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose lunes, 4 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--004"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      4
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose martes, 5 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--005"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      5
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose miércoles, 6 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--006"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      6
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose jueves, 7 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--007"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      7
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose viernes, 8 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--008"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      8
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose sábado, 9 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--009 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      9
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose domingo, 10 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--010 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      10
-                    </div>
-                  </div>
-                  <div
-                    class="react-datepicker__week"
-                  >
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose lunes, 11 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--011"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      11
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose martes, 12 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--012"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      12
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose miércoles, 13 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--013"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      13
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose jueves, 14 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--014"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      14
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose viernes, 15 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--015"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      15
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose sábado, 16 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--016 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      16
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose domingo, 17 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--017 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      17
-                    </div>
-                  </div>
-                  <div
-                    class="react-datepicker__week"
-                  >
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose lunes, 18 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--018"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      18
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose martes, 19 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--019"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      19
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose miércoles, 20 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--020"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      20
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose jueves, 21 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--021"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      21
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose viernes, 22 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--022"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      22
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose sábado, 23 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--023 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      23
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose domingo, 24 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--024 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      24
-                    </div>
-                  </div>
-                  <div
-                    class="react-datepicker__week"
-                  >
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose lunes, 25 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--025"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      25
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose martes, 26 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--026"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      26
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose miércoles, 27 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--027"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      27
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose jueves, 28 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--028"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      28
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose viernes, 29 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--029"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      29
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose sábado, 30 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--030 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      30
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose domingo, 31 de enero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--031 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      31
-                    </div>
-                  </div>
-                  <div
-                    class="react-datepicker__week"
-                  >
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose lunes, 1 de febrero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--001 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      1
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose martes, 2 de febrero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--002 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      2
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose miércoles, 3 de febrero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--003 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      3
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose jueves, 4 de febrero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--004 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      4
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose viernes, 5 de febrero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--005 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      5
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose sábado, 6 de febrero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--006 react-datepicker__day--weekend react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      6
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose domingo, 7 de febrero de 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--007 react-datepicker__day--weekend react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      7
-                    </div>
-                  </div>
-                </div>
+                  <path
+                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
               </div>
             </div>
           </div>
+          <p
+            class="emotion-24 emotion-11"
+          >
+            error
+          </p>
         </div>
-        <div
-          class="react-datepicker__tab-loop__end"
-          tabindex="0"
-        />
       </div>
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
+exports[`DateInput > renders correctly error disabled 1`] = `
 <DocumentFragment>
   .emotion-0 {
   width: 100%;
 }
 
-.emotion-0 div.react-datepicker-wrapper {
-  display: block;
+.emotion-2 {
+  display: inherit;
 }
 
-.emotion-0 div.react-datepicker__input-container {
-  display: block;
+.emotion-2[data-container-full-width="true"] {
+  width: 100%;
 }
 
-.emotion-0 div.react-datepicker__triangle {
-  display: none;
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
 }
 
-.emotion-0 div.react-datepicker__month-container {
-  padding: 1rem;
-  width: 20rem;
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
 }
 
-.emotion-0 .react-datepicker-popper {
-  z-index: 1000;
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
 }
 
-.emotion-0 .calendar {
+.emotion-10 {
+  color: #222638;
+  font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
-  border-color: #e9eaeb;
-  background-color: #ffffff;
-  box-shadow:0: 0px 4px 8px 0px #22263829;
-  1: 0px 8px 24px 0px #2226383d;
-}
-
-.emotion-0 .calendar .react-datepicker__header {
-  color: #3f4250;
-  background-color: #ffffff;
-  border-bottom: none;
-  text-align: inherit;
-  display: block;
-  padding-top: 0;
-  position: inherit;
-}
-
-.emotion-0 .calendar .react-datepicker__triangle {
-  border-bottom-color: #f9f9fa;
-}
-
-.emotion-0 .calendar .react-datepicker__month {
-  margin: 0;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
-.emotion-0 .calendar .react-datepicker__day-names {
-  margin-top: 0.5rem;
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  height: 3rem;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
+  border-radius: 0.25rem;
 }
 
-.emotion-0 .calendar .react-datepicker__day-name {
-  font-family: Inter,Asap,sans-serif;
+.emotion-12>.emotion-15 {
   color: #3f4250;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  text-align: center;
-  margin: 0.25rem;
-  text-transform: capitalize;
 }
 
-.emotion-0 .calendar .react-datepicker__day,
-.emotion-0 .calendar .react-datepicker__month {
+.emotion-12>.emotion-15::-webkit-input-placeholder {
   color: #727683;
-  font-weight: 500;
-  font-size: 1rem;
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
 }
 
-.emotion-0 .calendar .react-datepicker__day {
-  width: 2rem;
-  height: 2rem;
+.emotion-12>.emotion-15::-moz-placeholder {
+  color: #727683;
 }
 
-.emotion-0 .calendar .react-datepicker__month-text {
-  height: 2rem;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+.emotion-12>.emotion-15:-ms-input-placeholder {
+  color: #727683;
 }
 
-.emotion-0 .calendar .react-datepicker__day--outside-month {
-  color: #b5b7bd;
-  font-weight: 500;
+.emotion-12>.emotion-15::placeholder {
+  color: #727683;
+}
+
+.emotion-12[data-success='true'] {
+  border-color: #22674e;
+}
+
+.emotion-12[data-error='true'] {
+  border-color: #b3144d;
+}
+
+.emotion-12[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+}
+
+.emotion-12[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+}
+
+.emotion-12[data-disabled='true']>.emotion-15 {
+  color: #b5b7bd;
+}
+
+.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
+  color: #b5b7bd;
+}
+
+.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
+  color: #b5b7bd;
+}
+
+.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
+  color: #b5b7bd;
+}
+
+.emotion-12[data-disabled='true']>.emotion-15::placeholder {
+  color: #b5b7bd;
+}
+
+.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
+}
+
+.emotion-14 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  border: none;
+  outline: none;
+  height: 100%;
+  width: 100%;
+  padding-left: 1rem;
+  background: transparent;
+  font-size: 0.875rem;
+}
+
+.emotion-14[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-0 .calendar .react-datepicker__day--selected,
-.emotion-0 .calendar .react-datepicker__month-text--selected {
-  color: #ffffff;
-  background-color: #8c40ef;
+.emotion-14[data-size='small'] {
+  padding-left: 0.5rem;
 }
 
-.emotion-0 .calendar .react-datepicker__day--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--selected:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--selected:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
+.emotion-16 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding: 0 1rem;
 }
 
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range {
-  color: #641cb3;
-  background-color: #f1eefc;
+.emotion-18 {
+  vertical-align: middle;
+  fill: #ffbbd3;
+  height: 16px;
+  width: 16px;
+  min-width: 16px;
+  min-height: 16px;
 }
 
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
+.emotion-18 .fillStroke {
+  stroke: #ffbbd3;
+  fill: none;
 }
 
-.emotion-0 .calendar .react-datepicker__day--in-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-range {
-  color: #641cb3;
-  background-color: #f1eefc;
+.emotion-20 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding: 0 1rem;
+  border-left: 1px solid;
+  border-color: inherit;
 }
 
-.emotion-0 .calendar .react-datepicker__day--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
+.emotion-22 {
+  vertical-align: middle;
+  fill: #b5b7bd;
+  height: 20px;
+  width: 20px;
+  min-width: 20px;
+  min-height: 20px;
 }
 
-.emotion-0 .calendar .react-datepicker__day--range-start,
-.emotion-0 .calendar .react-datepicker__month-text--range-start {
-  color: #ffffff;
-  background-color: #8c40ef;
+.emotion-22 .fillStroke {
+  stroke: #b5b7bd;
+  fill: none;
 }
 
-.emotion-0 .calendar .react-datepicker__day--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-start:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-start:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
+.emotion-24 {
+  color: #ffbbd3;
+  font-size: 0.75rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
-.emotion-0 .calendar .react-datepicker__day--range-end,
-.emotion-0 .calendar .react-datepicker__month-text--range-end {
-  color: #ffffff;
-  background-color: #8c40ef;
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <div
+        aria-controls=":rh:"
+        aria-describedby=":rh:"
+        class="emotion-2 emotion-3"
+        tabindex="0"
+      >
+        <div
+          class="emotion-4 emotion-5"
+        >
+          <div
+            class="emotion-6 emotion-5"
+          >
+            <div
+              class="emotion-8 emotion-5"
+            >
+              <label
+                class="emotion-10 emotion-11"
+                for=":ri:"
+              >
+                Date
+              </label>
+            </div>
+          </div>
+          <div>
+            <div
+              class="emotion-12 emotion-13"
+              data-disabled="true"
+              data-error="true"
+              data-readonly="false"
+              data-success="false"
+            >
+              <input
+                aria-invalid="true"
+                autocomplete="false"
+                class="emotion-14 emotion-15"
+                data-size="large"
+                disabled=""
+                id=":ri:"
+                type="text"
+                value=""
+              />
+              <div
+                class="emotion-16 emotion-17"
+              >
+                <svg
+                  class="emotion-18 emotion-19"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0m-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5m0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </div>
+              <div
+                class="emotion-20 emotion-21"
+              >
+                <svg
+                  class="emotion-22 emotion-19"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <p
+            class="emotion-24 emotion-11"
+          >
+            error
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > renders correctly error disabled required 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  width: 100%;
 }
 
-.emotion-0 .calendar .react-datepicker__day--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-end:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-end:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
+.emotion-2 {
+  display: inherit;
 }
 
-.emotion-0 .calendar .react-datepicker__day--keyboard-selected,
-.emotion-0 .calendar .react-datepicker__month-text--keyboard-selected {
-  color: #ffffff;
-  background-color: #8c40ef;
+.emotion-2[data-container-full-width="true"] {
+  width: 100%;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
 }
 
-.emotion-0 .calendar .react-datepicker__day:hover,
-.emotion-0 .calendar .react-datepicker__month-text:hover {
-  color: #222638;
-  background-color: #e9eaeb;
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-10 {
+  color: #222638;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-12 {
+  vertical-align: middle;
+  fill: #b3144d;
+  height: 8px;
+  width: 8px;
+  min-width: 8px;
+  min-height: 8px;
+}
+
+.emotion-12 .fillStroke {
+  stroke: #b3144d;
+  fill: none;
+}
+
+.emotion-14 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  height: 3rem;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
+  border-radius: 0.25rem;
+}
+
+.emotion-14>.emotion-17 {
+  color: #3f4250;
+}
+
+.emotion-14>.emotion-17::-webkit-input-placeholder {
+  color: #727683;
+}
+
+.emotion-14>.emotion-17::-moz-placeholder {
+  color: #727683;
+}
+
+.emotion-14>.emotion-17:-ms-input-placeholder {
+  color: #727683;
+}
+
+.emotion-14>.emotion-17::placeholder {
+  color: #727683;
+}
+
+.emotion-14[data-success='true'] {
+  border-color: #22674e;
+}
+
+.emotion-14[data-error='true'] {
+  border-color: #b3144d;
+}
+
+.emotion-14[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+}
+
+.emotion-14[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+}
+
+.emotion-14[data-disabled='true']>.emotion-17 {
+  color: #b5b7bd;
+}
+
+.emotion-14[data-disabled='true']>.emotion-17::-webkit-input-placeholder {
+  color: #b5b7bd;
+}
+
+.emotion-14[data-disabled='true']>.emotion-17::-moz-placeholder {
+  color: #b5b7bd;
+}
+
+.emotion-14[data-disabled='true']>.emotion-17:-ms-input-placeholder {
+  color: #b5b7bd;
+}
+
+.emotion-14[data-disabled='true']>.emotion-17::placeholder {
+  color: #b5b7bd;
+}
+
+.emotion-14:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
+}
+
+.emotion-16 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  border: none;
+  outline: none;
+  height: 100%;
+  width: 100%;
+  padding-left: 1rem;
+  background: transparent;
+  font-size: 0.875rem;
+}
+
+.emotion-16[data-size='large'] {
+  font-size: 1rem;
+}
+
+.emotion-16[data-size='small'] {
+  padding-left: 0.5rem;
+}
+
+.emotion-18 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding: 0 1rem;
+}
+
+.emotion-20 {
+  vertical-align: middle;
+  fill: #ffbbd3;
+  height: 16px;
+  width: 16px;
+  min-width: 16px;
+  min-height: 16px;
+}
+
+.emotion-20 .fillStroke {
+  stroke: #ffbbd3;
+  fill: none;
+}
+
+.emotion-22 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding: 0 1rem;
+  border-left: 1px solid;
+  border-color: inherit;
+}
+
+.emotion-24 {
+  vertical-align: middle;
+  fill: #b5b7bd;
+  height: 20px;
+  width: 20px;
+  min-width: 20px;
+  min-height: 20px;
+}
+
+.emotion-24 .fillStroke {
+  stroke: #b5b7bd;
+  fill: none;
+}
+
+.emotion-26 {
+  color: #ffbbd3;
+  font-size: 0.75rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <div
+        aria-controls=":rm:"
+        aria-describedby=":rm:"
+        class="emotion-2 emotion-3"
+        tabindex="0"
+      >
+        <div
+          class="emotion-4 emotion-5"
+        >
+          <div
+            class="emotion-6 emotion-5"
+          >
+            <div
+              class="emotion-8 emotion-5"
+            >
+              <label
+                class="emotion-10 emotion-11"
+                for=":rn:"
+              >
+                Date
+              </label>
+              <svg
+                class="emotion-12 emotion-13"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  d="M10 2h4l-.79 7.91 6.45-4.64 2 3.46L14.42 12l7.24 3.27-2 3.46-6.45-4.64L14 22h-4l.79-7.91-6.45 4.64-2-3.46L9.58 12 2.34 8.73l2-3.46 6.45 4.64z"
+                />
+              </svg>
+            </div>
+          </div>
+          <div>
+            <div
+              class="emotion-14 emotion-15"
+              data-disabled="true"
+              data-error="true"
+              data-readonly="false"
+              data-success="false"
+            >
+              <input
+                aria-invalid="true"
+                autocomplete="false"
+                class="emotion-16 emotion-17"
+                data-size="large"
+                disabled=""
+                id=":rn:"
+                required=""
+                type="text"
+                value=""
+              />
+              <div
+                class="emotion-18 emotion-19"
+              >
+                <svg
+                  class="emotion-20 emotion-13"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0m-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5m0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </div>
+              <div
+                class="emotion-22 emotion-23"
+              >
+                <svg
+                  class="emotion-24 emotion-13"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <p
+            class="emotion-26 emotion-11"
+          >
+            error
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > renders correctly min-max 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  width: 100%;
+}
+
+.emotion-2 {
+  display: inherit;
+}
+
+.emotion-2[data-container-full-width="true"] {
+  width: 100%;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-10 {
+  color: #222638;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  height: 3rem;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
+  border-radius: 0.25rem;
+}
+
+.emotion-12>.emotion-15 {
+  color: #3f4250;
+}
+
+.emotion-12>.emotion-15::-webkit-input-placeholder {
+  color: #727683;
+}
+
+.emotion-12>.emotion-15::-moz-placeholder {
+  color: #727683;
+}
+
+.emotion-12>.emotion-15:-ms-input-placeholder {
+  color: #727683;
+}
+
+.emotion-12>.emotion-15::placeholder {
+  color: #727683;
+}
+
+.emotion-12[data-success='true'] {
+  border-color: #22674e;
+}
+
+.emotion-12[data-error='true'] {
+  border-color: #b3144d;
+}
+
+.emotion-12[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+}
+
+.emotion-12[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+}
+
+.emotion-12[data-disabled='true']>.emotion-15 {
+  color: #b5b7bd;
+}
+
+.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
+  color: #b5b7bd;
+}
+
+.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
+  color: #b5b7bd;
+}
+
+.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
+  color: #b5b7bd;
+}
+
+.emotion-12[data-disabled='true']>.emotion-15::placeholder {
+  color: #b5b7bd;
+}
+
+.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
+}
+
+.emotion-14 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  border: none;
+  outline: none;
+  height: 100%;
+  width: 100%;
+  padding-left: 1rem;
+  background: transparent;
+  font-size: 0.875rem;
+}
+
+.emotion-14[data-size='large'] {
+  font-size: 1rem;
+}
+
+.emotion-14[data-size='small'] {
+  padding-left: 0.5rem;
+}
+
+.emotion-16 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding: 0 1rem;
+  border-left: 1px solid;
+  border-color: inherit;
+}
+
+.emotion-18 {
+  vertical-align: middle;
+  fill: #3f4250;
+  height: 20px;
+  width: 20px;
+  min-width: 20px;
+  min-height: 20px;
+}
+
+.emotion-18 .fillStroke {
+  stroke: #3f4250;
+  fill: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <div
+        aria-controls=":rr:"
+        aria-describedby=":rr:"
+        class="emotion-2 emotion-3"
+        tabindex="0"
+      >
+        <div
+          class="emotion-4 emotion-5"
+        >
+          <div
+            class="emotion-6 emotion-5"
+          >
+            <div
+              class="emotion-8 emotion-5"
+            >
+              <label
+                class="emotion-10 emotion-11"
+                for=":rs:"
+              >
+                Date
+              </label>
+            </div>
+          </div>
+          <div>
+            <div
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-error="false"
+              data-readonly="false"
+              data-success="false"
+            >
+              <input
+                aria-invalid="false"
+                autocomplete="false"
+                class="emotion-14 emotion-15"
+                data-size="large"
+                id=":rs:"
+                type="text"
+                value=""
+              />
+              <div
+                class="emotion-16 emotion-17"
+              >
+                <svg
+                  class="emotion-18 emotion-19"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > renders correctly required 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  width: 100%;
+}
+
+.emotion-2 {
+  display: inherit;
+}
+
+.emotion-2[data-container-full-width="true"] {
+  width: 100%;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-10 {
+  color: #222638;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-12 {
+  vertical-align: middle;
+  fill: #b3144d;
+  height: 8px;
+  width: 8px;
+  min-width: 8px;
+  min-height: 8px;
+}
+
+.emotion-12 .fillStroke {
+  stroke: #b3144d;
+  fill: none;
+}
+
+.emotion-14 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  height: 3rem;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
+  border-radius: 0.25rem;
+}
+
+.emotion-14>.emotion-17 {
+  color: #3f4250;
+}
+
+.emotion-14>.emotion-17::-webkit-input-placeholder {
+  color: #727683;
+}
+
+.emotion-14>.emotion-17::-moz-placeholder {
+  color: #727683;
+}
+
+.emotion-14>.emotion-17:-ms-input-placeholder {
+  color: #727683;
+}
+
+.emotion-14>.emotion-17::placeholder {
+  color: #727683;
+}
+
+.emotion-14[data-success='true'] {
+  border-color: #22674e;
+}
+
+.emotion-14[data-error='true'] {
+  border-color: #b3144d;
+}
+
+.emotion-14[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+}
+
+.emotion-14[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+}
+
+.emotion-14[data-disabled='true']>.emotion-17 {
+  color: #b5b7bd;
+}
+
+.emotion-14[data-disabled='true']>.emotion-17::-webkit-input-placeholder {
+  color: #b5b7bd;
+}
+
+.emotion-14[data-disabled='true']>.emotion-17::-moz-placeholder {
+  color: #b5b7bd;
+}
+
+.emotion-14[data-disabled='true']>.emotion-17:-ms-input-placeholder {
+  color: #b5b7bd;
+}
+
+.emotion-14[data-disabled='true']>.emotion-17::placeholder {
+  color: #b5b7bd;
+}
+
+.emotion-14:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
+}
+
+.emotion-16 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  border: none;
+  outline: none;
+  height: 100%;
+  width: 100%;
+  padding-left: 1rem;
+  background: transparent;
+  font-size: 0.875rem;
+}
+
+.emotion-16[data-size='large'] {
+  font-size: 1rem;
+}
+
+.emotion-16[data-size='small'] {
+  padding-left: 0.5rem;
+}
+
+.emotion-18 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding: 0 1rem;
+  border-left: 1px solid;
+  border-color: inherit;
+}
+
+.emotion-20 {
+  vertical-align: middle;
+  fill: #3f4250;
+  height: 20px;
+  width: 20px;
+  min-width: 20px;
+  min-height: 20px;
+}
+
+.emotion-20 .fillStroke {
+  stroke: #3f4250;
+  fill: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <div
+        aria-controls=":r8:"
+        aria-describedby=":r8:"
+        class="emotion-2 emotion-3"
+        tabindex="0"
+      >
+        <div
+          class="emotion-4 emotion-5"
+        >
+          <div
+            class="emotion-6 emotion-5"
+          >
+            <div
+              class="emotion-8 emotion-5"
+            >
+              <label
+                class="emotion-10 emotion-11"
+                for=":r9:"
+              >
+                Date
+              </label>
+              <svg
+                class="emotion-12 emotion-13"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  d="M10 2h4l-.79 7.91 6.45-4.64 2 3.46L14.42 12l7.24 3.27-2 3.46-6.45-4.64L14 22h-4l.79-7.91-6.45 4.64-2-3.46L9.58 12 2.34 8.73l2-3.46 6.45 4.64z"
+                />
+              </svg>
+            </div>
+          </div>
+          <div>
+            <div
+              class="emotion-14 emotion-15"
+              data-disabled="false"
+              data-error="false"
+              data-readonly="false"
+              data-success="false"
+            >
+              <input
+                aria-invalid="false"
+                autocomplete="false"
+                class="emotion-16 emotion-17"
+                data-size="large"
+                id=":r9:"
+                required=""
+                type="text"
+                value=""
+              />
+              <div
+                class="emotion-18 emotion-19"
+              >
+                <svg
+                  class="emotion-20 emotion-13"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > renders correctly with date-fns locale es 1`] = `
+<DocumentFragment>
+  @keyframes animation-0 {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0px, 4px, 0);
+    -moz-transform: translate3d(0px, 4px, 0);
+    -ms-transform: translate3d(0px, 4px, 0);
+    transform: translate3d(0px, 4px, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translate3d(0px, 4px, 0);
+    -moz-transform: translate3d(0px, 4px, 0);
+    -ms-transform: translate3d(0px, 4px, 0);
+    transform: translate3d(0px, 4px, 0);
+  }
+}
+
+.emotion-0 {
+  width: 100%;
+}
+
+.emotion-2 {
+  display: inherit;
+}
+
+.emotion-2[data-container-full-width="true"] {
+  width: 100%;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-10 {
+  color: #222638;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  height: 3rem;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
+  border-radius: 0.25rem;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+  border: 1px solid #8c40ef;
+}
+
+.emotion-12>.emotion-15 {
+  color: #3f4250;
+}
+
+.emotion-12>.emotion-15::-webkit-input-placeholder {
+  color: #727683;
+}
+
+.emotion-12>.emotion-15::-moz-placeholder {
+  color: #727683;
+}
+
+.emotion-12>.emotion-15:-ms-input-placeholder {
+  color: #727683;
+}
+
+.emotion-12>.emotion-15::placeholder {
+  color: #727683;
+}
+
+.emotion-12[data-success='true'] {
+  border-color: #22674e;
+}
+
+.emotion-12[data-error='true'] {
+  border-color: #b3144d;
+}
+
+.emotion-12[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+}
+
+.emotion-12[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+}
+
+.emotion-12[data-disabled='true']>.emotion-15 {
+  color: #b5b7bd;
+}
+
+.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
+  color: #b5b7bd;
+}
+
+.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
+  color: #b5b7bd;
+}
+
+.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
+  color: #b5b7bd;
+}
+
+.emotion-12[data-disabled='true']>.emotion-15::placeholder {
+  color: #b5b7bd;
+}
+
+.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
+}
+
+.emotion-14 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  border: none;
+  outline: none;
+  height: 100%;
+  width: 100%;
+  padding-left: 1rem;
+  background: transparent;
+  font-size: 0.875rem;
+}
+
+.emotion-14[data-size='large'] {
+  font-size: 1rem;
+}
+
+.emotion-14[data-size='small'] {
+  padding-left: 0.5rem;
+}
+
+.emotion-16 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding: 0 1rem;
+  border-left: 1px solid;
+  border-color: inherit;
+}
+
+.emotion-18 {
+  vertical-align: middle;
+  fill: #3f4250;
+  height: 20px;
+  width: 20px;
+  min-width: 20px;
+  min-height: 20px;
+}
+
+.emotion-18 .fillStroke {
+  stroke: #3f4250;
+  fill: none;
+}
+
+.emotion-21 {
+  background: #151a2d;
+  color: #ffffff;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  text-align: center;
+  position: absolute;
+  max-width: 264px;
+  overflow-wrap: break-word;
+  font-size: 0.8rem;
+  inset: 0 auto auto 0;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  z-index: 1;
+  -webkit-transform: translate3d(0px, 4px, 0);
+  -moz-transform: translate3d(0px, 4px, 0);
+  -ms-transform: translate3d(0px, 4px, 0);
+  transform: translate3d(0px, 4px, 0);
+  width: 100%;
+  background-color: #ffffff;
+  color: #3f4250;
+  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
+  padding: 1rem;
+  border-radius: 0.25rem;
+}
+
+.emotion-21[data-animated="true"] {
+  -webkit-animation: 0ms animation-0 forwards;
+  animation: 0ms animation-0 forwards;
+}
+
+.emotion-21[data-has-arrow="true"]::after {
+  content: " ";
+  position: absolute;
+  top: -5px;
+  left: 0px;
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+  margin-left: -8px;
+  border-width: 8px;
+  border-style: solid;
+  border-color: #151a2d transparent transparent transparent;
+  pointer-events: none;
+}
+
+.emotion-21[data-visible-in-dom="false"] {
+  display: none;
+}
+
+.emotion-23 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 1rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-25 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-27 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: 1.5rem;
+  padding: 0 0.25rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0.25rem;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  width: 1.5rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  outline-offset: 2px;
+  white-space: nowrap;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  paragraph-spacing: 0;
+  text-case: none;
+  background: none;
+  border: none;
+  color: #3f4250;
+}
+
+.emotion-27:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-27:active {
+  box-shadow: 0px 0px 0px 3px #151a2d5c;
+}
+
+.emotion-27:hover,
+.emotion-27:active {
+  background: #e9eaeb;
+  color: #222638;
+}
+
+.emotion-29 {
+  vertical-align: middle;
+  fill: currentColor;
+  height: 16px;
+  width: 16px;
+  min-width: 16px;
+  min-height: 16px;
+}
+
+.emotion-29 .fillStroke {
+  stroke: currentColor;
+  fill: none;
+}
+
+.emotion-32 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: inline-block;
+  text-transform: lowercase;
+}
+
+.emotion-32::first-letter {
+  text-transform: uppercase;
+}
+
+.emotion-38 {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.5rem;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+}
+
+.emotion-62 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: 3rem;
+  padding: 0 1rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  width: auto;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  outline-offset: 2px;
+  white-space: nowrap;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  paragraph-spacing: 0;
+  text-case: none;
+  background: none;
+  border: none;
+  color: #3f4250;
+  height: 1.5625rem;
+  width: 100%;
+  padding: 0;
+}
+
+.emotion-62:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-62:active {
+  box-shadow: 0px 0px 0px 3px #151a2d5c;
+}
+
+.emotion-62:hover,
+.emotion-62:active {
+  background: #e9eaeb;
+  color: #222638;
+}
+
+.emotion-64 {
+  color: #b5b7bd;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-84 {
+  color: #727683;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <div
+        aria-controls=":r41:"
+        aria-describedby=":r41:"
+        class="emotion-2 emotion-3"
+        tabindex="0"
+      >
+        <div
+          class="emotion-4 emotion-5"
+        >
+          <div
+            class="emotion-6 emotion-5"
+          >
+            <div
+              class="emotion-8 emotion-5"
+            >
+              <label
+                class="emotion-10 emotion-11"
+                for=":r42:"
+              >
+                Date
+              </label>
+            </div>
+          </div>
+          <div>
+            <div
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-error="false"
+              data-readonly="false"
+              data-success="false"
+            >
+              <input
+                aria-invalid="false"
+                autocomplete="false"
+                class="emotion-14 emotion-15"
+                data-size="large"
+                id=":r42:"
+                type="text"
+                value=""
+              />
+              <div
+                class="emotion-16 emotion-17"
+              >
+                <svg
+                  class="emotion-18 emotion-19"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="emotion-20 emotion-21 emotion-22"
+          data-animated="false"
+          data-has-arrow="false"
+          id=":r41:"
+          role="dialog"
+          style="opacity: 1;"
+        >
+          <div
+            class="emotion-23 emotion-5"
+          >
+            <div
+              class="emotion-25 emotion-5"
+            >
+              <button
+                class="emotion-27 emotion-28"
+                data-testid="previous-month"
+                type="button"
+              >
+                <svg
+                  class="emotion-29 emotion-30"
+                  viewBox="0 0 16 16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M10.53 4.22a.75.75 0 0 1 0 1.06L7.81 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </button>
+              <span
+                class="emotion-31 emotion-32 emotion-11"
+              >
+                noviembre 2024
+              </span>
+              <button
+                class="emotion-27 emotion-28"
+                data-testid="next-month"
+                type="button"
+              >
+                <svg
+                  class="emotion-29 emotion-30"
+                  viewBox="0 0 16 16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </button>
+            </div>
+            <div
+              class="emotion-38 emotion-39"
+            >
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                lu
+              </p>
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                ma
+              </p>
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                mi
+              </p>
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                ju
+              </p>
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                vi
+              </p>
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                sá
+              </p>
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                do
+              </p>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayLastMonth"
+                  >
+                    28
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayLastMonth"
+                  >
+                    29
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayLastMonth"
+                  >
+                    30
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayLastMonth"
+                  >
+                    31
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    1
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    2
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    3
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    4
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    5
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    6
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    7
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    8
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    9
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    10
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    11
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    12
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    13
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    14
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    15
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    16
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    17
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    18
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    19
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    20
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    21
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    22
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    23
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    24
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    25
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    26
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    27
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    28
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    29
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    30
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    1
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    2
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    3
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    4
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    5
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    6
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    7
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    8
+                  </span>
+                </div>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
+<DocumentFragment>
+  @keyframes animation-0 {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0px, 4px, 0);
+    -moz-transform: translate3d(0px, 4px, 0);
+    -ms-transform: translate3d(0px, 4px, 0);
+    transform: translate3d(0px, 4px, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translate3d(0px, 4px, 0);
+    -moz-transform: translate3d(0px, 4px, 0);
+    -ms-transform: translate3d(0px, 4px, 0);
+    transform: translate3d(0px, 4px, 0);
+  }
+}
+
+.emotion-0 {
+  width: 100%;
 }
 
-.emotion-0 .calendar .react-datepicker__day--disabled,
-.emotion-0 .calendar .react-datepicker__month-text--disabled {
-  color: #b5b7bd;
+.emotion-2 {
+  display: inherit;
 }
 
-.emotion-0 .calendar .react-datepicker__day--disabled:hover,
-.emotion-0 .calendar .react-datepicker__month-text--disabled:hover {
-  color: #b5b7bd;
-  background-color: transparent;
+.emotion-2[data-container-full-width="true"] {
+  width: 100%;
 }
 
-.emotion-2 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6160,7 +7410,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6183,7 +7433,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
+.emotion-8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6206,7 +7456,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-8 {
+.emotion-10 {
   color: #222638;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -6218,7 +7468,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   text-decoration: none;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6234,69 +7484,69 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   border: 1px solid #8c40ef;
 }
 
-.emotion-10>.emotion-13 {
+.emotion-12>.emotion-15 {
   color: #3f4250;
 }
 
-.emotion-10>.emotion-13::-webkit-input-placeholder {
+.emotion-12>.emotion-15::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13::-moz-placeholder {
+.emotion-12>.emotion-15::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13:-ms-input-placeholder {
+.emotion-12>.emotion-15:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13::placeholder {
+.emotion-12>.emotion-15::placeholder {
   color: #727683;
 }
 
-.emotion-10[data-success='true'] {
+.emotion-12[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-10[data-error='true'] {
+.emotion-12[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-10[data-readonly='true'] {
+.emotion-12[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-10[data-disabled='true'] {
+.emotion-12[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13 {
+.emotion-12[data-disabled='true']>.emotion-15 {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::-webkit-input-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::-moz-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13:-ms-input-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-12 {
+.emotion-14 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -6309,15 +7559,15 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-12[data-size='large'] {
+.emotion-14[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-12[data-size='small'] {
+.emotion-14[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-14 {
+.emotion-16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6343,21 +7593,96 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   border-color: inherit;
 }
 
-.emotion-16 {
+.emotion-18 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 1em;
-  width: 1em;
-  min-width: 1em;
-  min-height: 1em;
+  height: 20px;
+  width: 20px;
+  min-width: 20px;
+  min-height: 20px;
 }
 
-.emotion-16 .fillStroke {
+.emotion-18 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-18 {
+.emotion-21 {
+  background: #151a2d;
+  color: #ffffff;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  text-align: center;
+  position: absolute;
+  max-width: 264px;
+  overflow-wrap: break-word;
+  font-size: 0.8rem;
+  inset: 0 auto auto 0;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  z-index: 1;
+  -webkit-transform: translate3d(0px, 4px, 0);
+  -moz-transform: translate3d(0px, 4px, 0);
+  -ms-transform: translate3d(0px, 4px, 0);
+  transform: translate3d(0px, 4px, 0);
+  width: 100%;
+  background-color: #ffffff;
+  color: #3f4250;
+  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
+  padding: 1rem;
+  border-radius: 0.25rem;
+}
+
+.emotion-21[data-animated="true"] {
+  -webkit-animation: 0ms animation-0 forwards;
+  animation: 0ms animation-0 forwards;
+}
+
+.emotion-21[data-has-arrow="true"]::after {
+  content: " ";
+  position: absolute;
+  top: -5px;
+  left: 0px;
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+  margin-left: -8px;
+  border-width: 8px;
+  border-style: solid;
+  border-color: #151a2d transparent transparent transparent;
+  pointer-events: none;
+}
+
+.emotion-21[data-visible-in-dom="false"] {
+  display: none;
+}
+
+.emotion-23 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 1rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6366,10 +7691,10 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
@@ -6377,22 +7702,23 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
+  width: 100%;
 }
 
-.emotion-20 {
+.emotion-27 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: 2rem;
-  padding: 0 0.5rem;
+  height: 1.5rem;
+  padding: 0 0.25rem;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  gap: 0.5rem;
+  gap: 0.25rem;
   border-radius: 0.25rem;
   box-sizing: border-box;
-  width: 2rem;
+  width: 1.5rem;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -6418,22 +7744,22 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   color: #3f4250;
 }
 
-.emotion-20:hover {
+.emotion-27:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-20:active {
+.emotion-27:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-20:hover,
-.emotion-20:active {
+.emotion-27:hover,
+.emotion-27:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-22 {
+.emotion-29 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -6442,12 +7768,114 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   min-height: 16px;
 }
 
-.emotion-22 .fillStroke {
+.emotion-29 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
 
-.emotion-25 {
+.emotion-32 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: inline-block;
+  text-transform: lowercase;
+}
+
+.emotion-32::first-letter {
+  text-transform: uppercase;
+}
+
+.emotion-38 {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.5rem;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+}
+
+.emotion-62 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: 3rem;
+  padding: 0 1rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  width: auto;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  outline-offset: 2px;
+  white-space: nowrap;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  paragraph-spacing: 0;
+  text-case: none;
+  background: none;
+  border: none;
+  color: #3f4250;
+  height: 1.5625rem;
+  width: 100%;
+  padding: 0;
+}
+
+.emotion-62:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-62:active {
+  box-shadow: 0px 0px 0px 3px #151a2d5c;
+}
+
+.emotion-62:hover,
+.emotion-62:active {
+  background: #e9eaeb;
+  color: #222638;
+}
+
+.emotion-64 {
+  color: #b5b7bd;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-84 {
+  color: #727683;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -6456,7 +7884,6 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
-  text-transform: capitalize;
 }
 
 <div
@@ -6466,687 +7893,676 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
       class="emotion-0 emotion-1"
     >
       <div
-        class="react-datepicker-wrapper"
+        aria-controls=":rv:"
+        aria-describedby=":rv:"
+        class="emotion-2 emotion-3"
+        tabindex="0"
       >
         <div
-          class="react-datepicker__input-container"
+          class="emotion-4 emotion-5"
         >
           <div
-            class="react-datepicker-ignore-onclickoutside emotion-2 emotion-3"
+            class="emotion-6 emotion-5"
           >
             <div
-              class="emotion-4 emotion-3"
+              class="emotion-8 emotion-5"
+            >
+              <label
+                class="emotion-10 emotion-11"
+                for=":r10:"
+              >
+                Date
+              </label>
+            </div>
+          </div>
+          <div>
+            <div
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-error="false"
+              data-readonly="false"
+              data-success="false"
             >
+              <input
+                aria-invalid="false"
+                autocomplete="false"
+                class="emotion-14 emotion-15"
+                data-size="large"
+                id=":r10:"
+                type="text"
+                value=""
+              />
               <div
-                class="emotion-6 emotion-3"
+                class="emotion-16 emotion-17"
+              >
+                <svg
+                  class="emotion-18 emotion-19"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="emotion-20 emotion-21 emotion-22"
+          data-animated="false"
+          data-has-arrow="false"
+          id=":rv:"
+          role="dialog"
+          style="opacity: 1;"
+        >
+          <div
+            class="emotion-23 emotion-5"
+          >
+            <div
+              class="emotion-25 emotion-5"
+            >
+              <button
+                class="emotion-27 emotion-28"
+                data-testid="previous-month"
+                type="button"
+              >
+                <svg
+                  class="emotion-29 emotion-30"
+                  viewBox="0 0 16 16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M10.53 4.22a.75.75 0 0 1 0 1.06L7.81 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </button>
+              <span
+                class="emotion-31 emotion-32 emotion-11"
+              >
+                novembre 2024
+              </span>
+              <button
+                class="emotion-27 emotion-28"
+                data-testid="next-month"
+                type="button"
+              >
+                <svg
+                  class="emotion-29 emotion-30"
+                  viewBox="0 0 16 16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </button>
+            </div>
+            <div
+              class="emotion-38 emotion-39"
+            >
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                lu
+              </p>
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                ma
+              </p>
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                me
+              </p>
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                je
+              </p>
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                ve
+              </p>
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                sa
+              </p>
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                di
+              </p>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayLastMonth"
+                  >
+                    28
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayLastMonth"
+                  >
+                    29
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayLastMonth"
+                  >
+                    30
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayLastMonth"
+                  >
+                    31
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    1
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    2
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    3
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    4
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
               >
-                <label
-                  class="emotion-8 emotion-9"
-                  for=":r18:"
-                >
-                  Date
-                </label>
-              </div>
-            </div>
-            <div>
-              <div
-                class="emotion-10 emotion-11"
-                data-disabled="false"
-                data-error="false"
-                data-readonly="false"
-                data-success="false"
-              >
-                <input
-                  aria-invalid="false"
-                  class="emotion-12 emotion-13"
-                  data-size="large"
-                  id=":r18:"
-                  type="text"
-                  value=""
-                />
-                <div
-                  class="emotion-14 emotion-15"
-                >
-                  <svg
-                    class="emotion-16 emotion-17"
-                    viewBox="0 0 20 20"
-                  >
-                    <path
-                      d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                    />
-                    <path
-                      clip-rule="evenodd"
-                      d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    5
+                  </span>
                 </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="react-datepicker__tab-loop"
-      >
-        <div
-          class="react-datepicker__tab-loop__start"
-          tabindex="0"
-        />
-        <div
-          class="react-datepicker-popper"
-          data-placement="bottom-start"
-          style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 10px);"
-        >
-          <div
-            style="display: contents;"
-          >
-            <div
-              aria-label="Choose Date"
-              aria-modal="true"
-              class="react-datepicker calendar"
-              role="dialog"
-            >
-              <span
-                aria-live="polite"
-                class="react-datepicker__aria-live"
-                role="alert"
-              />
-              <div
-                class="react-datepicker__month-container"
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
               >
-                <div
-                  class="react-datepicker__header react-datepicker__header--custom"
-                >
-                  <div
-                    class="emotion-18 emotion-3"
-                  >
-                    <button
-                      class="emotion-20 emotion-21"
-                      type="button"
-                    >
-                      <svg
-                        class="emotion-22 emotion-23"
-                        viewBox="0 0 16 16"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.53 4.22a.75.75 0 0 1 0 1.06L7.81 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </button>
-                    <p
-                      class="emotion-24 emotion-25 emotion-9"
-                    >
-                      janvier 2021
-                    </p>
-                    <button
-                      class="emotion-20 emotion-21"
-                      type="button"
-                    >
-                      <svg
-                        class="emotion-22 emotion-23"
-                        viewBox="0 0 16 16"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                  <div
-                    class="react-datepicker__day-names"
-                  >
-                    <div
-                      aria-label="lundi"
-                      class="react-datepicker__day-name"
-                    >
-                      lu
-                    </div>
-                    <div
-                      aria-label="mardi"
-                      class="react-datepicker__day-name"
-                    >
-                      ma
-                    </div>
-                    <div
-                      aria-label="mercredi"
-                      class="react-datepicker__day-name"
-                    >
-                      me
-                    </div>
-                    <div
-                      aria-label="jeudi"
-                      class="react-datepicker__day-name"
-                    >
-                      je
-                    </div>
-                    <div
-                      aria-label="vendredi"
-                      class="react-datepicker__day-name"
-                    >
-                      ve
-                    </div>
-                    <div
-                      aria-label="samedi"
-                      class="react-datepicker__day-name"
-                    >
-                      sa
-                    </div>
-                    <div
-                      aria-label="dimanche"
-                      class="react-datepicker__day-name"
-                    >
-                      di
-                    </div>
-                  </div>
-                </div>
-                <div
-                  aria-label="Month janvier, 2021"
-                  class="react-datepicker__month"
-                  role="listbox"
-                >
-                  <div
-                    class="react-datepicker__week"
-                  >
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose lundi 28 décembre 2020"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--028 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      28
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose mardi 29 décembre 2020"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--029 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      29
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose mercredi 30 décembre 2020"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--030 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      30
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose jeudi 31 décembre 2020"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--031 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      31
-                    </div>
-                    <div
-                      aria-current="date"
-                      aria-disabled="false"
-                      aria-label="Choose vendredi 1 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--001 react-datepicker__day--keyboard-selected react-datepicker__day--today"
-                      role="option"
-                      tabindex="0"
-                      title=""
-                    >
-                      1
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose samedi 2 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--002 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      2
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose dimanche 3 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--003 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      3
-                    </div>
-                  </div>
-                  <div
-                    class="react-datepicker__week"
-                  >
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose lundi 4 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--004"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      4
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose mardi 5 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--005"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      5
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose mercredi 6 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--006"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      6
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose jeudi 7 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--007"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      7
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose vendredi 8 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--008"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      8
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose samedi 9 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--009 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      9
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose dimanche 10 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--010 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      10
-                    </div>
-                  </div>
-                  <div
-                    class="react-datepicker__week"
-                  >
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose lundi 11 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--011"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      11
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose mardi 12 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--012"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      12
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose mercredi 13 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--013"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      13
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose jeudi 14 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--014"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      14
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose vendredi 15 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--015"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      15
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose samedi 16 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--016 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      16
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose dimanche 17 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--017 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      17
-                    </div>
-                  </div>
-                  <div
-                    class="react-datepicker__week"
-                  >
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose lundi 18 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--018"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      18
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose mardi 19 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--019"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      19
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose mercredi 20 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--020"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      20
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose jeudi 21 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--021"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      21
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose vendredi 22 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--022"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      22
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose samedi 23 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--023 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      23
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose dimanche 24 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--024 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      24
-                    </div>
-                  </div>
-                  <div
-                    class="react-datepicker__week"
-                  >
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose lundi 25 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--025"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      25
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose mardi 26 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--026"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      26
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose mercredi 27 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--027"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      27
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose jeudi 28 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--028"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      28
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose vendredi 29 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--029"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      29
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose samedi 30 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--030 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      30
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose dimanche 31 janvier 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--031 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      31
-                    </div>
-                  </div>
-                  <div
-                    class="react-datepicker__week"
-                  >
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose lundi 1 février 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--001 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      1
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose mardi 2 février 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--002 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      2
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose mercredi 3 février 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--003 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      3
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose jeudi 4 février 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--004 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      4
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose vendredi 5 février 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--005 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      5
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose samedi 6 février 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--006 react-datepicker__day--weekend react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      6
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose dimanche 7 février 2021"
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--007 react-datepicker__day--weekend react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      7
-                    </div>
-                  </div>
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    6
+                  </span>
                 </div>
-              </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    7
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    8
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    9
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    10
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    11
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    12
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    13
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    14
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    15
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    16
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    17
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    18
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    19
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    20
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    21
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    22
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    23
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    24
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    25
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    26
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    27
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    28
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    29
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    30
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    1
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    2
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    3
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    4
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    5
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    6
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    7
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    8
+                  </span>
+                </div>
+              </button>
             </div>
           </div>
         </div>
-        <div
-          class="react-datepicker__tab-loop__end"
-          tabindex="0"
-        />
       </div>
     </div>
   </div>
@@ -7155,210 +8571,37 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
 
 exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
 <DocumentFragment>
-  .emotion-0 {
+  @keyframes animation-0 {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0px, 4px, 0);
+    -moz-transform: translate3d(0px, 4px, 0);
+    -ms-transform: translate3d(0px, 4px, 0);
+    transform: translate3d(0px, 4px, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translate3d(0px, 4px, 0);
+    -moz-transform: translate3d(0px, 4px, 0);
+    -ms-transform: translate3d(0px, 4px, 0);
+    transform: translate3d(0px, 4px, 0);
+  }
+}
+
+.emotion-0 {
   width: 100%;
 }
 
-.emotion-0 div.react-datepicker-wrapper {
-  display: block;
-}
-
-.emotion-0 div.react-datepicker__input-container {
-  display: block;
-}
-
-.emotion-0 div.react-datepicker__triangle {
-  display: none;
-}
-
-.emotion-0 div.react-datepicker__month-container {
-  padding: 1rem;
-  width: 20rem;
-}
-
-.emotion-0 .react-datepicker-popper {
-  z-index: 1000;
-}
-
-.emotion-0 .calendar {
-  font-family: Inter,Asap,sans-serif;
-  border-color: #e9eaeb;
-  background-color: #ffffff;
-  box-shadow:0: 0px 4px 8px 0px #22263829;
-  1: 0px 8px 24px 0px #2226383d;
-}
-
-.emotion-0 .calendar .react-datepicker__header {
-  color: #3f4250;
-  background-color: #ffffff;
-  border-bottom: none;
-  text-align: inherit;
-  display: block;
-  padding-top: 0;
-  position: inherit;
-}
-
-.emotion-0 .calendar .react-datepicker__triangle {
-  border-bottom-color: #f9f9fa;
-}
-
-.emotion-0 .calendar .react-datepicker__month {
-  margin: 0;
-}
-
-.emotion-0 .calendar .react-datepicker__day-names {
-  margin-top: 0.5rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-0 .calendar .react-datepicker__day-name {
-  font-family: Inter,Asap,sans-serif;
-  color: #3f4250;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  text-align: center;
-  margin: 0.25rem;
-  text-transform: capitalize;
-}
-
-.emotion-0 .calendar .react-datepicker__day,
-.emotion-0 .calendar .react-datepicker__month {
-  color: #727683;
-  font-weight: 500;
-  font-size: 1rem;
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
-.emotion-0 .calendar .react-datepicker__day {
-  width: 2rem;
-  height: 2rem;
-}
-
-.emotion-0 .calendar .react-datepicker__month-text {
-  height: 2rem;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-0 .calendar .react-datepicker__day--outside-month {
-  color: #b5b7bd;
-  font-weight: 500;
-  font-size: 1rem;
-}
-
-.emotion-0 .calendar .react-datepicker__day--selected,
-.emotion-0 .calendar .react-datepicker__month-text--selected {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--selected:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--selected:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range {
-  color: #641cb3;
-  background-color: #f1eefc;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-range {
-  color: #641cb3;
-  background-color: #f1eefc;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-start,
-.emotion-0 .calendar .react-datepicker__month-text--range-start {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-start:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-start:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-end,
-.emotion-0 .calendar .react-datepicker__month-text--range-end {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-end:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-end:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--keyboard-selected,
-.emotion-0 .calendar .react-datepicker__month-text--keyboard-selected {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day:hover,
-.emotion-0 .calendar .react-datepicker__month-text:hover {
-  color: #222638;
-  background-color: #e9eaeb;
-}
-
-.emotion-0 .calendar .react-datepicker__day--disabled,
-.emotion-0 .calendar .react-datepicker__month-text--disabled {
-  color: #b5b7bd;
+.emotion-2 {
+  display: inherit;
 }
 
-.emotion-0 .calendar .react-datepicker__day--disabled:hover,
-.emotion-0 .calendar .react-datepicker__month-text--disabled:hover {
-  color: #b5b7bd;
-  background-color: transparent;
+.emotion-2[data-container-full-width="true"] {
+  width: 100%;
 }
 
-.emotion-2 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7381,7 +8624,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7404,7 +8647,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
+.emotion-8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7427,7 +8670,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-8 {
+.emotion-10 {
   color: #222638;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -7439,7 +8682,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   text-decoration: none;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7455,69 +8698,69 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   border: 1px solid #8c40ef;
 }
 
-.emotion-10>.emotion-13 {
+.emotion-12>.emotion-15 {
   color: #3f4250;
 }
 
-.emotion-10>.emotion-13::-webkit-input-placeholder {
+.emotion-12>.emotion-15::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13::-moz-placeholder {
+.emotion-12>.emotion-15::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13:-ms-input-placeholder {
+.emotion-12>.emotion-15:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13::placeholder {
+.emotion-12>.emotion-15::placeholder {
   color: #727683;
 }
 
-.emotion-10[data-success='true'] {
+.emotion-12[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-10[data-error='true'] {
+.emotion-12[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-10[data-readonly='true'] {
+.emotion-12[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-10[data-disabled='true'] {
+.emotion-12[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13 {
+.emotion-12[data-disabled='true']>.emotion-15 {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::-webkit-input-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::-moz-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13:-ms-input-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-12 {
+.emotion-14 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -7530,15 +8773,15 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-12[data-size='large'] {
+.emotion-14[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-12[data-size='small'] {
+.emotion-14[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-14 {
+.emotion-16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7564,21 +8807,96 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   border-color: inherit;
 }
 
-.emotion-16 {
+.emotion-18 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 1em;
-  width: 1em;
-  min-width: 1em;
-  min-height: 1em;
+  height: 20px;
+  width: 20px;
+  min-width: 20px;
+  min-height: 20px;
 }
 
-.emotion-16 .fillStroke {
+.emotion-18 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-18 {
+.emotion-21 {
+  background: #151a2d;
+  color: #ffffff;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  text-align: center;
+  position: absolute;
+  max-width: 264px;
+  overflow-wrap: break-word;
+  font-size: 0.8rem;
+  inset: 0 auto auto 0;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  z-index: 1;
+  -webkit-transform: translate3d(0px, 4px, 0);
+  -moz-transform: translate3d(0px, 4px, 0);
+  -ms-transform: translate3d(0px, 4px, 0);
+  transform: translate3d(0px, 4px, 0);
+  width: 100%;
+  background-color: #ffffff;
+  color: #3f4250;
+  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
+  padding: 1rem;
+  border-radius: 0.25rem;
+}
+
+.emotion-21[data-animated="true"] {
+  -webkit-animation: 0ms animation-0 forwards;
+  animation: 0ms animation-0 forwards;
+}
+
+.emotion-21[data-has-arrow="true"]::after {
+  content: " ";
+  position: absolute;
+  top: -5px;
+  left: 0px;
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+  margin-left: -8px;
+  border-width: 8px;
+  border-style: solid;
+  border-color: #151a2d transparent transparent transparent;
+  pointer-events: none;
+}
+
+.emotion-21[data-visible-in-dom="false"] {
+  display: none;
+}
+
+.emotion-23 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 1rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7587,10 +8905,10 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
@@ -7598,22 +8916,23 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
+  width: 100%;
 }
 
-.emotion-20 {
+.emotion-27 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: 2rem;
-  padding: 0 0.5rem;
+  height: 1.5rem;
+  padding: 0 0.25rem;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  gap: 0.5rem;
+  gap: 0.25rem;
   border-radius: 0.25rem;
   box-sizing: border-box;
-  width: 2rem;
+  width: 1.5rem;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -7639,22 +8958,22 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   color: #3f4250;
 }
 
-.emotion-20:hover {
+.emotion-27:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-20:active {
+.emotion-27:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-20:hover,
-.emotion-20:active {
+.emotion-27:hover,
+.emotion-27:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-22 {
+.emotion-29 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -7663,12 +8982,114 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   min-height: 16px;
 }
 
-.emotion-22 .fillStroke {
+.emotion-29 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
 
-.emotion-25 {
+.emotion-32 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: inline-block;
+  text-transform: lowercase;
+}
+
+.emotion-32::first-letter {
+  text-transform: uppercase;
+}
+
+.emotion-38 {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.5rem;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+}
+
+.emotion-62 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: 3rem;
+  padding: 0 1rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  width: auto;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  outline-offset: 2px;
+  white-space: nowrap;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  paragraph-spacing: 0;
+  text-case: none;
+  background: none;
+  border: none;
+  color: #3f4250;
+  height: 1.5625rem;
+  width: 100%;
+  padding: 0;
+}
+
+.emotion-62:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-62:active {
+  box-shadow: 0px 0px 0px 3px #151a2d5c;
+}
+
+.emotion-62:hover,
+.emotion-62:active {
+  background: #e9eaeb;
+  color: #222638;
+}
+
+.emotion-64 {
+  color: #b5b7bd;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-84 {
+  color: #727683;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -7677,7 +9098,6 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
-  text-transform: capitalize;
 }
 
 <div
@@ -7687,687 +9107,676 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
       class="emotion-0 emotion-1"
     >
       <div
-        class="react-datepicker-wrapper"
+        aria-controls=":r73:"
+        aria-describedby=":r73:"
+        class="emotion-2 emotion-3"
+        tabindex="0"
       >
         <div
-          class="react-datepicker__input-container"
+          class="emotion-4 emotion-5"
         >
           <div
-            class="react-datepicker-ignore-onclickoutside emotion-2 emotion-3"
+            class="emotion-6 emotion-5"
           >
             <div
-              class="emotion-4 emotion-3"
+              class="emotion-8 emotion-5"
             >
+              <label
+                class="emotion-10 emotion-11"
+                for=":r74:"
+              >
+                Date
+              </label>
+            </div>
+          </div>
+          <div>
+            <div
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-error="false"
+              data-readonly="false"
+              data-success="false"
+            >
+              <input
+                aria-invalid="false"
+                autocomplete="false"
+                class="emotion-14 emotion-15"
+                data-size="large"
+                id=":r74:"
+                type="text"
+                value=""
+              />
               <div
-                class="emotion-6 emotion-3"
+                class="emotion-16 emotion-17"
+              >
+                <svg
+                  class="emotion-18 emotion-19"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="emotion-20 emotion-21 emotion-22"
+          data-animated="false"
+          data-has-arrow="false"
+          id=":r73:"
+          role="dialog"
+          style="opacity: 1;"
+        >
+          <div
+            class="emotion-23 emotion-5"
+          >
+            <div
+              class="emotion-25 emotion-5"
+            >
+              <button
+                class="emotion-27 emotion-28"
+                data-testid="previous-month"
+                type="button"
+              >
+                <svg
+                  class="emotion-29 emotion-30"
+                  viewBox="0 0 16 16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M10.53 4.22a.75.75 0 0 1 0 1.06L7.81 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </button>
+              <span
+                class="emotion-31 emotion-32 emotion-11"
+              >
+                ноябрь 2024
+              </span>
+              <button
+                class="emotion-27 emotion-28"
+                data-testid="next-month"
+                type="button"
+              >
+                <svg
+                  class="emotion-29 emotion-30"
+                  viewBox="0 0 16 16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </button>
+            </div>
+            <div
+              class="emotion-38 emotion-39"
+            >
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                по
+              </p>
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                вт
+              </p>
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                ср
+              </p>
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                че
+              </p>
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                пя
+              </p>
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                су
+              </p>
+              <p
+                class="emotion-40 emotion-32 emotion-11"
+              >
+                во
+              </p>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayLastMonth"
+                  >
+                    28
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayLastMonth"
+                  >
+                    29
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayLastMonth"
+                  >
+                    30
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayLastMonth"
+                  >
+                    31
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    1
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    2
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    3
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    4
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    5
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    6
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    7
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    8
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    9
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    10
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    11
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    12
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    13
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    14
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
               >
-                <label
-                  class="emotion-8 emotion-9"
-                  for=":r1o:"
-                >
-                  Date
-                </label>
-              </div>
-            </div>
-            <div>
-              <div
-                class="emotion-10 emotion-11"
-                data-disabled="false"
-                data-error="false"
-                data-readonly="false"
-                data-success="false"
-              >
-                <input
-                  aria-invalid="false"
-                  class="emotion-12 emotion-13"
-                  data-size="large"
-                  id=":r1o:"
-                  type="text"
-                  value=""
-                />
-                <div
-                  class="emotion-14 emotion-15"
-                >
-                  <svg
-                    class="emotion-16 emotion-17"
-                    viewBox="0 0 20 20"
-                  >
-                    <path
-                      d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                    />
-                    <path
-                      clip-rule="evenodd"
-                      d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    15
+                  </span>
                 </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="react-datepicker__tab-loop"
-      >
-        <div
-          class="react-datepicker__tab-loop__start"
-          tabindex="0"
-        />
-        <div
-          class="react-datepicker-popper"
-          data-placement="bottom-start"
-          style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 10px);"
-        >
-          <div
-            style="display: contents;"
-          >
-            <div
-              aria-label="Choose Date"
-              aria-modal="true"
-              class="react-datepicker calendar"
-              role="dialog"
-            >
-              <span
-                aria-live="polite"
-                class="react-datepicker__aria-live"
-                role="alert"
-              />
-              <div
-                class="react-datepicker__month-container"
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
               >
-                <div
-                  class="react-datepicker__header react-datepicker__header--custom"
-                >
-                  <div
-                    class="emotion-18 emotion-3"
-                  >
-                    <button
-                      class="emotion-20 emotion-21"
-                      type="button"
-                    >
-                      <svg
-                        class="emotion-22 emotion-23"
-                        viewBox="0 0 16 16"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.53 4.22a.75.75 0 0 1 0 1.06L7.81 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </button>
-                    <p
-                      class="emotion-24 emotion-25 emotion-9"
-                    >
-                      январь 2021 г.
-                    </p>
-                    <button
-                      class="emotion-20 emotion-21"
-                      type="button"
-                    >
-                      <svg
-                        class="emotion-22 emotion-23"
-                        viewBox="0 0 16 16"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                  <div
-                    class="react-datepicker__day-names"
-                  >
-                    <div
-                      aria-label="понедельник"
-                      class="react-datepicker__day-name"
-                    >
-                      пн
-                    </div>
-                    <div
-                      aria-label="вторник"
-                      class="react-datepicker__day-name"
-                    >
-                      вт
-                    </div>
-                    <div
-                      aria-label="среда"
-                      class="react-datepicker__day-name"
-                    >
-                      ср
-                    </div>
-                    <div
-                      aria-label="четверг"
-                      class="react-datepicker__day-name"
-                    >
-                      чт
-                    </div>
-                    <div
-                      aria-label="пятница"
-                      class="react-datepicker__day-name"
-                    >
-                      пт
-                    </div>
-                    <div
-                      aria-label="суббота"
-                      class="react-datepicker__day-name"
-                    >
-                      сб
-                    </div>
-                    <div
-                      aria-label="воскресенье"
-                      class="react-datepicker__day-name"
-                    >
-                      вс
-                    </div>
-                  </div>
-                </div>
-                <div
-                  aria-label="Month января, 2021"
-                  class="react-datepicker__month"
-                  role="listbox"
-                >
-                  <div
-                    class="react-datepicker__week"
-                  >
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose понедельник, 28 декабря 2020 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--028 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      28
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose вторник, 29 декабря 2020 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--029 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      29
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose среда, 30 декабря 2020 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--030 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      30
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose четверг, 31 декабря 2020 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--031 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      31
-                    </div>
-                    <div
-                      aria-current="date"
-                      aria-disabled="false"
-                      aria-label="Choose пятница, 1 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--001 react-datepicker__day--keyboard-selected react-datepicker__day--today"
-                      role="option"
-                      tabindex="0"
-                      title=""
-                    >
-                      1
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose суббота, 2 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--002 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      2
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose воскресенье, 3 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--003 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      3
-                    </div>
-                  </div>
-                  <div
-                    class="react-datepicker__week"
-                  >
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose понедельник, 4 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--004"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      4
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose вторник, 5 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--005"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      5
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose среда, 6 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--006"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      6
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose четверг, 7 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--007"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      7
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose пятница, 8 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--008"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      8
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose суббота, 9 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--009 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      9
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose воскресенье, 10 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--010 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      10
-                    </div>
-                  </div>
-                  <div
-                    class="react-datepicker__week"
-                  >
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose понедельник, 11 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--011"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      11
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose вторник, 12 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--012"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      12
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose среда, 13 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--013"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      13
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose четверг, 14 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--014"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      14
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose пятница, 15 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--015"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      15
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose суббота, 16 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--016 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      16
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose воскресенье, 17 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--017 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      17
-                    </div>
-                  </div>
-                  <div
-                    class="react-datepicker__week"
-                  >
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose понедельник, 18 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--018"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      18
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose вторник, 19 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--019"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      19
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose среда, 20 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--020"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      20
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose четверг, 21 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--021"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      21
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose пятница, 22 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--022"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      22
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose суббота, 23 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--023 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      23
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose воскресенье, 24 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--024 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      24
-                    </div>
-                  </div>
-                  <div
-                    class="react-datepicker__week"
-                  >
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose понедельник, 25 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--025"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      25
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose вторник, 26 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--026"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      26
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose среда, 27 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--027"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      27
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose четверг, 28 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--028"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      28
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose пятница, 29 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--029"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      29
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose суббота, 30 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--030 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      30
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose воскресенье, 31 января 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--031 react-datepicker__day--weekend"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      31
-                    </div>
-                  </div>
-                  <div
-                    class="react-datepicker__week"
-                  >
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose понедельник, 1 февраля 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--001 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      1
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose вторник, 2 февраля 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--002 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      2
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose среда, 3 февраля 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--003 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      3
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose четверг, 4 февраля 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--004 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      4
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose пятница, 5 февраля 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--005 react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      5
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose суббота, 6 февраля 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--006 react-datepicker__day--weekend react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      6
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-label="Choose воскресенье, 7 февраля 2021 г."
-                      aria-selected="false"
-                      class="react-datepicker__day react-datepicker__day--007 react-datepicker__day--weekend react-datepicker__day--outside-month"
-                      role="option"
-                      tabindex="-1"
-                      title=""
-                    >
-                      7
-                    </div>
-                  </div>
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    16
+                  </span>
                 </div>
-              </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    17
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    18
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    19
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    20
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    21
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    22
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    23
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    24
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    25
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    26
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    27
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    28
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    29
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-84 emotion-11"
+                  >
+                    30
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    1
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    2
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    3
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    4
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    5
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    6
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    7
+                  </span>
+                </div>
+              </button>
+              <button
+                class="emotion-61 emotion-62 emotion-28"
+                type="button"
+              >
+                <div>
+                  <span
+                    class="emotion-64 emotion-11"
+                    data-testid="dayNextMonth"
+                  >
+                    8
+                  </span>
+                </div>
+              </button>
             </div>
           </div>
         </div>
-        <div
-          class="react-datepicker__tab-loop__end"
-          tabindex="0"
-        />
       </div>
     </div>
   </div>
@@ -8380,206 +9789,15 @@ exports[`DateInput > renders correctly with default props 1`] = `
   width: 100%;
 }
 
-.emotion-0 div.react-datepicker-wrapper {
-  display: block;
-}
-
-.emotion-0 div.react-datepicker__input-container {
-  display: block;
-}
-
-.emotion-0 div.react-datepicker__triangle {
-  display: none;
-}
-
-.emotion-0 div.react-datepicker__month-container {
-  padding: 1rem;
-  width: 20rem;
-}
-
-.emotion-0 .react-datepicker-popper {
-  z-index: 1000;
-}
-
-.emotion-0 .calendar {
-  font-family: Inter,Asap,sans-serif;
-  border-color: #e9eaeb;
-  background-color: #ffffff;
-  box-shadow:0: 0px 4px 8px 0px #22263829;
-  1: 0px 8px 24px 0px #2226383d;
-}
-
-.emotion-0 .calendar .react-datepicker__header {
-  color: #3f4250;
-  background-color: #ffffff;
-  border-bottom: none;
-  text-align: inherit;
-  display: block;
-  padding-top: 0;
-  position: inherit;
-}
-
-.emotion-0 .calendar .react-datepicker__triangle {
-  border-bottom-color: #f9f9fa;
-}
-
-.emotion-0 .calendar .react-datepicker__month {
-  margin: 0;
-}
-
-.emotion-0 .calendar .react-datepicker__day-names {
-  margin-top: 0.5rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-0 .calendar .react-datepicker__day-name {
-  font-family: Inter,Asap,sans-serif;
-  color: #3f4250;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  text-align: center;
-  margin: 0.25rem;
-  text-transform: capitalize;
-}
-
-.emotion-0 .calendar .react-datepicker__day,
-.emotion-0 .calendar .react-datepicker__month {
-  color: #727683;
-  font-weight: 500;
-  font-size: 1rem;
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
-.emotion-0 .calendar .react-datepicker__day {
-  width: 2rem;
-  height: 2rem;
-}
-
-.emotion-0 .calendar .react-datepicker__month-text {
-  height: 2rem;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-0 .calendar .react-datepicker__day--outside-month {
-  color: #b5b7bd;
-  font-weight: 500;
-  font-size: 1rem;
-}
-
-.emotion-0 .calendar .react-datepicker__day--selected,
-.emotion-0 .calendar .react-datepicker__month-text--selected {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--selected[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--selected:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--selected:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range {
-  color: #641cb3;
-  background-color: #f1eefc;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-selecting-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-selecting-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-range,
-.emotion-0 .calendar .react-datepicker__month-text--in-range {
-  color: #641cb3;
-  background-color: #f1eefc;
-}
-
-.emotion-0 .calendar .react-datepicker__day--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--in-range[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--in-range:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--in-range:disabled {
-  color: #d8c5fc;
-  background-color: #f6f5fd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-start,
-.emotion-0 .calendar .react-datepicker__month-text--range-start {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-start[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-start:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-start:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-end,
-.emotion-0 .calendar .react-datepicker__month-text--range-end {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__month-text--range-end[aria-disabled="true"],
-.emotion-0 .calendar .react-datepicker__day--range-end:disabled,
-.emotion-0 .calendar .react-datepicker__month-text--range-end:disabled {
-  color: #ffffff;
-  background-color: #e5dbfd;
-}
-
-.emotion-0 .calendar .react-datepicker__day--keyboard-selected,
-.emotion-0 .calendar .react-datepicker__month-text--keyboard-selected {
-  color: #ffffff;
-  background-color: #8c40ef;
-}
-
-.emotion-0 .calendar .react-datepicker__day:hover,
-.emotion-0 .calendar .react-datepicker__month-text:hover {
-  color: #222638;
-  background-color: #e9eaeb;
-}
-
-.emotion-0 .calendar .react-datepicker__day--disabled,
-.emotion-0 .calendar .react-datepicker__month-text--disabled {
-  color: #b5b7bd;
+.emotion-2 {
+  display: inherit;
 }
 
-.emotion-0 .calendar .react-datepicker__day--disabled:hover,
-.emotion-0 .calendar .react-datepicker__month-text--disabled:hover {
-  color: #b5b7bd;
-  background-color: transparent;
+.emotion-2[data-container-full-width="true"] {
+  width: 100%;
 }
 
-.emotion-2 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8602,7 +9820,7 @@ exports[`DateInput > renders correctly with default props 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8625,7 +9843,7 @@ exports[`DateInput > renders correctly with default props 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
+.emotion-8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8648,7 +9866,7 @@ exports[`DateInput > renders correctly with default props 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-8 {
+.emotion-10 {
   color: #222638;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -8660,7 +9878,7 @@ exports[`DateInput > renders correctly with default props 1`] = `
   text-decoration: none;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8674,69 +9892,69 @@ exports[`DateInput > renders correctly with default props 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-10>.emotion-13 {
+.emotion-12>.emotion-15 {
   color: #3f4250;
 }
 
-.emotion-10>.emotion-13::-webkit-input-placeholder {
+.emotion-12>.emotion-15::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13::-moz-placeholder {
+.emotion-12>.emotion-15::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13:-ms-input-placeholder {
+.emotion-12>.emotion-15:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-10>.emotion-13::placeholder {
+.emotion-12>.emotion-15::placeholder {
   color: #727683;
 }
 
-.emotion-10[data-success='true'] {
+.emotion-12[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-10[data-error='true'] {
+.emotion-12[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-10[data-readonly='true'] {
+.emotion-12[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-10[data-disabled='true'] {
+.emotion-12[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13 {
+.emotion-12[data-disabled='true']>.emotion-15 {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::-webkit-input-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::-moz-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13:-ms-input-placeholder {
+.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10[data-disabled='true']>.emotion-13::placeholder {
+.emotion-12[data-disabled='true']>.emotion-15::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-12 {
+.emotion-14 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -8749,15 +9967,15 @@ exports[`DateInput > renders correctly with default props 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-12[data-size='large'] {
+.emotion-14[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-12[data-size='small'] {
+.emotion-14[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-14 {
+.emotion-16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8783,16 +10001,16 @@ exports[`DateInput > renders correctly with default props 1`] = `
   border-color: inherit;
 }
 
-.emotion-16 {
+.emotion-18 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 1em;
-  width: 1em;
-  min-width: 1em;
-  min-height: 1em;
+  height: 20px;
+  width: 20px;
+  min-width: 20px;
+  min-height: 20px;
 }
 
-.emotion-16 .fillStroke {
+.emotion-18 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
@@ -8804,62 +10022,62 @@ exports[`DateInput > renders correctly with default props 1`] = `
       class="emotion-0 emotion-1"
     >
       <div
-        class="react-datepicker-wrapper"
+        aria-controls=":r0:"
+        aria-describedby=":r0:"
+        class="emotion-2 emotion-3"
+        tabindex="0"
       >
         <div
-          class="react-datepicker__input-container"
+          class="emotion-4 emotion-5"
         >
           <div
-            class=" emotion-2 emotion-3"
+            class="emotion-6 emotion-5"
           >
             <div
-              class="emotion-4 emotion-3"
+              class="emotion-8 emotion-5"
             >
-              <div
-                class="emotion-6 emotion-3"
+              <label
+                class="emotion-10 emotion-11"
+                for=":r1:"
               >
-                <label
-                  class="emotion-8 emotion-9"
-                  for=":r2:"
-                >
-                  Date
-                </label>
-              </div>
+                Date
+              </label>
             </div>
-            <div>
+          </div>
+          <div>
+            <div
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-error="false"
+              data-readonly="false"
+              data-success="false"
+            >
+              <input
+                aria-invalid="false"
+                autocomplete="false"
+                class="emotion-14 emotion-15"
+                data-size="large"
+                id=":r1:"
+                name="test"
+                type="text"
+                value="1995-12-17T03:24:00.000Z"
+              />
               <div
-                class="emotion-10 emotion-11"
-                data-disabled="false"
-                data-error="false"
-                data-readonly="false"
-                data-success="false"
-              >
-                <input
-                  aria-invalid="false"
-                  class="emotion-12 emotion-13"
-                  data-size="large"
-                  id=":r2:"
-                  name="test"
-                  type="text"
-                  value="12/17/1995"
-                />
-                <div
-                  class="emotion-14 emotion-15"
+                class="emotion-16 emotion-17"
+              >
+                <svg
+                  class="emotion-18 emotion-19"
+                  viewBox="0 0 20 20"
                 >
-                  <svg
-                    class="emotion-16 emotion-17"
-                    viewBox="0 0 20 20"
-                  >
-                    <path
-                      d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                    />
-                    <path
-                      clip-rule="evenodd"
-                      d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
+                  <path
+                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
               </div>
             </div>
           </div>
diff --git a/packages/ui/src/components/DateInput/__tests__/index.test.tsx b/packages/ui/src/components/DateInput/__tests__/index.test.tsx
index 9213d331e9..3919cfab60 100644
--- a/packages/ui/src/components/DateInput/__tests__/index.test.tsx
+++ b/packages/ui/src/components/DateInput/__tests__/index.test.tsx
@@ -17,12 +17,10 @@ describe('DateInput', () => {
         onBlur={() => {}}
         onFocus={() => {}}
         locale={fr}
-        value={new Date('1995-12-17T03:24:00.000+00:00').toISOString()}
+        value={new Date('1995-12-17T03:24:00.000+00:00')}
         name="test"
         autoFocus={false}
-        format={value =>
-          value instanceof Date ? value.toISOString() : value?.toString()
-        }
+        format={value => (value instanceof Date ? value.toISOString() : value)}
       />,
     )
     expect(asFragment()).toMatchSnapshot()
@@ -113,6 +111,21 @@ describe('DateInput', () => {
     )
     expect(asFragment()).toMatchSnapshot()
   })
+  test('render correctly with showMonthYearPicker with default date', async () => {
+    const { asFragment } = renderWithTheme(
+      <DateInput
+        label="Date"
+        showMonthYearPicker
+        onChange={() => {}}
+        value={new Date('1995-02-11T03:24:00.000+00:00')}
+        placeholder="YYYY-MM-DD"
+      />,
+    )
+
+    const input = screen.getByPlaceholderText('YYYY-MM-DD')
+    await userEvent.click(input)
+    expect(asFragment()).toMatchSnapshot()
+  })
 
   test('render correctly with a range of date', () => {
     const { asFragment } = renderWithTheme(
@@ -127,7 +140,7 @@ describe('DateInput', () => {
     expect(asFragment()).toMatchSnapshot()
   })
 
-  test('render correctly with a array of dates to exclude', () => {
+  test('render correctly with a array of dates to exclude', async () => {
     const { asFragment } = renderWithTheme(
       <DateInput
         label="Date"
@@ -137,7 +150,224 @@ describe('DateInput', () => {
           new Date('1995-12-13T03:24:00.000+00:00'),
           new Date('1995-12-14T03:24:00.000+00:00'),
         ]}
+        placeholder="YYYY-MM-DD"
+        onChange={() => {}}
+      />,
+    )
+    const input = screen.getByPlaceholderText<HTMLInputElement>('YYYY-MM-DD')
+    await userEvent.click(input)
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('handle correctly click outside', async () => {
+    renderWithTheme(
+      <>
+        Outside
+        <DateInput label="Date" onChange={() => {}} placeholder="YYYY-MM-DD" />
+      </>,
+    )
+
+    const input = screen.getByPlaceholderText('YYYY-MM-DD')
+    await userEvent.click(input)
+    const calendar = screen.getByRole('dialog')
+    expect(calendar).toBeVisible()
+    await userEvent.click(screen.getByText('Outside'))
+    await userEvent.click(screen.getByText('Outside'))
+    expect(calendar).not.toBeVisible()
+  })
+
+  test('handle correctly click to change month', async () => {
+    renderWithTheme(
+      <>
+        Outside
+        <DateInput
+          label="Date"
+          onChange={() => {}}
+          placeholder="YYYY-MM-DD"
+          value={new Date('1995-12-11T03:24:00.000+00:00')}
+        />
+      </>,
+    )
+
+    const input = screen.getByPlaceholderText<HTMLInputElement>('YYYY-MM-DD')
+    await userEvent.click(input)
+    const calendar = screen.getByRole('dialog')
+    expect(calendar).toBeVisible()
+
+    const visibleMonth = screen.getByText(/December/i)
+    await userEvent.click(screen.getByTestId('previous-month'))
+    expect(visibleMonth.textContent).toContain('November')
+
+    await userEvent.click(screen.getByTestId('next-month'))
+    expect(visibleMonth.textContent).toContain('December')
+  })
+
+  test('handle correctly click to change year', async () => {
+    renderWithTheme(
+      <>
+        Outside
+        <DateInput
+          label="Date"
+          onChange={() => {}}
+          placeholder="YYYY-MM-DD"
+          value={new Date('1995-12-11T03:24:00.000+00:00')}
+          showMonthYearPicker
+        />
+      </>,
+    )
+
+    const input = screen.getByPlaceholderText<HTMLInputElement>('YYYY-MM-DD')
+    await userEvent.click(input)
+    const calendar = screen.getByRole('dialog')
+    expect(calendar).toBeVisible()
+
+    const visibleMonth = screen.getByText(/1995/i)
+    await userEvent.click(screen.getByTestId('previous-month'))
+    expect(visibleMonth.textContent).toContain('1994')
+
+    await userEvent.click(screen.getByTestId('next-month'))
+    expect(visibleMonth.textContent).toContain('1995')
+  })
+
+  test('handle correctly click on date', async () => {
+    renderWithTheme(
+      <DateInput
+        label="Date"
         onChange={() => {}}
+        placeholder="YYYY-MM-DD"
+        value={new Date('1995-12-11T03:24:00.000+00:00')}
+      />,
+    )
+
+    const input = screen.getByPlaceholderText<HTMLInputElement>('YYYY-MM-DD')
+    await userEvent.click(input)
+    const visibleMonth = screen.getByText(/December/i)
+    const calendar = screen.getByRole('dialog')
+    expect(calendar).toBeVisible()
+
+    await userEvent.click(screen.getByText('15'))
+    expect(input.value).toBe('1995/12/15')
+
+    const dayFromLastMonth = screen.getAllByText('30')[0] // the first element in this array is necessarily from previous month
+    await userEvent.click(dayFromLastMonth)
+    expect(visibleMonth.textContent).toContain('November')
+
+    const dayFromNextMonth = screen.getAllByText('1')[1]
+    await userEvent.click(dayFromNextMonth)
+    expect(visibleMonth.textContent).toContain('December')
+  })
+
+  test('handle correctly click on date range', async () => {
+    renderWithTheme(
+      <DateInput
+        label="Date"
+        onChange={() => {}}
+        placeholder="YYYY-MM-DD"
+        selectsRange
+        value={new Date('1995-02-11T03:24:00.000+00:00')}
+      />,
+    )
+
+    const input = screen.getByPlaceholderText<HTMLInputElement>('YYYY-MM-DD')
+    await userEvent.click(input)
+    const calendar = screen.getByRole('dialog')
+    expect(calendar).toBeVisible()
+
+    await userEvent.click(screen.getByText('15'))
+    expect(input.value).toBe('1995/02/15 – ')
+    const day = screen.getByText('27')
+
+    await userEvent.hover(day)
+    await userEvent.unhover(day)
+
+    await userEvent.click(day)
+    expect(input.value).toBe('1995/02/15 – 1995/02/27')
+
+    await userEvent.click(screen.getByText('31'))
+    expect(input.value).toBe('1995/01/31 – ')
+  })
+
+  test('render correctly with showMonthYearPicker with excluded months', async () => {
+    const { asFragment } = renderWithTheme(
+      <DateInput
+        label="Date"
+        showMonthYearPicker
+        onChange={() => {}}
+        value={new Date('1995-02-11T03:24:00.000+00:00')}
+        placeholder="YYYY-MM-DD"
+        excludeDates={[new Date('1995-10-01'), new Date('1995-02-01')]}
+      />,
+    )
+    const input = screen.getByPlaceholderText('YYYY-MM-DD')
+    await userEvent.click(input)
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('handle correctly click on date with showmonthYearPicker', async () => {
+    renderWithTheme(
+      <DateInput
+        label="Date"
+        onChange={() => {}}
+        placeholder="YYYY-MM-DD"
+        value={new Date('1995-12-11T03:24:00.000+00:00')}
+        showMonthYearPicker
+      />,
+    )
+
+    const input = screen.getByPlaceholderText<HTMLInputElement>('YYYY-MM-DD')
+    await userEvent.click(input)
+    const calendar = screen.getByRole('dialog')
+    expect(calendar).toBeVisible()
+
+    await userEvent.click(screen.getByText('Jan'))
+    expect(input.value).toBe('1995/01')
+  })
+
+  test('handle correctly click on date range with showMonthYearPicker', async () => {
+    renderWithTheme(
+      <DateInput
+        label="Date"
+        onChange={() => {}}
+        placeholder="YYYY-MM-DD"
+        selectsRange
+        showMonthYearPicker
+        value={new Date('1995-12-11T03:24:00.000+00:00')}
+      />,
+    )
+
+    const input = screen.getByPlaceholderText<HTMLInputElement>('YYYY-MM-DD')
+    await userEvent.click(input)
+    const calendar = screen.getByRole('dialog')
+    expect(calendar).toBeVisible()
+
+    await userEvent.click(screen.getByText('Aug'))
+    expect(input.value).toBe('1995/08 – ')
+    const month = screen.getByText('Feb')
+
+    await userEvent.hover(month)
+    await userEvent.unhover(month)
+
+    await userEvent.click(month)
+    expect(input.value).toBe('1995/02 – ')
+
+    await userEvent.click(screen.getByText('Sep'))
+    expect(input.value).toBe('1995/02 – 1995/09')
+  })
+
+  test('renders correctly custom format with range', () => {
+    const { asFragment } = renderWithTheme(
+      <DateInput
+        label="Date"
+        onChange={() => {}}
+        onBlur={() => {}}
+        onFocus={() => {}}
+        selectsRange
+        startDate={new Date('1995-12-11T03:24:00.000+00:00')}
+        endDate={new Date('1995-12-11T03:24:00.000+00:00')}
+        name="test"
+        autoFocus={false}
+        format={value => (value instanceof Date ? value.toISOString() : value)}
       />,
     )
     expect(asFragment()).toMatchSnapshot()
diff --git a/packages/ui/src/components/DateInputV2/CalendarDaily.tsx b/packages/ui/src/components/DateInput/components/CalendarDaily.tsx
similarity index 75%
rename from packages/ui/src/components/DateInputV2/CalendarDaily.tsx
rename to packages/ui/src/components/DateInput/components/CalendarDaily.tsx
index 75dff6984a..159bffcca8 100644
--- a/packages/ui/src/components/DateInputV2/CalendarDaily.tsx
+++ b/packages/ui/src/components/DateInput/components/CalendarDaily.tsx
@@ -1,31 +1,40 @@
 import styled from '@emotion/styled'
 import type { MouseEvent as MouseEventReact } from 'react'
 import { useContext, useState } from 'react'
-import { Button } from '../Button'
-import { Row } from '../Row'
-import { Text } from '../Text'
-import { DateInputContext } from './Context'
+import { Button } from '../../Button'
+import { Row } from '../../Row'
+import { Text } from '../../Text'
+import { DateInputContext } from '../Context'
+import { CALENDAR_WEEKS } from '../constants'
 import {
-  CALENDAR_WEEKS,
+  formatValue,
   getMonthDays,
   getMonthFirstDay,
   getNextMonth,
   getPreviousMonth,
   isSameDay,
-} from './helpers'
+} from '../helpers'
 
-const Day = styled(Button)`
-height: 26px;
+const ButtonDate = styled(Button)`
+height: ${({ theme }) => theme.sizing['312']};
 width: 100%;
 padding: 0;
-
-&.rangeButton {
-  background-color:${({ theme }) => theme.colors.primary.background};
-}
 `
-const DayName = styled(Text)`
-height: 26px;
+
+const RangeButton = styled(Button)`
+background-color: ${({ theme }) => theme.colors.primary.background};
+height: ${({ theme }) => theme.sizing['312']};
 width: 100%;
+padding: 0;
+`
+
+const CapitalizedText = styled(Text)`
+display: inline-block;
+text-transform: lowercase;
+
+&::first-letter {
+  text-transform: uppercase;
+}
 `
 
 export const Daily = ({ disabled }: { disabled: boolean }) => {
@@ -44,6 +53,8 @@ export const Daily = ({ disabled }: { disabled: boolean }) => {
     selectsRange,
     range,
     setRange,
+    setInputValue,
+    format,
   } = useContext(DateInputContext)
 
   const [rangeState, setRangeState] = useState<'start' | 'none' | 'done'>(
@@ -68,22 +79,25 @@ export const Daily = ({ disabled }: { disabled: boolean }) => {
   const previousMonthDays = getMonthDays(previousMonth, prevMonthYear)
 
   // Get the dates to be displayed from the previous month
-  const prevMonthDates = Array(daysFromPreviousMonth)
-    .keys()
-    .map((_, index) => ({
+  const prevMonthDates = Array.from(
+    { length: daysFromPreviousMonth },
+    (_, index) => ({
       day: index + 1 + (previousMonthDays - daysFromPreviousMonth),
       month: -1,
-    }))
+    }),
+  )
 
   // Get the dates to be displayed from the current month
-  const currentMonthDates = Array(monthDays)
-    .keys()
-    .map((_, index) => ({ day: index + 1, month: 0 }))
+  const currentMonthDates = Array.from({ length: monthDays }, (_, index) => ({
+    day: index + 1,
+    month: 0,
+  }))
 
   // Get the dates to be displayed from the next month
-  const nextMonthDates = Array(daysFromNextMonth)
-    .keys()
-    .map((_, index) => ({ day: index + 1, month: 1 }))
+  const nextMonthDates = Array.from(
+    { length: daysFromNextMonth },
+    (_, index) => ({ day: index + 1, month: 1 }),
+  )
 
   const allDaysToShow = [
     ...prevMonthDates,
@@ -94,9 +108,14 @@ export const Daily = ({ disabled }: { disabled: boolean }) => {
   return (
     <Row templateColumns="repeat(7, 1fr)" gap={1}>
       {Object.entries(DAYS).map(day => (
-        <DayName as="p" variant="bodyStrong" sentiment="neutral" key={day[0]}>
+        <CapitalizedText
+          as="p"
+          variant="bodyStrong"
+          sentiment="neutral"
+          key={day[0]}
+        >
           {day[1]}
-        </DayName>
+        </CapitalizedText>
       ))}
       {allDaysToShow.map(data => {
         const constructedDate = new Date(
@@ -162,6 +181,15 @@ export const Daily = ({ disabled }: { disabled: boolean }) => {
             if (rangeState === 'none') {
               setRange?.({ start: newDate, end: null })
               onChange?.([newDate, null], event)
+              setInputValue(
+                formatValue(
+                  null,
+                  { start: newDate, end: null },
+                  false,
+                  true,
+                  format,
+                ),
+              )
               setRangeState('start')
             }
 
@@ -169,10 +197,28 @@ export const Daily = ({ disabled }: { disabled: boolean }) => {
             else if (isAfterStartDate) {
               setRange?.({ start: range.start, end: newDate })
               onChange?.([range.start, newDate], event)
+              setInputValue(
+                formatValue(
+                  null,
+                  { start: range.start, end: newDate },
+                  false,
+                  true,
+                  format,
+                ),
+              )
               setRangeState('done')
             } else {
               // End date before start
               setRange?.({ start: newDate, end: null })
+              setInputValue(
+                formatValue(
+                  null,
+                  { start: newDate, end: null },
+                  false,
+                  true,
+                  format,
+                ),
+              )
               onChange?.([newDate, null], event)
             }
           }
@@ -185,12 +231,13 @@ export const Daily = ({ disabled }: { disabled: boolean }) => {
           return undefined
         }
 
+        const Day = isInHoveredRange ? RangeButton : ButtonDate
+
         return (
           <Day
             variant={isSelected || isInHoveredRange ? 'filled' : 'ghost'}
             sentiment={isSelected || isInHoveredRange ? 'primary' : 'neutral'}
             disabled={disabled || isExcluded || isOutsideRange}
-            className={isInHoveredRange ? 'rangeButton' : undefined}
             key={data.month === 0 ? data.day : data.day + 100}
             onClick={event => {
               if (!isExcluded && !isOutsideRange) {
@@ -201,6 +248,9 @@ export const Daily = ({ disabled }: { disabled: boolean }) => {
                 } else {
                   setValue(newDate)
                   onChange?.(newDate, event)
+                  setInputValue(
+                    formatValue(newDate, null, false, false, format),
+                  )
                 }
               }
             }}
@@ -208,7 +258,7 @@ export const Daily = ({ disabled }: { disabled: boolean }) => {
             onMouseLeave={() => setHoveredDate(null)}
           >
             <Text
-              as="p"
+              as="span"
               variant="bodyStrong"
               prominence={isSelected && !isInHoveredRange ? 'strong' : 'weak'}
               sentiment={isSelected || isInHoveredRange ? 'primary' : 'neutral'}
diff --git a/packages/ui/src/components/DateInputV2/CalendarMonthly.tsx b/packages/ui/src/components/DateInput/components/CalendarMonthly.tsx
similarity index 71%
rename from packages/ui/src/components/DateInputV2/CalendarMonthly.tsx
rename to packages/ui/src/components/DateInput/components/CalendarMonthly.tsx
index 53d768f322..05aa44d25c 100644
--- a/packages/ui/src/components/DateInputV2/CalendarMonthly.tsx
+++ b/packages/ui/src/components/DateInput/components/CalendarMonthly.tsx
@@ -1,19 +1,31 @@
 import styled from '@emotion/styled'
 import type { MouseEvent as MouseEventReact } from 'react'
 import { useContext, useState } from 'react'
-import { Button } from '../Button'
-import { Row } from '../Row'
-import { Text } from '../Text'
-import { DateInputContext } from './Context'
-import { isSameMonth } from './helpers'
+import { Button } from '../../Button'
+import { Row } from '../../Row'
+import { Text } from '../../Text'
+import { DateInputContext } from '../Context'
+import { formatValue, isSameMonth } from '../helpers'
 
-const Month = styled(Button)`
-height: 26px;
+const ButtonDate = styled(Button)`
+height: ${({ theme }) => theme.sizing['312']};
 width: 100%;
 padding: 0;
+`
+
+const RangeButton = styled(Button)`
+background-color: ${({ theme }) => theme.colors.primary.background};
+height: ${({ theme }) => theme.sizing['312']};
+width: 100%;
+padding: 0;
+`
+
+const CapitalizedText = styled(Text)`
+display: inline-block;
+text-transform: lowercase;
 
-&.rangeButton {
-  background-color:${({ theme }) => theme.colors.primary.background};
+&::first-letter {
+  text-transform: uppercase;
 }
 `
 
@@ -31,6 +43,8 @@ export const Monthly = ({ disabled }: { disabled: boolean }) => {
     maxDate,
     excludeDates,
     value,
+    setInputValue,
+    format,
   } = useContext(DateInputContext)
   const [rangeState, setRangeState] = useState<'start' | 'none' | 'done'>(
     range?.start ? 'start' : 'none',
@@ -78,6 +92,15 @@ export const Monthly = ({ disabled }: { disabled: boolean }) => {
             if (rangeState === 'none') {
               setRange?.({ start: newDate, end: null })
               onChange?.([newDate, null], event)
+              setInputValue(
+                formatValue(
+                  null,
+                  { start: newDate, end: null },
+                  true,
+                  true,
+                  format,
+                ),
+              )
               setRangeState('start')
             }
 
@@ -85,20 +108,38 @@ export const Monthly = ({ disabled }: { disabled: boolean }) => {
             else if (isAfterStartDate) {
               setRange?.({ start: range.start, end: newDate })
               onChange?.([range.start, newDate], event)
+              setInputValue(
+                formatValue(
+                  null,
+                  { start: range.start, end: newDate },
+                  true,
+                  true,
+                  format,
+                ),
+              )
               setRangeState('done')
             } else {
               // End date before start
               setRange?.({ start: newDate, end: null })
+              setInputValue(
+                formatValue(
+                  null,
+                  { start: newDate, end: null },
+                  true,
+                  true,
+                  format,
+                ),
+              )
               onChange?.([newDate, null], event)
             }
           }
         }
+        const Month = isInHoveredRange ? RangeButton : ButtonDate
 
         return (
           <Month
             variant={isSelected || isInHoveredRange ? 'filled' : 'ghost'}
             sentiment={isSelected || isInHoveredRange ? 'primary' : 'neutral'}
-            className={isInHoveredRange ? 'rangeButton' : undefined}
             disabled={disabled || isExcluded || isOutsideRange}
             key={month[0]}
             onClick={event => {
@@ -109,21 +150,24 @@ export const Monthly = ({ disabled }: { disabled: boolean }) => {
                   setMonthToShow(index + 1)
                   setValue(constructedDate)
                   onChange?.(constructedDate, event)
+                  setInputValue(
+                    formatValue(constructedDate, null, true, false, format),
+                  )
                 }
               }
             }}
             onMouseEnter={() => setHoveredDate(constructedDate)}
             onMouseLeave={() => setHoveredDate(null)}
           >
-            <Text
-              as="p"
+            <CapitalizedText
+              as="span"
               variant="bodyStrong"
               prominence={isSelected && !isInHoveredRange ? 'strong' : 'weak'}
               sentiment={isSelected || isInHoveredRange ? 'primary' : 'neutral'}
               disabled={disabled || isExcluded || isOutsideRange}
             >
               {month[1]}
-            </Text>
+            </CapitalizedText>
           </Month>
         )
       })}
diff --git a/packages/ui/src/components/DateInputV2/Popup.tsx b/packages/ui/src/components/DateInput/components/Popup.tsx
similarity index 88%
rename from packages/ui/src/components/DateInputV2/Popup.tsx
rename to packages/ui/src/components/DateInput/components/Popup.tsx
index e24892af09..82acda2ef1 100644
--- a/packages/ui/src/components/DateInputV2/Popup.tsx
+++ b/packages/ui/src/components/DateInput/components/Popup.tsx
@@ -1,15 +1,24 @@
 import styled from '@emotion/styled'
 import type { Dispatch, ReactNode, RefObject, SetStateAction } from 'react'
 import { useContext, useEffect, useRef } from 'react'
-import { Button } from '../Button'
-import { Popup } from '../Popup'
-import { Stack } from '../Stack'
-import { Text } from '../Text'
+import { Button } from '../../Button'
+import { Popup } from '../../Popup'
+import { Stack } from '../../Stack'
+import { Text } from '../../Text'
+import { DateInputContext } from '../Context'
+import { POPUP_WIDTH } from '../constants'
+import { getNextMonth, getPreviousMonth } from '../helpers'
 import { Daily } from './CalendarDaily'
 import { Monthly } from './CalendarMonthly'
-import { DateInputContext } from './Context'
-import { POPUP_WIDTH, getNextMonth, getPreviousMonth } from './helpers'
 
+const CapitalizedText = styled(Text)`
+display: inline-block;
+text-transform: lowercase;
+
+&::first-letter {
+  text-transform: uppercase;
+}
+`
 type PopupProps = {
   children: ReactNode
   visible: boolean
@@ -84,10 +93,10 @@ const PopupContent = () => {
             !!(minDate && minDate > new Date(yearToShow, monthToShow - 1, 0))
           }
         />
-        <Text as="p" variant="bodyStrong" sentiment="neutral">
+        <CapitalizedText as="span" variant="bodyStrong" sentiment="neutral">
           {!showMonthYearPicker ? MONTHS_ARR[monthToShow - 1] : null}{' '}
           {yearToShow}
-        </Text>
+        </CapitalizedText>
         <Button
           icon="arrow-right"
           data-testid="next-month"
diff --git a/packages/ui/src/components/DateInput/constants.ts b/packages/ui/src/components/DateInput/constants.ts
new file mode 100644
index 0000000000..a6da498305
--- /dev/null
+++ b/packages/ui/src/components/DateInput/constants.ts
@@ -0,0 +1,48 @@
+export const POPUP_WIDTH = '264px'
+
+export const CURRENT_YEAR = new Date().getFullYear()
+export const CURRENT_MONTH = new Date().getMonth() + 1
+
+// Weeks displayed on calendar
+export const CALENDAR_WEEKS = 6
+
+export const DAYS_DEFAULT = {
+  Sunday: 'Su',
+  Monday: 'Mo',
+  Tuesday: 'Tu',
+  Wednesday: 'We',
+  Thursday: 'Th',
+  Friday: 'Fr',
+  Saturday: 'Sa',
+}
+
+// Calendar months names and short names
+export const MONTHS_DEFAULT = {
+  January: 'Jan',
+  February: 'Feb',
+  March: 'Mar',
+  April: 'Apr',
+  May: 'May',
+  June: 'Jun',
+  July: 'Jul',
+  August: 'Aug',
+  September: 'Sep',
+  October: 'Oct',
+  November: 'Nov',
+  December: 'Dec',
+}
+
+export const MONTHS_ARR_DEFAULT = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+]
diff --git a/packages/ui/src/components/DateInput/datepicker.css b/packages/ui/src/components/DateInput/datepicker.css
deleted file mode 100644
index bea364a0d9..0000000000
--- a/packages/ui/src/components/DateInput/datepicker.css
+++ /dev/null
@@ -1 +0,0 @@
-@import 'react-datepicker/dist/react-datepicker.min.css';
diff --git a/packages/ui/src/components/DateInputV2/helpers.ts b/packages/ui/src/components/DateInput/helpers.ts
similarity index 53%
rename from packages/ui/src/components/DateInputV2/helpers.ts
rename to packages/ui/src/components/DateInput/helpers.ts
index 900d1491b5..75ca1a17fc 100644
--- a/packages/ui/src/components/DateInputV2/helpers.ts
+++ b/packages/ui/src/components/DateInput/helpers.ts
@@ -1,11 +1,4 @@
-export const POPUP_WIDTH = '264px'
-
-export const CURRENT_YEAR = new Date().getFullYear()
-export const CURRENT_MONTH = new Date().getMonth() + 1
-
-// Weeks displayed on calendar
-export const CALENDAR_WEEKS = 6
-
+import { CURRENT_MONTH, CURRENT_YEAR } from './constants'
 // Number days in a month for a given year
 export const getMonthDays = (month = CURRENT_MONTH, year = CURRENT_YEAR) => {
   const months30 = [4, 6, 9, 11]
@@ -50,3 +43,46 @@ export const isSameDay = (date: Date, basedate = new Date()) =>
   basedate.getDate() === date.getDate() &&
   basedate.getMonth() + 1 === date.getMonth() + 1 &&
   basedate.getFullYear() === date.getFullYear()
+
+// Default format if none is provided
+const getDateISO = (showMonthYearPicker: boolean, date?: Date) => {
+  if (date) {
+    if (showMonthYearPicker) {
+      return [date.getFullYear(), addZero(date.getMonth() + 1)].join('/')
+    }
+
+    return [
+      date.getFullYear(),
+      addZero(date.getMonth() + 1),
+      addZero(date.getDate()),
+    ].join('/')
+  }
+
+  return ''
+}
+
+export const formatValue = (
+  computedValue: Date | null,
+  computedRange: {
+    start: Date | null
+    end: Date | null
+  } | null,
+  showMonthYearPicker: boolean,
+  selectsRange: boolean,
+  format?: (value?: Date) => string | undefined,
+) => {
+  if (selectsRange && computedRange) {
+    return format
+      ? `${format(computedRange.start ?? undefined)} – ${format(computedRange.end ?? undefined)}`
+      : `${getDateISO(showMonthYearPicker, computedRange.start ?? undefined)} – ${getDateISO(showMonthYearPicker, computedRange.end ?? undefined)}`
+  }
+
+  if (computedValue && format) {
+    return format(computedValue)
+  }
+  if (computedValue) {
+    return getDateISO(showMonthYearPicker, computedValue)
+  }
+
+  return undefined
+}
diff --git a/packages/ui/src/components/DateInputV2/helpersLocale.ts b/packages/ui/src/components/DateInput/helpersLocale.ts
similarity index 100%
rename from packages/ui/src/components/DateInputV2/helpersLocale.ts
rename to packages/ui/src/components/DateInput/helpersLocale.ts
diff --git a/packages/ui/src/components/DateInput/index.tsx b/packages/ui/src/components/DateInput/index.tsx
index 52fb7ce360..e7e0930bc9 100644
--- a/packages/ui/src/components/DateInput/index.tsx
+++ b/packages/ui/src/components/DateInput/index.tsx
@@ -1,198 +1,21 @@
-import { Global } from '@emotion/react'
 import styled from '@emotion/styled'
 import { CalendarRangeIcon } from '@ultraviolet/icons'
-import type { FocusEvent, ReactNode } from 'react'
-import { useId } from 'react'
-import type { ReactDatePickerProps } from 'react-datepicker'
-import DatePicker, { registerLocale } from 'react-datepicker'
-import { Button } from '../Button'
-import { Stack } from '../Stack'
-import { Text } from '../Text'
+import type { Locale } from 'date-fns'
+import type { ChangeEvent, FocusEvent } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { TextInputV2 } from '../TextInputV2'
-import style from './datepicker.css?inline'
+import { type ContextProps, DateInputContext } from './Context'
+import { CalendarPopup } from './components/Popup'
+import { CURRENT_MONTH, CURRENT_YEAR } from './constants'
+import { formatValue } from './helpers'
+import { getDays, getLocalizedMonths, getMonths } from './helpersLocale'
 
-const PREFIX = '.react-datepicker'
+const Container = styled.div`
+width: 100%;`
 
-const StyledWrapper = styled.div`
-  width: 100%;
-
-  div${PREFIX}-wrapper {
-    display: block;
-  }
-  div${PREFIX}__input-container {
-    display: block;
-  }
-  div${PREFIX}__triangle {
-    display: none;
-  }
-
-  div${PREFIX}__month-container {
-    padding: ${({ theme }) => theme.space['2']};
-    width: 20rem;
-  }
-
-  ${PREFIX}-popper {
-    z-index: 1000;
-  }
-  .calendar {
-    font-family: ${({ theme }) => theme.typography.body.fontFamily};
-    border-color: ${({ theme }) => theme.colors.neutral.borderWeak};
-    background-color: ${({ theme }) =>
-      theme.colors.other.elevation.background.raised};
-    box-shadow: ${({ theme }) => theme.shadows.raised};
-
-
-    ${PREFIX}__header {
-      color: ${({ theme }) => theme.colors.neutral.text};
-      background-color: ${({ theme }) =>
-        theme.colors.other.elevation.background.raised};
-      border-bottom: none;
-      text-align: inherit;
-      display: block;
-      padding-top: 0;
-      position: inherit;
-    }
-
-    ${PREFIX}__triangle {
-      border-bottom-color: ${({ theme }) => theme.colors.neutral.backgroundWeak};
-    }
-    ${PREFIX}__month {
-      margin: 0;
-    }
-
-    ${PREFIX}__day-names {
-      margin-top: ${({ theme }) => theme.space['1']};
-      display: flex;
-      justify-content: center;
-    }
-
-    ${PREFIX}__day-name {
-      font-family: ${({ theme }) => theme.typography.bodySmallStrong.fontFamily};
-      color: ${({ theme }) => theme.colors.neutral.text};
-      font-weight: ${({ theme }) => theme.typography.bodySmallStrong.weight};
-      font-size: ${({ theme }) => theme.typography.bodySmallStrong.fontSize};
-      line-height: ${({ theme }) => theme.typography.bodySmallStrong.lineHeight};
-      text-align: center;
-      margin: ${({ theme }) => theme.space['0.5']};
-      text-transform: capitalize;
-    }
-
-    ${PREFIX}__day, ${PREFIX}__month {
-      color: ${({ theme }) => theme.colors.neutral.textWeak};
-      font-weight: ${({ theme }) => theme.typography.bodyStrong.weight};
-      font-size: ${({ theme }) => theme.typography.bodyStrong.fontSize};
-      margin-left: ${({ theme }) => theme.space['0.5']};
-      margin-right: ${({ theme }) => theme.space['0.5']};
-    }
-
-    ${PREFIX}__day {
-      width: ${({ theme }) => theme.sizing['400']};
-      height: ${({ theme }) => theme.sizing['400']};
-    }
-
-    ${PREFIX}__month-text {
-      height: ${({ theme }) => theme.sizing['400']};
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    ${PREFIX}__day--outside-month {
-      color: ${({ theme }) => theme.colors.neutral.textDisabled};
-      font-weight: ${({ theme }) => theme.typography.bodyStrong.weight};
-      font-size: ${({ theme }) => theme.typography.bodyStrong.fontSize};
-    }
-
-    ${PREFIX}__day--selected, ${PREFIX}__month-text--selected {
-      color: ${({ theme }) => theme.colors.primary.textStrong};
-      background-color: ${({ theme }) => theme.colors.primary.backgroundStrong};
-
-      &[aria-disabled="true"],
-      &:disabled {
-        color: ${({ theme }) => theme.colors.primary.textStrongDisabled};
-        background-color: ${({ theme }) =>
-          theme.colors.primary.backgroundStrongDisabled};
-      }
-    }
-
-    ${PREFIX}__day--in-selecting-range,  ${PREFIX}__month-text--in-selecting-range {
-      color: ${({ theme }) => theme.colors.primary.text};
-      background-color: ${({ theme }) => theme.colors.primary.background};
-
-      &[aria-disabled="true"],
-      &:disabled {
-        color: ${({ theme }) => theme.colors.primary.textDisabled};
-        background-color: ${({ theme }) =>
-          theme.colors.primary.backgroundDisabled};
-      }
-    }
-
-    ${PREFIX}__day--in-range, ${PREFIX}__month-text--in-range {
-      color: ${({ theme }) => theme.colors.primary.text};
-      background-color: ${({ theme }) => theme.colors.primary.background};
-
-      &[aria-disabled="true"],
-      &:disabled {
-        color: ${({ theme }) => theme.colors.primary.textDisabled};
-        background-color: ${({ theme }) =>
-          theme.colors.primary.backgroundDisabled};
-      }
-    }
-
-    ${PREFIX}__day--range-start, ${PREFIX}__month-text--range-start {
-      color: ${({ theme }) => theme.colors.primary.textStrong};
-      background-color: ${({ theme }) => theme.colors.primary.backgroundStrong};
-
-      &[aria-disabled="true"],
-      &:disabled {
-        color: ${({ theme }) => theme.colors.primary.textStrongDisabled};
-        background-color: ${({ theme }) =>
-          theme.colors.primary.backgroundStrongDisabled};
-      }
-    }
-
-    ${PREFIX}__day--range-end, ${PREFIX}__month-text--range-end {
-      color: ${({ theme }) => theme.colors.primary.textStrong};
-      background-color: ${({ theme }) => theme.colors.primary.backgroundStrong};
-
-      &[aria-disabled="true"],
-      &:disabled {
-        color: ${({ theme }) => theme.colors.primary.textStrongDisabled};
-        background-color: ${({ theme }) =>
-          theme.colors.primary.backgroundStrongDisabled};
-      }
-    }
-
-    ${PREFIX}__day--keyboard-selected, ${PREFIX}__month-text--keyboard-selected {
-      color: ${({ theme }) => theme.colors.primary.textStrong};
-      background-color: ${({ theme }) => theme.colors.primary.backgroundStrong};
-    }
-
-    ${PREFIX}__day:hover, ${PREFIX}__month-text:hover {
-      color: ${({ theme }) => theme.colors.neutral.textHover};
-      background-color: ${({ theme }) => theme.colors.neutral.backgroundHover};
-    }
-
-    ${PREFIX}__day--disabled, ${PREFIX}__month-text--disabled {
-      color: ${({ theme }) => theme.colors.neutral.textDisabled};
-    }
-
-    ${PREFIX}__day--disabled:hover, ${PREFIX}__month-text--disabled:hover {
-      color: ${({ theme }) => theme.colors.neutral.textDisabled};
-      background-color: transparent;
-    }
-  }
-`
-
-const StyledText = styled(Text)`
-  text-transform: capitalize;
-`
-
-type DateInputProps = Pick<
-  ReactDatePickerProps<boolean | undefined, boolean>,
-  'locale' | 'onChange'
-> & {
+type DateInputProps<IsRange extends undefined | boolean = false> = {
   autoFocus?: boolean
+  locale?: string | Locale
   disabled?: boolean
   maxDate?: Date | null
   minDate?: Date | null
@@ -201,43 +24,46 @@ type DateInputProps = Pick<
   onFocus?: (event: FocusEvent<HTMLInputElement>) => void
   error?: string
   required?: boolean
-  format?: (value?: Date | string) => string | undefined
+  format?: (value?: Date) => string | undefined
   /**
    * Label of the field
    */
   label?: string
-  value?: Date | string | [Date | null, Date | null]
+  value?: Date | string | null
   className?: string
   'data-testid'?: string
-  selectsRange?: boolean
-  startDate?: Date | null
-  endDate?: Date | null
   excludeDates?: Date[]
   id?: string
-  labelDescription?: ReactNode
+  labelDescription?: string
   success?: string | boolean
   helper?: string
   size?: 'small' | 'medium' | 'large'
   readOnly?: boolean
   tooltip?: string
   showMonthYearPicker?: boolean
+  placeholder?: string
+  startDate?: Date | null
+  endDate?: Date | null
+  selectsRange?: IsRange
+  onChange?: IsRange extends true
+    ? (
+        date: Date[] | [Date | null, Date | null],
+        event: React.SyntheticEvent | undefined,
+      ) => void
+    : (date: Date | null, event: React.SyntheticEvent | undefined) => void
 }
 
-const DEFAULT_FORMAT: DateInputProps['format'] = value =>
-  value instanceof Date ? value.toISOString() : value
-
 /**
- * DateInput is a wrapper around react-datepicker that provides a consistent look and feel with the rest of the Ultraviolet UI.
- * See https://reactdatepicker.com/ for more information.
+ * DateInput can be used to select a specific date
  */
-export const DateInput = ({
+export const DateInput = <IsRange extends undefined | boolean>({
   autoFocus = false,
   disabled = false,
   error,
-  format = DEFAULT_FORMAT,
+  format,
   label,
   labelDescription,
-  locale,
+  locale = 'en-US',
   maxDate,
   minDate,
   startDate,
@@ -245,11 +71,11 @@ export const DateInput = ({
   name,
   onBlur,
   onChange,
+  placeholder,
   onFocus,
   required = false,
   excludeDates,
   value,
-  selectsRange,
   className,
   id,
   success,
@@ -257,125 +83,207 @@ export const DateInput = ({
   size = 'large',
   readOnly = false,
   tooltip,
-  showMonthYearPicker,
+  selectsRange = false,
+  showMonthYearPicker = false,
   'data-testid': dataTestId,
-}: DateInputProps) => {
-  const uniqueId = useId()
-  const localId = id ?? uniqueId
+}: DateInputProps<IsRange>) => {
+  const defaultMonthToShow = useMemo(() => {
+    if (value) return new Date(value).getMonth() + 1
+    if (startDate && selectsRange) return startDate.getMonth() + 1
+    if (endDate && selectsRange) return endDate.getMonth() + 1
 
-  // Linked to: https://github.com/Hacker0x01/react-datepicker/issues/3834
-  const ReactDatePicker =
-    (DatePicker as unknown as { default: typeof DatePicker }).default ??
-    DatePicker
+    return CURRENT_MONTH
+  }, [endDate, selectsRange, startDate, value])
 
-  const localeCode =
-    (typeof locale === 'string' ? locale : locale?.code) ?? 'en-GB'
+  const defaultYearToShow = useMemo(() => {
+    if (value) return new Date(value).getFullYear()
+    if (startDate && selectsRange) return startDate.getFullYear()
+    if (endDate && selectsRange) return endDate.getFullYear()
 
-  if (typeof locale === 'object') {
-    registerLocale(localeCode, locale)
-  }
+    return CURRENT_YEAR
+  }, [endDate, selectsRange, startDate, value])
 
-  const valueStart = `${
-    startDate !== undefined && startDate !== null
-      ? `${format(startDate)} -`
-      : ''
-  }`
-  const valueEnd = `${
-    endDate !== undefined && endDate !== null ? format(endDate) : ''
-  }`
+  const [computedValue, setValue] = useState(
+    value && !selectsRange ? new Date(value) : null,
+  )
+  const [computedRange, setRange] = useState({
+    start: startDate ?? null,
+    end: endDate ?? null,
+  })
+  const [isPopupVisible, setVisible] = useState(false)
+  const [monthToShow, setMonthToShow] = useState(defaultMonthToShow)
+  const [yearToShow, setYearToShow] = useState(defaultYearToShow)
+  const [inputValue, setInputValue] = useState(
+    formatValue(
+      computedValue,
+      computedRange,
+      showMonthYearPicker,
+      selectsRange,
+      format,
+    ),
+  )
+  const refInput = useRef<HTMLInputElement>(null)
+  const MONTHS = getMonths(locale)
+  const DAYS = getDays(locale)
+  const MONTHS_ARR = getLocalizedMonths(locale)
+
+  const valueContext = useMemo(
+    () =>
+      ({
+        showMonthYearPicker,
+        disabled,
+        value: computedValue,
+        range: computedRange,
+        setRange,
+        setValue,
+        monthToShow,
+        yearToShow,
+        setMonthToShow,
+        setYearToShow,
+        excludeDates,
+        maxDate,
+        minDate,
+        MONTHS,
+        MONTHS_ARR,
+        DAYS,
+        onChange,
+        selectsRange,
+        format,
+        setInputValue,
+      }) as ContextProps,
+    [
+      showMonthYearPicker,
+      disabled,
+      selectsRange,
+      computedValue,
+      computedRange,
+      monthToShow,
+      yearToShow,
+      excludeDates,
+      maxDate,
+      minDate,
+      MONTHS,
+      MONTHS_ARR,
+      DAYS,
+      onChange,
+      format,
+      setInputValue,
+    ],
+  )
 
-  const valueFormat = selectsRange
-    ? `${valueStart} ${valueEnd}`
-    : format(value as Date)
+  useEffect(() => {
+    if (value && !selectsRange) {
+      setValue(new Date(value))
+      setInputValue(
+        formatValue(
+          new Date(value),
+          null,
+          showMonthYearPicker,
+          selectsRange,
+          format,
+        ),
+      )
+    }
+    if (selectsRange) {
+      setRange({
+        start: startDate ?? computedRange.start,
+        end: endDate ?? computedRange.end,
+      })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [endDate, startDate, value])
+
+  const manageOnChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.currentTarget.value
+
+    if (selectsRange) {
+      const [startDateInput, endDateInput] = newValue
+        .split('–')
+        .map(val => new Date(val))
+
+      const computedNewRange: [Date | null, Date | null] = [
+        Number.isNaN(startDateInput.getTime())
+          ? computedRange.start
+          : startDateInput,
+        Number.isNaN(endDateInput.getTime()) ? computedRange.end : endDateInput,
+      ]
+
+      setRange({ start: computedNewRange[0], end: computedNewRange[1] })
+      setInputValue(newValue)
+
+      if (computedNewRange[0]) {
+        setMonthToShow(computedNewRange[0].getMonth() + 1)
+        setYearToShow(computedNewRange[0].getFullYear())
+      }
+      // TypeScript fails to automatically get the correct type of onChange here
+      ;(
+        onChange as (
+          date: Date[] | [Date | null, Date | null],
+          event: React.SyntheticEvent | undefined,
+        ) => void
+      )?.(computedNewRange, event)
+    } else {
+      const computedDate = new Date(newValue)
+      setInputValue(newValue)
+
+      if (Date.parse(newValue)) {
+        setValue(computedDate)
+        setMonthToShow(computedDate.getMonth() + 1)
+        setYearToShow(computedDate.getFullYear())
+
+        // TypeScript fails to automatically get the correct type of onChange here
+        ;(
+          onChange as (date: Date | null, event?: React.SyntheticEvent) => void
+        )?.(computedDate, event)
+      }
+    }
+  }
 
   return (
-    <>
-      <Global styles={style} />
-      <StyledWrapper>
-        <ReactDatePicker
-          required={required}
-          data-testid={dataTestId}
-          className={className}
-          autoFocus={autoFocus}
-          fixedHeight
-          name={name}
-          locale={localeCode}
-          onBlur={onBlur}
-          onChange={onChange}
-          onFocus={onFocus}
-          selected={
-            value && !selectsRange ? new Date(value as Date) : undefined
-          }
-          selectsRange={selectsRange}
-          excludeDates={excludeDates}
-          showPopperArrow={false}
-          popperPlacement="bottom-start"
-          customInput={
-            <TextInputV2
-              error={error}
-              success={success}
-              helper={helper}
-              id={localId}
-              label={label}
-              labelDescription={labelDescription}
-              value={valueFormat}
-              disabled={disabled}
-              size={size}
-              suffix={
-                <CalendarRangeIcon sentiment="neutral" disabled={disabled} />
-              }
-              readOnly={readOnly}
-              tooltip={tooltip}
-            />
-          }
-          disabled={disabled}
-          calendarClassName="calendar"
-          minDate={minDate}
-          maxDate={maxDate}
-          startDate={startDate}
-          endDate={endDate}
-          showMonthYearPicker={showMonthYearPicker}
-          dateFormat={showMonthYearPicker ? 'MM/yyyy' : undefined}
-          renderCustomHeader={({
-            date,
-            /* eslint-disable-next-line @typescript-eslint/unbound-method */
-            decreaseMonth,
-            /* eslint-disable-next-line @typescript-eslint/unbound-method */
-            increaseMonth,
-            prevMonthButtonDisabled,
-            nextMonthButtonDisabled,
-          }) => (
-            <Stack
-              direction="row"
-              alignItems="center"
-              justifyContent="space-between"
-            >
-              <Button
-                size="small"
-                icon="arrow-left"
-                sentiment="neutral"
-                variant="ghost"
-                onClick={decreaseMonth}
-                disabled={prevMonthButtonDisabled}
-              />
-              <StyledText variant="bodyStrong" as="p">
-                {new Date(date).toLocaleString(localeCode, {
-                  month: 'long',
-                  year: 'numeric',
-                })}
-              </StyledText>
-              <Button
-                size="small"
-                icon="arrow-right"
+    <DateInputContext.Provider value={valueContext}>
+      <Container
+        id={id}
+        className={className}
+        data-testid={dataTestId}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        onClick={() => {
+          if (!isPopupVisible) setVisible(true)
+        }}
+      >
+        <CalendarPopup
+          visible={isPopupVisible}
+          setVisible={setVisible}
+          refInput={refInput}
+        >
+          <TextInputV2
+            label={label}
+            placeholder={placeholder}
+            value={inputValue}
+            required={required}
+            error={error}
+            success={success}
+            readOnly={readOnly}
+            disabled={disabled}
+            size={size}
+            autoFocus={autoFocus}
+            helper={helper}
+            labelDescription={labelDescription}
+            name={name}
+            suffix={
+              <CalendarRangeIcon
+                size="large"
                 sentiment="neutral"
-                variant="ghost"
-                onClick={increaseMonth}
-                disabled={nextMonthButtonDisabled}
+                disabled={disabled}
               />
-            </Stack>
-          )}
-        />
-      </StyledWrapper>
-    </>
+            }
+            ref={refInput}
+            tooltip={tooltip}
+            autoComplete="false"
+            onChange={manageOnChange}
+          />
+        </CalendarPopup>
+      </Container>
+    </DateInputContext.Provider>
   )
 }
diff --git a/packages/ui/src/components/DateInputV2/__stories__/Controlled.stories.tsx b/packages/ui/src/components/DateInputV2/__stories__/Controlled.stories.tsx
deleted file mode 100644
index c8f23caeb6..0000000000
--- a/packages/ui/src/components/DateInputV2/__stories__/Controlled.stories.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import type { StoryFn } from '@storybook/react'
-import type { ComponentProps } from 'react'
-import { useState } from 'react'
-import { DateInputV2 } from '..'
-import { Button } from '../../Button'
-import { Stack } from '../../Stack'
-
-export const Controlled: StoryFn<ComponentProps<typeof DateInputV2>> = args => {
-  const [value, setValue] = useState<
-    Date | Date[] | [Date | null, Date | null] | null
-  >(new Date('December 17, 1995 03:24:00'))
-
-  return (
-    <Stack gap={2}>
-      <DateInputV2
-        {...args}
-        label="Date"
-        value={value as Date}
-        onChange={setValue}
-      />
-      Selected date : {value?.toString()}
-      <Button onClick={() => setValue(new Date('December 26, 1995 03:24:00'))}>
-        Set date to 1995-12-26
-      </Button>
-    </Stack>
-  )
-}
-
-Controlled.parameters = {
-  docs: {
-    description: {
-      story:
-        'Most of the time, you need a [controlled component](https://reactjs.org/docs/forms.html#controlled-components). By passing `value` and `onChange` prop you can control it.',
-    },
-  },
-}
diff --git a/packages/ui/src/components/DateInputV2/__stories__/Disabled.stories.tsx b/packages/ui/src/components/DateInputV2/__stories__/Disabled.stories.tsx
deleted file mode 100644
index 62d5b222b4..0000000000
--- a/packages/ui/src/components/DateInputV2/__stories__/Disabled.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Template } from './Template'
-
-export const Disabled = Template.bind({})
-
-Disabled.args = {
-  label: 'Disabled',
-  disabled: true,
-}
-
-Disabled.decorators = [
-  StoryComponent => (
-    <div style={{ height: '350px' }}>
-      <StoryComponent />
-    </div>
-  ),
-]
diff --git a/packages/ui/src/components/DateInputV2/__stories__/Error.stories.tsx b/packages/ui/src/components/DateInputV2/__stories__/Error.stories.tsx
deleted file mode 100644
index 0861094ff1..0000000000
--- a/packages/ui/src/components/DateInputV2/__stories__/Error.stories.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Template } from './Template'
-
-export const Error = Template.bind({})
-
-Error.parameters = {
-  docs: {
-    description: {
-      story: 'Use `error` prop to style the input when the field is invalid.',
-    },
-  },
-}
-
-Error.args = {
-  label: 'Error',
-  error: 'This is an error',
-}
-
-Error.decorators = [
-  StoryComponent => (
-    <div style={{ height: '350px' }}>
-      <StoryComponent />
-    </div>
-  ),
-]
diff --git a/packages/ui/src/components/DateInputV2/__stories__/Exclude.stories.tsx b/packages/ui/src/components/DateInputV2/__stories__/Exclude.stories.tsx
deleted file mode 100644
index a819e93297..0000000000
--- a/packages/ui/src/components/DateInputV2/__stories__/Exclude.stories.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import type { StoryFn } from '@storybook/react'
-import type { ComponentProps } from 'react'
-import { DateInputV2 } from '..'
-import { Stack } from '../../Stack'
-
-export const Exclude: StoryFn<ComponentProps<typeof DateInputV2>> = args => (
-  <Stack gap={3}>
-    <DateInputV2 {...args} />
-    <DateInputV2
-      {...args}
-      showMonthYearPicker
-      label="With months"
-      excludeDates={[
-        new Date('November 1, 1995 03:24:00'),
-        new Date('January 14, 1995 03:24:00'),
-        new Date('March 22, 1995 03:24:00'),
-      ]}
-    />
-  </Stack>
-)
-Exclude.parameters = {
-  docs: {
-    description: {
-      story: 'With `excludeDates` you can define a array of dates to exclude',
-    },
-  },
-}
-
-Exclude.args = {
-  label: 'Date',
-  value: new Date('December 13, 1995 03:24:00'),
-  excludeDates: [
-    new Date('December 1, 1995 03:24:00'),
-    new Date('December 14, 1995 03:24:00'),
-    new Date('December 22, 1995 03:24:00'),
-    new Date('December 28, 1995 03:24:00'),
-  ],
-}
diff --git a/packages/ui/src/components/DateInputV2/__stories__/I18n.stories.tsx b/packages/ui/src/components/DateInputV2/__stories__/I18n.stories.tsx
deleted file mode 100644
index d41382a51c..0000000000
--- a/packages/ui/src/components/DateInputV2/__stories__/I18n.stories.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import type { StoryFn } from '@storybook/react'
-import type { Locale } from 'date-fns'
-import { enGB } from 'date-fns/locale/en-GB'
-import type { ComponentProps } from 'react'
-import { useState } from 'react'
-import { DateInputV2 } from '..'
-import { SelectInputV2 } from '../../SelectInputV2'
-
-const locales = ['en', 'fr', 'es', 'de', 'ru'] as const
-
-type LocalSupportedType = (typeof locales)[number]
-
-const isLocales = (locale: string): locale is LocalSupportedType =>
-  locales.includes(locale as LocalSupportedType)
-
-const loadDateFNS = async (locale: LocalSupportedType) =>
-  ({
-    en: (await import('date-fns/locale/en-GB')).enGB,
-    fr: (await import('date-fns/locale/fr')).fr,
-    es: (await import('date-fns/locale/es')).es,
-    de: (await import('date-fns/locale/de')).de,
-    ru: (await import('date-fns/locale/ru')).ru,
-  })[locale] ?? (await import('date-fns/locale/en-GB')).enGB
-
-const localesOptions = locales.map(locale => ({
-  label: locale,
-  value: locale,
-}))
-
-export const I18n: StoryFn<ComponentProps<typeof DateInputV2>> = args => {
-  const [currentLocale, setCurrentLocale] = useState<LocalSupportedType>(
-    locales[0],
-  )
-  const [value, setValue] =
-    useState<ComponentProps<typeof DateInputV2>['value']>(undefined)
-
-  const [dateFns, setDateFns] = useState<Locale>(enGB)
-
-  const onChange = async (locale: string) => {
-    if (isLocales(locale)) {
-      setCurrentLocale(locale)
-      setDateFns(await loadDateFNS(locale))
-    }
-  }
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
-      <SelectInputV2
-        name="locale-switcher"
-        label="Switch Locale"
-        searchable={false}
-        options={localesOptions}
-        value={currentLocale}
-        onChange={onChange}
-      />
-
-      <DateInputV2
-        {...args}
-        locale={dateFns}
-        value={value}
-        onChange={v => {
-          setValue(v as Date)
-        }}
-        label={currentLocale}
-        selectsRange={false}
-      />
-    </div>
-  )
-}
-
-I18n.parameters = {
-  docs: {
-    description: {
-      story:
-        'If you use our `useI18n` hook you can easily handle localization change on the input by getting `currentLocale` returned by the hook.',
-    },
-  },
-}
diff --git a/packages/ui/src/components/DateInputV2/__stories__/Localized.stories.tsx b/packages/ui/src/components/DateInputV2/__stories__/Localized.stories.tsx
deleted file mode 100644
index 57d21d238d..0000000000
--- a/packages/ui/src/components/DateInputV2/__stories__/Localized.stories.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { Decorator } from '@storybook/react'
-import { es, fr, ru } from 'date-fns/locale'
-import type { ComponentProps } from 'react'
-import { DateInputV2 } from '..'
-import { Template } from './Template'
-
-const locales = [
-  { label: 'fr-FR', locale: fr },
-  { label: 'es-ES', locale: es },
-  { label: 'ru-RU', locale: ru },
-]
-
-export const Localized = (props: ComponentProps<typeof DateInputV2>) =>
-  locales.map(({ label, locale }) => (
-    <DateInputV2
-      {...props}
-      key={label}
-      onChange={() => {}}
-      label={label}
-      locale={locale}
-    />
-  ))
-
-Localized.args = Template.args
-
-Localized.parameters = {
-  docs: {
-    description: {
-      story:
-        'You can import locale from `date-fns/locale` package and pass it as `locale` prop to localize the input.',
-    },
-  },
-}
-
-Localized.decorators = [
-  StoryComponent => (
-    <div style={{ display: 'flex', gap: 16 }}>
-      <StoryComponent />
-    </div>
-  ),
-] as Decorator[]
diff --git a/packages/ui/src/components/DateInputV2/__stories__/MinMax.stories.tsx b/packages/ui/src/components/DateInputV2/__stories__/MinMax.stories.tsx
deleted file mode 100644
index 76901e84c2..0000000000
--- a/packages/ui/src/components/DateInputV2/__stories__/MinMax.stories.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Template } from './Template'
-
-export const MinMax = Template.bind({})
-
-MinMax.parameters = {
-  docs: {
-    description: {
-      story: 'With `minDate` and `maxDate` you can define limits of the input',
-    },
-  },
-}
-
-MinMax.args = {
-  label: 'Date',
-  value: new Date('1995-12-17T03:24:00'),
-  minDate: new Date('December 12, 1995 03:24:00'),
-  maxDate: new Date('December 25, 1995 03:24:00'),
-}
diff --git a/packages/ui/src/components/DateInputV2/__stories__/Months.stories.tsx b/packages/ui/src/components/DateInputV2/__stories__/Months.stories.tsx
deleted file mode 100644
index ca4e792e11..0000000000
--- a/packages/ui/src/components/DateInputV2/__stories__/Months.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Template } from './Template'
-
-export const Months = Template.bind({})
-
-Months.args = {
-  label: 'Months',
-  showMonthYearPicker: true,
-  disabled: false,
-}
-
-Months.decorators = [
-  StoryComponent => (
-    <div style={{ height: '350px' }}>
-      <StoryComponent />
-    </div>
-  ),
-]
diff --git a/packages/ui/src/components/DateInputV2/__stories__/Playground.stories.tsx b/packages/ui/src/components/DateInputV2/__stories__/Playground.stories.tsx
deleted file mode 100644
index a0e981bab6..0000000000
--- a/packages/ui/src/components/DateInputV2/__stories__/Playground.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Template } from './Template'
-
-export const Playground = Template.bind({})
-
-Playground.args = {
-  placeholder: 'YYYY-MM-DD',
-}
-
-Playground.decorators = [
-  StoryComponent => (
-    <div style={{ height: '350px' }}>
-      <StoryComponent />
-    </div>
-  ),
-]
diff --git a/packages/ui/src/components/DateInputV2/__stories__/Range.stories.tsx b/packages/ui/src/components/DateInputV2/__stories__/Range.stories.tsx
deleted file mode 100644
index f927b2673c..0000000000
--- a/packages/ui/src/components/DateInputV2/__stories__/Range.stories.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import type { StoryFn } from '@storybook/react'
-import type { ComponentProps } from 'react'
-import { useState } from 'react'
-import { DateInputV2 } from '..'
-import { Stack } from '../../Stack'
-
-const months = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-]
-export const Range: StoryFn<ComponentProps<typeof DateInputV2>> = args => {
-  const [startDate, setStartDate] = useState<Date | null>(null)
-  const [endDate, setEndDate] = useState<Date | null>(null)
-
-  const [startMonth, setStartMonth] = useState<Date | null>(
-    new Date('March 2024'),
-  )
-  const [endMonth, setEndMonth] = useState<Date | null>(null)
-
-  const onChange = (dates: [Date | null, Date | null] | Date[]) => {
-    const [start, end] = dates
-    setStartDate(start)
-    setEndDate(end)
-  }
-
-  const onChangeMonth = (dates: [Date | null, Date | null] | Date[]) => {
-    const [start, end] = dates
-    setStartMonth(start)
-    setEndMonth(end)
-  }
-
-  return (
-    <Stack>
-      <DateInputV2
-        label="Date"
-        onChange={onChange}
-        startDate={startDate}
-        endDate={endDate}
-        selectsRange
-        {...args}
-      />
-      Selected dates : {startDate?.toDateString()} - {endDate?.toDateString()}
-      <DateInputV2
-        label="Month"
-        onChange={onChangeMonth}
-        startDate={startMonth}
-        endDate={endMonth}
-        selectsRange
-        showMonthYearPicker
-        {...args}
-      />
-      Selected months : {startMonth ? months[startMonth.getMonth()] : null}
-      {startMonth?.getFullYear()} -
-      {endMonth ? months[endMonth.getMonth()] : null}
-      {endMonth?.getFullYear()}
-    </Stack>
-  )
-}
-
-Range.parameters = {
-  docs: {
-    description: {
-      story: 'With `startDate` and `endDate` you can define a range of dates',
-    },
-  },
-}
diff --git a/packages/ui/src/components/DateInputV2/__stories__/Required.stories.tsx b/packages/ui/src/components/DateInputV2/__stories__/Required.stories.tsx
deleted file mode 100644
index 85436e459c..0000000000
--- a/packages/ui/src/components/DateInputV2/__stories__/Required.stories.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Template } from './Template'
-
-export const Required = Template.bind({})
-
-Required.args = {
-  label: 'Required',
-  required: true,
-}
diff --git a/packages/ui/src/components/DateInputV2/__stories__/Size.stories.tsx b/packages/ui/src/components/DateInputV2/__stories__/Size.stories.tsx
deleted file mode 100644
index 488bee278a..0000000000
--- a/packages/ui/src/components/DateInputV2/__stories__/Size.stories.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { StoryFn } from '@storybook/react'
-import { DateInputV2 } from '..'
-import { Stack } from '../../Stack'
-
-export const Size: StoryFn<typeof DateInputV2> = args => (
-  <Stack gap="2">
-    {(['small', 'medium', 'large'] as const).map(size => (
-      <DateInputV2 {...args} key={size} label={size} size={size} />
-    ))}
-  </Stack>
-)
diff --git a/packages/ui/src/components/DateInputV2/__stories__/Template.tsx b/packages/ui/src/components/DateInputV2/__stories__/Template.tsx
deleted file mode 100644
index b8fc4129a7..0000000000
--- a/packages/ui/src/components/DateInputV2/__stories__/Template.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { StoryFn } from '@storybook/react'
-import { DateInputV2 } from '..'
-
-export const Template: StoryFn<typeof DateInputV2> = props => (
-  <DateInputV2 {...props} />
-)
-
-Template.args = {
-  label: 'Date Input',
-  required: true,
-  placeholder: 'YYYY-MM-DD',
-}
diff --git a/packages/ui/src/components/DateInputV2/__stories__/index.stories.tsx b/packages/ui/src/components/DateInputV2/__stories__/index.stories.tsx
deleted file mode 100644
index 9d496ddbd3..0000000000
--- a/packages/ui/src/components/DateInputV2/__stories__/index.stories.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { Meta } from '@storybook/react'
-import { DateInputV2 } from '..'
-
-export default {
-  component: DateInputV2,
-  title: 'Components/Data Entry/DateInputV2',
-} as Meta
-export { Playground } from './Playground.stories'
-export { Size } from './Size.stories'
-export { Error } from './Error.stories'
-export { Disabled } from './Disabled.stories'
-export { Required } from './Required.stories'
-export { Months } from './Months.stories'
-export { Exclude } from './Exclude.stories'
-export { MinMax } from './MinMax.stories'
-export { Localized } from './Localized.stories'
-export { Controlled } from './Controlled.stories'
-export { Range } from './Range.stories'
-export { I18n } from './I18n.stories'
diff --git a/packages/ui/src/components/DateInputV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/DateInputV2/__tests__/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index cc670298fa..0000000000
--- a/packages/ui/src/components/DateInputV2/__tests__/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,10123 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`DateInputV2 > render correctly with a array of dates to exclude 1`] = `
-<DocumentFragment>
-  @keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-}
-
-.emotion-0 {
-  width: 100%;
-}
-
-.emotion-2 {
-  display: inherit;
-}
-
-.emotion-2[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: start;
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: start;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-10 {
-  color: #222638;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  height: 48px;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
-  border-radius: 4px;
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
-  border: 1px solid #8c40ef;
-}
-
-.emotion-12>.emotion-15 {
-  color: #3f4250;
-}
-
-.emotion-12>.emotion-15::-webkit-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::-moz-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15:-ms-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::placeholder {
-  color: #727683;
-}
-
-.emotion-12[data-success='true'] {
-  border-color: #22674e;
-}
-
-.emotion-12[data-error='true'] {
-  border-color: #b3144d;
-}
-
-.emotion-12[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-}
-
-.emotion-12[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15 {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
-}
-
-.emotion-14 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  border: none;
-  outline: none;
-  height: 100%;
-  width: 100%;
-  padding-left: 16px;
-  background: transparent;
-  font-size: 14px;
-}
-
-.emotion-14[data-size='large'] {
-  font-size: 16px;
-}
-
-.emotion-14[data-size='small'] {
-  padding-left: 8px;
-}
-
-.emotion-16 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  padding: 0 16px;
-  border-left: 1px solid;
-  border-color: inherit;
-}
-
-.emotion-18 {
-  vertical-align: middle;
-  fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
-}
-
-.emotion-18 .fillStroke {
-  stroke: #3f4250;
-  fill: none;
-}
-
-.emotion-21 {
-  background: #151a2d;
-  color: #ffffff;
-  border-radius: 4px;
-  padding: 4px 8px;
-  text-align: center;
-  position: absolute;
-  max-width: 264px;
-  overflow-wrap: break-word;
-  font-size: 0.8rem;
-  inset: 0 auto auto 0;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  -webkit-transform: translate3d(0px, 4px, 0);
-  -moz-transform: translate3d(0px, 4px, 0);
-  -ms-transform: translate3d(0px, 4px, 0);
-  transform: translate3d(0px, 4px, 0);
-  width: 100%;
-  background-color: #ffffff;
-  color: #3f4250;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-  padding: 16px;
-  border-radius: 4px;
-}
-
-.emotion-21[data-animated="true"] {
-  -webkit-animation: 0ms animation-0 forwards;
-  animation: 0ms animation-0 forwards;
-}
-
-.emotion-21[data-has-arrow="true"]::after {
-  content: " ";
-  position: absolute;
-  top: -5px;
-  left: 0px;
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-  margin-left: -8px;
-  border-width: 8px;
-  border-style: solid;
-  border-color: #151a2d transparent transparent transparent;
-  pointer-events: none;
-}
-
-.emotion-21[data-visible-in-dom="false"] {
-  display: none;
-}
-
-.emotion-23 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 16px;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-25 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  width: 100%;
-}
-
-.emotion-27 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 24px;
-  padding: 0 4px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 4px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  width: 24px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 14px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 20px;
-  paragraph-spacing: 0;
-  text-case: none;
-  background: none;
-  border: none;
-  color: #3f4250;
-}
-
-.emotion-27:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-27:active {
-  box-shadow: 0px 0px 0px 3px #151a2d5c;
-}
-
-.emotion-27:hover,
-.emotion-27:active {
-  background: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-29 {
-  vertical-align: middle;
-  fill: currentColor;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
-}
-
-.emotion-29 .fillStroke {
-  stroke: currentColor;
-  fill: none;
-}
-
-.emotion-31 {
-  color: #3f4250;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-37 {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 8px;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-}
-
-.emotion-40 {
-  color: #3f4250;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  height: 26px;
-  width: 100%;
-}
-
-.emotion-61 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 48px;
-  padding: 0 16px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 8px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  width: auto;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  paragraph-spacing: 0;
-  text-case: none;
-  background: none;
-  border: none;
-  color: #3f4250;
-  height: 26px;
-  width: 100%;
-  padding: 0;
-}
-
-.emotion-61:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-61:active {
-  box-shadow: 0px 0px 0px 3px #151a2d5c;
-}
-
-.emotion-61:hover,
-.emotion-61:active {
-  background: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-61.rangeButton {
-  background-color: #f1eefc;
-}
-
-.emotion-63 {
-  color: #b5b7bd;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-83 {
-  color: #727683;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-131 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 48px;
-  padding: 0 16px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 8px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  width: auto;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  paragraph-spacing: 0;
-  text-case: none;
-  background: #8c40ef;
-  border: none;
-  color: #ffffff;
-  height: 26px;
-  width: 100%;
-  padding: 0;
-}
-
-.emotion-131:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-131:active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
-}
-
-.emotion-131:hover,
-.emotion-131:active {
-  background: #792dd4;
-  color: #f9f9fa;
-}
-
-.emotion-131.rangeButton {
-  background-color: #f1eefc;
-}
-
-.emotion-133 {
-  color: #ffffff;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-136 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 48px;
-  padding: 0 16px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 8px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  width: auto;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: not-allowed;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  paragraph-spacing: 0;
-  text-case: none;
-  background: none;
-  border: none;
-  color: #3f4250;
-  color: #b5b7bd;
-  height: 26px;
-  width: 100%;
-  padding: 0;
-}
-
-.emotion-136:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-136.rangeButton {
-  background-color: #f1eefc;
-}
-
-<div
-    data-testid="testing"
-  >
-    <div
-      class="emotion-0 emotion-1"
-    >
-      <div
-        aria-controls=":rbc:"
-        aria-describedby=":rbc:"
-        class="emotion-2 emotion-3"
-        tabindex="0"
-      >
-        <div
-          class="emotion-4 emotion-5"
-        >
-          <div
-            class="emotion-6 emotion-5"
-          >
-            <div
-              class="emotion-8 emotion-5"
-            >
-              <label
-                class="emotion-10 emotion-11"
-                for=":rbd:"
-              >
-                Date
-              </label>
-            </div>
-          </div>
-          <div>
-            <div
-              class="emotion-12 emotion-13"
-              data-disabled="false"
-              data-error="false"
-              data-readonly="false"
-              data-success="false"
-            >
-              <input
-                aria-invalid="false"
-                autocomplete="false"
-                class="emotion-14 emotion-15"
-                data-size="large"
-                id=":rbd:"
-                placeholder="YYYY-MM-DD"
-                type="text"
-                value="1995/12/11"
-              />
-              <div
-                class="emotion-16 emotion-17"
-              >
-                <svg
-                  class="emotion-18 emotion-19"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                  />
-                  <path
-                    clip-rule="evenodd"
-                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="emotion-20 emotion-21 emotion-22"
-          data-animated="false"
-          data-has-arrow="false"
-          id=":rbc:"
-          role="dialog"
-          style="opacity: 1;"
-        >
-          <div
-            class="emotion-23 emotion-5"
-          >
-            <div
-              class="emotion-25 emotion-5"
-            >
-              <button
-                class="emotion-27 emotion-28"
-                data-testid="previous-month"
-                type="button"
-              >
-                <svg
-                  class="emotion-29 emotion-30"
-                  viewBox="0 0 16 16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M10.53 4.22a.75.75 0 0 1 0 1.06L7.81 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </button>
-              <p
-                class="emotion-31 emotion-11"
-              >
-                December 1995
-              </p>
-              <button
-                class="emotion-27 emotion-28"
-                data-testid="next-month"
-                type="button"
-              >
-                <svg
-                  class="emotion-29 emotion-30"
-                  viewBox="0 0 16 16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </button>
-            </div>
-            <div
-              class="emotion-37 emotion-38"
-            >
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                Mo
-              </p>
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                Tu
-              </p>
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                We
-              </p>
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                Th
-              </p>
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                Fr
-              </p>
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                Sa
-              </p>
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                Su
-              </p>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayLastMonth"
-                  >
-                    27
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayLastMonth"
-                  >
-                    28
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayLastMonth"
-                  >
-                    29
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayLastMonth"
-                  >
-                    30
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    1
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    2
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    3
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    4
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    5
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    6
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    7
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    8
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    9
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    10
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-131 emotion-132"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-133 emotion-11"
-                  >
-                    11
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-136 emotion-28"
-                disabled=""
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                  >
-                    12
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-136 emotion-28"
-                disabled=""
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                  >
-                    13
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-136 emotion-28"
-                disabled=""
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                  >
-                    14
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    15
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    16
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    17
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    18
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    19
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    20
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    21
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    22
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    23
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    24
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    25
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    26
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    27
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    28
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    29
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    30
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    31
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    1
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    2
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    3
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    4
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    5
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    6
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    7
-                  </p>
-                </div>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DateInputV2 > render correctly with a range of date 1`] = `
-<DocumentFragment>
-  .emotion-0 {
-  width: 100%;
-}
-
-.emotion-2 {
-  display: inherit;
-}
-
-.emotion-2[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: start;
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: start;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-10 {
-  color: #222638;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  height: 48px;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
-  border-radius: 4px;
-}
-
-.emotion-12>.emotion-15 {
-  color: #3f4250;
-}
-
-.emotion-12>.emotion-15::-webkit-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::-moz-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15:-ms-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::placeholder {
-  color: #727683;
-}
-
-.emotion-12[data-success='true'] {
-  border-color: #22674e;
-}
-
-.emotion-12[data-error='true'] {
-  border-color: #b3144d;
-}
-
-.emotion-12[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-}
-
-.emotion-12[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15 {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
-}
-
-.emotion-14 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  border: none;
-  outline: none;
-  height: 100%;
-  width: 100%;
-  padding-left: 16px;
-  background: transparent;
-  font-size: 14px;
-}
-
-.emotion-14[data-size='large'] {
-  font-size: 16px;
-}
-
-.emotion-14[data-size='small'] {
-  padding-left: 8px;
-}
-
-.emotion-16 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  padding: 0 16px;
-  border-left: 1px solid;
-  border-color: inherit;
-}
-
-.emotion-18 {
-  vertical-align: middle;
-  fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
-}
-
-.emotion-18 .fillStroke {
-  stroke: #3f4250;
-  fill: none;
-}
-
-<div
-    data-testid="testing"
-  >
-    <div
-      class="emotion-0 emotion-1"
-    >
-      <div
-        aria-controls=":rb8:"
-        aria-describedby=":rb8:"
-        class="emotion-2 emotion-3"
-        tabindex="0"
-      >
-        <div
-          class="emotion-4 emotion-5"
-        >
-          <div
-            class="emotion-6 emotion-5"
-          >
-            <div
-              class="emotion-8 emotion-5"
-            >
-              <label
-                class="emotion-10 emotion-11"
-                for=":rb9:"
-              >
-                Date
-              </label>
-            </div>
-          </div>
-          <div>
-            <div
-              class="emotion-12 emotion-13"
-              data-disabled="false"
-              data-error="false"
-              data-readonly="false"
-              data-success="false"
-            >
-              <input
-                aria-invalid="false"
-                autocomplete="false"
-                class="emotion-14 emotion-15"
-                data-size="large"
-                id=":rb9:"
-                type="text"
-                value="1995/12/11 – 1995/12/25"
-              />
-              <div
-                class="emotion-16 emotion-17"
-              >
-                <svg
-                  class="emotion-18 emotion-19"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                  />
-                  <path
-                    clip-rule="evenodd"
-                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DateInputV2 > render correctly with showMonthYearPicker 1`] = `
-<DocumentFragment>
-  .emotion-0 {
-  width: 100%;
-}
-
-.emotion-2 {
-  display: inherit;
-}
-
-.emotion-2[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: start;
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: start;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-10 {
-  color: #222638;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  height: 48px;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
-  border-radius: 4px;
-}
-
-.emotion-12>.emotion-15 {
-  color: #3f4250;
-}
-
-.emotion-12>.emotion-15::-webkit-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::-moz-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15:-ms-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::placeholder {
-  color: #727683;
-}
-
-.emotion-12[data-success='true'] {
-  border-color: #22674e;
-}
-
-.emotion-12[data-error='true'] {
-  border-color: #b3144d;
-}
-
-.emotion-12[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-}
-
-.emotion-12[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15 {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
-}
-
-.emotion-14 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  border: none;
-  outline: none;
-  height: 100%;
-  width: 100%;
-  padding-left: 16px;
-  background: transparent;
-  font-size: 14px;
-}
-
-.emotion-14[data-size='large'] {
-  font-size: 16px;
-}
-
-.emotion-14[data-size='small'] {
-  padding-left: 8px;
-}
-
-.emotion-16 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  padding: 0 16px;
-  border-left: 1px solid;
-  border-color: inherit;
-}
-
-.emotion-18 {
-  vertical-align: middle;
-  fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
-}
-
-.emotion-18 .fillStroke {
-  stroke: #3f4250;
-  fill: none;
-}
-
-<div
-    data-testid="testing"
-  >
-    <div
-      class="emotion-0 emotion-1"
-    >
-      <div
-        aria-controls=":ra5:"
-        aria-describedby=":ra5:"
-        class="emotion-2 emotion-3"
-        tabindex="0"
-      >
-        <div
-          class="emotion-4 emotion-5"
-        >
-          <div
-            class="emotion-6 emotion-5"
-          >
-            <div
-              class="emotion-8 emotion-5"
-            >
-              <label
-                class="emotion-10 emotion-11"
-                for=":ra6:"
-              >
-                Date
-              </label>
-            </div>
-          </div>
-          <div>
-            <div
-              class="emotion-12 emotion-13"
-              data-disabled="false"
-              data-error="false"
-              data-readonly="false"
-              data-success="false"
-            >
-              <input
-                aria-invalid="false"
-                autocomplete="false"
-                class="emotion-14 emotion-15"
-                data-size="large"
-                id=":ra6:"
-                type="text"
-                value=""
-              />
-              <div
-                class="emotion-16 emotion-17"
-              >
-                <svg
-                  class="emotion-18 emotion-19"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                  />
-                  <path
-                    clip-rule="evenodd"
-                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DateInputV2 > render correctly with showMonthYearPicker with default date 1`] = `
-<DocumentFragment>
-  @keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-}
-
-.emotion-0 {
-  width: 100%;
-}
-
-.emotion-2 {
-  display: inherit;
-}
-
-.emotion-2[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: start;
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: start;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-10 {
-  color: #222638;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  height: 48px;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
-  border-radius: 4px;
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
-  border: 1px solid #8c40ef;
-}
-
-.emotion-12>.emotion-15 {
-  color: #3f4250;
-}
-
-.emotion-12>.emotion-15::-webkit-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::-moz-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15:-ms-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::placeholder {
-  color: #727683;
-}
-
-.emotion-12[data-success='true'] {
-  border-color: #22674e;
-}
-
-.emotion-12[data-error='true'] {
-  border-color: #b3144d;
-}
-
-.emotion-12[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-}
-
-.emotion-12[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15 {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
-}
-
-.emotion-14 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  border: none;
-  outline: none;
-  height: 100%;
-  width: 100%;
-  padding-left: 16px;
-  background: transparent;
-  font-size: 14px;
-}
-
-.emotion-14[data-size='large'] {
-  font-size: 16px;
-}
-
-.emotion-14[data-size='small'] {
-  padding-left: 8px;
-}
-
-.emotion-16 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  padding: 0 16px;
-  border-left: 1px solid;
-  border-color: inherit;
-}
-
-.emotion-18 {
-  vertical-align: middle;
-  fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
-}
-
-.emotion-18 .fillStroke {
-  stroke: #3f4250;
-  fill: none;
-}
-
-.emotion-21 {
-  background: #151a2d;
-  color: #ffffff;
-  border-radius: 4px;
-  padding: 4px 8px;
-  text-align: center;
-  position: absolute;
-  max-width: 264px;
-  overflow-wrap: break-word;
-  font-size: 0.8rem;
-  inset: 0 auto auto 0;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  -webkit-transform: translate3d(0px, 4px, 0);
-  -moz-transform: translate3d(0px, 4px, 0);
-  -ms-transform: translate3d(0px, 4px, 0);
-  transform: translate3d(0px, 4px, 0);
-  width: 100%;
-  background-color: #ffffff;
-  color: #3f4250;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-  padding: 16px;
-  border-radius: 4px;
-}
-
-.emotion-21[data-animated="true"] {
-  -webkit-animation: 0ms animation-0 forwards;
-  animation: 0ms animation-0 forwards;
-}
-
-.emotion-21[data-has-arrow="true"]::after {
-  content: " ";
-  position: absolute;
-  top: -5px;
-  left: 0px;
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-  margin-left: -8px;
-  border-width: 8px;
-  border-style: solid;
-  border-color: #151a2d transparent transparent transparent;
-  pointer-events: none;
-}
-
-.emotion-21[data-visible-in-dom="false"] {
-  display: none;
-}
-
-.emotion-23 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 16px;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-25 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  width: 100%;
-}
-
-.emotion-27 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 24px;
-  padding: 0 4px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 4px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  width: 24px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 14px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 20px;
-  paragraph-spacing: 0;
-  text-case: none;
-  background: none;
-  border: none;
-  color: #3f4250;
-}
-
-.emotion-27:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-27:active {
-  box-shadow: 0px 0px 0px 3px #151a2d5c;
-}
-
-.emotion-27:hover,
-.emotion-27:active {
-  background: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-29 {
-  vertical-align: middle;
-  fill: currentColor;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
-}
-
-.emotion-29 .fillStroke {
-  stroke: currentColor;
-  fill: none;
-}
-
-.emotion-31 {
-  color: #3f4250;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-37 {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 8px;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-}
-
-.emotion-40 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 48px;
-  padding: 0 16px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 8px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  width: auto;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  paragraph-spacing: 0;
-  text-case: none;
-  background: none;
-  border: none;
-  color: #3f4250;
-  height: 26px;
-  width: 100%;
-  padding: 0;
-}
-
-.emotion-40:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-40:active {
-  box-shadow: 0px 0px 0px 3px #151a2d5c;
-}
-
-.emotion-40:hover,
-.emotion-40:active {
-  background: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-40.rangeButton {
-  background-color: #f1eefc;
-}
-
-.emotion-42 {
-  color: #727683;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-45 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 48px;
-  padding: 0 16px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 8px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  width: auto;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  paragraph-spacing: 0;
-  text-case: none;
-  background: #8c40ef;
-  border: none;
-  color: #ffffff;
-  height: 26px;
-  width: 100%;
-  padding: 0;
-}
-
-.emotion-45:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-45:active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
-}
-
-.emotion-45:hover,
-.emotion-45:active {
-  background: #792dd4;
-  color: #f9f9fa;
-}
-
-.emotion-45.rangeButton {
-  background-color: #f1eefc;
-}
-
-.emotion-47 {
-  color: #ffffff;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-<div
-    data-testid="testing"
-  >
-    <div
-      class="emotion-0 emotion-1"
-    >
-      <div
-        aria-controls=":ra9:"
-        aria-describedby=":ra9:"
-        class="emotion-2 emotion-3"
-        tabindex="0"
-      >
-        <div
-          class="emotion-4 emotion-5"
-        >
-          <div
-            class="emotion-6 emotion-5"
-          >
-            <div
-              class="emotion-8 emotion-5"
-            >
-              <label
-                class="emotion-10 emotion-11"
-                for=":raa:"
-              >
-                Date
-              </label>
-            </div>
-          </div>
-          <div>
-            <div
-              class="emotion-12 emotion-13"
-              data-disabled="false"
-              data-error="false"
-              data-readonly="false"
-              data-success="false"
-            >
-              <input
-                aria-invalid="false"
-                autocomplete="false"
-                class="emotion-14 emotion-15"
-                data-size="large"
-                id=":raa:"
-                placeholder="YYYY-MM-DD"
-                type="text"
-                value="1995/02"
-              />
-              <div
-                class="emotion-16 emotion-17"
-              >
-                <svg
-                  class="emotion-18 emotion-19"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                  />
-                  <path
-                    clip-rule="evenodd"
-                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="emotion-20 emotion-21 emotion-22"
-          data-animated="false"
-          data-has-arrow="false"
-          id=":ra9:"
-          role="dialog"
-          style="opacity: 1;"
-        >
-          <div
-            class="emotion-23 emotion-5"
-          >
-            <div
-              class="emotion-25 emotion-5"
-            >
-              <button
-                class="emotion-27 emotion-28"
-                data-testid="previous-month"
-                type="button"
-              >
-                <svg
-                  class="emotion-29 emotion-30"
-                  viewBox="0 0 16 16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M10.53 4.22a.75.75 0 0 1 0 1.06L7.81 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </button>
-              <p
-                class="emotion-31 emotion-11"
-              >
-                 1995
-              </p>
-              <button
-                class="emotion-27 emotion-28"
-                data-testid="next-month"
-                type="button"
-              >
-                <svg
-                  class="emotion-29 emotion-30"
-                  viewBox="0 0 16 16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </button>
-            </div>
-            <div
-              class="emotion-37 emotion-38"
-            >
-              <button
-                class="emotion-39 emotion-40 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-42 emotion-11"
-                  >
-                    Jan
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-39 emotion-45 emotion-46"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-47 emotion-11"
-                  >
-                    Feb
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-39 emotion-40 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-42 emotion-11"
-                  >
-                    Mar
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-39 emotion-40 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-42 emotion-11"
-                  >
-                    Apr
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-39 emotion-40 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-42 emotion-11"
-                  >
-                    May
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-39 emotion-40 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-42 emotion-11"
-                  >
-                    Jun
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-39 emotion-40 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-42 emotion-11"
-                  >
-                    Jul
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-39 emotion-40 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-42 emotion-11"
-                  >
-                    Aug
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-39 emotion-40 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-42 emotion-11"
-                  >
-                    Sep
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-39 emotion-40 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-42 emotion-11"
-                  >
-                    Oct
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-39 emotion-40 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-42 emotion-11"
-                  >
-                    Nov
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-39 emotion-40 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-42 emotion-11"
-                  >
-                    Dec
-                  </p>
-                </div>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DateInputV2 > render correctly with showMonthYearPicker with excluded months 1`] = `
-<DocumentFragment>
-  @keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-}
-
-.emotion-0 {
-  width: 100%;
-}
-
-.emotion-2 {
-  display: inherit;
-}
-
-.emotion-2[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: start;
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: start;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-10 {
-  color: #222638;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  height: 48px;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
-  border-radius: 4px;
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
-  border: 1px solid #8c40ef;
-}
-
-.emotion-12>.emotion-15 {
-  color: #3f4250;
-}
-
-.emotion-12>.emotion-15::-webkit-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::-moz-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15:-ms-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::placeholder {
-  color: #727683;
-}
-
-.emotion-12[data-success='true'] {
-  border-color: #22674e;
-}
-
-.emotion-12[data-error='true'] {
-  border-color: #b3144d;
-}
-
-.emotion-12[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-}
-
-.emotion-12[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15 {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
-}
-
-.emotion-14 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  border: none;
-  outline: none;
-  height: 100%;
-  width: 100%;
-  padding-left: 16px;
-  background: transparent;
-  font-size: 14px;
-}
-
-.emotion-14[data-size='large'] {
-  font-size: 16px;
-}
-
-.emotion-14[data-size='small'] {
-  padding-left: 8px;
-}
-
-.emotion-16 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  padding: 0 16px;
-  border-left: 1px solid;
-  border-color: inherit;
-}
-
-.emotion-18 {
-  vertical-align: middle;
-  fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
-}
-
-.emotion-18 .fillStroke {
-  stroke: #3f4250;
-  fill: none;
-}
-
-.emotion-21 {
-  background: #151a2d;
-  color: #ffffff;
-  border-radius: 4px;
-  padding: 4px 8px;
-  text-align: center;
-  position: absolute;
-  max-width: 264px;
-  overflow-wrap: break-word;
-  font-size: 0.8rem;
-  inset: 0 auto auto 0;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  -webkit-transform: translate3d(0px, 4px, 0);
-  -moz-transform: translate3d(0px, 4px, 0);
-  -ms-transform: translate3d(0px, 4px, 0);
-  transform: translate3d(0px, 4px, 0);
-  width: 100%;
-  background-color: #ffffff;
-  color: #3f4250;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-  padding: 16px;
-  border-radius: 4px;
-}
-
-.emotion-21[data-animated="true"] {
-  -webkit-animation: 0ms animation-0 forwards;
-  animation: 0ms animation-0 forwards;
-}
-
-.emotion-21[data-has-arrow="true"]::after {
-  content: " ";
-  position: absolute;
-  top: -5px;
-  left: 0px;
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-  margin-left: -8px;
-  border-width: 8px;
-  border-style: solid;
-  border-color: #151a2d transparent transparent transparent;
-  pointer-events: none;
-}
-
-.emotion-21[data-visible-in-dom="false"] {
-  display: none;
-}
-
-.emotion-23 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 16px;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-25 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  width: 100%;
-}
-
-.emotion-27 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 24px;
-  padding: 0 4px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 4px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  width: 24px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 14px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 20px;
-  paragraph-spacing: 0;
-  text-case: none;
-  background: none;
-  border: none;
-  color: #3f4250;
-}
-
-.emotion-27:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-27:active {
-  box-shadow: 0px 0px 0px 3px #151a2d5c;
-}
-
-.emotion-27:hover,
-.emotion-27:active {
-  background: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-29 {
-  vertical-align: middle;
-  fill: currentColor;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
-}
-
-.emotion-29 .fillStroke {
-  stroke: currentColor;
-  fill: none;
-}
-
-.emotion-31 {
-  color: #3f4250;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-37 {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 8px;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-}
-
-.emotion-40 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 48px;
-  padding: 0 16px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 8px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  width: auto;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  paragraph-spacing: 0;
-  text-case: none;
-  background: none;
-  border: none;
-  color: #3f4250;
-  height: 26px;
-  width: 100%;
-  padding: 0;
-}
-
-.emotion-40:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-40:active {
-  box-shadow: 0px 0px 0px 3px #151a2d5c;
-}
-
-.emotion-40:hover,
-.emotion-40:active {
-  background: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-40.rangeButton {
-  background-color: #f1eefc;
-}
-
-.emotion-42 {
-  color: #727683;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-45 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 48px;
-  padding: 0 16px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 8px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  width: auto;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: not-allowed;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  paragraph-spacing: 0;
-  text-case: none;
-  background: #8c40ef;
-  border: none;
-  color: #ffffff;
-  background: #e5dbfd;
-  color: #ffffff;
-  height: 26px;
-  width: 100%;
-  padding: 0;
-}
-
-.emotion-45:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-45.rangeButton {
-  background-color: #f1eefc;
-}
-
-.emotion-47 {
-  color: #ffffff;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-85 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 48px;
-  padding: 0 16px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 8px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  width: auto;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: not-allowed;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  paragraph-spacing: 0;
-  text-case: none;
-  background: none;
-  border: none;
-  color: #3f4250;
-  color: #b5b7bd;
-  height: 26px;
-  width: 100%;
-  padding: 0;
-}
-
-.emotion-85:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-85.rangeButton {
-  background-color: #f1eefc;
-}
-
-.emotion-87 {
-  color: #b5b7bd;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-<div
-    data-testid="testing"
-  >
-    <div
-      class="emotion-0 emotion-1"
-    >
-      <div
-        aria-controls=":rut:"
-        aria-describedby=":rut:"
-        class="emotion-2 emotion-3"
-        tabindex="0"
-      >
-        <div
-          class="emotion-4 emotion-5"
-        >
-          <div
-            class="emotion-6 emotion-5"
-          >
-            <div
-              class="emotion-8 emotion-5"
-            >
-              <label
-                class="emotion-10 emotion-11"
-                for=":ruu:"
-              >
-                Date
-              </label>
-            </div>
-          </div>
-          <div>
-            <div
-              class="emotion-12 emotion-13"
-              data-disabled="false"
-              data-error="false"
-              data-readonly="false"
-              data-success="false"
-            >
-              <input
-                aria-invalid="false"
-                autocomplete="false"
-                class="emotion-14 emotion-15"
-                data-size="large"
-                id=":ruu:"
-                placeholder="YYYY-MM-DD"
-                type="text"
-                value="1995/02"
-              />
-              <div
-                class="emotion-16 emotion-17"
-              >
-                <svg
-                  class="emotion-18 emotion-19"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                  />
-                  <path
-                    clip-rule="evenodd"
-                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="emotion-20 emotion-21 emotion-22"
-          data-animated="false"
-          data-has-arrow="false"
-          id=":rut:"
-          role="dialog"
-          style="opacity: 1;"
-        >
-          <div
-            class="emotion-23 emotion-5"
-          >
-            <div
-              class="emotion-25 emotion-5"
-            >
-              <button
-                class="emotion-27 emotion-28"
-                data-testid="previous-month"
-                type="button"
-              >
-                <svg
-                  class="emotion-29 emotion-30"
-                  viewBox="0 0 16 16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M10.53 4.22a.75.75 0 0 1 0 1.06L7.81 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </button>
-              <p
-                class="emotion-31 emotion-11"
-              >
-                 1995
-              </p>
-              <button
-                class="emotion-27 emotion-28"
-                data-testid="next-month"
-                type="button"
-              >
-                <svg
-                  class="emotion-29 emotion-30"
-                  viewBox="0 0 16 16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </button>
-            </div>
-            <div
-              class="emotion-37 emotion-38"
-            >
-              <button
-                class="emotion-39 emotion-40 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-42 emotion-11"
-                  >
-                    Jan
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-39 emotion-45 emotion-46"
-                disabled=""
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-47 emotion-11"
-                  >
-                    Feb
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-39 emotion-40 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-42 emotion-11"
-                  >
-                    Mar
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-39 emotion-40 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-42 emotion-11"
-                  >
-                    Apr
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-39 emotion-40 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-42 emotion-11"
-                  >
-                    May
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-39 emotion-40 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-42 emotion-11"
-                  >
-                    Jun
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-39 emotion-40 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-42 emotion-11"
-                  >
-                    Jul
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-39 emotion-40 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-42 emotion-11"
-                  >
-                    Aug
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-39 emotion-40 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-42 emotion-11"
-                  >
-                    Sep
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-39 emotion-85 emotion-28"
-                disabled=""
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-87 emotion-11"
-                  >
-                    Oct
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-39 emotion-40 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-42 emotion-11"
-                  >
-                    Nov
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-39 emotion-40 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-42 emotion-11"
-                  >
-                    Dec
-                  </p>
-                </div>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DateInputV2 > renders correctly custom format with range 1`] = `
-<DocumentFragment>
-  .emotion-0 {
-  width: 100%;
-}
-
-.emotion-2 {
-  display: inherit;
-}
-
-.emotion-2[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: start;
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: start;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-10 {
-  color: #222638;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  height: 48px;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
-  border-radius: 4px;
-}
-
-.emotion-12>.emotion-15 {
-  color: #3f4250;
-}
-
-.emotion-12>.emotion-15::-webkit-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::-moz-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15:-ms-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::placeholder {
-  color: #727683;
-}
-
-.emotion-12[data-success='true'] {
-  border-color: #22674e;
-}
-
-.emotion-12[data-error='true'] {
-  border-color: #b3144d;
-}
-
-.emotion-12[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-}
-
-.emotion-12[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15 {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
-}
-
-.emotion-14 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  border: none;
-  outline: none;
-  height: 100%;
-  width: 100%;
-  padding-left: 16px;
-  background: transparent;
-  font-size: 14px;
-}
-
-.emotion-14[data-size='large'] {
-  font-size: 16px;
-}
-
-.emotion-14[data-size='small'] {
-  padding-left: 8px;
-}
-
-.emotion-16 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  padding: 0 16px;
-  border-left: 1px solid;
-  border-color: inherit;
-}
-
-.emotion-18 {
-  vertical-align: middle;
-  fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
-}
-
-.emotion-18 .fillStroke {
-  stroke: #3f4250;
-  fill: none;
-}
-
-<div
-    data-testid="testing"
-  >
-    <div
-      class="emotion-0 emotion-1"
-    >
-      <div
-        aria-controls=":r126:"
-        aria-describedby=":r126:"
-        class="emotion-2 emotion-3"
-        tabindex="0"
-      >
-        <div
-          class="emotion-4 emotion-5"
-        >
-          <div
-            class="emotion-6 emotion-5"
-          >
-            <div
-              class="emotion-8 emotion-5"
-            >
-              <label
-                class="emotion-10 emotion-11"
-                for=":r127:"
-              >
-                Date
-              </label>
-            </div>
-          </div>
-          <div>
-            <div
-              class="emotion-12 emotion-13"
-              data-disabled="false"
-              data-error="false"
-              data-readonly="false"
-              data-success="false"
-            >
-              <input
-                aria-invalid="false"
-                autocomplete="false"
-                class="emotion-14 emotion-15"
-                data-size="large"
-                id=":r127:"
-                name="test"
-                type="text"
-                value="1995-12-11T03:24:00.000Z – 1995-12-11T03:24:00.000Z"
-              />
-              <div
-                class="emotion-16 emotion-17"
-              >
-                <svg
-                  class="emotion-18 emotion-19"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                  />
-                  <path
-                    clip-rule="evenodd"
-                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DateInputV2 > renders correctly disabled 1`] = `
-<DocumentFragment>
-  .emotion-0 {
-  width: 100%;
-}
-
-.emotion-2 {
-  display: inherit;
-}
-
-.emotion-2[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: start;
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: start;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-10 {
-  color: #222638;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  height: 48px;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
-  border-radius: 4px;
-}
-
-.emotion-12>.emotion-15 {
-  color: #3f4250;
-}
-
-.emotion-12>.emotion-15::-webkit-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::-moz-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15:-ms-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::placeholder {
-  color: #727683;
-}
-
-.emotion-12[data-success='true'] {
-  border-color: #22674e;
-}
-
-.emotion-12[data-error='true'] {
-  border-color: #b3144d;
-}
-
-.emotion-12[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-}
-
-.emotion-12[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15 {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
-}
-
-.emotion-14 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  border: none;
-  outline: none;
-  height: 100%;
-  width: 100%;
-  padding-left: 16px;
-  background: transparent;
-  font-size: 14px;
-}
-
-.emotion-14[data-size='large'] {
-  font-size: 16px;
-}
-
-.emotion-14[data-size='small'] {
-  padding-left: 8px;
-}
-
-.emotion-16 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  padding: 0 16px;
-  border-left: 1px solid;
-  border-color: inherit;
-}
-
-.emotion-18 {
-  vertical-align: middle;
-  fill: #b5b7bd;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
-}
-
-.emotion-18 .fillStroke {
-  stroke: #b5b7bd;
-  fill: none;
-}
-
-<div
-    data-testid="testing"
-  >
-    <div
-      class="emotion-0 emotion-1"
-    >
-      <div
-        aria-controls=":r4:"
-        aria-describedby=":r4:"
-        class="emotion-2 emotion-3"
-        tabindex="0"
-      >
-        <div
-          class="emotion-4 emotion-5"
-        >
-          <div
-            class="emotion-6 emotion-5"
-          >
-            <div
-              class="emotion-8 emotion-5"
-            >
-              <label
-                class="emotion-10 emotion-11"
-                for=":r5:"
-              >
-                Date
-              </label>
-            </div>
-          </div>
-          <div>
-            <div
-              class="emotion-12 emotion-13"
-              data-disabled="true"
-              data-error="false"
-              data-readonly="false"
-              data-success="false"
-            >
-              <input
-                aria-invalid="false"
-                autocomplete="false"
-                class="emotion-14 emotion-15"
-                data-size="large"
-                disabled=""
-                id=":r5:"
-                type="text"
-                value=""
-              />
-              <div
-                class="emotion-16 emotion-17"
-              >
-                <svg
-                  class="emotion-18 emotion-19"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                  />
-                  <path
-                    clip-rule="evenodd"
-                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DateInputV2 > renders correctly error 1`] = `
-<DocumentFragment>
-  .emotion-0 {
-  width: 100%;
-}
-
-.emotion-2 {
-  display: inherit;
-}
-
-.emotion-2[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: start;
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: start;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-10 {
-  color: #222638;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  height: 48px;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
-  border-radius: 4px;
-}
-
-.emotion-12>.emotion-15 {
-  color: #3f4250;
-}
-
-.emotion-12>.emotion-15::-webkit-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::-moz-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15:-ms-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::placeholder {
-  color: #727683;
-}
-
-.emotion-12[data-success='true'] {
-  border-color: #22674e;
-}
-
-.emotion-12[data-error='true'] {
-  border-color: #b3144d;
-}
-
-.emotion-12[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-}
-
-.emotion-12[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15 {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
-}
-
-.emotion-14 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  border: none;
-  outline: none;
-  height: 100%;
-  width: 100%;
-  padding-left: 16px;
-  background: transparent;
-  font-size: 14px;
-}
-
-.emotion-14[data-size='large'] {
-  font-size: 16px;
-}
-
-.emotion-14[data-size='small'] {
-  padding-left: 8px;
-}
-
-.emotion-16 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  padding: 0 16px;
-}
-
-.emotion-18 {
-  vertical-align: middle;
-  fill: #b3144d;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
-}
-
-.emotion-18 .fillStroke {
-  stroke: #b3144d;
-  fill: none;
-}
-
-.emotion-20 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  padding: 0 16px;
-  border-left: 1px solid;
-  border-color: inherit;
-}
-
-.emotion-22 {
-  vertical-align: middle;
-  fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
-}
-
-.emotion-22 .fillStroke {
-  stroke: #3f4250;
-  fill: none;
-}
-
-.emotion-24 {
-  color: #b3144d;
-  font-size: 12px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 400;
-  letter-spacing: 0;
-  line-height: 16px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-<div
-    data-testid="testing"
-  >
-    <div
-      class="emotion-0 emotion-1"
-    >
-      <div
-        aria-controls=":rc:"
-        aria-describedby=":rc:"
-        class="emotion-2 emotion-3"
-        tabindex="0"
-      >
-        <div
-          class="emotion-4 emotion-5"
-        >
-          <div
-            class="emotion-6 emotion-5"
-          >
-            <div
-              class="emotion-8 emotion-5"
-            >
-              <label
-                class="emotion-10 emotion-11"
-                for=":rd:"
-              >
-                Date
-              </label>
-            </div>
-          </div>
-          <div>
-            <div
-              class="emotion-12 emotion-13"
-              data-disabled="false"
-              data-error="true"
-              data-readonly="false"
-              data-success="false"
-            >
-              <input
-                aria-invalid="true"
-                autocomplete="false"
-                class="emotion-14 emotion-15"
-                data-size="large"
-                id=":rd:"
-                type="text"
-                value=""
-              />
-              <div
-                class="emotion-16 emotion-17"
-              >
-                <svg
-                  class="emotion-18 emotion-19"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0m-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5m0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-              <div
-                class="emotion-20 emotion-21"
-              >
-                <svg
-                  class="emotion-22 emotion-19"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                  />
-                  <path
-                    clip-rule="evenodd"
-                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-          <p
-            class="emotion-24 emotion-11"
-          >
-            error
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DateInputV2 > renders correctly error disabled 1`] = `
-<DocumentFragment>
-  .emotion-0 {
-  width: 100%;
-}
-
-.emotion-2 {
-  display: inherit;
-}
-
-.emotion-2[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: start;
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: start;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-10 {
-  color: #222638;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  height: 48px;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
-  border-radius: 4px;
-}
-
-.emotion-12>.emotion-15 {
-  color: #3f4250;
-}
-
-.emotion-12>.emotion-15::-webkit-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::-moz-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15:-ms-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::placeholder {
-  color: #727683;
-}
-
-.emotion-12[data-success='true'] {
-  border-color: #22674e;
-}
-
-.emotion-12[data-error='true'] {
-  border-color: #b3144d;
-}
-
-.emotion-12[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-}
-
-.emotion-12[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15 {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
-}
-
-.emotion-14 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  border: none;
-  outline: none;
-  height: 100%;
-  width: 100%;
-  padding-left: 16px;
-  background: transparent;
-  font-size: 14px;
-}
-
-.emotion-14[data-size='large'] {
-  font-size: 16px;
-}
-
-.emotion-14[data-size='small'] {
-  padding-left: 8px;
-}
-
-.emotion-16 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  padding: 0 16px;
-}
-
-.emotion-18 {
-  vertical-align: middle;
-  fill: #ffbbd3;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
-}
-
-.emotion-18 .fillStroke {
-  stroke: #ffbbd3;
-  fill: none;
-}
-
-.emotion-20 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  padding: 0 16px;
-  border-left: 1px solid;
-  border-color: inherit;
-}
-
-.emotion-22 {
-  vertical-align: middle;
-  fill: #b5b7bd;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
-}
-
-.emotion-22 .fillStroke {
-  stroke: #b5b7bd;
-  fill: none;
-}
-
-.emotion-24 {
-  color: #ffbbd3;
-  font-size: 12px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 400;
-  letter-spacing: 0;
-  line-height: 16px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-<div
-    data-testid="testing"
-  >
-    <div
-      class="emotion-0 emotion-1"
-    >
-      <div
-        aria-controls=":rh:"
-        aria-describedby=":rh:"
-        class="emotion-2 emotion-3"
-        tabindex="0"
-      >
-        <div
-          class="emotion-4 emotion-5"
-        >
-          <div
-            class="emotion-6 emotion-5"
-          >
-            <div
-              class="emotion-8 emotion-5"
-            >
-              <label
-                class="emotion-10 emotion-11"
-                for=":ri:"
-              >
-                Date
-              </label>
-            </div>
-          </div>
-          <div>
-            <div
-              class="emotion-12 emotion-13"
-              data-disabled="true"
-              data-error="true"
-              data-readonly="false"
-              data-success="false"
-            >
-              <input
-                aria-invalid="true"
-                autocomplete="false"
-                class="emotion-14 emotion-15"
-                data-size="large"
-                disabled=""
-                id=":ri:"
-                type="text"
-                value=""
-              />
-              <div
-                class="emotion-16 emotion-17"
-              >
-                <svg
-                  class="emotion-18 emotion-19"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0m-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5m0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-              <div
-                class="emotion-20 emotion-21"
-              >
-                <svg
-                  class="emotion-22 emotion-19"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                  />
-                  <path
-                    clip-rule="evenodd"
-                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-          <p
-            class="emotion-24 emotion-11"
-          >
-            error
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DateInputV2 > renders correctly error disabled required 1`] = `
-<DocumentFragment>
-  .emotion-0 {
-  width: 100%;
-}
-
-.emotion-2 {
-  display: inherit;
-}
-
-.emotion-2[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: start;
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: start;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-10 {
-  color: #222638;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-12 {
-  vertical-align: middle;
-  fill: #b3144d;
-  height: 8px;
-  width: 8px;
-  min-width: 8px;
-  min-height: 8px;
-}
-
-.emotion-12 .fillStroke {
-  stroke: #b3144d;
-  fill: none;
-}
-
-.emotion-14 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  height: 48px;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
-  border-radius: 4px;
-}
-
-.emotion-14>.emotion-17 {
-  color: #3f4250;
-}
-
-.emotion-14>.emotion-17::-webkit-input-placeholder {
-  color: #727683;
-}
-
-.emotion-14>.emotion-17::-moz-placeholder {
-  color: #727683;
-}
-
-.emotion-14>.emotion-17:-ms-input-placeholder {
-  color: #727683;
-}
-
-.emotion-14>.emotion-17::placeholder {
-  color: #727683;
-}
-
-.emotion-14[data-success='true'] {
-  border-color: #22674e;
-}
-
-.emotion-14[data-error='true'] {
-  border-color: #b3144d;
-}
-
-.emotion-14[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-}
-
-.emotion-14[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-}
-
-.emotion-14[data-disabled='true']>.emotion-17 {
-  color: #b5b7bd;
-}
-
-.emotion-14[data-disabled='true']>.emotion-17::-webkit-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-14[data-disabled='true']>.emotion-17::-moz-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-14[data-disabled='true']>.emotion-17:-ms-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-14[data-disabled='true']>.emotion-17::placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-14:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
-}
-
-.emotion-16 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  border: none;
-  outline: none;
-  height: 100%;
-  width: 100%;
-  padding-left: 16px;
-  background: transparent;
-  font-size: 14px;
-}
-
-.emotion-16[data-size='large'] {
-  font-size: 16px;
-}
-
-.emotion-16[data-size='small'] {
-  padding-left: 8px;
-}
-
-.emotion-18 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  padding: 0 16px;
-}
-
-.emotion-20 {
-  vertical-align: middle;
-  fill: #ffbbd3;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
-}
-
-.emotion-20 .fillStroke {
-  stroke: #ffbbd3;
-  fill: none;
-}
-
-.emotion-22 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  padding: 0 16px;
-  border-left: 1px solid;
-  border-color: inherit;
-}
-
-.emotion-24 {
-  vertical-align: middle;
-  fill: #b5b7bd;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
-}
-
-.emotion-24 .fillStroke {
-  stroke: #b5b7bd;
-  fill: none;
-}
-
-.emotion-26 {
-  color: #ffbbd3;
-  font-size: 12px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 400;
-  letter-spacing: 0;
-  line-height: 16px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-<div
-    data-testid="testing"
-  >
-    <div
-      class="emotion-0 emotion-1"
-    >
-      <div
-        aria-controls=":rm:"
-        aria-describedby=":rm:"
-        class="emotion-2 emotion-3"
-        tabindex="0"
-      >
-        <div
-          class="emotion-4 emotion-5"
-        >
-          <div
-            class="emotion-6 emotion-5"
-          >
-            <div
-              class="emotion-8 emotion-5"
-            >
-              <label
-                class="emotion-10 emotion-11"
-                for=":rn:"
-              >
-                Date
-              </label>
-              <svg
-                class="emotion-12 emotion-13"
-                viewBox="0 0 20 20"
-              >
-                <path
-                  d="M10 2h4l-.79 7.91 6.45-4.64 2 3.46L14.42 12l7.24 3.27-2 3.46-6.45-4.64L14 22h-4l.79-7.91-6.45 4.64-2-3.46L9.58 12 2.34 8.73l2-3.46 6.45 4.64z"
-                />
-              </svg>
-            </div>
-          </div>
-          <div>
-            <div
-              class="emotion-14 emotion-15"
-              data-disabled="true"
-              data-error="true"
-              data-readonly="false"
-              data-success="false"
-            >
-              <input
-                aria-invalid="true"
-                autocomplete="false"
-                class="emotion-16 emotion-17"
-                data-size="large"
-                disabled=""
-                id=":rn:"
-                required=""
-                type="text"
-                value=""
-              />
-              <div
-                class="emotion-18 emotion-19"
-              >
-                <svg
-                  class="emotion-20 emotion-13"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0m-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5m0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-              <div
-                class="emotion-22 emotion-23"
-              >
-                <svg
-                  class="emotion-24 emotion-13"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                  />
-                  <path
-                    clip-rule="evenodd"
-                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-          <p
-            class="emotion-26 emotion-11"
-          >
-            error
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DateInputV2 > renders correctly min-max 1`] = `
-<DocumentFragment>
-  .emotion-0 {
-  width: 100%;
-}
-
-.emotion-2 {
-  display: inherit;
-}
-
-.emotion-2[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: start;
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: start;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-10 {
-  color: #222638;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  height: 48px;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
-  border-radius: 4px;
-}
-
-.emotion-12>.emotion-15 {
-  color: #3f4250;
-}
-
-.emotion-12>.emotion-15::-webkit-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::-moz-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15:-ms-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::placeholder {
-  color: #727683;
-}
-
-.emotion-12[data-success='true'] {
-  border-color: #22674e;
-}
-
-.emotion-12[data-error='true'] {
-  border-color: #b3144d;
-}
-
-.emotion-12[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-}
-
-.emotion-12[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15 {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
-}
-
-.emotion-14 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  border: none;
-  outline: none;
-  height: 100%;
-  width: 100%;
-  padding-left: 16px;
-  background: transparent;
-  font-size: 14px;
-}
-
-.emotion-14[data-size='large'] {
-  font-size: 16px;
-}
-
-.emotion-14[data-size='small'] {
-  padding-left: 8px;
-}
-
-.emotion-16 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  padding: 0 16px;
-  border-left: 1px solid;
-  border-color: inherit;
-}
-
-.emotion-18 {
-  vertical-align: middle;
-  fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
-}
-
-.emotion-18 .fillStroke {
-  stroke: #3f4250;
-  fill: none;
-}
-
-<div
-    data-testid="testing"
-  >
-    <div
-      class="emotion-0 emotion-1"
-    >
-      <div
-        aria-controls=":rr:"
-        aria-describedby=":rr:"
-        class="emotion-2 emotion-3"
-        tabindex="0"
-      >
-        <div
-          class="emotion-4 emotion-5"
-        >
-          <div
-            class="emotion-6 emotion-5"
-          >
-            <div
-              class="emotion-8 emotion-5"
-            >
-              <label
-                class="emotion-10 emotion-11"
-                for=":rs:"
-              >
-                Date
-              </label>
-            </div>
-          </div>
-          <div>
-            <div
-              class="emotion-12 emotion-13"
-              data-disabled="false"
-              data-error="false"
-              data-readonly="false"
-              data-success="false"
-            >
-              <input
-                aria-invalid="false"
-                autocomplete="false"
-                class="emotion-14 emotion-15"
-                data-size="large"
-                id=":rs:"
-                type="text"
-                value=""
-              />
-              <div
-                class="emotion-16 emotion-17"
-              >
-                <svg
-                  class="emotion-18 emotion-19"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                  />
-                  <path
-                    clip-rule="evenodd"
-                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DateInputV2 > renders correctly required 1`] = `
-<DocumentFragment>
-  .emotion-0 {
-  width: 100%;
-}
-
-.emotion-2 {
-  display: inherit;
-}
-
-.emotion-2[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: start;
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: start;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-10 {
-  color: #222638;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-12 {
-  vertical-align: middle;
-  fill: #b3144d;
-  height: 8px;
-  width: 8px;
-  min-width: 8px;
-  min-height: 8px;
-}
-
-.emotion-12 .fillStroke {
-  stroke: #b3144d;
-  fill: none;
-}
-
-.emotion-14 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  height: 48px;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
-  border-radius: 4px;
-}
-
-.emotion-14>.emotion-17 {
-  color: #3f4250;
-}
-
-.emotion-14>.emotion-17::-webkit-input-placeholder {
-  color: #727683;
-}
-
-.emotion-14>.emotion-17::-moz-placeholder {
-  color: #727683;
-}
-
-.emotion-14>.emotion-17:-ms-input-placeholder {
-  color: #727683;
-}
-
-.emotion-14>.emotion-17::placeholder {
-  color: #727683;
-}
-
-.emotion-14[data-success='true'] {
-  border-color: #22674e;
-}
-
-.emotion-14[data-error='true'] {
-  border-color: #b3144d;
-}
-
-.emotion-14[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-}
-
-.emotion-14[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-}
-
-.emotion-14[data-disabled='true']>.emotion-17 {
-  color: #b5b7bd;
-}
-
-.emotion-14[data-disabled='true']>.emotion-17::-webkit-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-14[data-disabled='true']>.emotion-17::-moz-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-14[data-disabled='true']>.emotion-17:-ms-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-14[data-disabled='true']>.emotion-17::placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-14:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
-}
-
-.emotion-16 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  border: none;
-  outline: none;
-  height: 100%;
-  width: 100%;
-  padding-left: 16px;
-  background: transparent;
-  font-size: 14px;
-}
-
-.emotion-16[data-size='large'] {
-  font-size: 16px;
-}
-
-.emotion-16[data-size='small'] {
-  padding-left: 8px;
-}
-
-.emotion-18 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  padding: 0 16px;
-  border-left: 1px solid;
-  border-color: inherit;
-}
-
-.emotion-20 {
-  vertical-align: middle;
-  fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
-}
-
-.emotion-20 .fillStroke {
-  stroke: #3f4250;
-  fill: none;
-}
-
-<div
-    data-testid="testing"
-  >
-    <div
-      class="emotion-0 emotion-1"
-    >
-      <div
-        aria-controls=":r8:"
-        aria-describedby=":r8:"
-        class="emotion-2 emotion-3"
-        tabindex="0"
-      >
-        <div
-          class="emotion-4 emotion-5"
-        >
-          <div
-            class="emotion-6 emotion-5"
-          >
-            <div
-              class="emotion-8 emotion-5"
-            >
-              <label
-                class="emotion-10 emotion-11"
-                for=":r9:"
-              >
-                Date
-              </label>
-              <svg
-                class="emotion-12 emotion-13"
-                viewBox="0 0 20 20"
-              >
-                <path
-                  d="M10 2h4l-.79 7.91 6.45-4.64 2 3.46L14.42 12l7.24 3.27-2 3.46-6.45-4.64L14 22h-4l.79-7.91-6.45 4.64-2-3.46L9.58 12 2.34 8.73l2-3.46 6.45 4.64z"
-                />
-              </svg>
-            </div>
-          </div>
-          <div>
-            <div
-              class="emotion-14 emotion-15"
-              data-disabled="false"
-              data-error="false"
-              data-readonly="false"
-              data-success="false"
-            >
-              <input
-                aria-invalid="false"
-                autocomplete="false"
-                class="emotion-16 emotion-17"
-                data-size="large"
-                id=":r9:"
-                required=""
-                type="text"
-                value=""
-              />
-              <div
-                class="emotion-18 emotion-19"
-              >
-                <svg
-                  class="emotion-20 emotion-13"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                  />
-                  <path
-                    clip-rule="evenodd"
-                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DateInputV2 > renders correctly with date-fns locale es 1`] = `
-<DocumentFragment>
-  @keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-}
-
-.emotion-0 {
-  width: 100%;
-}
-
-.emotion-2 {
-  display: inherit;
-}
-
-.emotion-2[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: start;
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: start;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-10 {
-  color: #222638;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  height: 48px;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
-  border-radius: 4px;
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
-  border: 1px solid #8c40ef;
-}
-
-.emotion-12>.emotion-15 {
-  color: #3f4250;
-}
-
-.emotion-12>.emotion-15::-webkit-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::-moz-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15:-ms-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::placeholder {
-  color: #727683;
-}
-
-.emotion-12[data-success='true'] {
-  border-color: #22674e;
-}
-
-.emotion-12[data-error='true'] {
-  border-color: #b3144d;
-}
-
-.emotion-12[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-}
-
-.emotion-12[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15 {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
-}
-
-.emotion-14 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  border: none;
-  outline: none;
-  height: 100%;
-  width: 100%;
-  padding-left: 16px;
-  background: transparent;
-  font-size: 14px;
-}
-
-.emotion-14[data-size='large'] {
-  font-size: 16px;
-}
-
-.emotion-14[data-size='small'] {
-  padding-left: 8px;
-}
-
-.emotion-16 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  padding: 0 16px;
-  border-left: 1px solid;
-  border-color: inherit;
-}
-
-.emotion-18 {
-  vertical-align: middle;
-  fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
-}
-
-.emotion-18 .fillStroke {
-  stroke: #3f4250;
-  fill: none;
-}
-
-.emotion-21 {
-  background: #151a2d;
-  color: #ffffff;
-  border-radius: 4px;
-  padding: 4px 8px;
-  text-align: center;
-  position: absolute;
-  max-width: 264px;
-  overflow-wrap: break-word;
-  font-size: 0.8rem;
-  inset: 0 auto auto 0;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  -webkit-transform: translate3d(0px, 4px, 0);
-  -moz-transform: translate3d(0px, 4px, 0);
-  -ms-transform: translate3d(0px, 4px, 0);
-  transform: translate3d(0px, 4px, 0);
-  width: 100%;
-  background-color: #ffffff;
-  color: #3f4250;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-  padding: 16px;
-  border-radius: 4px;
-}
-
-.emotion-21[data-animated="true"] {
-  -webkit-animation: 0ms animation-0 forwards;
-  animation: 0ms animation-0 forwards;
-}
-
-.emotion-21[data-has-arrow="true"]::after {
-  content: " ";
-  position: absolute;
-  top: -5px;
-  left: 0px;
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-  margin-left: -8px;
-  border-width: 8px;
-  border-style: solid;
-  border-color: #151a2d transparent transparent transparent;
-  pointer-events: none;
-}
-
-.emotion-21[data-visible-in-dom="false"] {
-  display: none;
-}
-
-.emotion-23 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 16px;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-25 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  width: 100%;
-}
-
-.emotion-27 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 24px;
-  padding: 0 4px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 4px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  width: 24px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 14px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 20px;
-  paragraph-spacing: 0;
-  text-case: none;
-  background: none;
-  border: none;
-  color: #3f4250;
-}
-
-.emotion-27:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-27:active {
-  box-shadow: 0px 0px 0px 3px #151a2d5c;
-}
-
-.emotion-27:hover,
-.emotion-27:active {
-  background: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-29 {
-  vertical-align: middle;
-  fill: currentColor;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
-}
-
-.emotion-29 .fillStroke {
-  stroke: currentColor;
-  fill: none;
-}
-
-.emotion-31 {
-  color: #3f4250;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-37 {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 8px;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-}
-
-.emotion-40 {
-  color: #3f4250;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  height: 26px;
-  width: 100%;
-}
-
-.emotion-61 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 48px;
-  padding: 0 16px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 8px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  width: auto;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  paragraph-spacing: 0;
-  text-case: none;
-  background: none;
-  border: none;
-  color: #3f4250;
-  height: 26px;
-  width: 100%;
-  padding: 0;
-}
-
-.emotion-61:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-61:active {
-  box-shadow: 0px 0px 0px 3px #151a2d5c;
-}
-
-.emotion-61:hover,
-.emotion-61:active {
-  background: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-61.rangeButton {
-  background-color: #f1eefc;
-}
-
-.emotion-63 {
-  color: #b5b7bd;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-83 {
-  color: #727683;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-<div
-    data-testid="testing"
-  >
-    <div
-      class="emotion-0 emotion-1"
-    >
-      <div
-        aria-controls=":r41:"
-        aria-describedby=":r41:"
-        class="emotion-2 emotion-3"
-        tabindex="0"
-      >
-        <div
-          class="emotion-4 emotion-5"
-        >
-          <div
-            class="emotion-6 emotion-5"
-          >
-            <div
-              class="emotion-8 emotion-5"
-            >
-              <label
-                class="emotion-10 emotion-11"
-                for=":r42:"
-              >
-                Date
-              </label>
-            </div>
-          </div>
-          <div>
-            <div
-              class="emotion-12 emotion-13"
-              data-disabled="false"
-              data-error="false"
-              data-readonly="false"
-              data-success="false"
-            >
-              <input
-                aria-invalid="false"
-                autocomplete="false"
-                class="emotion-14 emotion-15"
-                data-size="large"
-                id=":r42:"
-                type="text"
-                value=""
-              />
-              <div
-                class="emotion-16 emotion-17"
-              >
-                <svg
-                  class="emotion-18 emotion-19"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                  />
-                  <path
-                    clip-rule="evenodd"
-                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="emotion-20 emotion-21 emotion-22"
-          data-animated="false"
-          data-has-arrow="false"
-          id=":r41:"
-          role="dialog"
-          style="opacity: 1;"
-        >
-          <div
-            class="emotion-23 emotion-5"
-          >
-            <div
-              class="emotion-25 emotion-5"
-            >
-              <button
-                class="emotion-27 emotion-28"
-                data-testid="previous-month"
-                type="button"
-              >
-                <svg
-                  class="emotion-29 emotion-30"
-                  viewBox="0 0 16 16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M10.53 4.22a.75.75 0 0 1 0 1.06L7.81 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </button>
-              <p
-                class="emotion-31 emotion-11"
-              >
-                noviembre 2024
-              </p>
-              <button
-                class="emotion-27 emotion-28"
-                data-testid="next-month"
-                type="button"
-              >
-                <svg
-                  class="emotion-29 emotion-30"
-                  viewBox="0 0 16 16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </button>
-            </div>
-            <div
-              class="emotion-37 emotion-38"
-            >
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                lu
-              </p>
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                ma
-              </p>
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                mi
-              </p>
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                ju
-              </p>
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                vi
-              </p>
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                sá
-              </p>
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                do
-              </p>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayLastMonth"
-                  >
-                    28
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayLastMonth"
-                  >
-                    29
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayLastMonth"
-                  >
-                    30
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayLastMonth"
-                  >
-                    31
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    1
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    2
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    3
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    4
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    5
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    6
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    7
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    8
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    9
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    10
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    11
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    12
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    13
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    14
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    15
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    16
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    17
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    18
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    19
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    20
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    21
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    22
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    23
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    24
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    25
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    26
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    27
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    28
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    29
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    30
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    1
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    2
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    3
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    4
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    5
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    6
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    7
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    8
-                  </p>
-                </div>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DateInputV2 > renders correctly with date-fns locale fr 1`] = `
-<DocumentFragment>
-  @keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-}
-
-.emotion-0 {
-  width: 100%;
-}
-
-.emotion-2 {
-  display: inherit;
-}
-
-.emotion-2[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: start;
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: start;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-10 {
-  color: #222638;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  height: 48px;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
-  border-radius: 4px;
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
-  border: 1px solid #8c40ef;
-}
-
-.emotion-12>.emotion-15 {
-  color: #3f4250;
-}
-
-.emotion-12>.emotion-15::-webkit-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::-moz-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15:-ms-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::placeholder {
-  color: #727683;
-}
-
-.emotion-12[data-success='true'] {
-  border-color: #22674e;
-}
-
-.emotion-12[data-error='true'] {
-  border-color: #b3144d;
-}
-
-.emotion-12[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-}
-
-.emotion-12[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15 {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
-}
-
-.emotion-14 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  border: none;
-  outline: none;
-  height: 100%;
-  width: 100%;
-  padding-left: 16px;
-  background: transparent;
-  font-size: 14px;
-}
-
-.emotion-14[data-size='large'] {
-  font-size: 16px;
-}
-
-.emotion-14[data-size='small'] {
-  padding-left: 8px;
-}
-
-.emotion-16 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  padding: 0 16px;
-  border-left: 1px solid;
-  border-color: inherit;
-}
-
-.emotion-18 {
-  vertical-align: middle;
-  fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
-}
-
-.emotion-18 .fillStroke {
-  stroke: #3f4250;
-  fill: none;
-}
-
-.emotion-21 {
-  background: #151a2d;
-  color: #ffffff;
-  border-radius: 4px;
-  padding: 4px 8px;
-  text-align: center;
-  position: absolute;
-  max-width: 264px;
-  overflow-wrap: break-word;
-  font-size: 0.8rem;
-  inset: 0 auto auto 0;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  -webkit-transform: translate3d(0px, 4px, 0);
-  -moz-transform: translate3d(0px, 4px, 0);
-  -ms-transform: translate3d(0px, 4px, 0);
-  transform: translate3d(0px, 4px, 0);
-  width: 100%;
-  background-color: #ffffff;
-  color: #3f4250;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-  padding: 16px;
-  border-radius: 4px;
-}
-
-.emotion-21[data-animated="true"] {
-  -webkit-animation: 0ms animation-0 forwards;
-  animation: 0ms animation-0 forwards;
-}
-
-.emotion-21[data-has-arrow="true"]::after {
-  content: " ";
-  position: absolute;
-  top: -5px;
-  left: 0px;
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-  margin-left: -8px;
-  border-width: 8px;
-  border-style: solid;
-  border-color: #151a2d transparent transparent transparent;
-  pointer-events: none;
-}
-
-.emotion-21[data-visible-in-dom="false"] {
-  display: none;
-}
-
-.emotion-23 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 16px;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-25 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  width: 100%;
-}
-
-.emotion-27 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 24px;
-  padding: 0 4px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 4px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  width: 24px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 14px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 20px;
-  paragraph-spacing: 0;
-  text-case: none;
-  background: none;
-  border: none;
-  color: #3f4250;
-}
-
-.emotion-27:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-27:active {
-  box-shadow: 0px 0px 0px 3px #151a2d5c;
-}
-
-.emotion-27:hover,
-.emotion-27:active {
-  background: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-29 {
-  vertical-align: middle;
-  fill: currentColor;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
-}
-
-.emotion-29 .fillStroke {
-  stroke: currentColor;
-  fill: none;
-}
-
-.emotion-31 {
-  color: #3f4250;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-37 {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 8px;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-}
-
-.emotion-40 {
-  color: #3f4250;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  height: 26px;
-  width: 100%;
-}
-
-.emotion-61 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 48px;
-  padding: 0 16px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 8px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  width: auto;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  paragraph-spacing: 0;
-  text-case: none;
-  background: none;
-  border: none;
-  color: #3f4250;
-  height: 26px;
-  width: 100%;
-  padding: 0;
-}
-
-.emotion-61:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-61:active {
-  box-shadow: 0px 0px 0px 3px #151a2d5c;
-}
-
-.emotion-61:hover,
-.emotion-61:active {
-  background: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-61.rangeButton {
-  background-color: #f1eefc;
-}
-
-.emotion-63 {
-  color: #b5b7bd;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-83 {
-  color: #727683;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-<div
-    data-testid="testing"
-  >
-    <div
-      class="emotion-0 emotion-1"
-    >
-      <div
-        aria-controls=":rv:"
-        aria-describedby=":rv:"
-        class="emotion-2 emotion-3"
-        tabindex="0"
-      >
-        <div
-          class="emotion-4 emotion-5"
-        >
-          <div
-            class="emotion-6 emotion-5"
-          >
-            <div
-              class="emotion-8 emotion-5"
-            >
-              <label
-                class="emotion-10 emotion-11"
-                for=":r10:"
-              >
-                Date
-              </label>
-            </div>
-          </div>
-          <div>
-            <div
-              class="emotion-12 emotion-13"
-              data-disabled="false"
-              data-error="false"
-              data-readonly="false"
-              data-success="false"
-            >
-              <input
-                aria-invalid="false"
-                autocomplete="false"
-                class="emotion-14 emotion-15"
-                data-size="large"
-                id=":r10:"
-                type="text"
-                value=""
-              />
-              <div
-                class="emotion-16 emotion-17"
-              >
-                <svg
-                  class="emotion-18 emotion-19"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                  />
-                  <path
-                    clip-rule="evenodd"
-                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="emotion-20 emotion-21 emotion-22"
-          data-animated="false"
-          data-has-arrow="false"
-          id=":rv:"
-          role="dialog"
-          style="opacity: 1;"
-        >
-          <div
-            class="emotion-23 emotion-5"
-          >
-            <div
-              class="emotion-25 emotion-5"
-            >
-              <button
-                class="emotion-27 emotion-28"
-                data-testid="previous-month"
-                type="button"
-              >
-                <svg
-                  class="emotion-29 emotion-30"
-                  viewBox="0 0 16 16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M10.53 4.22a.75.75 0 0 1 0 1.06L7.81 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </button>
-              <p
-                class="emotion-31 emotion-11"
-              >
-                novembre 2024
-              </p>
-              <button
-                class="emotion-27 emotion-28"
-                data-testid="next-month"
-                type="button"
-              >
-                <svg
-                  class="emotion-29 emotion-30"
-                  viewBox="0 0 16 16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </button>
-            </div>
-            <div
-              class="emotion-37 emotion-38"
-            >
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                lu
-              </p>
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                ma
-              </p>
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                me
-              </p>
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                je
-              </p>
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                ve
-              </p>
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                sa
-              </p>
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                di
-              </p>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayLastMonth"
-                  >
-                    28
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayLastMonth"
-                  >
-                    29
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayLastMonth"
-                  >
-                    30
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayLastMonth"
-                  >
-                    31
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    1
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    2
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    3
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    4
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    5
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    6
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    7
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    8
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    9
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    10
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    11
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    12
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    13
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    14
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    15
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    16
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    17
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    18
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    19
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    20
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    21
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    22
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    23
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    24
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    25
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    26
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    27
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    28
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    29
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    30
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    1
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    2
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    3
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    4
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    5
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    6
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    7
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    8
-                  </p>
-                </div>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DateInputV2 > renders correctly with date-fns locale ru 1`] = `
-<DocumentFragment>
-  @keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-}
-
-.emotion-0 {
-  width: 100%;
-}
-
-.emotion-2 {
-  display: inherit;
-}
-
-.emotion-2[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: start;
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: start;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-10 {
-  color: #222638;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  height: 48px;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
-  border-radius: 4px;
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
-  border: 1px solid #8c40ef;
-}
-
-.emotion-12>.emotion-15 {
-  color: #3f4250;
-}
-
-.emotion-12>.emotion-15::-webkit-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::-moz-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15:-ms-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::placeholder {
-  color: #727683;
-}
-
-.emotion-12[data-success='true'] {
-  border-color: #22674e;
-}
-
-.emotion-12[data-error='true'] {
-  border-color: #b3144d;
-}
-
-.emotion-12[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-}
-
-.emotion-12[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15 {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
-}
-
-.emotion-14 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  border: none;
-  outline: none;
-  height: 100%;
-  width: 100%;
-  padding-left: 16px;
-  background: transparent;
-  font-size: 14px;
-}
-
-.emotion-14[data-size='large'] {
-  font-size: 16px;
-}
-
-.emotion-14[data-size='small'] {
-  padding-left: 8px;
-}
-
-.emotion-16 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  padding: 0 16px;
-  border-left: 1px solid;
-  border-color: inherit;
-}
-
-.emotion-18 {
-  vertical-align: middle;
-  fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
-}
-
-.emotion-18 .fillStroke {
-  stroke: #3f4250;
-  fill: none;
-}
-
-.emotion-21 {
-  background: #151a2d;
-  color: #ffffff;
-  border-radius: 4px;
-  padding: 4px 8px;
-  text-align: center;
-  position: absolute;
-  max-width: 264px;
-  overflow-wrap: break-word;
-  font-size: 0.8rem;
-  inset: 0 auto auto 0;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  -webkit-transform: translate3d(0px, 4px, 0);
-  -moz-transform: translate3d(0px, 4px, 0);
-  -ms-transform: translate3d(0px, 4px, 0);
-  transform: translate3d(0px, 4px, 0);
-  width: 100%;
-  background-color: #ffffff;
-  color: #3f4250;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-  padding: 16px;
-  border-radius: 4px;
-}
-
-.emotion-21[data-animated="true"] {
-  -webkit-animation: 0ms animation-0 forwards;
-  animation: 0ms animation-0 forwards;
-}
-
-.emotion-21[data-has-arrow="true"]::after {
-  content: " ";
-  position: absolute;
-  top: -5px;
-  left: 0px;
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-  margin-left: -8px;
-  border-width: 8px;
-  border-style: solid;
-  border-color: #151a2d transparent transparent transparent;
-  pointer-events: none;
-}
-
-.emotion-21[data-visible-in-dom="false"] {
-  display: none;
-}
-
-.emotion-23 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 16px;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-25 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  width: 100%;
-}
-
-.emotion-27 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 24px;
-  padding: 0 4px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 4px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  width: 24px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 14px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 20px;
-  paragraph-spacing: 0;
-  text-case: none;
-  background: none;
-  border: none;
-  color: #3f4250;
-}
-
-.emotion-27:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-27:active {
-  box-shadow: 0px 0px 0px 3px #151a2d5c;
-}
-
-.emotion-27:hover,
-.emotion-27:active {
-  background: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-29 {
-  vertical-align: middle;
-  fill: currentColor;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
-}
-
-.emotion-29 .fillStroke {
-  stroke: currentColor;
-  fill: none;
-}
-
-.emotion-31 {
-  color: #3f4250;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-37 {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 8px;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-}
-
-.emotion-40 {
-  color: #3f4250;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  height: 26px;
-  width: 100%;
-}
-
-.emotion-61 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 48px;
-  padding: 0 16px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 8px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  width: auto;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  paragraph-spacing: 0;
-  text-case: none;
-  background: none;
-  border: none;
-  color: #3f4250;
-  height: 26px;
-  width: 100%;
-  padding: 0;
-}
-
-.emotion-61:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-61:active {
-  box-shadow: 0px 0px 0px 3px #151a2d5c;
-}
-
-.emotion-61:hover,
-.emotion-61:active {
-  background: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-61.rangeButton {
-  background-color: #f1eefc;
-}
-
-.emotion-63 {
-  color: #b5b7bd;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-83 {
-  color: #727683;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-<div
-    data-testid="testing"
-  >
-    <div
-      class="emotion-0 emotion-1"
-    >
-      <div
-        aria-controls=":r73:"
-        aria-describedby=":r73:"
-        class="emotion-2 emotion-3"
-        tabindex="0"
-      >
-        <div
-          class="emotion-4 emotion-5"
-        >
-          <div
-            class="emotion-6 emotion-5"
-          >
-            <div
-              class="emotion-8 emotion-5"
-            >
-              <label
-                class="emotion-10 emotion-11"
-                for=":r74:"
-              >
-                Date
-              </label>
-            </div>
-          </div>
-          <div>
-            <div
-              class="emotion-12 emotion-13"
-              data-disabled="false"
-              data-error="false"
-              data-readonly="false"
-              data-success="false"
-            >
-              <input
-                aria-invalid="false"
-                autocomplete="false"
-                class="emotion-14 emotion-15"
-                data-size="large"
-                id=":r74:"
-                type="text"
-                value=""
-              />
-              <div
-                class="emotion-16 emotion-17"
-              >
-                <svg
-                  class="emotion-18 emotion-19"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                  />
-                  <path
-                    clip-rule="evenodd"
-                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="emotion-20 emotion-21 emotion-22"
-          data-animated="false"
-          data-has-arrow="false"
-          id=":r73:"
-          role="dialog"
-          style="opacity: 1;"
-        >
-          <div
-            class="emotion-23 emotion-5"
-          >
-            <div
-              class="emotion-25 emotion-5"
-            >
-              <button
-                class="emotion-27 emotion-28"
-                data-testid="previous-month"
-                type="button"
-              >
-                <svg
-                  class="emotion-29 emotion-30"
-                  viewBox="0 0 16 16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M10.53 4.22a.75.75 0 0 1 0 1.06L7.81 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </button>
-              <p
-                class="emotion-31 emotion-11"
-              >
-                ноябрь 2024
-              </p>
-              <button
-                class="emotion-27 emotion-28"
-                data-testid="next-month"
-                type="button"
-              >
-                <svg
-                  class="emotion-29 emotion-30"
-                  viewBox="0 0 16 16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </button>
-            </div>
-            <div
-              class="emotion-37 emotion-38"
-            >
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                по
-              </p>
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                вт
-              </p>
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                ср
-              </p>
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                че
-              </p>
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                пя
-              </p>
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                су
-              </p>
-              <p
-                class="emotion-39 emotion-40 emotion-11"
-              >
-                во
-              </p>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayLastMonth"
-                  >
-                    28
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayLastMonth"
-                  >
-                    29
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayLastMonth"
-                  >
-                    30
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayLastMonth"
-                  >
-                    31
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    1
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    2
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    3
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    4
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    5
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    6
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    7
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    8
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    9
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    10
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    11
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    12
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    13
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    14
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    15
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    16
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    17
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    18
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    19
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    20
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    21
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    22
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    23
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    24
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    25
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    26
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    27
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    28
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    29
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-83 emotion-11"
-                  >
-                    30
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    1
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    2
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    3
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    4
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    5
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    6
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    7
-                  </p>
-                </div>
-              </button>
-              <button
-                class="emotion-60 emotion-61 emotion-28"
-                type="button"
-              >
-                <div>
-                  <p
-                    class="emotion-63 emotion-11"
-                    data-testid="dayNextMonth"
-                  >
-                    8
-                  </p>
-                </div>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DateInputV2 > renders correctly with default props 1`] = `
-<DocumentFragment>
-  .emotion-0 {
-  width: 100%;
-}
-
-.emotion-2 {
-  display: inherit;
-}
-
-.emotion-2[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: start;
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: start;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
-.emotion-10 {
-  color: #222638;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  height: 48px;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
-  border-radius: 4px;
-}
-
-.emotion-12>.emotion-15 {
-  color: #3f4250;
-}
-
-.emotion-12>.emotion-15::-webkit-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::-moz-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15:-ms-input-placeholder {
-  color: #727683;
-}
-
-.emotion-12>.emotion-15::placeholder {
-  color: #727683;
-}
-
-.emotion-12[data-success='true'] {
-  border-color: #22674e;
-}
-
-.emotion-12[data-error='true'] {
-  border-color: #b3144d;
-}
-
-.emotion-12[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-}
-
-.emotion-12[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15 {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12[data-disabled='true']>.emotion-15::placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
-}
-
-.emotion-14 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  border: none;
-  outline: none;
-  height: 100%;
-  width: 100%;
-  padding-left: 16px;
-  background: transparent;
-  font-size: 14px;
-}
-
-.emotion-14[data-size='large'] {
-  font-size: 16px;
-}
-
-.emotion-14[data-size='small'] {
-  padding-left: 8px;
-}
-
-.emotion-16 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  padding: 0 16px;
-  border-left: 1px solid;
-  border-color: inherit;
-}
-
-.emotion-18 {
-  vertical-align: middle;
-  fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
-}
-
-.emotion-18 .fillStroke {
-  stroke: #3f4250;
-  fill: none;
-}
-
-<div
-    data-testid="testing"
-  >
-    <div
-      class="emotion-0 emotion-1"
-    >
-      <div
-        aria-controls=":r0:"
-        aria-describedby=":r0:"
-        class="emotion-2 emotion-3"
-        tabindex="0"
-      >
-        <div
-          class="emotion-4 emotion-5"
-        >
-          <div
-            class="emotion-6 emotion-5"
-          >
-            <div
-              class="emotion-8 emotion-5"
-            >
-              <label
-                class="emotion-10 emotion-11"
-                for=":r1:"
-              >
-                Date
-              </label>
-            </div>
-          </div>
-          <div>
-            <div
-              class="emotion-12 emotion-13"
-              data-disabled="false"
-              data-error="false"
-              data-readonly="false"
-              data-success="false"
-            >
-              <input
-                aria-invalid="false"
-                autocomplete="false"
-                class="emotion-14 emotion-15"
-                data-size="large"
-                id=":r1:"
-                name="test"
-                type="text"
-                value="1995-12-17T03:24:00.000Z"
-              />
-              <div
-                class="emotion-16 emotion-17"
-              >
-                <svg
-                  class="emotion-18 emotion-19"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    d="M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75zM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75zM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75zM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75zM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75zM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75z"
-                  />
-                  <path
-                    clip-rule="evenodd"
-                    d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2m-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
diff --git a/packages/ui/src/components/DateInputV2/__tests__/index.test.tsx b/packages/ui/src/components/DateInputV2/__tests__/index.test.tsx
deleted file mode 100644
index d38fc79ca8..0000000000
--- a/packages/ui/src/components/DateInputV2/__tests__/index.test.tsx
+++ /dev/null
@@ -1,379 +0,0 @@
-import { screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { renderWithTheme } from '@utils/test'
-import { es, fr, ru } from 'date-fns/locale'
-import tk from 'timekeeper'
-import { describe, expect, test } from 'vitest'
-import { DateInputV2 } from '..'
-
-tk.freeze(new Date(1609503120000))
-
-describe('DateInputV2', () => {
-  test('renders correctly with default props', () => {
-    const { asFragment } = renderWithTheme(
-      <DateInputV2
-        label="Date"
-        onChange={() => {}}
-        onBlur={() => {}}
-        onFocus={() => {}}
-        locale={fr}
-        value={new Date('1995-12-17T03:24:00.000+00:00')}
-        name="test"
-        autoFocus={false}
-        format={value => (value instanceof Date ? value.toISOString() : value)}
-      />,
-    )
-    expect(asFragment()).toMatchSnapshot()
-  })
-
-  test('renders correctly disabled', () => {
-    const { asFragment } = renderWithTheme(
-      <DateInputV2 label="Date" disabled onChange={() => {}} />,
-    )
-    expect(asFragment()).toMatchSnapshot()
-  })
-
-  test('renders correctly required', () => {
-    const { asFragment } = renderWithTheme(
-      <DateInputV2 label="Date" required onChange={() => {}} />,
-    )
-    expect(asFragment()).toMatchSnapshot()
-  })
-
-  test('renders correctly error', () => {
-    const { asFragment } = renderWithTheme(
-      <DateInputV2 label="Date" error="error" onChange={() => {}} />,
-    )
-    expect(asFragment()).toMatchSnapshot()
-  })
-  test('renders correctly error disabled', () => {
-    const { asFragment } = renderWithTheme(
-      <DateInputV2 label="Date" error="error" disabled onChange={() => {}} />,
-    )
-    expect(asFragment()).toMatchSnapshot()
-  })
-
-  test('renders correctly error disabled required', () => {
-    const { asFragment } = renderWithTheme(
-      <DateInputV2
-        label="Date"
-        error="error"
-        disabled
-        required
-        onChange={() => {}}
-      />,
-    )
-    expect(asFragment()).toMatchSnapshot()
-  })
-
-  test('renders correctly min-max', () => {
-    const { asFragment } = renderWithTheme(
-      <DateInputV2
-        label="Date"
-        minDate={new Date('1995-12-11T03:24:00.000+00:00')}
-        maxDate={new Date('1995-12-25T03:24:00.000+00:00')}
-        onChange={() => {}}
-      />,
-    )
-    expect(asFragment()).toMatchSnapshot()
-  })
-
-  test('renders correctly with date-fns locale fr', async () => {
-    const { asFragment } = renderWithTheme(
-      <DateInputV2 label="Date" locale={fr} onChange={() => {}} />,
-    )
-    const buttonContainer = screen.getByLabelText('Date')
-    await userEvent.click(buttonContainer)
-    expect(asFragment()).toMatchSnapshot()
-  })
-
-  test('renders correctly with date-fns locale es', async () => {
-    const { asFragment } = renderWithTheme(
-      <DateInputV2 label="Date" locale={es} onChange={() => {}} />,
-    )
-    const buttonContainer = screen.getByLabelText('Date')
-    await userEvent.click(buttonContainer)
-    expect(asFragment()).toMatchSnapshot()
-  })
-
-  test('renders correctly with date-fns locale ru', async () => {
-    const { asFragment } = renderWithTheme(
-      <DateInputV2 label="Date" locale={ru} onChange={() => {}} />,
-    )
-    const buttonContainer = screen.getByLabelText('Date')
-    await userEvent.click(buttonContainer)
-    expect(asFragment()).toMatchSnapshot()
-  })
-
-  test('render correctly with showMonthYearPicker', () => {
-    const { asFragment } = renderWithTheme(
-      <DateInputV2 label="Date" showMonthYearPicker onChange={() => {}} />,
-    )
-    expect(asFragment()).toMatchSnapshot()
-  })
-  test('render correctly with showMonthYearPicker with default date', async () => {
-    const { asFragment } = renderWithTheme(
-      <DateInputV2
-        label="Date"
-        showMonthYearPicker
-        onChange={() => {}}
-        value={new Date('1995-02-11T03:24:00.000+00:00')}
-        placeholder="YYYY-MM-DD"
-      />,
-    )
-
-    const input = screen.getByPlaceholderText('YYYY-MM-DD')
-    await userEvent.click(input)
-    expect(asFragment()).toMatchSnapshot()
-  })
-
-  test('render correctly with a range of date', () => {
-    const { asFragment } = renderWithTheme(
-      <DateInputV2
-        label="Date"
-        selectsRange
-        startDate={new Date('1995-12-11T03:24:00.000+00:00')}
-        endDate={new Date('1995-12-25T03:24:00.000+00:00')}
-        onChange={() => {}}
-      />,
-    )
-    expect(asFragment()).toMatchSnapshot()
-  })
-
-  test('render correctly with a array of dates to exclude', async () => {
-    const { asFragment } = renderWithTheme(
-      <DateInputV2
-        label="Date"
-        value={new Date('1995-12-11T03:24:00.000+00:00')}
-        excludeDates={[
-          new Date('1995-12-12T03:24:00.000+00:00'),
-          new Date('1995-12-13T03:24:00.000+00:00'),
-          new Date('1995-12-14T03:24:00.000+00:00'),
-        ]}
-        placeholder="YYYY-MM-DD"
-        onChange={() => {}}
-      />,
-    )
-    const input = screen.getByPlaceholderText<HTMLInputElement>('YYYY-MM-DD')
-    await userEvent.click(input)
-
-    expect(asFragment()).toMatchSnapshot()
-  })
-
-  test('handle correctly click outside', async () => {
-    renderWithTheme(
-      <>
-        Outside
-        <DateInputV2
-          label="Date"
-          onChange={() => {}}
-          placeholder="YYYY-MM-DD"
-        />
-      </>,
-    )
-
-    const input = screen.getByPlaceholderText('YYYY-MM-DD')
-    await userEvent.click(input)
-    const calendar = screen.getByRole('dialog')
-    expect(calendar).toBeVisible()
-    await userEvent.click(screen.getByText('Outside'))
-    await userEvent.click(screen.getByText('Outside'))
-    expect(calendar).not.toBeVisible()
-  })
-
-  test('handle correctly click to change month', async () => {
-    renderWithTheme(
-      <>
-        Outside
-        <DateInputV2
-          label="Date"
-          onChange={() => {}}
-          placeholder="YYYY-MM-DD"
-          value={new Date('1995-12-11T03:24:00.000+00:00')}
-        />
-      </>,
-    )
-
-    const input = screen.getByPlaceholderText<HTMLInputElement>('YYYY-MM-DD')
-    await userEvent.click(input)
-    const calendar = screen.getByRole('dialog')
-    expect(calendar).toBeVisible()
-
-    const visibleMonth = screen.getByText(/December/i)
-    await userEvent.click(screen.getByTestId('previous-month'))
-    expect(visibleMonth.textContent).toContain('November')
-
-    await userEvent.click(screen.getByTestId('next-month'))
-    expect(visibleMonth.textContent).toContain('December')
-  })
-
-  test('handle correctly click to change year', async () => {
-    renderWithTheme(
-      <>
-        Outside
-        <DateInputV2
-          label="Date"
-          onChange={() => {}}
-          placeholder="YYYY-MM-DD"
-          value={new Date('1995-12-11T03:24:00.000+00:00')}
-          showMonthYearPicker
-        />
-      </>,
-    )
-
-    const input = screen.getByPlaceholderText<HTMLInputElement>('YYYY-MM-DD')
-    await userEvent.click(input)
-    const calendar = screen.getByRole('dialog')
-    expect(calendar).toBeVisible()
-
-    const visibleMonth = screen.getByText(/1995/i)
-    await userEvent.click(screen.getByTestId('previous-month'))
-    expect(visibleMonth.textContent).toContain('1994')
-
-    await userEvent.click(screen.getByTestId('next-month'))
-    expect(visibleMonth.textContent).toContain('1995')
-  })
-
-  test('handle correctly click on date', async () => {
-    renderWithTheme(
-      <DateInputV2
-        label="Date"
-        onChange={() => {}}
-        placeholder="YYYY-MM-DD"
-        value={new Date('1995-12-11T03:24:00.000+00:00')}
-      />,
-    )
-
-    const input = screen.getByPlaceholderText<HTMLInputElement>('YYYY-MM-DD')
-    await userEvent.click(input)
-    const visibleMonth = screen.getByText(/December/i)
-    const calendar = screen.getByRole('dialog')
-    expect(calendar).toBeVisible()
-
-    await userEvent.click(screen.getByText('15'))
-    expect(input.value).toBe('1995/12/15')
-
-    const dayFromLastMonth = screen.getAllByText('30')[0] // the first element in this array is necessarily from previous month
-    await userEvent.click(dayFromLastMonth)
-    expect(visibleMonth.textContent).toContain('November')
-
-    const dayFromNextMonth = screen.getAllByText('1')[1]
-    await userEvent.click(dayFromNextMonth)
-    expect(visibleMonth.textContent).toContain('December')
-  })
-
-  test('handle correctly click on date range', async () => {
-    renderWithTheme(
-      <DateInputV2
-        label="Date"
-        onChange={() => {}}
-        placeholder="YYYY-MM-DD"
-        selectsRange
-        value={new Date('1995-02-11T03:24:00.000+00:00')}
-      />,
-    )
-
-    const input = screen.getByPlaceholderText<HTMLInputElement>('YYYY-MM-DD')
-    await userEvent.click(input)
-    const calendar = screen.getByRole('dialog')
-    expect(calendar).toBeVisible()
-
-    await userEvent.click(screen.getByText('15'))
-    expect(input.value).toBe('1995/02/15 – ')
-    const day = screen.getByText('27')
-
-    await userEvent.hover(day)
-    await userEvent.unhover(day)
-
-    await userEvent.click(day)
-    expect(input.value).toBe('1995/02/15 – 1995/02/27')
-
-    await userEvent.click(screen.getByText('31'))
-    expect(input.value).toBe('1995/01/31 – ')
-  })
-
-  test('render correctly with showMonthYearPicker with excluded months', async () => {
-    const { asFragment } = renderWithTheme(
-      <DateInputV2
-        label="Date"
-        showMonthYearPicker
-        onChange={() => {}}
-        value={new Date('1995-02-11T03:24:00.000+00:00')}
-        placeholder="YYYY-MM-DD"
-        excludeDates={[new Date('1995-10-01'), new Date('1995-02-01')]}
-      />,
-    )
-    const input = screen.getByPlaceholderText('YYYY-MM-DD')
-    await userEvent.click(input)
-    expect(asFragment()).toMatchSnapshot()
-  })
-
-  test('handle correctly click on date with showmonthYearPicker', async () => {
-    renderWithTheme(
-      <DateInputV2
-        label="Date"
-        onChange={() => {}}
-        placeholder="YYYY-MM-DD"
-        value={new Date('1995-12-11T03:24:00.000+00:00')}
-        showMonthYearPicker
-      />,
-    )
-
-    const input = screen.getByPlaceholderText<HTMLInputElement>('YYYY-MM-DD')
-    await userEvent.click(input)
-    const calendar = screen.getByRole('dialog')
-    expect(calendar).toBeVisible()
-
-    await userEvent.click(screen.getByText('Jan'))
-    expect(input.value).toBe('1995/01')
-  })
-
-  test('handle correctly click on date range with showMonthYearPicker', async () => {
-    renderWithTheme(
-      <DateInputV2
-        label="Date"
-        onChange={() => {}}
-        placeholder="YYYY-MM-DD"
-        selectsRange
-        showMonthYearPicker
-        value={new Date('1995-12-11T03:24:00.000+00:00')}
-      />,
-    )
-
-    const input = screen.getByPlaceholderText<HTMLInputElement>('YYYY-MM-DD')
-    await userEvent.click(input)
-    const calendar = screen.getByRole('dialog')
-    expect(calendar).toBeVisible()
-
-    await userEvent.click(screen.getByText('Aug'))
-    expect(input.value).toBe('1995/08 – ')
-    const month = screen.getByText('Feb')
-
-    await userEvent.hover(month)
-    await userEvent.unhover(month)
-
-    await userEvent.click(month)
-    expect(input.value).toBe('1995/02 – ')
-
-    await userEvent.click(screen.getByText('Sep'))
-    expect(input.value).toBe('1995/02 – 1995/09')
-  })
-
-  test('renders correctly custom format with range', () => {
-    const { asFragment } = renderWithTheme(
-      <DateInputV2
-        label="Date"
-        onChange={() => {}}
-        onBlur={() => {}}
-        onFocus={() => {}}
-        selectsRange
-        startDate={new Date('1995-12-11T03:24:00.000+00:00')}
-        endDate={new Date('1995-12-11T03:24:00.000+00:00')}
-        name="test"
-        autoFocus={false}
-        format={value => (value instanceof Date ? value.toISOString() : value)}
-      />,
-    )
-    expect(asFragment()).toMatchSnapshot()
-  })
-})
diff --git a/packages/ui/src/components/DateInputV2/index.tsx b/packages/ui/src/components/DateInputV2/index.tsx
deleted file mode 100644
index 8c1e654f7c..0000000000
--- a/packages/ui/src/components/DateInputV2/index.tsx
+++ /dev/null
@@ -1,263 +0,0 @@
-import styled from '@emotion/styled'
-import { CalendarRangeIcon } from '@ultraviolet/icons'
-import type { Locale } from 'date-fns'
-import type { FocusEvent } from 'react'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { TextInputV2 } from '../TextInputV2'
-import { type ContextProps, DateInputContext } from './Context'
-import { CalendarPopup } from './Popup'
-import { CURRENT_MONTH, CURRENT_YEAR, addZero } from './helpers'
-import { getDays, getLocalizedMonths, getMonths } from './helpersLocale'
-
-const Container = styled.div`
-width: 100%;`
-
-type DateInputProps<IsRange extends undefined | boolean = false> = {
-  autoFocus?: boolean
-  locale?: string | Locale
-  disabled?: boolean
-  maxDate?: Date | null
-  minDate?: Date | null
-  name?: string
-  onBlur?: (event: FocusEvent<HTMLInputElement>) => void
-  onFocus?: (event: FocusEvent<HTMLInputElement>) => void
-  error?: string
-  required?: boolean
-  format?: (value?: Date) => string | undefined
-  /**
-   * Label of the field
-   */
-  label?: string
-  value?: Date | null
-  className?: string
-  'data-testid'?: string
-  excludeDates?: Date[]
-  id?: string
-  labelDescription?: string
-  success?: string | boolean
-  helper?: string
-  size?: 'small' | 'medium' | 'large'
-  readOnly?: boolean
-  tooltip?: string
-  showMonthYearPicker?: boolean
-  placeholder?: string
-  startDate?: Date | null
-  endDate?: Date | null
-  selectsRange?: IsRange
-  onChange?: IsRange extends true
-    ? (
-        date: Date[] | [Date | null, Date | null],
-        event: React.SyntheticEvent | undefined,
-      ) => void
-    : (date: Date | null, event: React.SyntheticEvent | undefined) => void
-}
-
-/**
- * DateInput can be used to select a specific date
- */
-export const DateInputV2 = <IsRange extends undefined | boolean>({
-  autoFocus = false,
-  disabled = false,
-  error,
-  format,
-  label,
-  labelDescription,
-  locale = 'en-US',
-  maxDate,
-  minDate,
-  startDate,
-  endDate,
-  name,
-  onBlur,
-  onChange,
-  placeholder,
-  onFocus,
-  required = false,
-  excludeDates,
-  value,
-  className,
-  id,
-  success,
-  helper,
-  size = 'large',
-  readOnly = false,
-  tooltip,
-  selectsRange = false,
-  showMonthYearPicker,
-  'data-testid': dataTestId,
-}: DateInputProps<IsRange>) => {
-  const defaultMonthToShow = useMemo(() => {
-    if (value) return value.getMonth() + 1
-    if (startDate && selectsRange) return startDate.getMonth() + 1
-    if (endDate && selectsRange) return endDate.getMonth() + 1
-
-    return CURRENT_MONTH
-  }, [endDate, selectsRange, startDate, value])
-
-  const defaultYearToShow = useMemo(() => {
-    if (value) return value.getFullYear()
-    if (startDate && selectsRange) return startDate.getFullYear()
-    if (endDate && selectsRange) return endDate.getFullYear()
-
-    return CURRENT_YEAR
-  }, [endDate, selectsRange, startDate, value])
-
-  const [computedValue, setValue] = useState(
-    value && !selectsRange ? value : null,
-  )
-  const [computedRange, setRange] = useState({
-    start: startDate ?? null,
-    end: endDate ?? null,
-  })
-  const [isPopupVisible, setVisible] = useState(false)
-  const [monthToShow, setMonthToShow] = useState(defaultMonthToShow)
-  const [yearToShow, setYearToShow] = useState(defaultYearToShow)
-  const refInput = useRef<HTMLInputElement>(null)
-  const MONTHS = getMonths(locale)
-  const DAYS = getDays(locale)
-  const MONTHS_ARR = getLocalizedMonths(locale)
-
-  // Default format if none is provided
-  const getDateISO = useCallback(
-    (date?: Date) => {
-      if (date) {
-        if (showMonthYearPicker) {
-          return [date.getFullYear(), addZero(date.getMonth() + 1)].join('/')
-        }
-
-        return [
-          date.getFullYear(),
-          addZero(date.getMonth() + 1),
-          addZero(date.getDate()),
-        ].join('/')
-      }
-
-      return ''
-    },
-    [showMonthYearPicker],
-  )
-
-  const valueContext = useMemo(
-    () =>
-      ({
-        showMonthYearPicker,
-        disabled,
-        value: computedValue,
-        range: computedRange,
-        setRange,
-        setValue,
-        monthToShow,
-        yearToShow,
-        setMonthToShow,
-        setYearToShow,
-        excludeDates,
-        maxDate,
-        minDate,
-        MONTHS,
-        MONTHS_ARR,
-        DAYS,
-        onChange,
-        selectsRange,
-      }) as ContextProps,
-    [
-      showMonthYearPicker,
-      disabled,
-      selectsRange,
-      computedValue,
-      computedRange,
-      monthToShow,
-      yearToShow,
-      excludeDates,
-      maxDate,
-      minDate,
-      MONTHS,
-      MONTHS_ARR,
-      DAYS,
-      onChange,
-    ],
-  )
-
-  useEffect(() => {
-    if (value && !selectsRange) {
-      setValue(value)
-    }
-    if (selectsRange) {
-      setRange({
-        start: startDate ?? computedRange.start,
-        end: endDate ?? computedRange.end,
-      })
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [endDate, startDate, value])
-
-  const formattedValue = useMemo(() => {
-    if (selectsRange) {
-      return format
-        ? `${format(computedRange.start ?? undefined)} – ${format(computedRange.end ?? undefined)}`
-        : `${getDateISO(computedRange.start ?? undefined)} – ${getDateISO(computedRange.end ?? undefined)}`
-    }
-
-    if (computedValue && format) {
-      return format(computedValue)
-    }
-    if (computedValue) {
-      return getDateISO(computedValue)
-    }
-
-    return undefined
-  }, [
-    selectsRange,
-    computedValue,
-    format,
-    computedRange.start,
-    computedRange.end,
-    getDateISO,
-  ])
-
-  return (
-    <DateInputContext.Provider value={valueContext}>
-      <Container
-        id={id}
-        className={className}
-        data-testid={dataTestId}
-        onBlur={onBlur}
-        onFocus={onFocus}
-        onClick={() => {
-          if (!isPopupVisible) setVisible(true)
-        }}
-      >
-        <CalendarPopup
-          visible={isPopupVisible}
-          setVisible={setVisible}
-          refInput={refInput}
-        >
-          <TextInputV2
-            label={label}
-            placeholder={placeholder}
-            value={formattedValue}
-            required={required}
-            error={error}
-            success={success}
-            readOnly={readOnly}
-            disabled={disabled}
-            size={size}
-            autoFocus={autoFocus}
-            helper={helper}
-            labelDescription={labelDescription}
-            name={name}
-            suffix={
-              <CalendarRangeIcon
-                size="large"
-                sentiment="neutral"
-                disabled={disabled}
-              />
-            }
-            ref={refInput}
-            tooltip={tooltip}
-            autoComplete="false"
-          />
-        </CalendarPopup>
-      </Container>
-    </DateInputContext.Provider>
-  )
-}
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 53dc952eed..78dd7355b1 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -16,7 +16,6 @@ export { CheckboxGroup, CheckboxGroupCheckbox } from './CheckboxGroup'
 export { Chip } from './Chip'
 export { CopyButton } from './CopyButton'
 export { DateInput } from './DateInput'
-export { DateInputV2 } from './DateInputV2'
 export { Dialog } from './Dialog'
 export { EmptyState } from './EmptyState'
 export { Expandable } from './Expandable'