From 6068e7cb560bc6951f70e0fbab8a6a3cea8109ea Mon Sep 17 00:00:00 2001 From: lisa Date: Thu, 31 Oct 2024 18:17:30 +0100 Subject: [PATCH 01/10] feat: dateinput refactor wip --- .changeset/brown-baboons-teach.md | 6 + packages/ui/src/components/Button/index.tsx | 8 + .../ui/src/components/DateInputV2/Context.tsx | 58 + .../ui/src/components/DateInputV2/Popup.tsx | 480 ++ .../__stories__/Controlled.stories.tsx | 36 + .../__stories__/Disabled.stories.tsx | 16 + .../DateInputV2/__stories__/Error.stories.tsx | 24 + .../__stories__/Exclude.stories.tsx | 22 + .../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 | 56 + .../__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 | 6934 +++++++++++++++++ .../DateInputV2/__tests__/index.test.tsx | 143 + .../ui/src/components/DateInputV2/helpers.ts | 59 + .../components/DateInputV2/helpersLocale.ts | 78 + .../ui/src/components/DateInputV2/index.tsx | 246 + .../ui/src/components/DateInputV2/types.ts | 53 + packages/ui/src/components/index.ts | 1 + 25 files changed, 8439 insertions(+) create mode 100644 .changeset/brown-baboons-teach.md create mode 100644 packages/ui/src/components/DateInputV2/Context.tsx create mode 100644 packages/ui/src/components/DateInputV2/Popup.tsx create mode 100644 packages/ui/src/components/DateInputV2/__stories__/Controlled.stories.tsx create mode 100644 packages/ui/src/components/DateInputV2/__stories__/Disabled.stories.tsx create mode 100644 packages/ui/src/components/DateInputV2/__stories__/Error.stories.tsx create mode 100644 packages/ui/src/components/DateInputV2/__stories__/Exclude.stories.tsx create mode 100644 packages/ui/src/components/DateInputV2/__stories__/I18n.stories.tsx create mode 100644 packages/ui/src/components/DateInputV2/__stories__/Localized.stories.tsx create mode 100644 packages/ui/src/components/DateInputV2/__stories__/MinMax.stories.tsx create mode 100644 packages/ui/src/components/DateInputV2/__stories__/Months.stories.tsx create mode 100644 packages/ui/src/components/DateInputV2/__stories__/Playground.stories.tsx create mode 100644 packages/ui/src/components/DateInputV2/__stories__/Range.stories.tsx create mode 100644 packages/ui/src/components/DateInputV2/__stories__/Required.stories.tsx create mode 100644 packages/ui/src/components/DateInputV2/__stories__/Size.stories.tsx create mode 100644 packages/ui/src/components/DateInputV2/__stories__/Template.tsx create mode 100644 packages/ui/src/components/DateInputV2/__stories__/index.stories.tsx create mode 100644 packages/ui/src/components/DateInputV2/__tests__/__snapshots__/index.test.tsx.snap create mode 100644 packages/ui/src/components/DateInputV2/__tests__/index.test.tsx create mode 100644 packages/ui/src/components/DateInputV2/helpers.ts create mode 100644 packages/ui/src/components/DateInputV2/helpersLocale.ts create mode 100644 packages/ui/src/components/DateInputV2/index.tsx create mode 100644 packages/ui/src/components/DateInputV2/types.ts diff --git a/.changeset/brown-baboons-teach.md b/.changeset/brown-baboons-teach.md new file mode 100644 index 0000000000..b9a83ccb3a --- /dev/null +++ b/.changeset/brown-baboons-teach.md @@ -0,0 +1,6 @@ +--- +"@ultraviolet/ui": minor +--- + +- New component `` which doesn't use React Date Picker +- ` + + ) +} + +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 new file mode 100644 index 0000000000..62d5b222b4 --- /dev/null +++ b/packages/ui/src/components/DateInputV2/__stories__/Disabled.stories.tsx @@ -0,0 +1,16 @@ +import { Template } from './Template' + +export const Disabled = Template.bind({}) + +Disabled.args = { + label: 'Disabled', + disabled: true, +} + +Disabled.decorators = [ + StoryComponent => ( +
+ +
+ ), +] diff --git a/packages/ui/src/components/DateInputV2/__stories__/Error.stories.tsx b/packages/ui/src/components/DateInputV2/__stories__/Error.stories.tsx new file mode 100644 index 0000000000..0861094ff1 --- /dev/null +++ b/packages/ui/src/components/DateInputV2/__stories__/Error.stories.tsx @@ -0,0 +1,24 @@ +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 => ( +
+ +
+ ), +] diff --git a/packages/ui/src/components/DateInputV2/__stories__/Exclude.stories.tsx b/packages/ui/src/components/DateInputV2/__stories__/Exclude.stories.tsx new file mode 100644 index 0000000000..1a9b7b4d51 --- /dev/null +++ b/packages/ui/src/components/DateInputV2/__stories__/Exclude.stories.tsx @@ -0,0 +1,22 @@ +import { Template } from './Template' + +export const Exclude = Template.bind({}) + +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 new file mode 100644 index 0000000000..d41382a51c --- /dev/null +++ b/packages/ui/src/components/DateInputV2/__stories__/I18n.stories.tsx @@ -0,0 +1,78 @@ +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> = args => { + const [currentLocale, setCurrentLocale] = useState( + locales[0], + ) + const [value, setValue] = + useState['value']>(undefined) + + const [dateFns, setDateFns] = useState(enGB) + + const onChange = async (locale: string) => { + if (isLocales(locale)) { + setCurrentLocale(locale) + setDateFns(await loadDateFNS(locale)) + } + } + + return ( +
+ + + { + setValue(v as Date) + }} + label={currentLocale} + selectsRange={false} + /> +
+ ) +} + +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 new file mode 100644 index 0000000000..57d21d238d --- /dev/null +++ b/packages/ui/src/components/DateInputV2/__stories__/Localized.stories.tsx @@ -0,0 +1,41 @@ +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) => + locales.map(({ label, locale }) => ( + {}} + 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 => ( +
+ +
+ ), +] as Decorator[] diff --git a/packages/ui/src/components/DateInputV2/__stories__/MinMax.stories.tsx b/packages/ui/src/components/DateInputV2/__stories__/MinMax.stories.tsx new file mode 100644 index 0000000000..76901e84c2 --- /dev/null +++ b/packages/ui/src/components/DateInputV2/__stories__/MinMax.stories.tsx @@ -0,0 +1,18 @@ +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 new file mode 100644 index 0000000000..ca4e792e11 --- /dev/null +++ b/packages/ui/src/components/DateInputV2/__stories__/Months.stories.tsx @@ -0,0 +1,17 @@ +import { Template } from './Template' + +export const Months = Template.bind({}) + +Months.args = { + label: 'Months', + showMonthYearPicker: true, + disabled: false, +} + +Months.decorators = [ + StoryComponent => ( +
+ +
+ ), +] diff --git a/packages/ui/src/components/DateInputV2/__stories__/Playground.stories.tsx b/packages/ui/src/components/DateInputV2/__stories__/Playground.stories.tsx new file mode 100644 index 0000000000..a0e981bab6 --- /dev/null +++ b/packages/ui/src/components/DateInputV2/__stories__/Playground.stories.tsx @@ -0,0 +1,15 @@ +import { Template } from './Template' + +export const Playground = Template.bind({}) + +Playground.args = { + placeholder: 'YYYY-MM-DD', +} + +Playground.decorators = [ + StoryComponent => ( +
+ +
+ ), +] diff --git a/packages/ui/src/components/DateInputV2/__stories__/Range.stories.tsx b/packages/ui/src/components/DateInputV2/__stories__/Range.stories.tsx new file mode 100644 index 0000000000..6019706c34 --- /dev/null +++ b/packages/ui/src/components/DateInputV2/__stories__/Range.stories.tsx @@ -0,0 +1,56 @@ +import type { StoryFn } from '@storybook/react' +import { useState } from 'react' +import { DateInputV2 } from '..' +import { Stack } from '../../Stack' + +export const Range: StoryFn = args => { + const [startDate, setStartDate] = useState(null) + const [endDate, setEndDate] = useState(null) + + const [startMonth, setStartMonth] = useState(null) + const [endMonth, setEndMonth] = useState(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 ( + + + Selected dates : {startDate?.toDateString()} - {endDate?.toDateString()} + + Selected months : {startMonth?.toDateString()} -{endMonth?.toDateString()} + + ) +} + +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 new file mode 100644 index 0000000000..85436e459c --- /dev/null +++ b/packages/ui/src/components/DateInputV2/__stories__/Required.stories.tsx @@ -0,0 +1,8 @@ +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 new file mode 100644 index 0000000000..488bee278a --- /dev/null +++ b/packages/ui/src/components/DateInputV2/__stories__/Size.stories.tsx @@ -0,0 +1,11 @@ +import type { StoryFn } from '@storybook/react' +import { DateInputV2 } from '..' +import { Stack } from '../../Stack' + +export const Size: StoryFn = args => ( + + {(['small', 'medium', 'large'] as const).map(size => ( + + ))} + +) diff --git a/packages/ui/src/components/DateInputV2/__stories__/Template.tsx b/packages/ui/src/components/DateInputV2/__stories__/Template.tsx new file mode 100644 index 0000000000..b8fc4129a7 --- /dev/null +++ b/packages/ui/src/components/DateInputV2/__stories__/Template.tsx @@ -0,0 +1,12 @@ +import type { StoryFn } from '@storybook/react' +import { DateInputV2 } from '..' + +export const Template: StoryFn = 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 new file mode 100644 index 0000000000..9d496ddbd3 --- /dev/null +++ b/packages/ui/src/components/DateInputV2/__stories__/index.stories.tsx @@ -0,0 +1,19 @@ +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 new file mode 100644 index 0000000000..0aa11c160e --- /dev/null +++ b/packages/ui/src/components/DateInputV2/__tests__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,6934 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`DateInputV2 > render correctly with a array of dates to exclude 1`] = ` + + .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; +} + +
+
+
+
+
+
+ +
+
+
+
+ +
+ + + + +
+
+
+
+
+
+
+ +`; + +exports[`DateInputV2 > render correctly with a range of date 1`] = ` + + .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; +} + +
+
+
+
+
+
+ +
+
+
+
+ +
+ + + + +
+
+
+
+
+
+
+ +`; + +exports[`DateInputV2 > render correctly with showMonthYearPicker 1`] = ` + + .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; +} + +
+
+
+
+
+
+ +
+
+
+
+ +
+ + + + +
+
+
+
+
+
+
+ +`; + +exports[`DateInputV2 > renders correctly disabled 1`] = ` + + .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; +} + +
+
+
+
+
+
+ +
+
+
+
+ +
+ + + + +
+
+
+
+
+
+
+ +`; + +exports[`DateInputV2 > renders correctly error 1`] = ` + + .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; +} + +
+
+
+
+
+
+ +
+
+
+
+ +
+ + + +
+
+ + + + +
+
+
+

+ error +

+
+
+
+
+ +`; + +exports[`DateInputV2 > renders correctly error disabled 1`] = ` + + .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; +} + +
+
+
+
+
+
+ +
+
+
+
+ +
+ + + +
+
+ + + + +
+
+
+

+ error +

+
+
+
+
+ +`; + +exports[`DateInputV2 > renders correctly error disabled required 1`] = ` + + .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; +} + +
+
+
+
+
+
+ + + + +
+
+
+
+ +
+ + + +
+
+ + + + +
+
+
+

+ error +

+
+
+
+
+ +`; + +exports[`DateInputV2 > renders correctly min-max 1`] = ` + + .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; +} + +
+
+
+
+
+
+ +
+
+
+
+ +
+ + + + +
+
+
+
+
+
+
+ +`; + +exports[`DateInputV2 > renders correctly required 1`] = ` + + .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; +} + +
+
+
+
+
+
+ + + + +
+
+
+
+ +
+ + + + +
+
+
+
+
+
+
+ +`; + +exports[`DateInputV2 > renders correctly with date-fns locale es 1`] = ` + + @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-68 { + 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; +} + +
+
+
+
+
+
+ +
+
+
+
+ +
+ + + + +
+
+
+
+ +
+
+
+ +`; + +exports[`DateInputV2 > renders correctly with date-fns locale fr 1`] = ` + + @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-68 { + 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; +} + +
+
+
+
+
+
+ +
+
+
+
+ +
+ + + + +
+
+
+
+ +
+
+
+ +`; + +exports[`DateInputV2 > renders correctly with date-fns locale ru 1`] = ` + + @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-68 { + 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; +} + +
+
+
+
+
+
+ +
+
+
+
+ +
+ + + + +
+
+
+
+ +
+
+
+ +`; + +exports[`DateInputV2 > renders correctly with default props 1`] = ` + + .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; +} + +
+
+
+
+
+
+ +
+
+
+
+ +
+ + + + +
+
+
+
+
+
+
+ +`; diff --git a/packages/ui/src/components/DateInputV2/__tests__/index.test.tsx b/packages/ui/src/components/DateInputV2/__tests__/index.test.tsx new file mode 100644 index 0000000000..de14a71c08 --- /dev/null +++ b/packages/ui/src/components/DateInputV2/__tests__/index.test.tsx @@ -0,0 +1,143 @@ +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( + {}} + 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( + {}} />, + ) + expect(asFragment()).toMatchSnapshot() + }) + + test('renders correctly required', () => { + const { asFragment } = renderWithTheme( + {}} />, + ) + expect(asFragment()).toMatchSnapshot() + }) + + test('renders correctly error', () => { + const { asFragment } = renderWithTheme( + {}} />, + ) + expect(asFragment()).toMatchSnapshot() + }) + test('renders correctly error disabled', () => { + const { asFragment } = renderWithTheme( + {}} />, + ) + expect(asFragment()).toMatchSnapshot() + }) + + test('renders correctly error disabled required', () => { + const { asFragment } = renderWithTheme( + {}} + />, + ) + expect(asFragment()).toMatchSnapshot() + }) + + test('renders correctly min-max', () => { + const { asFragment } = renderWithTheme( + {}} + />, + ) + expect(asFragment()).toMatchSnapshot() + }) + + test('renders correctly with date-fns locale fr', async () => { + const { asFragment } = renderWithTheme( + {}} />, + ) + const buttonContainer = screen.getByLabelText('Date') + await userEvent.click(buttonContainer) + expect(asFragment()).toMatchSnapshot() + }) + + test('renders correctly with date-fns locale es', async () => { + const { asFragment } = renderWithTheme( + {}} />, + ) + const buttonContainer = screen.getByLabelText('Date') + await userEvent.click(buttonContainer) + expect(asFragment()).toMatchSnapshot() + }) + + test('renders correctly with date-fns locale ru', async () => { + const { asFragment } = renderWithTheme( + {}} />, + ) + const buttonContainer = screen.getByLabelText('Date') + await userEvent.click(buttonContainer) + expect(asFragment()).toMatchSnapshot() + }) + + test('render correctly with showMonthYearPicker', () => { + const { asFragment } = renderWithTheme( + {}} />, + ) + expect(asFragment()).toMatchSnapshot() + }) + + test('render correctly with a range of date', () => { + const { asFragment } = renderWithTheme( + {}} + />, + ) + expect(asFragment()).toMatchSnapshot() + }) + + test('render correctly with a array of dates to exclude', () => { + const { asFragment } = renderWithTheme( + {}} + />, + ) + expect(asFragment()).toMatchSnapshot() + }) +}) diff --git a/packages/ui/src/components/DateInputV2/helpers.ts b/packages/ui/src/components/DateInputV2/helpers.ts new file mode 100644 index 0000000000..f6884ef10d --- /dev/null +++ b/packages/ui/src/components/DateInputV2/helpers.ts @@ -0,0 +1,59 @@ +export const POPUP_WIDTH = '264px' + +// The current year +export const CURRENT_YEAR = new Date().getFullYear() + +// The current month starting from 1 - 12 +// 1 => January, 12 => December +export const CURRENT_MONTH = new Date().getMonth() + 1 + +// The current day 1-28/29/30/31 + +// Weeks displayed on calendar +export const CALENDAR_WEEKS = 6 + +// Number days in a month for a given year +export const getMonthDays = (month = CURRENT_MONTH, year = CURRENT_YEAR) => { + const months30 = [4, 6, 9, 11] // 30 days in april, june, september and november + const leapYear = year % 4 === 0 + + if (month === 2) { + return leapYear ? 29 : 28 // Days in february + } + + return months30.includes(month) ? 30 : 31 +} + +// First day of the month for a given year from 1 (monday) - 7 (saturday) +export const getMonthFirstDay = (month = CURRENT_MONTH, year = CURRENT_YEAR) => + new Date(`${year}-${month}-01`).getDay() + 1 + +// Adds a zero for 1-digit months/days +export const addZero = (value: number) => `${value}`.padStart(2, '0') + +export const getPreviousMonth = (month: number, year: number) => { + if (month === 1) { + return [12, year - 1] + } + + return [month - 1, year] +} + +export const getNextMonth = (month: number, year: number) => { + if (month === 12) { + return [1, year + 1] + } + + return [month + 1, year] +} + +// Checks if two date values are of the same month and year +export const isSameMonth = (date: Date, basedate = new Date()) => + basedate.getMonth() + 1 === date.getMonth() + 1 && + basedate.getFullYear() === date.getFullYear() + +// (bool) Checks if two date values are the same day +export const isSameDay = (date: Date, basedate = new Date()) => + basedate.getDate() === date.getDate() && + basedate.getMonth() + 1 === date.getMonth() + 1 && + basedate.getFullYear() === date.getFullYear() diff --git a/packages/ui/src/components/DateInputV2/helpersLocale.ts b/packages/ui/src/components/DateInputV2/helpersLocale.ts new file mode 100644 index 0000000000..1e53c687d1 --- /dev/null +++ b/packages/ui/src/components/DateInputV2/helpersLocale.ts @@ -0,0 +1,78 @@ +import type { Locale } from 'date-fns' + +const getLocalizedDays = (locale: string) => { + const formatter = new Intl.DateTimeFormat(locale, { weekday: 'long' }) + const days = [] + for (let i = 0; i < 7; i += 1) { + const date = new Date(1970, 0, i + 4) + days.push(formatter.format(date)) + } + + return days +} + +export const getLocalizedMonths = (locale: Locale | string) => { + const computedLocale = typeof locale === 'string' ? locale : locale.code + + const formatter = new Intl.DateTimeFormat(computedLocale, { month: 'long' }) + const months = [] + for (let i = 0; i < 12; i += 1) { + const date = new Date(1970, i) // Iterate through months + months.push(formatter.format(date)) + } + + return months +} + +const getLocalizedShortMonths = (locale: string) => { + const formatter = new Intl.DateTimeFormat(locale, { month: 'short' }) + const months = [] + for (let i = 0; i < 12; i += 1) { + const date = new Date(1970, i) + months.push(formatter.format(date)) + } + + return months +} + +export const getDays = (locale: Locale | string) => { + const computedLocale = typeof locale === 'string' ? locale : locale.code + const longDays = getLocalizedDays(computedLocale) // Get long names + const days: Record = {} + + // Map long day names (localized) to short day names (localized) + longDays.forEach(longDay => { + days[longDay] = longDay.slice(0, 2) + }) + + // Get the keys of the dictionary + const dayKeys = Object.keys(days) + + // Move the first element to the end + if (dayKeys.length > 0) { + dayKeys.push(dayKeys.shift()!) // Remove the first key and push it to the end + } + + // Create a new object with the ordered keys + const orderedDaysMap: Record = {} + dayKeys.forEach(key => { + orderedDaysMap[key] = days[key] + }) + + return orderedDaysMap +} + +export const getMonths = (locale: Locale | string) => { + const computedLocale = typeof locale === 'string' ? locale : locale.code + + const longMonths = getLocalizedMonths(locale) // Get long names + const shortMonths = getLocalizedShortMonths(computedLocale) // Get short names + const months: Record = {} + + // Map long month names (localized) to short month names (localized) + longMonths.forEach((longMonth, index) => { + months[longMonth] = shortMonths[index] + }) + + return months +} diff --git a/packages/ui/src/components/DateInputV2/index.tsx b/packages/ui/src/components/DateInputV2/index.tsx new file mode 100644 index 0000000000..1cba2f7c16 --- /dev/null +++ b/packages/ui/src/components/DateInputV2/index.tsx @@ -0,0 +1,246 @@ +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 { DateInputContext } from './Context' +import { CalendarPopup } from './Popup' +import { CURRENT_MONTH, CURRENT_YEAR, addZero } from './helpers' +import { getDays, getLocalizedMonths, getMonths } from './helpersLocale' +import type { ContextProps } from './types' + +const Container = styled.div` +width: 100%;` + +type DateInputProps = { + autoFocus?: boolean + locale?: string | Locale + disabled?: boolean + maxDate?: Date | null + minDate?: Date | null + name?: string + onBlur?: (event: FocusEvent) => void + onFocus?: (event: FocusEvent) => 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 = ({ + 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) => { + const [computedValue, setValue] = useState(value ?? null) + const [computedRange, setRange] = useState({ + start: startDate ?? null, + end: endDate ?? null, + }) + const [isPopupVisible, setVisible] = useState(false) + const [monthToShow, setMonthToShow] = useState( + value ? value.getMonth() + 1 : CURRENT_MONTH, + ) + const [yearToShow, setYearToShow] = useState( + value ? value.getFullYear() : CURRENT_YEAR, + ) + const refInput = useRef(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(() => { + setValue(value as Date) + 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 ( + + { + if (!isPopupVisible) setVisible(true) + }} + > + + + } + ref={refInput} + tooltip={tooltip} + autoComplete="false" + /> + + + + ) +} diff --git a/packages/ui/src/components/DateInputV2/types.ts b/packages/ui/src/components/DateInputV2/types.ts new file mode 100644 index 0000000000..3b217d4863 --- /dev/null +++ b/packages/ui/src/components/DateInputV2/types.ts @@ -0,0 +1,53 @@ +import type { Dispatch, SetStateAction } from 'react' + +export type ContextProps = { + showMonthYearPicker?: boolean + disabled: boolean + /** + * month to show on popup - NOT selectedValue + */ + monthToShow: number + /** + * Year to show on popup - NOT selectedValue + */ + yearToShow: number + excludeDates?: Date[] + setMonthToShow: Dispatch> + setYearToShow: Dispatch> + minDate?: Date | null + maxDate?: Date | null + // Calendar months names and short names + MONTHS: Record + // Week days names and shortnames + DAYS: Record + MONTHS_ARR: string[] + setValue: Dispatch> + value?: Date | null + range?: { + start: Date | null + end: Date | null + } + setRange?: Dispatch< + SetStateAction<{ + start: Date | null + end: Date | null + }> + > + startDate?: Date | null + endDate?: Date | null +} & ( + | { + selectsRange: true + onChange?: ( + date: [Date | null, Date | null], + event: React.SyntheticEvent | undefined, + ) => void + } + | { + selectsRange: false + onChange?: ( + date: Date | null, + event: React.SyntheticEvent | undefined, + ) => void + } +) diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index 78dd7355b1..53dc952eed 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -16,6 +16,7 @@ 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' From 3b016ce725d39d2748a1b6c997c32c9c15320db7 Mon Sep 17 00:00:00 2001 From: lisa Date: Thu, 7 Nov 2024 15:01:15 +0100 Subject: [PATCH 02/10] feat: dateinputV2 --- .../ui/src/components/DateInputV2/Context.tsx | 57 +- .../ui/src/components/DateInputV2/Popup.tsx | 46 +- .../__stories__/Exclude.stories.tsx | 22 +- .../DateInputV2/__stories__/Range.stories.tsx | 23 +- .../__snapshots__/index.test.tsx.snap | 4047 +++++++++++++++-- .../DateInputV2/__tests__/index.test.tsx | 238 +- .../ui/src/components/DateInputV2/helpers.ts | 13 +- .../components/DateInputV2/helpersLocale.ts | 14 +- .../ui/src/components/DateInputV2/index.tsx | 49 +- .../ui/src/components/DateInputV2/types.ts | 53 - 10 files changed, 4022 insertions(+), 540 deletions(-) delete mode 100644 packages/ui/src/components/DateInputV2/types.ts diff --git a/packages/ui/src/components/DateInputV2/Context.tsx b/packages/ui/src/components/DateInputV2/Context.tsx index d4ff30ae50..36751d757b 100644 --- a/packages/ui/src/components/DateInputV2/Context.tsx +++ b/packages/ui/src/components/DateInputV2/Context.tsx @@ -1,7 +1,58 @@ import { createContext } from 'react' -import type { ContextProps } from './types' +import type { Dispatch, SetStateAction } from 'react' -export const DAYS_DEFAULT = { +export type ContextProps = { + showMonthYearPicker?: boolean + disabled: boolean + /** + * month to show on popup - NOT selectedValue + */ + monthToShow: number + /** + * Year to show on popup - NOT selectedValue + */ + yearToShow: number + excludeDates?: Date[] + setMonthToShow: Dispatch> + setYearToShow: Dispatch> + minDate?: Date | null + maxDate?: Date | null + // Calendar months names and short names + MONTHS: Record + // Week days names and shortnames + DAYS: Record + MONTHS_ARR: string[] + setValue: Dispatch> + value?: Date | null + range?: { + start: Date | null + end: Date | null + } + setRange?: Dispatch< + SetStateAction<{ + start: Date | null + end: Date | null + }> + > + startDate?: Date | null + endDate?: Date | null +} & ( + | { + selectsRange: true + onChange?: ( + date: [Date | null, Date | null], + event: React.SyntheticEvent | undefined, + ) => void + } + | { + selectsRange: false + onChange?: ( + date: Date | null, + event: React.SyntheticEvent | undefined, + ) => void + } +) +const DAYS_DEFAULT = { Sunday: 'Su', Monday: 'Mo', Tuesday: 'Tu', @@ -12,7 +63,7 @@ export const DAYS_DEFAULT = { } // Calendar months names and short names -export const MONTHS_DEFAULT = { +const MONTHS_DEFAULT = { January: 'Jan', February: 'Feb', March: 'Mar', diff --git a/packages/ui/src/components/DateInputV2/Popup.tsx b/packages/ui/src/components/DateInputV2/Popup.tsx index d3481edbb1..c90b51b3f1 100644 --- a/packages/ui/src/components/DateInputV2/Popup.tsx +++ b/packages/ui/src/components/DateInputV2/Popup.tsx @@ -151,7 +151,7 @@ const Monthly = ({ disabled }: { disabled: boolean }) => { variant={isSelected || isInHoveredRange ? 'filled' : 'ghost'} sentiment={isSelected || isInHoveredRange ? 'primary' : 'neutral'} className={isInHoveredRange ? 'rangeButton' : undefined} - disabled={disabled} + disabled={disabled || isExcluded || isOutsideRange} key={month[0]} onClick={event => { if (!isExcluded && !isOutsideRange) { @@ -172,6 +172,7 @@ const Monthly = ({ disabled }: { disabled: boolean }) => { variant="bodyStrong" prominence={isSelected && !isInHoveredRange ? 'strong' : 'weak'} sentiment={isSelected || isInHoveredRange ? 'primary' : 'neutral'} + disabled={disabled || isExcluded || isOutsideRange} > {month[1]} @@ -207,9 +208,9 @@ const Daily = ({ disabled }: { disabled: boolean }) => { const [hoveredDate, setHoveredDate] = useState(null) const monthDays = getMonthDays(monthToShow, yearToShow) // Number of days in the month - const monthFirstDay = getMonthFirstDay(monthToShow, yearToShow) // First day of the month - const daysFromPreviousMonth = (monthFirstDay - 1 + 6) % 7 // Number of days from the previous month to show. Shift to align Monday start + const daysFromPreviousMonth = + (getMonthFirstDay(monthToShow, yearToShow) - 1 + 6) % 7 // Number of days from the previous month to show. Shift to align Monday start const daysFromNextMonth = CALENDAR_WEEKS * 7 - (daysFromPreviousMonth + monthDays) // We want to display 6 CALENDAR_WEEKS lines, so we show days from the next month @@ -331,6 +332,13 @@ const Daily = ({ disabled }: { disabled: boolean }) => { } } } + const createTestId = () => { + if (isInHoveredRange) return 'rangeButton' + if (data.month === -1) return 'dayLastMonth' + if (data.month === 1) return 'dayNextMonth' + + return undefined + } return ( { disabled={ disabled || data.month !== 0 || isExcluded || isOutsideRange } + data-testid={createTestId()} > {data.day} @@ -390,6 +399,7 @@ const PopupContent = () => { +

+ December 1995 +

+ + +
+

+ Mo +

+

+ Tu +

+

+ We +

+

+ Th +

+

+ Fr +

+

+ Sa +

+

+ Su +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + +`; + +exports[`DateInputV2 > render correctly with a range of date 1`] = ` + + .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; +} + +
+
+
+
+
+
+ +
+
+
+
+ +
+ + + + +
+
+
+
+
+
+
+ +`; + +exports[`DateInputV2 > render correctly with showMonthYearPicker 1`] = ` + + .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; +} + +
+
+
+
+
+
+ +
+
+
+
+ +
+ + + + +
+
+
+
+
+
+
+ +`; + +exports[`DateInputV2 > render correctly with showMonthYearPicker with default date 1`] = ` + + @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; +} + +
+
+
+
+
+
+ +
+
+
+
+ +
+ + + + +
+
+
+
+ +
+
+
+ +`; + +exports[`DateInputV2 > render correctly with showMonthYearPicker with excluded months 1`] = ` + + @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-14[data-size='large'] { - font-size: 16px; +.emotion-45:hover { + -webkit-text-decoration: none; + text-decoration: none; } -.emotion-14[data-size='small'] { - padding-left: 8px; +.emotion-45.rangeButton { + background-color: #f1eefc; } -.emotion-16 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - gap: 0; +.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; - -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; + 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-18 { - vertical-align: middle; - fill: #3f4250; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; +.emotion-85:hover { + -webkit-text-decoration: none; + text-decoration: none; } -.emotion-18 .fillStroke { - stroke: #3f4250; - fill: 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; }
render correctly with a range of date 1`] = ` class="emotion-0 emotion-1" >
@@ -559,7 +3498,7 @@ exports[`DateInputV2 > render correctly with a range of date 1`] = ` > @@ -578,27 +3517,234 @@ exports[`DateInputV2 > render correctly with a range of date 1`] = ` autocomplete="false" class="emotion-14 emotion-15" data-size="large" - id=":raa:" + id=":ruu:" + placeholder="YYYY-MM-DD" type="text" - value="1995/12/11 – 1995/12/25" + value="1995/02" />
- - - - -
+ + + + +
+
+ + + @@ -608,7 +3754,7 @@ exports[`DateInputV2 > render correctly with a range of date 1`] = ` `; -exports[`DateInputV2 > render correctly with showMonthYearPicker 1`] = ` +exports[`DateInputV2 > renders correctly custom format with range 1`] = ` .emotion-0 { width: 100%; @@ -847,8 +3993,8 @@ exports[`DateInputV2 > render correctly with showMonthYearPicker 1`] = ` class="emotion-0 emotion-1" >
@@ -863,7 +4009,7 @@ exports[`DateInputV2 > render correctly with showMonthYearPicker 1`] = ` > @@ -882,9 +4028,10 @@ exports[`DateInputV2 > render correctly with showMonthYearPicker 1`] = ` autocomplete="false" class="emotion-14 emotion-15" data-size="large" - id=":ra6:" + id=":r127:" + name="test" type="text" - value="" + value="1995-12-11T03:24:00.000Z – 1995-12-11T03:24:00.000Z" />
renders correctly with date-fns locale es 1`] = ` text-decoration: none; } -.emotion-68 { +.emotion-83 { color: #727683; font-size: 16px; font-family: Inter,Asap,sans-serif; @@ -3617,6 +6764,7 @@ exports[`DateInputV2 > renders correctly with date-fns locale es 1`] = ` > + + + - - -
@@ -4735,7 +7896,7 @@ exports[`DateInputV2 > renders correctly with date-fns locale fr 1`] = ` text-decoration: none; } -.emotion-68 { +.emotion-83 { color: #727683; font-size: 16px; font-family: Inter,Asap,sans-serif; @@ -4829,6 +7990,7 @@ exports[`DateInputV2 > renders correctly with date-fns locale fr 1`] = ` > + + + - - - @@ -5947,7 +9122,7 @@ exports[`DateInputV2 > renders correctly with date-fns locale ru 1`] = ` text-decoration: none; } -.emotion-68 { +.emotion-83 { color: #727683; font-size: 16px; font-family: Inter,Asap,sans-serif; @@ -6041,6 +9216,7 @@ exports[`DateInputV2 > renders correctly with date-fns locale ru 1`] = ` > + + + - - - diff --git a/packages/ui/src/components/DateInputV2/__tests__/index.test.tsx b/packages/ui/src/components/DateInputV2/__tests__/index.test.tsx index de14a71c08..d38fc79ca8 100644 --- a/packages/ui/src/components/DateInputV2/__tests__/index.test.tsx +++ b/packages/ui/src/components/DateInputV2/__tests__/index.test.tsx @@ -111,6 +111,21 @@ describe('DateInputV2', () => { ) expect(asFragment()).toMatchSnapshot() }) + test('render correctly with showMonthYearPicker with default date', async () => { + const { asFragment } = renderWithTheme( + {}} + 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( @@ -125,7 +140,7 @@ describe('DateInputV2', () => { 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( { 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('YYYY-MM-DD') + await userEvent.click(input) + + expect(asFragment()).toMatchSnapshot() + }) + + test('handle correctly click outside', async () => { + renderWithTheme( + <> + Outside + {}} + 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 + {}} + placeholder="YYYY-MM-DD" + value={new Date('1995-12-11T03:24:00.000+00:00')} + /> + , + ) + + const input = screen.getByPlaceholderText('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 + {}} + placeholder="YYYY-MM-DD" + value={new Date('1995-12-11T03:24:00.000+00:00')} + showMonthYearPicker + /> + , + ) + + const input = screen.getByPlaceholderText('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( + {}} + placeholder="YYYY-MM-DD" + value={new Date('1995-12-11T03:24:00.000+00:00')} + />, + ) + + const input = screen.getByPlaceholderText('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( + {}} + placeholder="YYYY-MM-DD" + selectsRange + value={new Date('1995-02-11T03:24:00.000+00:00')} + />, + ) + + const input = screen.getByPlaceholderText('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( + {}} + 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( + {}} + placeholder="YYYY-MM-DD" + value={new Date('1995-12-11T03:24:00.000+00:00')} + showMonthYearPicker + />, + ) + + const input = screen.getByPlaceholderText('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( + {}} + placeholder="YYYY-MM-DD" + selectsRange + showMonthYearPicker + value={new Date('1995-12-11T03:24:00.000+00:00')} + />, + ) + + const input = screen.getByPlaceholderText('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( + {}} + 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/helpers.ts b/packages/ui/src/components/DateInputV2/helpers.ts index f6884ef10d..900d1491b5 100644 --- a/packages/ui/src/components/DateInputV2/helpers.ts +++ b/packages/ui/src/components/DateInputV2/helpers.ts @@ -1,34 +1,27 @@ export const POPUP_WIDTH = '264px' -// The current year export const CURRENT_YEAR = new Date().getFullYear() - -// The current month starting from 1 - 12 -// 1 => January, 12 => December export const CURRENT_MONTH = new Date().getMonth() + 1 -// The current day 1-28/29/30/31 - // Weeks displayed on calendar export const CALENDAR_WEEKS = 6 // Number days in a month for a given year export const getMonthDays = (month = CURRENT_MONTH, year = CURRENT_YEAR) => { - const months30 = [4, 6, 9, 11] // 30 days in april, june, september and november + const months30 = [4, 6, 9, 11] const leapYear = year % 4 === 0 if (month === 2) { - return leapYear ? 29 : 28 // Days in february + return leapYear ? 29 : 28 } return months30.includes(month) ? 30 : 31 } -// First day of the month for a given year from 1 (monday) - 7 (saturday) +// First day of the month for a given year export const getMonthFirstDay = (month = CURRENT_MONTH, year = CURRENT_YEAR) => new Date(`${year}-${month}-01`).getDay() + 1 -// Adds a zero for 1-digit months/days export const addZero = (value: number) => `${value}`.padStart(2, '0') export const getPreviousMonth = (month: number, year: number) => { diff --git a/packages/ui/src/components/DateInputV2/helpersLocale.ts b/packages/ui/src/components/DateInputV2/helpersLocale.ts index 1e53c687d1..1995188a50 100644 --- a/packages/ui/src/components/DateInputV2/helpersLocale.ts +++ b/packages/ui/src/components/DateInputV2/helpersLocale.ts @@ -17,7 +17,7 @@ export const getLocalizedMonths = (locale: Locale | string) => { const formatter = new Intl.DateTimeFormat(computedLocale, { month: 'long' }) const months = [] for (let i = 0; i < 12; i += 1) { - const date = new Date(1970, i) // Iterate through months + const date = new Date(1970, i) months.push(formatter.format(date)) } @@ -45,15 +45,9 @@ export const getDays = (locale: Locale | string) => { days[longDay] = longDay.slice(0, 2) }) - // Get the keys of the dictionary const dayKeys = Object.keys(days) + dayKeys.push(dayKeys.shift()!) - // Move the first element to the end - if (dayKeys.length > 0) { - dayKeys.push(dayKeys.shift()!) // Remove the first key and push it to the end - } - - // Create a new object with the ordered keys const orderedDaysMap: Record = {} dayKeys.forEach(key => { orderedDaysMap[key] = days[key] @@ -65,8 +59,8 @@ export const getDays = (locale: Locale | string) => { export const getMonths = (locale: Locale | string) => { const computedLocale = typeof locale === 'string' ? locale : locale.code - const longMonths = getLocalizedMonths(locale) // Get long names - const shortMonths = getLocalizedShortMonths(computedLocale) // Get short names + const longMonths = getLocalizedMonths(locale) + const shortMonths = getLocalizedShortMonths(computedLocale) const months: Record = {} // Map long month names (localized) to short month names (localized) diff --git a/packages/ui/src/components/DateInputV2/index.tsx b/packages/ui/src/components/DateInputV2/index.tsx index 1cba2f7c16..8c1e654f7c 100644 --- a/packages/ui/src/components/DateInputV2/index.tsx +++ b/packages/ui/src/components/DateInputV2/index.tsx @@ -4,11 +4,10 @@ import type { Locale } from 'date-fns' import type { FocusEvent } from 'react' import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { TextInputV2 } from '../TextInputV2' -import { DateInputContext } from './Context' +import { type ContextProps, DateInputContext } from './Context' import { CalendarPopup } from './Popup' import { CURRENT_MONTH, CURRENT_YEAR, addZero } from './helpers' import { getDays, getLocalizedMonths, getMonths } from './helpersLocale' -import type { ContextProps } from './types' const Container = styled.div` width: 100%;` @@ -48,9 +47,9 @@ type DateInputProps = { onChange?: IsRange extends true ? ( date: Date[] | [Date | null, Date | null], - event: React.SyntheticEvent | undefined, + event: React.SyntheticEvent | undefined, ) => void - : (date: Date | null, event: React.SyntheticEvent | undefined) => void + : (date: Date | null, event: React.SyntheticEvent | undefined) => void } /** @@ -87,18 +86,32 @@ export const DateInputV2 = ({ showMonthYearPicker, 'data-testid': dataTestId, }: DateInputProps) => { - const [computedValue, setValue] = useState(value ?? null) + 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( - value ? value.getMonth() + 1 : CURRENT_MONTH, - ) - const [yearToShow, setYearToShow] = useState( - value ? value.getFullYear() : CURRENT_YEAR, - ) + const [monthToShow, setMonthToShow] = useState(defaultMonthToShow) + const [yearToShow, setYearToShow] = useState(defaultYearToShow) const refInput = useRef(null) const MONTHS = getMonths(locale) const DAYS = getDays(locale) @@ -165,11 +178,15 @@ export const DateInputV2 = ({ ) useEffect(() => { - setValue(value as Date) - setRange({ - start: startDate ?? computedRange.start, - end: endDate ?? computedRange.end, - }) + 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]) diff --git a/packages/ui/src/components/DateInputV2/types.ts b/packages/ui/src/components/DateInputV2/types.ts deleted file mode 100644 index 3b217d4863..0000000000 --- a/packages/ui/src/components/DateInputV2/types.ts +++ /dev/null @@ -1,53 +0,0 @@ -import type { Dispatch, SetStateAction } from 'react' - -export type ContextProps = { - showMonthYearPicker?: boolean - disabled: boolean - /** - * month to show on popup - NOT selectedValue - */ - monthToShow: number - /** - * Year to show on popup - NOT selectedValue - */ - yearToShow: number - excludeDates?: Date[] - setMonthToShow: Dispatch> - setYearToShow: Dispatch> - minDate?: Date | null - maxDate?: Date | null - // Calendar months names and short names - MONTHS: Record - // Week days names and shortnames - DAYS: Record - MONTHS_ARR: string[] - setValue: Dispatch> - value?: Date | null - range?: { - start: Date | null - end: Date | null - } - setRange?: Dispatch< - SetStateAction<{ - start: Date | null - end: Date | null - }> - > - startDate?: Date | null - endDate?: Date | null -} & ( - | { - selectsRange: true - onChange?: ( - date: [Date | null, Date | null], - event: React.SyntheticEvent | undefined, - ) => void - } - | { - selectsRange: false - onChange?: ( - date: Date | null, - event: React.SyntheticEvent | undefined, - ) => void - } -) From ddcfd66ef3218e8b5c0e9bb6c439df70cdc93854 Mon Sep 17 00:00:00 2001 From: lisa Date: Thu, 7 Nov 2024 15:59:17 +0100 Subject: [PATCH 03/10] feat: dateInputV2 --- .../components/DateInputV2/CalendarDaily.tsx | 227 +++++++++++ .../DateInputV2/CalendarMonthly.tsx | 132 +++++++ .../ui/src/components/DateInputV2/Popup.tsx | 351 +----------------- .../DateInputV2/__stories__/Range.stories.tsx | 3 +- 4 files changed, 367 insertions(+), 346 deletions(-) create mode 100644 packages/ui/src/components/DateInputV2/CalendarDaily.tsx create mode 100644 packages/ui/src/components/DateInputV2/CalendarMonthly.tsx diff --git a/packages/ui/src/components/DateInputV2/CalendarDaily.tsx b/packages/ui/src/components/DateInputV2/CalendarDaily.tsx new file mode 100644 index 0000000000..75dff6984a --- /dev/null +++ b/packages/ui/src/components/DateInputV2/CalendarDaily.tsx @@ -0,0 +1,227 @@ +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 { + CALENDAR_WEEKS, + getMonthDays, + getMonthFirstDay, + getNextMonth, + getPreviousMonth, + isSameDay, +} from './helpers' + +const Day = styled(Button)` +height: 26px; +width: 100%; +padding: 0; + +&.rangeButton { + background-color:${({ theme }) => theme.colors.primary.background}; +} +` +const DayName = styled(Text)` +height: 26px; +width: 100%; +` + +export const Daily = ({ disabled }: { disabled: boolean }) => { + const { + value, + yearToShow, + monthToShow, + setValue, + setMonthToShow, + onChange, + setYearToShow, + excludeDates, + minDate, + maxDate, + DAYS, + selectsRange, + range, + setRange, + } = useContext(DateInputContext) + + const [rangeState, setRangeState] = useState<'start' | 'none' | 'done'>( + range?.start ? 'start' : 'none', + ) // Used when selectsRange is True. Kow the current state of the range: none when start date not selected, start when start date is selected, done when start & end date selected + + const [hoveredDate, setHoveredDate] = useState(null) + + const monthDays = getMonthDays(monthToShow, yearToShow) // Number of days in the month + + const daysFromPreviousMonth = + (getMonthFirstDay(monthToShow, yearToShow) - 1 + 6) % 7 // Number of days from the previous month to show. Shift to align Monday start + const daysFromNextMonth = + CALENDAR_WEEKS * 7 - (daysFromPreviousMonth + monthDays) // We want to display 6 CALENDAR_WEEKS lines, so we show days from the next month + + const [previousMonth, prevMonthYear] = getPreviousMonth( + monthToShow, + yearToShow, + ) + + const [nextMonth, nextMonthYear] = getNextMonth(monthToShow, yearToShow) + const previousMonthDays = getMonthDays(previousMonth, prevMonthYear) + + // Get the dates to be displayed from the previous month + const prevMonthDates = Array(daysFromPreviousMonth) + .keys() + .map((_, 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 })) + + // Get the dates to be displayed from the next month + const nextMonthDates = Array(daysFromNextMonth) + .keys() + .map((_, index) => ({ day: index + 1, month: 1 })) + + const allDaysToShow = [ + ...prevMonthDates, + ...currentMonthDates, + ...nextMonthDates, + ] // Array of the days to display { day : day n°, isCurrentMonth: if it is the current day} + + return ( + + {Object.entries(DAYS).map(day => ( + + {day[1]} + + ))} + {allDaysToShow.map(data => { + const constructedDate = new Date( + yearToShow, + monthToShow - 1 + data.month, + data.day, + ) + const isExcluded = excludeDates + ? excludeDates + .map(date => isSameDay(constructedDate, date)) + .includes(true) + : false + + // Whether the date < minDate or date > maxDate + const isOutsideRange = + !!(minDate && constructedDate < minDate) || + !!(maxDate && constructedDate > maxDate) + + // Whether the date is selected + const isSelected = + (value && isSameDay(constructedDate, new Date(value))) || + (range?.end && isSameDay(constructedDate, range.end)) || + (range?.start && isSameDay(constructedDate, range.start)) + + // Whether the date is after the start date - useful when selectsRange is set to true + const isAfterStartDate = + selectsRange && range?.start && constructedDate > range.start + + const isInHoveredRange = + (selectsRange && + range?.start && + constructedDate > range.start && + hoveredDate && + constructedDate < hoveredDate) || + (range?.start && + range.end && + constructedDate < range.end && + constructedDate > range.start) + + const getNewDate = () => { + // Clicked on a day from the previous month + if (data.month !== 0 && data.day > 15) { + setMonthToShow(previousMonth) + setYearToShow(prevMonthYear) + + return new Date(prevMonthYear, previousMonth - 1, data.day) + } + + // Clicked on a day from the next month + if (data.month !== 0 && data.day < 15) { + setMonthToShow(nextMonth) + setYearToShow(nextMonthYear) + + return new Date(nextMonthYear, nextMonth - 1, data.day) + } + + return new Date(yearToShow, monthToShow - 1, data.day) + } + + const onClickRange = (event: MouseEventReact, newDate: Date) => { + if (selectsRange) { + // Selecting start date + if (rangeState === 'none') { + setRange?.({ start: newDate, end: null }) + onChange?.([newDate, null], event) + setRangeState('start') + } + + // Selecting end date + else if (isAfterStartDate) { + setRange?.({ start: range.start, end: newDate }) + onChange?.([range.start, newDate], event) + setRangeState('done') + } else { + // End date before start + setRange?.({ start: newDate, end: null }) + onChange?.([newDate, null], event) + } + } + } + const createTestId = () => { + if (isInHoveredRange) return 'rangeButton' + if (data.month === -1) return 'dayLastMonth' + if (data.month === 1) return 'dayNextMonth' + + return undefined + } + + return ( + { + if (!isExcluded && !isOutsideRange) { + const newDate = getNewDate() + + if (selectsRange) { + onClickRange(event, newDate) + } else { + setValue(newDate) + onChange?.(newDate, event) + } + } + }} + onMouseEnter={() => setHoveredDate(constructedDate)} + onMouseLeave={() => setHoveredDate(null)} + > + + {data.day} + + + ) + })} + + ) +} diff --git a/packages/ui/src/components/DateInputV2/CalendarMonthly.tsx b/packages/ui/src/components/DateInputV2/CalendarMonthly.tsx new file mode 100644 index 0000000000..53d768f322 --- /dev/null +++ b/packages/ui/src/components/DateInputV2/CalendarMonthly.tsx @@ -0,0 +1,132 @@ +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' + +const Month = styled(Button)` +height: 26px; +width: 100%; +padding: 0; + +&.rangeButton { + background-color:${({ theme }) => theme.colors.primary.background}; +} +` + +export const Monthly = ({ disabled }: { disabled: boolean }) => { + const { + yearToShow, + setValue, + setMonthToShow, + MONTHS, + onChange, + selectsRange, + setRange, + range, + minDate, + maxDate, + excludeDates, + value, + } = useContext(DateInputContext) + const [rangeState, setRangeState] = useState<'start' | 'none' | 'done'>( + range?.start ? 'start' : 'none', + ) // Used when selectsRange is True. It is used to know the current state of the range: none when start date not selected, start when start date is selected, done when start & end date selected + const [hoveredDate, setHoveredDate] = useState(null) + + return ( + + {Object.entries(MONTHS).map((month, index) => { + const constructedDate = new Date(yearToShow, index, 1) + + const isExcluded = excludeDates + ? excludeDates + .map(date => isSameMonth(constructedDate, date)) + .includes(true) + : false + + const isOutsideRange = + !!(minDate && constructedDate < minDate) || + !!(maxDate && constructedDate > maxDate) + + const isAfterStartDate = + selectsRange && range?.start && constructedDate > range.start + + const isInHoveredRange = + (selectsRange && + range?.start && + constructedDate > range.start && + hoveredDate && + constructedDate < hoveredDate) || + (range?.start && + range.end && + constructedDate < range.end && + constructedDate > range.start) + + const isSelected = + (value && isSameMonth(constructedDate, value)) || + (range?.start && isSameMonth(constructedDate, range.start)) || + (range?.end && isSameMonth(constructedDate, range.end)) + + const onClickRange = (event: MouseEventReact, newDate: Date) => { + // Must wrap inside this if otherwise TypeScript doesn't get the right type for onChange + if (selectsRange) { + // Selecting start date + if (rangeState === 'none') { + setRange?.({ start: newDate, end: null }) + onChange?.([newDate, null], event) + setRangeState('start') + } + + // Selecting end date + else if (isAfterStartDate) { + setRange?.({ start: range.start, end: newDate }) + onChange?.([range.start, newDate], event) + setRangeState('done') + } else { + // End date before start + setRange?.({ start: newDate, end: null }) + onChange?.([newDate, null], event) + } + } + } + + return ( + { + if (!isExcluded && !isOutsideRange) { + if (selectsRange) { + onClickRange(event, constructedDate) + } else { + setMonthToShow(index + 1) + setValue(constructedDate) + onChange?.(constructedDate, event) + } + } + }} + onMouseEnter={() => setHoveredDate(constructedDate)} + onMouseLeave={() => setHoveredDate(null)} + > + + {month[1]} + + + ) + })} + + ) +} diff --git a/packages/ui/src/components/DateInputV2/Popup.tsx b/packages/ui/src/components/DateInputV2/Popup.tsx index c90b51b3f1..e24892af09 100644 --- a/packages/ui/src/components/DateInputV2/Popup.tsx +++ b/packages/ui/src/components/DateInputV2/Popup.tsx @@ -1,28 +1,14 @@ import styled from '@emotion/styled' -import type { - Dispatch, - MouseEvent as MouseEventReact, - ReactNode, - RefObject, - SetStateAction, -} from 'react' -import { useContext, useEffect, useRef, useState } from 'react' +import type { Dispatch, ReactNode, RefObject, SetStateAction } from 'react' +import { useContext, useEffect, useRef } from 'react' import { Button } from '../Button' import { Popup } from '../Popup' -import { Row } from '../Row' import { Stack } from '../Stack' import { Text } from '../Text' +import { Daily } from './CalendarDaily' +import { Monthly } from './CalendarMonthly' import { DateInputContext } from './Context' -import { - CALENDAR_WEEKS, - POPUP_WIDTH, - getMonthDays, - getMonthFirstDay, - getNextMonth, - getPreviousMonth, - isSameDay, - isSameMonth, -} from './helpers' +import { POPUP_WIDTH, getNextMonth, getPreviousMonth } from './helpers' type PopupProps = { children: ReactNode @@ -31,20 +17,6 @@ type PopupProps = { refInput: RefObject } -const ButtonSelectDayMonth = styled(Button)` -height: 26px; -width: 100%; -padding: 0; - -&.rangeButton { - background-color:${({ theme }) => theme.colors.primary.background}; -} -` -const DayName = styled(Text)` -height: 26px; -width: 100%; -` - const StyledPopup = styled(Popup)` width: 100%; background-color: ${({ theme }) => theme.colors.other.elevation.background.raised}; @@ -69,318 +41,6 @@ const handleClickOutside = ( } } -const Monthly = ({ disabled }: { disabled: boolean }) => { - const { - yearToShow, - setValue, - setMonthToShow, - MONTHS, - onChange, - selectsRange, - setRange, - range, - minDate, - maxDate, - excludeDates, - value, - } = useContext(DateInputContext) - const [rangeState, setRangeState] = useState<'start' | 'none' | 'done'>( - range?.start ? 'start' : 'none', - ) // Used when selectsRange is True. It is used to know the current state of the range: none when start date not selected, start when start date is selected, done when start & end date selected - const [hoveredDate, setHoveredDate] = useState(null) - - return ( - - {Object.entries(MONTHS).map((month, index) => { - const constructedDate = new Date(yearToShow, index, 1) - - const isExcluded = excludeDates - ? excludeDates - .map(date => isSameMonth(constructedDate, date)) - .includes(true) - : false - - const isOutsideRange = - !!(minDate && constructedDate < minDate) || - !!(maxDate && constructedDate > maxDate) - - const isAfterStartDate = - selectsRange && range?.start && constructedDate > range.start - - const isInHoveredRange = - (selectsRange && - range?.start && - constructedDate > range.start && - hoveredDate && - constructedDate < hoveredDate) || - (range?.start && - range.end && - constructedDate < range.end && - constructedDate > range.start) - - const isSelected = - (value && isSameMonth(constructedDate, value)) || - (range?.start && isSameMonth(constructedDate, range.start)) || - (range?.end && isSameMonth(constructedDate, range.end)) - - const onClickRange = (event: MouseEventReact, newDate: Date) => { - // Must wrap inside this if otherwise TypeScript doesn't get the right type for onChange - if (selectsRange) { - // Selecting start date - if (rangeState === 'none') { - setRange?.({ start: newDate, end: null }) - onChange?.([newDate, null], event) - setRangeState('start') - } - - // Selecting end date - else if (isAfterStartDate) { - setRange?.({ start: range.start, end: newDate }) - onChange?.([range.start, newDate], event) - setRangeState('done') - } else { - // End date before start - setRange?.({ start: newDate, end: null }) - onChange?.([newDate, null], event) - } - } - } - - return ( - { - if (!isExcluded && !isOutsideRange) { - if (selectsRange) { - onClickRange(event, constructedDate) - } else { - setMonthToShow(index + 1) - setValue(constructedDate) - onChange?.(constructedDate, event) - } - } - }} - onMouseEnter={() => setHoveredDate(constructedDate)} - onMouseLeave={() => setHoveredDate(null)} - > - - {month[1]} - - - ) - })} - - ) -} - -const Daily = ({ disabled }: { disabled: boolean }) => { - const { - value, - yearToShow, - monthToShow, - setValue, - setMonthToShow, - onChange, - setYearToShow, - excludeDates, - minDate, - maxDate, - DAYS, - selectsRange, - range, - setRange, - } = useContext(DateInputContext) - - const [rangeState, setRangeState] = useState<'start' | 'none' | 'done'>( - range?.start ? 'start' : 'none', - ) // Used when selectsRange is True. It is used to know the current state of the range: none when start date not selected, start when start date is selected, done when start & end date selected - - const [hoveredDate, setHoveredDate] = useState(null) - - const monthDays = getMonthDays(monthToShow, yearToShow) // Number of days in the month - - const daysFromPreviousMonth = - (getMonthFirstDay(monthToShow, yearToShow) - 1 + 6) % 7 // Number of days from the previous month to show. Shift to align Monday start - const daysFromNextMonth = - CALENDAR_WEEKS * 7 - (daysFromPreviousMonth + monthDays) // We want to display 6 CALENDAR_WEEKS lines, so we show days from the next month - - const [previousMonth, prevMonthYear] = getPreviousMonth( - monthToShow, - yearToShow, - ) - - const [nextMonth, nextMonthYear] = getNextMonth(monthToShow, yearToShow) - const previousMonthDays = getMonthDays(previousMonth, prevMonthYear) - - // Get the dates to be displayed from the previous month - const prevMonthDates = Array(daysFromPreviousMonth) - .keys() - .map((_, 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 })) - - // Get the dates to be displayed from the next month - const nextMonthDates = Array(daysFromNextMonth) - .keys() - .map((_, index) => ({ day: index + 1, month: 1 })) - - const allDaysToShow = [ - ...prevMonthDates, - ...currentMonthDates, - ...nextMonthDates, - ] // Array of the days to display { day : day n°, isCurrentMonth: if it is the current day} - - return ( - - {Object.entries(DAYS).map(day => ( - - {day[1]} - - ))} - {allDaysToShow.map(data => { - const constructedDate = new Date( - yearToShow, - monthToShow - 1 + data.month, - data.day, - ) - const isExcluded = excludeDates - ? excludeDates - .map(date => isSameDay(constructedDate, date)) - .includes(true) - : false - - // Whether the date < minDate or date > maxDate - const isOutsideRange = - !!(minDate && constructedDate < minDate) || - !!(maxDate && constructedDate > maxDate) - - // Whether the date is selected - const isSelected = - (value && isSameDay(constructedDate, new Date(value))) || - (range?.end && isSameDay(constructedDate, range.end)) || - (range?.start && isSameDay(constructedDate, range.start)) - - // Whether the date is after the start date - useful when selectsRange is set to true - const isAfterStartDate = - selectsRange && range?.start && constructedDate > range.start - - const isInHoveredRange = - (selectsRange && - range?.start && - constructedDate > range.start && - hoveredDate && - constructedDate < hoveredDate) || - (range?.start && - range.end && - constructedDate < range.end && - constructedDate > range.start) - - const getNewDate = () => { - // Clicked on a day from the previous month - if (data.month !== 0 && data.day > 15) { - setMonthToShow(previousMonth) - setYearToShow(prevMonthYear) - - return new Date(prevMonthYear, previousMonth - 1, data.day) - } - - // Clicked on a day from the next month - if (data.month !== 0 && data.day < 15) { - setMonthToShow(nextMonth) - setYearToShow(nextMonthYear) - - return new Date(nextMonthYear, nextMonth - 1, data.day) - } - - return new Date(yearToShow, monthToShow - 1, data.day) - } - - const onClickRange = (event: MouseEventReact, newDate: Date) => { - if (selectsRange) { - // Selecting start date - if (rangeState === 'none') { - setRange?.({ start: newDate, end: null }) - onChange?.([newDate, null], event) - setRangeState('start') - } - - // Selecting end date - else if (isAfterStartDate) { - setRange?.({ start: range.start, end: newDate }) - onChange?.([range.start, newDate], event) - setRangeState('done') - } else { - // End date before start - setRange?.({ start: newDate, end: null }) - onChange?.([newDate, null], event) - } - } - } - const createTestId = () => { - if (isInHoveredRange) return 'rangeButton' - if (data.month === -1) return 'dayLastMonth' - if (data.month === 1) return 'dayNextMonth' - - return undefined - } - - return ( - { - if (!isExcluded && !isOutsideRange) { - const newDate = getNewDate() - - if (selectsRange) { - onClickRange(event, newDate) - } else { - setValue(newDate) - onChange?.(newDate, event) - } - } - }} - onMouseEnter={() => setHoveredDate(constructedDate)} - onMouseLeave={() => setHoveredDate(null)} - > - - {data.day} - - - ) - })} - - ) -} - const PopupContent = () => { const { showMonthYearPicker, @@ -493,6 +153,7 @@ export const CalendarPopup = ({ debounceDelay={0} maxWidth={POPUP_WIDTH} disableAnimation + align="start" > {children} diff --git a/packages/ui/src/components/DateInputV2/__stories__/Range.stories.tsx b/packages/ui/src/components/DateInputV2/__stories__/Range.stories.tsx index ddcfa4a3d4..f927b2673c 100644 --- a/packages/ui/src/components/DateInputV2/__stories__/Range.stories.tsx +++ b/packages/ui/src/components/DateInputV2/__stories__/Range.stories.tsx @@ -1,4 +1,5 @@ import type { StoryFn } from '@storybook/react' +import type { ComponentProps } from 'react' import { useState } from 'react' import { DateInputV2 } from '..' import { Stack } from '../../Stack' @@ -17,7 +18,7 @@ const months = [ 'November', 'December', ] -export const Range: StoryFn = args => { +export const Range: StoryFn> = args => { const [startDate, setStartDate] = useState(null) const [endDate, setEndDate] = useState(null) From 9ef269eb6448b9c86cb13ef734c6d1098dcff5ce Mon Sep 17 00:00:00 2001 From: lisa Date: Tue, 12 Nov 2024 17:56:37 +0100 Subject: [PATCH 04/10] 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 MONTHS_ARR: string[] setValue: Dispatch> + setInputValue: Dispatch> 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({ 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> = args => { const [value, setValue] = useState< @@ -9,12 +11,18 @@ export const Controlled: StoryFn> = args => { >(new Date('December 17, 1995 03:24:00')) return ( - + + + Selected date : {value?.toString()} + + ) } 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 => ( +
+ +
+ ), +] 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 => ( +
+ +
+ ), +] 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> = args => ( + + + + +) 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> = args => { setValue(v as Date) }} label={currentLocale} + selectsRange={false} /> ) 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(null) - const [endDate, setEndDate] = useState(null) - const onChange = (dates: [Date | null, Date | null]) => { - const [start, end] = dates - setStartDate(start) - setEndDate(end) - } +export const Months = Template.bind({}) - return ( - - ) +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 => ( +
+ +
+ ), +] 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 => ( +
+ +
+ ), +] 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> = args => { const [startDate, setStartDate] = useState(null) const [endDate, setEndDate] = useState(null) - const onChange = (dates: [Date | null, Date | null]) => { + + const [startMonth, setStartMonth] = useState( + new Date('March 2024'), + ) + const [endMonth, setEndMonth] = useState(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 ( - + + + Selected dates : {startDate?.toDateString()} - {endDate?.toDateString()} + + Selected months : {startMonth ? months[startMonth.getMonth()] : null} + {startMonth?.getFullYear()} - + {endMonth ? months[endMonth.getMonth()] : null} + {endMonth?.getFullYear()} + ) } 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 = args => ( ))} ) + +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> = props => ( +export const Template: StoryFn = 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 -> = props => - -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 => ( -
- -
- ), - ], 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 58767b5b6a..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`] = ` - .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; } -
-
-
-
-
-
-
- -
-
-
-
- -
- - - - -
-
-
-
-
-
-
-
- -`; - -exports[`DateInput > render correctly with a range of date 1`] = ` - - .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; }
render correctly with a range of date 1`] = ` class="emotion-0 emotion-1" >
-
- -
+ Date +
-
+
+
+
+
- -
+ - - - - -
+ + +
-
-
-
- -`; - -exports[`DateInput > render correctly with showMonthYearPicker 1`] = ` - - .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; -} - + + + + + +`; + +exports[`DateInput > render correctly with a range of date 1`] = ` + + .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" >
-
- -
+ Date +
-
+
+
+
+
- -
+ - - - - -
+ + +
@@ -1485,212 +1638,21 @@ exports[`DateInput > render correctly with showMonthYearPicker 1`] = ` `; -exports[`DateInput > renders correctly disabled 1`] = ` +exports[`DateInput > render correctly with showMonthYearPicker 1`] = ` .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" >
-
- -
+ Date +
-
+
+
+
+
- -
+ - - - - -
+ + +
@@ -1981,293 +1942,120 @@ exports[`DateInput > renders correctly disabled 1`] = ` `; -exports[`DateInput > renders correctly error 1`] = ` +exports[`DateInput > render correctly with showMonthYearPicker with default date 1`] = ` - .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; } -
-
-
-
-
-
-
- -
-
-
-
- -
- - - -
-
- - - - -
-
-
-

- error -

-
-
-
-
-
- -`; - -exports[`DateInput > renders correctly error disabled 1`] = ` - - .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; +
+
+
+
+
+
+ +
+
+
+
+ +
+ + + + +
+
+
+
+ +
+
+
+ +`; + +exports[`DateInput > render correctly with showMonthYearPicker with excluded months 1`] = ` + + @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%; } -
-
-
-
-
-
-
- -
-
-
-
- -
- - - -
-
- - - - -
-
-
-

- error -

-
-
-
-
-
- -`; - -exports[`DateInput > renders correctly error disabled required 1`] = ` - - .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; }
renders correctly error disabled required 1`] = ` class="emotion-0 emotion-1" >
+ +
+
+
+
+
- +
-
-
- -
- - - -
-
- - - - -
-
-
-

+

+
@@ -3698,212 +3756,21 @@ exports[`DateInput > renders correctly error disabled required 1`] = ` `; -exports[`DateInput > renders correctly min-max 1`] = ` +exports[`DateInput > renders correctly custom format with range 1`] = ` .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" >
-
- -
+ Date +
-
+
+
+
+
- -
+ - - - - -
+ + +
@@ -4193,212 +4061,21 @@ exports[`DateInput > renders correctly min-max 1`] = ` `; -exports[`DateInput > renders correctly required 1`] = ` +exports[`DateInput > renders correctly disabled 1`] = ` .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" >
+ +
+
+
+
+
- +
-
-
- -
- - - - -
-
-
@@ -4711,212 +4366,21 @@ exports[`DateInput > renders correctly required 1`] = ` `; -exports[`DateInput > renders correctly with date-fns locale es 1`] = ` +exports[`DateInput > renders correctly error 1`] = ` .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; }
renders correctly with date-fns locale es 1`] = ` class="emotion-0 emotion-1" >
-
- -
-
-
-
- -
- - - - -
-
+ for=":rd:" + > + Date +
-
-
-
-
-
-
+
+

+ error +

-
`; -exports[`DateInput > renders correctly with date-fns locale fr 1`] = ` +exports[`DateInput > renders correctly error disabled 1`] = ` .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; +
+
+
+
+
+
+ +
+
+
+
+ +
+ + + +
+
+ + + + +
+
+
+

+ error +

+
+
+
+
+ +`; + +exports[`DateInput > renders correctly error disabled required 1`] = ` + + .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; +} + +
+
+
+
+
+
+ + + + +
+
+
+
+ +
+ + + +
+
+ + + + +
+
+
+

+ error +

+
+
+
+
+ +`; + +exports[`DateInput > renders correctly min-max 1`] = ` + + .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; +} + +
+
+
+
+
+
+ +
+
+
+
+ +
+ + + + +
+
+
+
+
+
+
+ +`; + +exports[`DateInput > renders correctly required 1`] = ` + + .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; +} + +
+
+
+
+
+
+ + + + +
+
+
+
+ +
+ + + + +
+
+
+
+
+
+
+ +`; + +exports[`DateInput > renders correctly with date-fns locale es 1`] = ` + + @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; +} + +
+
+
+
+
+
+ +
+
+
+
+ +
+ + + + +
+
+
+
+ +
+
+
+ +`; + +exports[`DateInput > renders correctly with date-fns locale fr 1`] = ` + + @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; }
renders correctly with date-fns locale fr 1`] = ` class="emotion-0 emotion-1" >
+ +
+
+
+
+
+ + + + +
+
+
+
+ -
-
-
-
-
- -
-
-
- 28 -
-
- 29 -
-
- 30 -
-
- 31 -
-
- 1 -
-
- 2 -
-
- 3 -
-
-
-
- 4 -
-
- 5 -
-
- 6 -
-
- 7 -
-
- 8 -
-
- 9 -
-
- 10 -
-
-
-
- 11 -
-
- 12 -
-
- 13 -
-
- 14 -
-
- 15 -
-
- 16 -
-
- 17 -
-
-
-
- 18 -
-
- 19 -
-
- 20 -
-
- 21 -
-
- 22 -
-
- 23 -
-
- 24 -
-
-
-
- 25 -
-
- 26 -
-
- 27 -
-
- 28 -
-
- 29 -
-
- 30 -
-
- 31 -
-
-
-
- 1 -
-
- 2 -
-
- 3 -
-
- 4 -
-
- 5 -
-
- 6 -
-
- 7 -
-
+
+ + 6 +
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-
@@ -7155,210 +8571,37 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = ` exports[`DateInput > renders correctly with date-fns locale ru 1`] = ` - .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; }
renders correctly with date-fns locale ru 1`] = ` class="emotion-0 emotion-1" >
+ +
+
+
+
+
+ + + + +
+
+
+
+ -
-
-
-
-
- -
-
-
- 28 -
-
- 29 -
-
- 30 -
-
- 31 -
-
- 1 -
-
- 2 -
-
- 3 -
-
-
-
- 4 -
-
- 5 -
-
- 6 -
-
- 7 -
-
- 8 -
-
- 9 -
-
- 10 -
-
-
-
- 11 -
-
- 12 -
-
- 13 -
-
- 14 -
-
- 15 -
-
- 16 -
-
- 17 -
-
-
-
- 18 -
-
- 19 -
-
- 20 -
-
- 21 -
-
- 22 -
-
- 23 -
-
- 24 -
-
-
-
- 25 -
-
- 26 -
-
- 27 -
-
- 28 -
-
- 29 -
-
- 30 -
-
- 31 -
-
-
-
- 1 -
-
- 2 -
-
- 3 -
-
- 4 -
-
- 5 -
-
- 6 -
-
- 7 -
-
+
+ + 16 +
-
+ + + + + + + + + + + + + + + + + + + + + + +
-
@@ -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" >
-
- -
+ Date +
-
+
+
+
+
- -
+ - - - - -
+ + +
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( + {}} + 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( { 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('YYYY-MM-DD') + await userEvent.click(input) + + expect(asFragment()).toMatchSnapshot() + }) + + test('handle correctly click outside', async () => { + renderWithTheme( + <> + Outside + {}} 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 + {}} + placeholder="YYYY-MM-DD" + value={new Date('1995-12-11T03:24:00.000+00:00')} + /> + , + ) + + const input = screen.getByPlaceholderText('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 + {}} + placeholder="YYYY-MM-DD" + value={new Date('1995-12-11T03:24:00.000+00:00')} + showMonthYearPicker + /> + , + ) + + const input = screen.getByPlaceholderText('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( + {}} + placeholder="YYYY-MM-DD" + value={new Date('1995-12-11T03:24:00.000+00:00')} + />, + ) + + const input = screen.getByPlaceholderText('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( + {}} + placeholder="YYYY-MM-DD" + selectsRange + value={new Date('1995-02-11T03:24:00.000+00:00')} + />, + ) + + const input = screen.getByPlaceholderText('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( + {}} + 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( + {}} + placeholder="YYYY-MM-DD" + value={new Date('1995-12-11T03:24:00.000+00:00')} + showMonthYearPicker + />, + ) + + const input = screen.getByPlaceholderText('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( + {}} + placeholder="YYYY-MM-DD" + selectsRange + showMonthYearPicker + value={new Date('1995-12-11T03:24:00.000+00:00')} + />, + ) + + const input = screen.getByPlaceholderText('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( + {}} + 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 ( {Object.entries(DAYS).map(day => ( - + {day[1]} - + ))} {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 ( { 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)} > 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 ( { @@ -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)} > - {month[1]} - + ) })} 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)) } /> - + {!showMonthYearPicker ? MONTHS_ARR[monthToShow - 1] : null}{' '} {yearToShow} - + - - ) -} - -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 => ( -
- -
- ), -] 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 => ( -
- -
- ), -] 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> = args => ( - - - - -) -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> = args => { - const [currentLocale, setCurrentLocale] = useState( - locales[0], - ) - const [value, setValue] = - useState['value']>(undefined) - - const [dateFns, setDateFns] = useState(enGB) - - const onChange = async (locale: string) => { - if (isLocales(locale)) { - setCurrentLocale(locale) - setDateFns(await loadDateFNS(locale)) - } - } - - return ( -
- - - { - setValue(v as Date) - }} - label={currentLocale} - selectsRange={false} - /> -
- ) -} - -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) => - locales.map(({ label, locale }) => ( - {}} - 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 => ( -
- -
- ), -] 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 => ( -
- -
- ), -] 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 => ( -
- -
- ), -] 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> = args => { - const [startDate, setStartDate] = useState(null) - const [endDate, setEndDate] = useState(null) - - const [startMonth, setStartMonth] = useState( - new Date('March 2024'), - ) - const [endMonth, setEndMonth] = useState(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 ( - - - Selected dates : {startDate?.toDateString()} - {endDate?.toDateString()} - - Selected months : {startMonth ? months[startMonth.getMonth()] : null} - {startMonth?.getFullYear()} - - {endMonth ? months[endMonth.getMonth()] : null} - {endMonth?.getFullYear()} - - ) -} - -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 = args => ( - - {(['small', 'medium', 'large'] as const).map(size => ( - - ))} - -) 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 = 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`] = ` - - @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; -} - -
-
-
-
-
-
- -
-
-
-
- -
- - - - -
-
-
-
- -
-
-
- -`; - -exports[`DateInputV2 > render correctly with a range of date 1`] = ` - - .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; -} - -
-
-
-
-
-
- -
-
-
-
- -
- - - - -
-
-
-
-
-
-
- -`; - -exports[`DateInputV2 > render correctly with showMonthYearPicker 1`] = ` - - .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; -} - -
-
-
-
-
-
- -
-
-
-
- -
- - - - -
-
-
-
-
-
-
- -`; - -exports[`DateInputV2 > render correctly with showMonthYearPicker with default date 1`] = ` - - @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; -} - -
-
-
-
-
-
- -
-
-
-
- -
- - - - -
-
-
-
- -
-
-
- -`; - -exports[`DateInputV2 > render correctly with showMonthYearPicker with excluded months 1`] = ` - - @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; -} - -
-
-
-
-
-
- -
-
-
-
- -
- - - - -
-
-
-
- -
-
-
- -`; - -exports[`DateInputV2 > renders correctly custom format with range 1`] = ` - - .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; -} - -
-
-
-
-
-
- -
-
-
-
- -
- - - - -
-
-
-
-
-
-
- -`; - -exports[`DateInputV2 > renders correctly disabled 1`] = ` - - .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; -} - -
-
-
-
-
-
- -
-
-
-
- -
- - - - -
-
-
-
-
-
-
- -`; - -exports[`DateInputV2 > renders correctly error 1`] = ` - - .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; -} - -
-
-
-
-
-
- -
-
-
-
- -
- - - -
-
- - - - -
-
-
-

- error -

-
-
-
-
- -`; - -exports[`DateInputV2 > renders correctly error disabled 1`] = ` - - .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; -} - -
-
-
-
-
-
- -
-
-
-
- -
- - - -
-
- - - - -
-
-
-

- error -

-
-
-
-
- -`; - -exports[`DateInputV2 > renders correctly error disabled required 1`] = ` - - .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; -} - -
-
-
-
-
-
- - - - -
-
-
-
- -
- - - -
-
- - - - -
-
-
-

- error -

-
-
-
-
- -`; - -exports[`DateInputV2 > renders correctly min-max 1`] = ` - - .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; -} - -
-
-
-
-
-
- -
-
-
-
- -
- - - - -
-
-
-
-
-
-
- -`; - -exports[`DateInputV2 > renders correctly required 1`] = ` - - .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; -} - -
-
-
-
-
-
- - - - -
-
-
-
- -
- - - - -
-
-
-
-
-
-
- -`; - -exports[`DateInputV2 > renders correctly with date-fns locale es 1`] = ` - - @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; -} - -
-
-
-
-
-
- -
-
-
-
- -
- - - - -
-
-
-
- -
-
-
- -`; - -exports[`DateInputV2 > renders correctly with date-fns locale fr 1`] = ` - - @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; -} - -
-
-
-
-
-
- -
-
-
-
- -
- - - - -
-
-
-
- -
-
-
- -`; - -exports[`DateInputV2 > renders correctly with date-fns locale ru 1`] = ` - - @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; -} - -
-
-
-
-
-
- -
-
-
-
- -
- - - - -
-
-
-
- -
-
-
- -`; - -exports[`DateInputV2 > renders correctly with default props 1`] = ` - - .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; -} - -
-
-
-
-
-
- -
-
-
-
- -
- - - - -
-
-
-
-
-
-
- -`; 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( - {}} - 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( - {}} />, - ) - expect(asFragment()).toMatchSnapshot() - }) - - test('renders correctly required', () => { - const { asFragment } = renderWithTheme( - {}} />, - ) - expect(asFragment()).toMatchSnapshot() - }) - - test('renders correctly error', () => { - const { asFragment } = renderWithTheme( - {}} />, - ) - expect(asFragment()).toMatchSnapshot() - }) - test('renders correctly error disabled', () => { - const { asFragment } = renderWithTheme( - {}} />, - ) - expect(asFragment()).toMatchSnapshot() - }) - - test('renders correctly error disabled required', () => { - const { asFragment } = renderWithTheme( - {}} - />, - ) - expect(asFragment()).toMatchSnapshot() - }) - - test('renders correctly min-max', () => { - const { asFragment } = renderWithTheme( - {}} - />, - ) - expect(asFragment()).toMatchSnapshot() - }) - - test('renders correctly with date-fns locale fr', async () => { - const { asFragment } = renderWithTheme( - {}} />, - ) - const buttonContainer = screen.getByLabelText('Date') - await userEvent.click(buttonContainer) - expect(asFragment()).toMatchSnapshot() - }) - - test('renders correctly with date-fns locale es', async () => { - const { asFragment } = renderWithTheme( - {}} />, - ) - const buttonContainer = screen.getByLabelText('Date') - await userEvent.click(buttonContainer) - expect(asFragment()).toMatchSnapshot() - }) - - test('renders correctly with date-fns locale ru', async () => { - const { asFragment } = renderWithTheme( - {}} />, - ) - const buttonContainer = screen.getByLabelText('Date') - await userEvent.click(buttonContainer) - expect(asFragment()).toMatchSnapshot() - }) - - test('render correctly with showMonthYearPicker', () => { - const { asFragment } = renderWithTheme( - {}} />, - ) - expect(asFragment()).toMatchSnapshot() - }) - test('render correctly with showMonthYearPicker with default date', async () => { - const { asFragment } = renderWithTheme( - {}} - 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( - {}} - />, - ) - expect(asFragment()).toMatchSnapshot() - }) - - test('render correctly with a array of dates to exclude', async () => { - const { asFragment } = renderWithTheme( - {}} - />, - ) - const input = screen.getByPlaceholderText('YYYY-MM-DD') - await userEvent.click(input) - - expect(asFragment()).toMatchSnapshot() - }) - - test('handle correctly click outside', async () => { - renderWithTheme( - <> - Outside - {}} - 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 - {}} - placeholder="YYYY-MM-DD" - value={new Date('1995-12-11T03:24:00.000+00:00')} - /> - , - ) - - const input = screen.getByPlaceholderText('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 - {}} - placeholder="YYYY-MM-DD" - value={new Date('1995-12-11T03:24:00.000+00:00')} - showMonthYearPicker - /> - , - ) - - const input = screen.getByPlaceholderText('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( - {}} - placeholder="YYYY-MM-DD" - value={new Date('1995-12-11T03:24:00.000+00:00')} - />, - ) - - const input = screen.getByPlaceholderText('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( - {}} - placeholder="YYYY-MM-DD" - selectsRange - value={new Date('1995-02-11T03:24:00.000+00:00')} - />, - ) - - const input = screen.getByPlaceholderText('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( - {}} - 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( - {}} - placeholder="YYYY-MM-DD" - value={new Date('1995-12-11T03:24:00.000+00:00')} - showMonthYearPicker - />, - ) - - const input = screen.getByPlaceholderText('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( - {}} - placeholder="YYYY-MM-DD" - selectsRange - showMonthYearPicker - value={new Date('1995-12-11T03:24:00.000+00:00')} - />, - ) - - const input = screen.getByPlaceholderText('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( - {}} - 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 = { - autoFocus?: boolean - locale?: string | Locale - disabled?: boolean - maxDate?: Date | null - minDate?: Date | null - name?: string - onBlur?: (event: FocusEvent) => void - onFocus?: (event: FocusEvent) => 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 = ({ - 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) => { - 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(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 ( - - { - if (!isPopupVisible) setVisible(true) - }} - > - - - } - ref={refInput} - tooltip={tooltip} - autoComplete="false" - /> - - - - ) -} 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' From cd8d34827fb09276c052b7b6d83630a0b25955b7 Mon Sep 17 00:00:00 2001 From: lisa Date: Tue, 12 Nov 2024 18:12:49 +0100 Subject: [PATCH 05/10] fix: update dateField --- .../__snapshots__/index.test.tsx.snap | 1869 +++++++++++------ .../DateField/__tests__/index.test.tsx | 21 +- .../form/src/components/DateField/index.tsx | 3 + 3 files changed, 1210 insertions(+), 683 deletions(-) diff --git a/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap index dd68e46135..24951928c0 100644 --- a/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap @@ -6,206 +6,15 @@ exports[`DateField > should render correctly 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; @@ -228,7 +37,7 @@ exports[`DateField > should render correctly 1`] = ` flex-wrap: nowrap; } -.emotion-4 { +.emotion-6 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -242,69 +51,69 @@ exports[`DateField > should render correctly 1`] = ` border-radius: 0.25rem; } -.emotion-4>.emotion-7 { +.emotion-6>.emotion-9 { color: #3f4250; } -.emotion-4>.emotion-7::-webkit-input-placeholder { +.emotion-6>.emotion-9::-webkit-input-placeholder { color: #727683; } -.emotion-4>.emotion-7::-moz-placeholder { +.emotion-6>.emotion-9::-moz-placeholder { color: #727683; } -.emotion-4>.emotion-7:-ms-input-placeholder { +.emotion-6>.emotion-9:-ms-input-placeholder { color: #727683; } -.emotion-4>.emotion-7::placeholder { +.emotion-6>.emotion-9::placeholder { color: #727683; } -.emotion-4[data-success='true'] { +.emotion-6[data-success='true'] { border-color: #22674e; } -.emotion-4[data-error='true'] { +.emotion-6[data-error='true'] { border-color: #b3144d; } -.emotion-4[data-readonly='true'] { +.emotion-6[data-readonly='true'] { background: #f9f9fa; border-color: #d9dadd; } -.emotion-4[data-disabled='true'] { +.emotion-6[data-disabled='true'] { background: #f3f3f4; border-color: #e9eaeb; } -.emotion-4[data-disabled='true']>.emotion-7 { +.emotion-6[data-disabled='true']>.emotion-9 { color: #b5b7bd; } -.emotion-4[data-disabled='true']>.emotion-7::-webkit-input-placeholder { +.emotion-6[data-disabled='true']>.emotion-9::-webkit-input-placeholder { color: #b5b7bd; } -.emotion-4[data-disabled='true']>.emotion-7::-moz-placeholder { +.emotion-6[data-disabled='true']>.emotion-9::-moz-placeholder { color: #b5b7bd; } -.emotion-4[data-disabled='true']>.emotion-7:-ms-input-placeholder { +.emotion-6[data-disabled='true']>.emotion-9:-ms-input-placeholder { color: #b5b7bd; } -.emotion-4[data-disabled='true']>.emotion-7::placeholder { +.emotion-6[data-disabled='true']>.emotion-9::placeholder { color: #b5b7bd; } -.emotion-4:not([data-disabled='true']):not([data-readonly]):hover { +.emotion-6:not([data-disabled='true']):not([data-readonly]):hover { border-color: #8c40ef; } -.emotion-6 { +.emotion-8 { -webkit-flex: 1; -ms-flex: 1; flex: 1; @@ -317,15 +126,15 @@ exports[`DateField > should render correctly 1`] = ` font-size: 0.875rem; } -.emotion-6[data-size='large'] { +.emotion-8[data-size='large'] { font-size: 1rem; } -.emotion-6[data-size='small'] { +.emotion-8[data-size='small'] { padding-left: 0.5rem; } -.emotion-8 { +.emotion-10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -351,16 +160,16 @@ exports[`DateField > should render correctly 1`] = ` border-color: inherit; } -.emotion-10 { +.emotion-12 { 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-10 .fillStroke { +.emotion-12 .fillStroke { stroke: #3f4250; fill: none; } @@ -375,9 +184,48 @@ exports[`DateField > should render correctly 1`] = ` class="emotion-0 emotion-1" >
+
+
+ +
+ + + + class="react-datepicker__input-container" >
should render correctly disabled 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; @@ -656,7 +313,7 @@ exports[`DateField > should render correctly disabled 1`] = ` flex-wrap: nowrap; } -.emotion-4 { +.emotion-6 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -670,69 +327,69 @@ exports[`DateField > should render correctly disabled 1`] = ` border-radius: 0.25rem; } -.emotion-4>.emotion-7 { +.emotion-6>.emotion-9 { color: #3f4250; } -.emotion-4>.emotion-7::-webkit-input-placeholder { +.emotion-6>.emotion-9::-webkit-input-placeholder { color: #727683; } -.emotion-4>.emotion-7::-moz-placeholder { +.emotion-6>.emotion-9::-moz-placeholder { color: #727683; } -.emotion-4>.emotion-7:-ms-input-placeholder { +.emotion-6>.emotion-9:-ms-input-placeholder { color: #727683; } -.emotion-4>.emotion-7::placeholder { +.emotion-6>.emotion-9::placeholder { color: #727683; } -.emotion-4[data-success='true'] { +.emotion-6[data-success='true'] { border-color: #22674e; } -.emotion-4[data-error='true'] { +.emotion-6[data-error='true'] { border-color: #b3144d; } -.emotion-4[data-readonly='true'] { +.emotion-6[data-readonly='true'] { background: #f9f9fa; border-color: #d9dadd; } -.emotion-4[data-disabled='true'] { +.emotion-6[data-disabled='true'] { background: #f3f3f4; border-color: #e9eaeb; } -.emotion-4[data-disabled='true']>.emotion-7 { +.emotion-6[data-disabled='true']>.emotion-9 { color: #b5b7bd; } -.emotion-4[data-disabled='true']>.emotion-7::-webkit-input-placeholder { +.emotion-6[data-disabled='true']>.emotion-9::-webkit-input-placeholder { color: #b5b7bd; } -.emotion-4[data-disabled='true']>.emotion-7::-moz-placeholder { +.emotion-6[data-disabled='true']>.emotion-9::-moz-placeholder { color: #b5b7bd; } -.emotion-4[data-disabled='true']>.emotion-7:-ms-input-placeholder { +.emotion-6[data-disabled='true']>.emotion-9:-ms-input-placeholder { color: #b5b7bd; } -.emotion-4[data-disabled='true']>.emotion-7::placeholder { +.emotion-6[data-disabled='true']>.emotion-9::placeholder { color: #b5b7bd; } -.emotion-4:not([data-disabled='true']):not([data-readonly]):hover { +.emotion-6:not([data-disabled='true']):not([data-readonly]):hover { border-color: #8c40ef; } -.emotion-6 { +.emotion-8 { -webkit-flex: 1; -ms-flex: 1; flex: 1; @@ -745,15 +402,15 @@ exports[`DateField > should render correctly disabled 1`] = ` font-size: 0.875rem; } -.emotion-6[data-size='large'] { +.emotion-8[data-size='large'] { font-size: 1rem; } -.emotion-6[data-size='small'] { +.emotion-8[data-size='small'] { padding-left: 0.5rem; } -.emotion-8 { +.emotion-10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -779,16 +436,16 @@ exports[`DateField > should render correctly disabled 1`] = ` border-color: inherit; } -.emotion-10 { +.emotion-12 { vertical-align: middle; fill: #b5b7bd; - height: 1em; - width: 1em; - min-width: 1em; - min-height: 1em; + height: 20px; + width: 20px; + min-width: 20px; + min-height: 20px; } -.emotion-10 .fillStroke { +.emotion-12 .fillStroke { stroke: #b5b7bd; fill: none; } @@ -803,9 +460,49 @@ exports[`DateField > should render correctly disabled 1`] = ` class="emotion-0 emotion-1" >
+
+
+ +
+ + + + class="react-datepicker__input-container" >
should render correctly disabled 1`] = ` exports[`DateField > should trigger events 1`] = ` - .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-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; @@ -1085,7 +609,7 @@ exports[`DateField > should trigger events 1`] = ` flex-wrap: nowrap; } -.emotion-4 { +.emotion-6 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1097,73 +621,71 @@ exports[`DateField > should trigger events 1`] = ` background: #ffffff; border: 1px solid #d9dadd; border-radius: 0.25rem; - box-shadow: 0px 0px 0px 3px #8c40ef40; - border: 1px solid #8c40ef; } -.emotion-4>.emotion-7 { +.emotion-6>.emotion-9 { color: #3f4250; } -.emotion-4>.emotion-7::-webkit-input-placeholder { +.emotion-6>.emotion-9::-webkit-input-placeholder { color: #727683; } -.emotion-4>.emotion-7::-moz-placeholder { +.emotion-6>.emotion-9::-moz-placeholder { color: #727683; } -.emotion-4>.emotion-7:-ms-input-placeholder { +.emotion-6>.emotion-9:-ms-input-placeholder { color: #727683; } -.emotion-4>.emotion-7::placeholder { +.emotion-6>.emotion-9::placeholder { color: #727683; } -.emotion-4[data-success='true'] { +.emotion-6[data-success='true'] { border-color: #22674e; } -.emotion-4[data-error='true'] { +.emotion-6[data-error='true'] { border-color: #b3144d; } -.emotion-4[data-readonly='true'] { +.emotion-6[data-readonly='true'] { background: #f9f9fa; border-color: #d9dadd; } -.emotion-4[data-disabled='true'] { +.emotion-6[data-disabled='true'] { background: #f3f3f4; border-color: #e9eaeb; } -.emotion-4[data-disabled='true']>.emotion-7 { +.emotion-6[data-disabled='true']>.emotion-9 { color: #b5b7bd; } -.emotion-4[data-disabled='true']>.emotion-7::-webkit-input-placeholder { +.emotion-6[data-disabled='true']>.emotion-9::-webkit-input-placeholder { color: #b5b7bd; } -.emotion-4[data-disabled='true']>.emotion-7::-moz-placeholder { +.emotion-6[data-disabled='true']>.emotion-9::-moz-placeholder { color: #b5b7bd; } -.emotion-4[data-disabled='true']>.emotion-7:-ms-input-placeholder { +.emotion-6[data-disabled='true']>.emotion-9:-ms-input-placeholder { color: #b5b7bd; } -.emotion-4[data-disabled='true']>.emotion-7::placeholder { +.emotion-6[data-disabled='true']>.emotion-9::placeholder { color: #b5b7bd; } -.emotion-4:not([data-disabled='true']):not([data-readonly]):hover { +.emotion-6:not([data-disabled='true']):not([data-readonly]):hover { border-color: #8c40ef; } -.emotion-6 { +.emotion-8 { -webkit-flex: 1; -ms-flex: 1; flex: 1; @@ -1176,15 +698,15 @@ exports[`DateField > should trigger events 1`] = ` font-size: 0.875rem; } -.emotion-6[data-size='large'] { +.emotion-8[data-size='large'] { font-size: 1rem; } -.emotion-6[data-size='small'] { +.emotion-8[data-size='small'] { padding-left: 0.5rem; } -.emotion-8 { +.emotion-10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1210,20 +732,368 @@ exports[`DateField > should trigger events 1`] = ` border-color: inherit; } -.emotion-10 { +.emotion-12 { 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-10 .fillStroke { +.emotion-12 .fillStroke { stroke: #3f4250; fill: none; } +.emotion-15 { + 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-15[data-animated="true"] { + -webkit-animation: 0ms animation-0 forwards; + animation: 0ms animation-0 forwards; +} + +.emotion-15[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-15[data-visible-in-dom="false"] { + display: none; +} + +.emotion-17 { + 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-19 { + 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-21 { + 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-21:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.emotion-21:active { + box-shadow: 0px 0px 0px 3px #151a2d5c; +} + +.emotion-21:hover, +.emotion-21:active { + background: #e9eaeb; + color: #222638; +} + +.emotion-23 { + vertical-align: middle; + fill: currentColor; + height: 16px; + width: 16px; + min-width: 16px; + min-height: 16px; +} + +.emotion-23 .fillStroke { + stroke: currentColor; + fill: none; +} + +.emotion-26 { + 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-26::first-letter { + text-transform: uppercase; +} + +.emotion-32 { + 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-56 { + 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-56:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.emotion-56:active { + box-shadow: 0px 0px 0px 3px #151a2d5c; +} + +.emotion-56:hover, +.emotion-56:active { + background: #e9eaeb; + color: #222638; +} + +.emotion-58 { + 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-73 { + 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-141 { + 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; + height: 1.5625rem; + width: 100%; + padding: 0; +} + +.emotion-141:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.emotion-141:active { + box-shadow: 0px 0px 0px 3px #8c40ef40; +} + +.emotion-141:hover, +.emotion-141:active { + background: #792dd4; + color: #f9f9fa; +} + +.emotion-143 { + 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; +} +
@@ -1234,9 +1104,664 @@ exports[`DateField > should trigger events 1`] = ` class="emotion-0 emotion-1" >
+
+
+ +
+ + + + +
+
+
+
+ class="react-datepicker__input-container" >
{ const onBlur = vi.fn() const onChange = vi.fn() const { asFragment } = renderWithForm( - , + , { defaultValues: { test: new Date('2022-09-01'), }, }, ) - const select = screen.getByRole('textbox') - await userEvent.type(select, '{ArrowDown}') - const option = screen.getAllByRole('option')[0] - await userEvent.click(option) + const input = screen.getByPlaceholderText('YYYY-MM-DD') + await userEvent.click(input) + await userEvent.click(screen.getByText('15')) expect(onChange).toBeCalledTimes(1) - // Blur not working on react-datepicker: - // https://github.com/Hacker0x01/react-datepicker/issues/2028 - // act(() => { - // select.blur() - // }) - // expect(onBlur).toBeCalledTimes(1) + expect(asFragment()).toMatchSnapshot() }, 10000) }) diff --git a/packages/form/src/components/DateField/index.tsx b/packages/form/src/components/DateField/index.tsx index 59adcb66a1..c70326b50a 100644 --- a/packages/form/src/components/DateField/index.tsx +++ b/packages/form/src/components/DateField/index.tsx @@ -36,6 +36,7 @@ type DateFieldProps< onBlur?: (event: FocusEvent) => void onFocus?: (value: FocusEvent) => void autoFocus?: boolean + placeholder?: string } const parseDate = (value: string | Date): Date => @@ -65,6 +66,7 @@ export const DateField = < excludeDates, selectsRange, size, + placeholder, 'data-testid': dataTestId, shouldUnregister = false, showMonthYearPicker, @@ -91,6 +93,7 @@ export const DateField = < Date: Thu, 14 Nov 2024 10:56:47 +0100 Subject: [PATCH 06/10] fix: various fixes --- .changeset/brown-baboons-teach.md | 2 +- .../__snapshots__/index.test.tsx.snap | 2 +- .../ui/src/components/DateInput/Context.tsx | 7 ++- .../__stories__/Controlled.stories.tsx | 8 ++++ .../DateInput/__stories__/Exclude.stories.tsx | 8 ++++ .../DateInput/__stories__/I18n.stories.tsx | 8 ++++ .../__stories__/Localized.stories.tsx | 2 +- .../DateInput/__stories__/MinMax.stories.tsx | 8 ++++ .../DateInput/__stories__/Range.stories.tsx | 14 ++++-- .../__stories__/Required.stories.tsx | 7 +++ .../DateInput/__stories__/Size.stories.tsx | 7 +++ .../__snapshots__/index.test.tsx.snap | 22 +++++----- .../DateInput/__tests__/index.test.tsx | 16 +++---- .../DateInput/components/CalendarDaily.tsx | 24 +++++------ .../DateInput/components/CalendarMonthly.tsx | 14 +++--- .../components/DateInput/components/Popup.tsx | 10 ++--- .../ui/src/components/DateInput/constants.ts | 43 +------------------ .../ui/src/components/DateInput/helpers.ts | 8 ++-- .../ui/src/components/DateInput/index.tsx | 13 ++++-- 19 files changed, 121 insertions(+), 102 deletions(-) diff --git a/.changeset/brown-baboons-teach.md b/.changeset/brown-baboons-teach.md index b9a83ccb3a..6cfc9bf952 100644 --- a/.changeset/brown-baboons-teach.md +++ b/.changeset/brown-baboons-teach.md @@ -2,5 +2,5 @@ "@ultraviolet/ui": minor --- -- New component `` which doesn't use React Date Picker +- Refactoring of `` to remove dependency react-datepicker - ` @@ -7264,7 +7263,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = ` class="emotion-64 emotion-11" data-testid="dayNextMonth" > - 2 + 1
@@ -7277,7 +7276,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = ` class="emotion-64 emotion-11" data-testid="dayNextMonth" > - 3 + 2
@@ -7290,7 +7289,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = ` class="emotion-64 emotion-11" data-testid="dayNextMonth" > - 4 + 3
@@ -7303,7 +7302,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = ` class="emotion-64 emotion-11" data-testid="dayNextMonth" > - 5 + 4
@@ -7316,7 +7315,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = ` class="emotion-64 emotion-11" data-testid="dayNextMonth" > - 6 + 5
@@ -7329,7 +7328,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = ` class="emotion-64 emotion-11" data-testid="dayNextMonth" > - 7 + 6
@@ -7342,7 +7341,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = ` class="emotion-64 emotion-11" data-testid="dayNextMonth" > - 8 + 7
@@ -7986,7 +7985,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = ` - novembre 2024 + janvier 2021 @@ -8478,7 +8476,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = ` class="emotion-64 emotion-11" data-testid="dayNextMonth" > - 2 + 1
@@ -8491,7 +8489,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = ` class="emotion-64 emotion-11" data-testid="dayNextMonth" > - 3 + 2
@@ -8504,7 +8502,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = ` class="emotion-64 emotion-11" data-testid="dayNextMonth" > - 4 + 3
@@ -8517,7 +8515,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = ` class="emotion-64 emotion-11" data-testid="dayNextMonth" > - 5 + 4
@@ -8530,7 +8528,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = ` class="emotion-64 emotion-11" data-testid="dayNextMonth" > - 6 + 5
@@ -8543,7 +8541,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = ` class="emotion-64 emotion-11" data-testid="dayNextMonth" > - 7 + 6
@@ -8556,7 +8554,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = ` class="emotion-64 emotion-11" data-testid="dayNextMonth" > - 8 + 7
@@ -9200,7 +9198,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = ` - ноябрь 2024 + январь 2021 @@ -9692,7 +9689,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = ` class="emotion-64 emotion-11" data-testid="dayNextMonth" > - 2 + 1
@@ -9705,7 +9702,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = ` class="emotion-64 emotion-11" data-testid="dayNextMonth" > - 3 + 2
@@ -9718,7 +9715,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = ` class="emotion-64 emotion-11" data-testid="dayNextMonth" > - 4 + 3
@@ -9731,7 +9728,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = ` class="emotion-64 emotion-11" data-testid="dayNextMonth" > - 5 + 4
@@ -9744,7 +9741,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = ` class="emotion-64 emotion-11" data-testid="dayNextMonth" > - 6 + 5
@@ -9757,7 +9754,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = ` class="emotion-64 emotion-11" data-testid="dayNextMonth" > - 7 + 6
@@ -9770,7 +9767,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = ` class="emotion-64 emotion-11" data-testid="dayNextMonth" > - 8 + 7
diff --git a/packages/ui/src/components/DateInput/helpers.ts b/packages/ui/src/components/DateInput/helpers.ts index 4c0118ab65..eb14cd7392 100644 --- a/packages/ui/src/components/DateInput/helpers.ts +++ b/packages/ui/src/components/DateInput/helpers.ts @@ -1,15 +1,4 @@ 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] - const leapYear = year % 4 === 0 - - if (month === 2) { - return leapYear ? 29 : 28 - } - - return months30.includes(month) ? 30 : 31 -} // First day of the month for a given year export const getMonthFirstDay = ( @@ -80,8 +69,8 @@ export const formatValue = ( ) => { if (selectsRange && computedRange) { return format - ? `${format(computedRange.start ?? undefined)} - ${format(computedRange.end ?? undefined)}` - : `${getDateISO(showMonthYearPicker, computedRange.start ?? undefined)}${computedRange.start ? ' - ' : null}${getDateISO(showMonthYearPicker, computedRange.end ?? undefined)}` + ? `${format(computedRange.start ?? undefined) ? `${format(computedRange.start ?? undefined)} - ` : ''}${format(computedRange.end ?? undefined) ?? ''}` + : `${getDateISO(showMonthYearPicker, computedRange.start ?? undefined)}${computedRange.start ? ' - ' : ''}${getDateISO(showMonthYearPicker, computedRange.end ?? undefined)}` } if (computedValue && format) { diff --git a/packages/ui/src/components/DateInput/index.tsx b/packages/ui/src/components/DateInput/index.tsx index c5d83868af..da99d91331 100644 --- a/packages/ui/src/components/DateInput/index.tsx +++ b/packages/ui/src/components/DateInput/index.tsx @@ -6,7 +6,6 @@ import { useEffect, useMemo, useRef, useState } from 'react' import { TextInputV2 } from '../TextInputV2' 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' @@ -48,9 +47,9 @@ type DateInputProps = { onChange?: IsRange extends true ? ( date: Date[] | [Date | null, Date | null], - event: React.SyntheticEvent | undefined, + event?: React.SyntheticEvent, ) => void - : (date: Date | null, event: React.SyntheticEvent | undefined) => void + : (date: Date | null, event?: React.SyntheticEvent) => void } /** @@ -92,7 +91,7 @@ export const DateInput = ({ if (startDate && selectsRange) return startDate.getMonth() + 1 if (endDate && selectsRange) return endDate.getMonth() + 1 - return CURRENT_MONTH + return new Date().getMonth() + 1 }, [endDate, selectsRange, startDate, value]) const defaultYearToShow = useMemo(() => { @@ -100,7 +99,7 @@ export const DateInput = ({ if (startDate && selectsRange) return startDate.getFullYear() if (endDate && selectsRange) return endDate.getFullYear() - return CURRENT_YEAR + return new Date().getFullYear() }, [endDate, selectsRange, startDate, value]) const [computedValue, setValue] = useState( From 6657752455bf51ddf818a181f94a660584b82de9 Mon Sep 17 00:00:00 2001 From: lisa Date: Tue, 26 Nov 2024 16:52:05 +0100 Subject: [PATCH 10/10] fix: hide on click --- .../__snapshots__/index.test.tsx.snap | 1101 +---------------- .../ui/src/components/DateInput/Context.tsx | 2 + .../__snapshots__/index.test.tsx.snap | 146 ++- .../DateInput/__tests__/index.test.tsx | 94 +- .../DateInput/components/CalendarDaily.tsx | 3 + .../DateInput/components/CalendarMonthly.tsx | 3 + .../ui/src/components/DateInput/index.tsx | 2 + 7 files changed, 209 insertions(+), 1142 deletions(-) diff --git a/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap index 3958ce6d31..d6907c0a74 100644 --- a/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap @@ -226,45 +226,6 @@ exports[`DateField > should render correctly 1`] = ` fill-rule="evenodd" /> - class="react-datepicker__input-container" - > -
-
-
- -
- - - - -
@@ -503,46 +464,6 @@ exports[`DateField > should render correctly disabled 1`] = ` fill-rule="evenodd" /> - class="react-datepicker__input-container" - > -
-
-
- -
- - - - -
@@ -556,25 +477,7 @@ exports[`DateField > should render correctly disabled 1`] = ` exports[`DateField > should trigger events 1`] = ` - @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 { + .emotion-0 { width: 100%; } @@ -746,354 +649,6 @@ exports[`DateField > should trigger events 1`] = ` fill: none; } -.emotion-15 { - background: #151a2d; - color: #ffffff; - border-radius: 0.25rem; - padding: 0.25rem 0.5rem; - text-align: center; - position: absolute; - max-width: 16.5rem; - 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-15[data-animated="true"] { - -webkit-animation: 0ms animation-0 forwards; - animation: 0ms animation-0 forwards; -} - -.emotion-15[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-15[data-visible-in-dom="false"] { - display: none; -} - -.emotion-17 { - 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-19 { - 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-21 { - 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-21:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-21:active { - box-shadow: 0px 0px 0px 3px #151a2d5c; -} - -.emotion-21:hover, -.emotion-21:active { - background: #e9eaeb; - color: #222638; -} - -.emotion-23 { - vertical-align: middle; - fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; -} - -.emotion-23 .fillStroke { - stroke: currentColor; - fill: none; -} - -.emotion-26 { - 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-26::first-letter { - text-transform: uppercase; -} - -.emotion-32 { - 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-56 { - 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-56:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-56:active { - box-shadow: 0px 0px 0px 3px #151a2d5c; -} - -.emotion-56:hover, -.emotion-56:active { - background: #e9eaeb; - color: #222638; -} - -.emotion-58 { - 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-73 { - 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-141 { - 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; - height: 1.5625rem; - width: 100%; - padding: 0; -} - -.emotion-141:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-141:active { - box-shadow: 0px 0px 0px 3px #8c40ef40; -} - -.emotion-141:hover, -.emotion-141:active { - background: #792dd4; - color: #f9f9fa; -} - -.emotion-143 { - 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; -} -
@@ -1151,660 +706,6 @@ exports[`DateField > should trigger events 1`] = `
- - class="react-datepicker__input-container" - > -
-
-
- -
- - - - -
-
-
-
-
diff --git a/packages/ui/src/components/DateInput/Context.tsx b/packages/ui/src/components/DateInput/Context.tsx index 1d29525904..bb8cc537f1 100644 --- a/packages/ui/src/components/DateInput/Context.tsx +++ b/packages/ui/src/components/DateInput/Context.tsx @@ -14,6 +14,7 @@ export type ContextProps = { yearToShow: number excludeDates?: Date[] setMonthToShow: Dispatch> + setVisible: Dispatch> setYearToShow: Dispatch> minDate?: Date | null maxDate?: Date | null @@ -68,4 +69,5 @@ export const DateInputContext = createContext({ DAYS: {}, MONTHS_ARR: [], selectsRange: false, + setVisible: () => null, }) 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 f65c10b736..1529ab5b3b 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 @@ -450,6 +450,24 @@ exports[`DateInput > render correctly with a array of dates to exclude 1`] = ` justify-content: normal; } +.emotion-41 { + 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-41::first-letter { + text-transform: uppercase; +} + .emotion-62 { display: -webkit-inline-box; display: -webkit-inline-flex; @@ -773,37 +791,37 @@ exports[`DateInput > render correctly with a array of dates to exclude 1`] = ` class="emotion-38 emotion-39" >

Mo

Tu

We

Th

Fr

Sa

Su

@@ -3484,8 +3502,8 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon class="emotion-0 emotion-1" >
@@ -3500,7 +3518,7 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon > @@ -3519,7 +3537,7 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon autocomplete="false" class="emotion-14 emotion-15" data-size="large" - id=":r10a:" + id=":r194:" placeholder="YYYY-MM-DD" type="text" value="02/1995" @@ -3548,7 +3566,7 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon class="emotion-20 emotion-21 emotion-22" data-animated="false" data-has-arrow="false" - id=":r109:" + id=":r193:" role="dialog" style="opacity: 1;" > @@ -3995,8 +4013,8 @@ exports[`DateInput > renders correctly custom format with range 1`] = ` class="emotion-0 emotion-1" >
@@ -4011,7 +4029,7 @@ exports[`DateInput > renders correctly custom format with range 1`] = ` > @@ -4030,7 +4048,7 @@ exports[`DateInput > renders correctly custom format with range 1`] = ` autocomplete="false" class="emotion-14 emotion-15" data-size="large" - id=":r13p:" + id=":r1cj:" name="test" type="text" value="1995-12-11T03:24:00.000Z - 1995-12-11T03:24:00.000Z" @@ -6591,6 +6609,24 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = ` justify-content: normal; } +.emotion-41 { + 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-41::first-letter { + text-transform: uppercase; +} + .emotion-62 { display: -webkit-inline-box; display: -webkit-inline-flex; @@ -6796,37 +6832,37 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = ` class="emotion-38 emotion-39" >

lu

ma

mi

ju

vi

sá

do

@@ -7804,6 +7840,24 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = ` justify-content: normal; } +.emotion-41 { + 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-41::first-letter { + text-transform: uppercase; +} + .emotion-62 { display: -webkit-inline-box; display: -webkit-inline-flex; @@ -8009,37 +8063,37 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = ` class="emotion-38 emotion-39" >

lu

ma

me

je

ve

sa

di

@@ -9017,6 +9071,24 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = ` justify-content: normal; } +.emotion-41 { + 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-41::first-letter { + text-transform: uppercase; +} + .emotion-62 { display: -webkit-inline-box; display: -webkit-inline-flex; @@ -9222,37 +9294,37 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = ` class="emotion-38 emotion-39" >

по

вт

ср

че

пя

су

во

diff --git a/packages/ui/src/components/DateInput/__tests__/index.test.tsx b/packages/ui/src/components/DateInput/__tests__/index.test.tsx index f8d3809838..ca195f9aca 100644 --- a/packages/ui/src/components/DateInput/__tests__/index.test.tsx +++ b/packages/ui/src/components/DateInput/__tests__/index.test.tsx @@ -3,7 +3,7 @@ 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 { describe, expect, test, vi } from 'vitest' import { DateInput } from '..' tk.freeze(new Date(1609503120000)) @@ -242,20 +242,27 @@ describe('DateInput', () => { const input = screen.getByPlaceholderText('YYYY-MM-DD') await userEvent.click(input) - const visibleMonth = screen.getByText(/December/i) + const calendar = screen.getByRole('dialog') expect(calendar).toBeVisible() + await userEvent.click(input) + await userEvent.click(screen.getByText('15')) expect(input.value).toBe('12/15/1995') - const dayFromLastMonth = screen.getAllByText('30')[0] // the first element in this array is necessarily from previous month + await userEvent.click(input) + + const dayFromLastMonth = screen.getAllByText('30')[0] // the first element in this array is from previous month await userEvent.click(dayFromLastMonth) - expect(visibleMonth.textContent).toContain('November') + await userEvent.click(input) + expect(input.value).toBe('11/30/1995') + + await userEvent.click(input) const dayFromNextMonth = screen.getAllByText('1')[1] await userEvent.click(dayFromNextMonth) - expect(visibleMonth.textContent).toContain('December') + expect(input.value).toBe('12/01/1995') }) test('handle correctly click on date range', async () => { @@ -284,6 +291,7 @@ describe('DateInput', () => { await userEvent.click(day) expect(input.value).toBe('02/15/1995 - 02/27/1995') + await userEvent.click(input) await userEvent.click(screen.getByText('31')) expect(input.value).toBe('01/31/1995 - ') }) @@ -372,4 +380,80 @@ describe('DateInput', () => { ) expect(asFragment()).toMatchSnapshot() }) + + test('handle correctly type in input', async () => { + const mockOnChange = vi.fn() + renderWithTheme( + , + ) + + const input = screen.getByPlaceholderText('YYYY-MM-DD') + await userEvent.click(input) + + await userEvent.type(input, '08/21/1995') + expect(mockOnChange).toBeCalled() + expect(screen.getByText('August', { exact: false })).toBeInTheDocument() + }) + + test('handle correctly type in input with select range', async () => { + const mockOnChange = vi.fn() + renderWithTheme( + , + ) + + const input = screen.getByPlaceholderText('YYYY-MM-DD') + await userEvent.click(input) + + await userEvent.type(input, '08/21/1995') + expect(mockOnChange).toBeCalled() + expect(screen.getByText('August', { exact: false })).toBeInTheDocument() + }) + + test('handle correctly type in input with showMonthYearPicker', async () => { + const mockOnChange = vi.fn() + renderWithTheme( + , + ) + + const input = screen.getByPlaceholderText('YYYY-MM-DD') + await userEvent.click(input) + + await userEvent.type(input, '2000/08') + expect(mockOnChange).toBeCalled() + expect(screen.getByText('2000', { exact: false })).toBeInTheDocument() + }) + + test('handle correctly type in input with select range and showMonthYearPicker', async () => { + const mockOnChange = vi.fn() + renderWithTheme( + , + ) + + const input = screen.getByPlaceholderText('YYYY-MM-DD') + await userEvent.click(input) + + await userEvent.type(input, '2000/08') + expect(mockOnChange).toBeCalled() + expect(screen.getByText('2000', { exact: false })).toBeInTheDocument() + }) }) diff --git a/packages/ui/src/components/DateInput/components/CalendarDaily.tsx b/packages/ui/src/components/DateInput/components/CalendarDaily.tsx index 2781485d49..84334c5c46 100644 --- a/packages/ui/src/components/DateInput/components/CalendarDaily.tsx +++ b/packages/ui/src/components/DateInput/components/CalendarDaily.tsx @@ -54,6 +54,7 @@ export const Daily = ({ disabled }: { disabled: boolean }) => { setRange, setInputValue, format, + setVisible, } = useContext(DateInputContext) const [rangeState, setRangeState] = useState<'start' | 'none' | 'done'>( @@ -205,6 +206,7 @@ export const Daily = ({ disabled }: { disabled: boolean }) => { format, ), ) + setVisible(false) setRangeState('done') } else { // End date before start @@ -250,6 +252,7 @@ export const Daily = ({ disabled }: { disabled: boolean }) => { setInputValue( formatValue(newDate, null, false, false, format), ) + setVisible(false) } } }} diff --git a/packages/ui/src/components/DateInput/components/CalendarMonthly.tsx b/packages/ui/src/components/DateInput/components/CalendarMonthly.tsx index 329f864298..ba7540f455 100644 --- a/packages/ui/src/components/DateInput/components/CalendarMonthly.tsx +++ b/packages/ui/src/components/DateInput/components/CalendarMonthly.tsx @@ -45,6 +45,7 @@ export const Monthly = ({ disabled }: { disabled: boolean }) => { value, setInputValue, format, + setVisible, } = useContext(DateInputContext) const [rangeState, setRangeState] = useState<'start' | 'none' | 'done'>( range?.start ? 'start' : 'none', @@ -117,6 +118,7 @@ export const Monthly = ({ disabled }: { disabled: boolean }) => { format, ), ) + setVisible(false) setRangeState('done') } else { // End date before start @@ -153,6 +155,7 @@ export const Monthly = ({ disabled }: { disabled: boolean }) => { setInputValue( formatValue(constructedDate, null, true, false, format), ) + setVisible(false) } } }} diff --git a/packages/ui/src/components/DateInput/index.tsx b/packages/ui/src/components/DateInput/index.tsx index da99d91331..5363992076 100644 --- a/packages/ui/src/components/DateInput/index.tsx +++ b/packages/ui/src/components/DateInput/index.tsx @@ -149,6 +149,7 @@ export const DateInput = ({ selectsRange, format, setInputValue, + setVisible, }) as ContextProps, [ showMonthYearPicker, @@ -167,6 +168,7 @@ export const DateInput = ({ onChange, format, setInputValue, + setVisible, ], )