@laerdal/life-react-components 6.0.0-dev.1.full → 6.0.0-dev.12.full

package/dist/InputFields/DatepickerField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatepickerField.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_interopRequireWildcard","_reactDatepicker","_enGB","_dayjs","_advancedFormat","_quarterOfYear","_colors","_icons","_DatepickerFieldHeader","_styles","_TooltipOverflow","_styling","_common","_types","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","dayjs","extend","advancedFormat","quarterOfYear","DatePickerContainer","styled","div","Z_INDEXES","dropdown","props","$margin","COLORS","getColor","theme","focusStyles","$yearPicker","ComponentSStyling","ComponentTextStyle","Bold","scrollBarStyling","Size","Small","ComponentMStyling","Regular","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","InputFieldStyling","quarterComponentsClassPrefix","DatepickerField","React","forwardRef","_ref","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearPicker","yearsBeforeCurrentDate","yearsAfterCurrentDate","margin","overflowTooltipPosition","onBlur","showQuarterYearPicker","id","dataTestId","rest","_objectWithoutProperties2","useTheme","inputRef","useFocusVisibleRef","datepickerRef","useRef","focusedQuarterRef","activeMonthPage","setActiveMonthPage","useState","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","getFormattedValue","val","year","quarter","format","useEffect","current","getQuarterItem","classname","document","getElementsByClassName","selectedDate","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","wrapper","handler","event","key","currentQ","click","previousQ","tabIndex","nextQ","addEventListener","selectedQuarter","innerText","includes","setAttribute","firstQuarter","removeEventListener","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","handleBlur","currentTarget","contains","relatedTarget","iconSize","jsxs","Fragment","children","jsx","$quarterPicker","onCalendarOpen","onCalendarClose","onKeyDown","onClickOutside","newDate","setMonth","locale","en","undefined","showYearPicker","yearItemNumber","selected","openToDate","preventOpenOnFocus","shouldCloseOnSelect","renderCustomHeader","params","createElement","DatepickerFieldHeader","customHeaderCount","customInput","InputWrapper","$disabled","$readOnly","type","name","className","onFocus","setSelectionRange","$extraRightPadding","$suppressReadOnlyStyles","SystemIcons","Calendar","size","position","input","withArrow","maxWidth","align","ErrorMessage","TechnicalWarning","color","propTypes","_propTypes","instanceOf","func","bool","string","number","oneOf","_default","exports"],"sources":["../../src/InputFields/DatepickerField.tsx"],"sourcesContent":["/**\r\n * Import react libraries.\r\n */\r\nimport React from 'react';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { useTheme } from 'styled-components';\r\nimport DatePicker, { ReactDatePickerCustomHeaderProps } from 'react-datepicker';\r\nimport en from 'date-fns/locale/en-GB';\r\nimport dayjs from 'dayjs';\r\nimport advancedFormat  from 'dayjs/plugin/advancedFormat';\r\nimport quarterOfYear from \"dayjs/plugin/quarterOfYear\";\r\n\r\ndayjs.extend(advancedFormat);\r\ndayjs.extend(quarterOfYear);\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport COLORS from '../styles/colors';\r\nimport {SystemIcons} from '../icons';\r\nimport {DatepickerFieldHeader} from './DatepickerFieldHeader';\r\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\r\nimport 'react-datepicker/dist/react-datepicker.css';\r\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {Size, Testable} from '../types';\r\n\r\n/**\r\n * Add custom types.\r\n */\r\nexport type DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\r\n  /** Optional. Selected date. Defaults to current date */\r\n  value?: Date;\r\n  /** Optional. Handler to be called when selected date was changed. */\r\n  onChange?: (date: Date) => void;\r\n  /** Optional. Handler to be called when control is losing focus. */\r\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\r\n  /** Optional. Quarter picker mode. If set, then user can not select a particular date, but quarter of the year.\r\n   * 1st day of the quarter will be set as value.\r\n   */\r\n  showQuarterYearPicker?: boolean;\r\n  /** Optional. If set, then input field will be shown in 'invalid' state */\r\n  invalid?: boolean;\r\n  /** Optional. Format in which date will be shown in the input field. Defaults to 'MMMM Do, yyyy'. \r\n   * For quarter picker will be shown in 'YYYY, qqq' format.\r\n   */\r\n  dateFormat?: string;\r\n  /** Optional. Validation message to be shown under the input field */\r\n  validationMessage?: string;\r\n  /** Optional. Value for 'autocomplete' attribute of input field tag. */\r\n  autoComplete?: string;\r\n  /** Optional. Placeholder text to be shown when no value is selected. */\r\n  placeholder?: string;\r\n  /** Optional. If set, then user will be able to open year selector by clicking on the month in the dropdown. */\r\n  yearPicker?: boolean;\r\n  /** Optional. How many years before current year will be available in the year selector mode. */\r\n  yearsBeforeCurrentDate?: number;\r\n  /** Optional. How many years after current year will be available in the year selector mode. */\r\n  yearsAfterCurrentDate?: number;\r\n  /** Optional. Margin value to be set to the dropdown container. */\r\n  margin?: string;\r\n  /** Optional. Position where to show tooltip in case of closed datepicker and value overflowing the input field. */\r\n  overflowTooltipPosition?: 'top' | 'bottom';\r\n};\r\n\r\n/**\r\n * Add custom styles.\r\n */\r\nconst DatePickerContainer = styled.div<{ $yearPicker: boolean; $margin: string; $quarterPicker?: boolean }>`\r\n  .react-datepicker-popper {\r\n    z-index: ${Z_INDEXES.dropdown};\r\n  }\r\n\r\n  .react-datepicker-popper[data-placement^=bottom] {\r\n    padding-top: 0px;\r\n  }\r\n\r\n  \r\n  .react-datepicker-popper[data-placement^=top] {\r\n    padding-bottom: 0px;\r\n  }\r\n\r\n  > div {\r\n    display: block;\r\n\r\n    ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n    .react-datepicker {\r\n      box-sizing: border-box;\r\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\r\n      border: 1px solid #e5e5e5;\r\n    }\r\n    .react-datepicker__input-container{\r\n      z-index: 0;\r\n    }\r\n\r\n    .react-datepicker__navigation {\r\n      line-height: normal;\r\n      text-indent: inherit;\r\n      border: none;\r\n      border-radius: 4px;\r\n      height: 48px;\r\n      width: 48px;\r\n      outline: none;\r\n      margin: 0px;\r\n      color: transparent;\r\n\r\n      &:hover {\r\n        background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n        &.react-datepicker__navigation--previous::before {\r\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\r\n        }\r\n\r\n        &.react-datepicker__navigation--next::before {\r\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\r\n        }\r\n      }\r\n\r\n      &:focus {\r\n        ${focusStyles}\r\n        &.react-datepicker__navigation--next::before {\r\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\r\n        }\r\n\r\n        &.react-datepicker__navigation--previous::before {\r\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\r\n        }\r\n      }\r\n\r\n      &::before {\r\n        text-align: center;\r\n        display: inline-block;\r\n        content: '';\r\n        height: 32px;\r\n        width: 32px;\r\n        vertical-align: middle;\r\n      }\r\n\r\n      &.react-datepicker__navigation--next::before {\r\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\r\n      }\r\n\r\n      &.react-datepicker__navigation--previous::before {\r\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\r\n      }\r\n    }\r\n\r\n    .react-datepicker__month-container,\r\n    .react-datepicker__year--container {\r\n      width: 336px;\r\n    }\r\n\r\n    .react-datepicker__month {\r\n      margin: 0px;\r\n    }\r\n\r\n    .react-datepicker__triangle {\r\n      left: 50% !important;\r\n      display: none;\r\n    }\r\n\r\n    .react-datepicker-popper[data-placement^='bottom'] {\r\n      margin-top: 0;\r\n    }\r\n\r\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\r\n      border-bottom-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n    }\r\n\r\n    .react-datepicker__header {\r\n      border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n      background: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n      height: ${(props) => (!props.$yearPicker ? '96px' : '54px')};\r\n      padding-top: 0px;\r\n    }\r\n\r\n    .react-datepicker-year-header {\r\n      height: 48px;\r\n      line-height: 48px !important;\r\n      align-items: center;\r\n\r\n      ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n\r\n    .react-datepicker__current-month {\r\n      height: 48px;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      margin-right: 5px;\r\n\r\n      ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n\r\n    .react-datepicker__year {\r\n      max-height: 300px;\r\n      overflow-y: scroll;\r\n\r\n      ${scrollBarStyling(Size.Small)}\r\n    }\r\n\r\n    .react-datepicker__quarter-wrapper{\r\n      width: 100%;\r\n      display: flex;\r\n      align-content: space-evenly;\r\n      flex-wrap: wrap;\r\n      align-items: center;\r\n      gap: 20px;\r\n    }\r\n\r\n    .react-datepicker__year-wrapper {\r\n      max-width: 100%;\r\n      justify-content: space-around;\r\n    }\r\n\r\n    .react-datepicker__navigation-icon {\r\n      display: none;\r\n    }\r\n\r\n    .react-datepicker__day-name {\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      height: 48px;\r\n      margin: 0px;\r\n      width: 48px;\r\n\r\n      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n\r\n    \r\n\r\n    .react-datepicker__year-text {\r\n      background: ${props => COLORS.getColor('white', props.theme)};\r\n      border: none;\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      margin-top: 20px;\r\n      padding-top: 10px;\r\n      padding-bottom: 10px;\r\n\r\n      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n      &.react-datepicker__year-text--disabled {\r\n        display: none;\r\n      }\r\n\r\n      &.react-datepicker__day--keyboard-selected {\r\n        color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n        background: ${props => COLORS.getColor('white', props.theme)};\r\n        font-weight: 400;\r\n        border: none;\r\n      }\r\n\r\n      &:hover {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n        background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n      }\r\n\r\n      &:focus {\r\n        ${focusStyles}\r\n      }\r\n\r\n      &.react-datepicker__year-text--selected {\r\n        color: ${props => COLORS.getColor('white', props.theme)} !important;\r\n        background: ${props => COLORS.getColor('primary_500', props.theme)} !important;\r\n      }\r\n    }\r\n\r\n    .react-datepicker__day, .react-datepicker__quarter-text {\r\n      background: ${props => COLORS.getColor('white', props.theme)};\r\n      border: none;\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      flex-grow: 1;\r\n      height: 40px;\r\n      width: 40px;\r\n      margin: 4px;\r\n\r\n      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n      &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {\r\n        color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n        background: ${props => COLORS.getColor('white', props.theme)};\r\n        flex-grow: 1;\r\n        font-weight: 400;\r\n        border: none;\r\n      }\r\n\r\n      &.react-datepicker__quarter--selected {\r\n        color: ${props => COLORS.getColor('white', props.theme)} !important;\r\n        flex-grow: 1;\r\n        background: ${props => COLORS.getColor('primary_500', props.theme)} !important;\r\n      }\r\n\r\n      &:hover {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n        background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n      }\r\n\r\n      &:focus {\r\n        ${focusStyles}\r\n      }\r\n\r\n      &.react-datepicker__day--selected {\r\n        color: ${props => COLORS.getColor('white', props.theme)} !important;\r\n        background: ${props => COLORS.getColor('primary_500', props.theme)} !important;\r\n      }\r\n\r\n      &.react-datepicker__day--today {\r\n        border-radius: 0.3rem;\r\n        color: ${props => COLORS.getColor('neutral_700', props.theme)};\r\n        background: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n        &:hover {\r\n          color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n          background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n        }\r\n\r\n        &:focus {\r\n          ${focusStyles}\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst IconWrapper = styled.div`\r\n  pointer-events: none;\r\n  position: absolute;\r\n  left: 16px;\r\n  width: 24px;\r\n  height: 24px;\r\n  z-index: ${+Z_INDEXES.focus + 1};\r\n`;\r\n\r\nconst DatepickerRow = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\r\n  padding-left: 48px !important;\r\n  \r\n  &::placeholder {\r\n    color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  }\r\n\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_300', props.theme)};\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_200', props.theme)};\r\n\r\n    ::placeholder {\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n\r\n    cursor: pointer;\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &:active,\r\n  &.open {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_300', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n\r\n    ::placeholder {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n  \r\n  &:disabled {\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n  & ~ ${IconWrapper}{\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n\r\n  &:hover ~ ${IconWrapper} {\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &[tabindex='-1'] ~ ${IconWrapper} {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n  }\r\n`;\r\n\r\nconst quarterComponentsClassPrefix = 'react-datepicker__quarter-';\r\n\r\nconst DatepickerField = React.forwardRef<HTMLInputElement, DatepickerFieldProps>(({\r\n                                            disabled,\r\n                                            readOnly,\r\n                                            onChange,\r\n                                            invalid,\r\n                                            value,\r\n                                            validationMessage,\r\n                                            dateFormat,\r\n                                            autoComplete,\r\n                                            placeholder,\r\n                                            required,\r\n                                            yearPicker,\r\n                                            yearsBeforeCurrentDate,\r\n                                            yearsAfterCurrentDate,\r\n                                            margin,\r\n                                            overflowTooltipPosition,\r\n                                            onBlur,\r\n                                            showQuarterYearPicker,\r\n                                            id,\r\n                                            dataTestId,\r\n                                            ...rest\r\n                                          }: DatepickerFieldProps, ref) => {\r\n  // Globally used variables within the component\r\n  const theme = useTheme();\r\n  const inputRef = useFocusVisibleRef();\r\n  const datepickerRef = React.useRef<any>(null);\r\n  const focusedQuarterRef = React.useRef<number>(1);\r\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\r\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\r\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\r\n  // 'open' flag is used only for tracking current state of the dropdown,\r\n  // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\r\n  const [open, setOpen] = React.useState<boolean>(false);\r\n\r\n  const getFormattedValue = () => {\r\n    if(showQuarterYearPicker)\r\n    {\r\n      const val = dayjs(value);\r\n      return val.year() + ', Q' + val.quarter();\r\n    }\r\n    else \r\n      return dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\r\n  }\r\n  /**\r\n   * Format the date in a specific way.\r\n   */\r\n  React.useEffect(() => {\r\n    if (value) inputRef.current.value = getFormattedValue();\r\n  }, [value]);\r\n\r\n  function getQuarterItem(classname: string) : HTMLElement {\r\n    return document.getElementsByClassName(quarterComponentsClassPrefix + classname)[0] as HTMLElement;\r\n  }\r\n\r\n  React.useEffect(() => {\r\n    if (yearPickerMode) {\r\n      //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\r\n      //we have to touch DOM directly\r\n      const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\r\n      const dropdownParent = selectedDate?.parentElement?.parentElement;\r\n      if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\r\n    }\r\n  }, [yearPickerMode]);\r\n\r\n  React.useEffect(() => {\r\n    if(showQuarterYearPicker && open)\r\n    {\r\n      const wrapper = getQuarterItem('wrapper');\r\n      const handler = (event: KeyboardEvent) => {\r\n        switch(event.key)\r\n        {\r\n          case ' ':\r\n          case 'Enter':\r\n            const currentQ = getQuarterItem(focusedQuarterRef.current + '');\r\n            currentQ.click();\r\n            break;\r\n\r\n          case 'ArrowLeft':\r\n            if(focusedQuarterRef.current > 1)\r\n            {\r\n              const currentQ = getQuarterItem(focusedQuarterRef.current + '');\r\n              const previousQ = getQuarterItem((focusedQuarterRef.current - 1) + '');\r\n              if(previousQ)\r\n              {\r\n                currentQ.tabIndex = -1;\r\n                previousQ.tabIndex = 0;\r\n                previousQ.focus();\r\n                focusedQuarterRef.current = focusedQuarterRef.current - 1;\r\n              }\r\n            }\r\n            break;\r\n\r\n          case 'ArrowRight':\r\n            if(focusedQuarterRef.current < 4)\r\n            {\r\n              const currentQ = getQuarterItem(focusedQuarterRef.current + '');\r\n              const nextQ = getQuarterItem((focusedQuarterRef.current + 1) + '');\r\n              if(nextQ)\r\n              {\r\n                currentQ.tabIndex = -1;\r\n                nextQ.tabIndex = 0;\r\n                nextQ.focus();\r\n                focusedQuarterRef.current = focusedQuarterRef.current + 1;\r\n              }\r\n            }\r\n            break;\r\n        }\r\n      };\r\n\r\n      wrapper.addEventListener('keydown', handler);\r\n      //unfortunately since there are no efs, and quarter picker is rendered not by our code, but by 'react-datepicker'\r\n      //we have to touch DOM directly\r\n      \r\n      const selectedQuarter = getQuarterItem('-selected');\r\n      if(selectedQuarter) {\r\n        for (let i = 1; i < 5; i++) {\r\n          if(selectedQuarter.innerText.includes('Q' + i)) {\r\n            focusedQuarterRef.current = i;\r\n            break;\r\n          }\r\n        }\r\n        selectedQuarter.setAttribute(\"tabIndex\", \"0\");\r\n      }\r\n      else\r\n      {\r\n        const firstQuarter = getQuarterItem('1');\r\n        if(firstQuarter) {\r\n          focusedQuarterRef.current = 1;\r\n          firstQuarter.setAttribute(\"tabIndex\", \"0\");\r\n        }\r\n      }\r\n\r\n      return () => {\r\n        wrapper.removeEventListener('keydown', handler);\r\n      };\r\n    }\r\n  }, [showQuarterYearPicker, open]);\r\n\r\n  //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\r\n  //otherwise after year selection datepicker will show January month of the selected year\r\n  React.useEffect(() => {\r\n    if (openAt) {\r\n      datepickerRef.current.setOpen(true);\r\n      //setOpenAt(null);\r\n    }\r\n  }, [openAt]);\r\n\r\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\r\n\r\n  const handleCalendarClose = () => {\r\n    inputRef.current?.blur();\r\n    setOpen(false);\r\n  };\r\n\r\n  const handleCalendarOpen = () => {\r\n    if (openAt) setOpenAt(null);\r\n    setOpen(true);\r\n  };\r\n\r\n  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\r\n  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\r\n\r\n  //itemsNumber - controls number of year select options generated in the dropdown\r\n  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\r\n  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\r\n  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\r\n\r\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\r\n    if (e.key === 'Escape' || e.key === 'Esc')\r\n      datepickerRef.current.setOpen(false);\r\n  };\r\n\r\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\r\n    // @ts-ignore\r\n    if (!e.currentTarget.contains(e.relatedTarget)) {\r\n      onBlur && onBlur(e);\r\n    }\r\n  };\r\n  const iconSize = 24;\r\n\r\n  return (\r\n    <>\r\n      {/* Let's render the input itself */}\r\n      <DatePickerContainer $quarterPicker={showQuarterYearPicker} data-testid={dataTestId} $yearPicker={yearPickerMode} $margin={margin || ''} onBlur={handleBlur}>\r\n        <DatePicker\r\n          ref={datepickerRef}\r\n          onCalendarOpen={handleCalendarOpen}\r\n          onCalendarClose={handleCalendarClose}\r\n          onKeyDown={handleKeyDown}\r\n          id={id}\r\n          onClickOutside={() => datepickerRef.current.setOpen(false)}\r\n\r\n          onChange={(e: any) => {\r\n            if (onChange) {\r\n              if (yearPickerMode) {\r\n                const newDate = new Date();\r\n                newDate.setFullYear(e.getFullYear());\r\n                newDate.setMonth(activeMonthPage);\r\n                setOpenAt(newDate);\r\n              } else onChange(e);\r\n            }\r\n            if (yearPickerMode) setYearPickerMode(false);\r\n          }}\r\n          disabled={disabled || readOnly}\r\n          locale={en}\r\n          showQuarterYearPicker={showQuarterYearPicker}\r\n          dateFormat={showQuarterYearPicker ? \"yyyy, QQQ\" : undefined}\r\n          showYearPicker={yearPickerMode}\r\n          //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\r\n          yearItemNumber={yearPickerMode ? itemsNumber : undefined}\r\n          maxDate={yearPickerMode ? maxDate : undefined}\r\n          selected={value}\r\n          openToDate={openAt ?? undefined}\r\n          preventOpenOnFocus={true}\r\n          shouldCloseOnSelect={true}\r\n          renderCustomHeader={\r\n            yearPicker\r\n              ? (params: ReactDatePickerCustomHeaderProps) =>\r\n                React.createElement(\r\n                  DatepickerFieldHeader,\r\n                  {\r\n                    ...params,\r\n                    setActiveMonthPage,\r\n                    customHeaderCount: 0,\r\n                    yearPickerMode: yearPickerMode,\r\n                    setYearPickerMode: setYearPickerMode,\r\n                  },\r\n                  null,\r\n                )\r\n              : undefined\r\n          }\r\n          customInput={\r\n            <InputWrapper $disabled={disabled} $readOnly={readOnly}>\r\n              <DatepickerRow>\r\n                  <StyledInputFieldStyling\r\n                    ref={inputRef}\r\n                    type=\"text\"\r\n                    name=\"datepicker\"\r\n                    onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\r\n                    className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\r\n                    tabIndex={disabled || readOnly ? -1 : 0}\r\n                    onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\r\n                    autoComplete={autoComplete}\r\n                    placeholder={placeholder}\r\n                    $extraRightPadding={iconSize}\r\n                    disabled={disabled}\r\n                    readOnly={true}\r\n                    $suppressReadOnlyStyles={!readOnly}\r\n                    required={required}\r\n                    {...rest}\r\n                  />\r\n                  <IconWrapper>\r\n                    <SystemIcons.Calendar size=\"24\"/>\r\n                  </IconWrapper>\r\n                </DatepickerRow>\r\n              {!open && <TooltipOverflow position={overflowTooltipPosition} input={inputRef} withArrow={true} maxWidth=\"100%\" size={Size.Small} align='end'>\r\n                {getFormattedValue()}\r\n              </TooltipOverflow>}\r\n            </InputWrapper>\r\n          }\r\n        />\r\n      </DatePickerContainer>\r\n\r\n      {/* If there is an error, let's render the error */}\r\n      {validationMessage && (\r\n        <ErrorMessage>\r\n          <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)}/>\r\n          <span>{validationMessage}</span>\r\n        </ErrorMessage>\r\n      )}\r\n    </>\r\n  );\r\n});\r\n\r\nexport default DatepickerField;\r\n"],"mappings":"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CC,uBAAc,CAAC;AAC5BF,cAAK,CAACC,MAAM,CAACE,sBAAa,CAAC;;AAE3B;AACA;AACA;;AAOA;AACA;AACA;;AAQA;AACA;AACA;;AAoCA;AACA;AACA;AACA,MAAMC,mBAAmB,GAAGC,yBAAM,CAACC,GAAwE;AAC3G;AACA,eAAeC,iBAAS,CAACC,QAAQ;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAOC,KAAK,IAAMA,KAAK,CAACC,OAAO,GAAG,WAAWD,KAAK,CAACC,OAAO,GAAG,GAAG,EAAG;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBD,KAAK,IAAIE,eAAM,CAACC,QAAQ,CAAC,YAAY,EAAEH,KAAK,CAACI,KAAK,CAAC;AACzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUC,mBAAW;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6BL,KAAK,IAAIE,eAAM,CAACC,QAAQ,CAAC,YAAY,EAAEH,KAAK,CAACI,KAAK,CAAC;AAChF;AACA;AACA;AACA,iCAAiCJ,KAAK,IAAIE,eAAM,CAACC,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AACrF,oBAAoBJ,KAAK,IAAIE,eAAM,CAACC,QAAQ,CAAC,YAAY,EAAEH,KAAK,CAACI,KAAK,CAAC;AACvE,gBAAiBJ,KAAK,IAAM,CAACA,KAAK,CAACM,WAAW,GAAG,MAAM,GAAG,MAAO;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQN,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","ignoreList":[]}
+{"version":3,"file":"DatepickerField.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_interopRequireWildcard","_reactDatepicker","_enGB","_dayjs","_advancedFormat","_quarterOfYear","_colors","_icons","_DatepickerFieldHeader","_styles","_TooltipOverflow","_styling","_common","_types","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","dayjs","extend","advancedFormat","quarterOfYear","unselectedHoverColoringText","css","props","COLORS","generateToken","componentType","state","theme","selectedDefaultColoringText","isOnFill","defaultVariant","todayDefaultColoringText","DatePickerContainer","styled","div","Z_INDEXES","dropdown","$margin","focusStyles","$yearPicker","ComponentSStyling","ComponentTextStyle","Bold","scrollBarStyling","Size","Small","ComponentMStyling","Regular","getColor","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","InputFieldStyling","$suppressReadOnlyStyles","quarterComponentsClassPrefix","DatepickerField","React","forwardRef","_ref","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearPicker","yearsBeforeCurrentDate","yearsAfterCurrentDate","margin","overflowTooltipPosition","onBlur","showQuarterYearPicker","id","dataTestId","rest","_objectWithoutProperties2","useTheme","inputRef","useFocusVisibleRef","datepickerRef","useRef","focusedQuarterRef","activeMonthPage","setActiveMonthPage","useState","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","getFormattedValue","val","year","quarter","format","useEffect","current","getQuarterItem","classname","document","getElementsByClassName","selectedDate","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","wrapper","handler","event","key","currentQ","click","previousQ","tabIndex","nextQ","addEventListener","selectedQuarter","innerText","includes","setAttribute","firstQuarter","removeEventListener","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","handleBlur","currentTarget","contains","relatedTarget","iconSize","jsxs","Fragment","children","jsx","$quarterPicker","onCalendarOpen","onCalendarClose","onKeyDown","onClickOutside","newDate","setMonth","locale","en","undefined","showYearPicker","yearItemNumber","selected","openToDate","preventOpenOnFocus","shouldCloseOnSelect","renderCustomHeader","params","createElement","DatepickerFieldHeader","customHeaderCount","customInput","InputWrapper","$disabled","$readOnly","type","name","className","onFocus","setSelectionRange","$extraRightPadding","SystemIcons","Calendar","size","position","input","withArrow","maxWidth","align","ErrorMessage","TechnicalWarning","color","propTypes","_propTypes","instanceOf","func","bool","string","number","oneOf","_default","exports"],"sources":["../../src/InputFields/DatepickerField.tsx"],"sourcesContent":["/**\r\n * Import react libraries.\r\n */\r\nimport React from 'react';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { css, useTheme } from 'styled-components';\r\nimport DatePicker, { ReactDatePickerCustomHeaderProps } from 'react-datepicker';\r\nimport en from 'date-fns/locale/en-GB';\r\nimport dayjs from 'dayjs';\r\nimport advancedFormat  from 'dayjs/plugin/advancedFormat';\r\nimport quarterOfYear from \"dayjs/plugin/quarterOfYear\";\r\n\r\ndayjs.extend(advancedFormat);\r\ndayjs.extend(quarterOfYear);\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport COLORS from '../styles/colors';\r\nimport {SystemIcons} from '../icons';\r\nimport {DatepickerFieldHeader} from './DatepickerFieldHeader';\r\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\r\nimport '../styles/react-datepicker.css';\r\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {Size, Testable} from '../types';\r\n\r\n/**\r\n * Add custom types.\r\n */\r\nexport type DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\r\n  /** Optional. Selected date. Defaults to current date */\r\n  value?: Date;\r\n  /** Optional. Handler to be called when selected date was changed. */\r\n  onChange?: (date: Date) => void;\r\n  /** Optional. Handler to be called when control is losing focus. */\r\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\r\n  /** Optional. Quarter picker mode. If set, then user can not select a particular date, but quarter of the year.\r\n   * 1st day of the quarter will be set as value.\r\n   */\r\n  showQuarterYearPicker?: boolean;\r\n  /** Optional. If set, then input field will be shown in 'invalid' state */\r\n  invalid?: boolean;\r\n  /** Optional. Format in which date will be shown in the input field. Defaults to 'MMMM Do, yyyy'. \r\n   * For quarter picker will be shown in 'YYYY, qqq' format.\r\n   */\r\n  dateFormat?: string;\r\n  /** Optional. Validation message to be shown under the input field */\r\n  validationMessage?: string;\r\n  /** Optional. Value for 'autocomplete' attribute of input field tag. */\r\n  autoComplete?: string;\r\n  /** Optional. Placeholder text to be shown when no value is selected. */\r\n  placeholder?: string;\r\n  /** Optional. If set, then user will be able to open year selector by clicking on the month in the dropdown. */\r\n  yearPicker?: boolean;\r\n  /** Optional. How many years before current year will be available in the year selector mode. */\r\n  yearsBeforeCurrentDate?: number;\r\n  /** Optional. How many years after current year will be available in the year selector mode. */\r\n  yearsAfterCurrentDate?: number;\r\n  /** Optional. Margin value to be set to the dropdown container. */\r\n  margin?: string;\r\n  /** Optional. Position where to show tooltip in case of closed datepicker and value overflowing the input field. */\r\n  overflowTooltipPosition?: 'top' | 'bottom';\r\n};\r\n\r\n\r\nconst unselectedHoverColoringText = css`\r\n    color: ${props => COLORS.generateToken({componentType: 'text', state: 'hover'}, props.theme)} !important;\r\n    background: ${props => COLORS.generateToken({componentType: 'bg-surface', state: 'hover'}, props.theme)} !important;  \r\n`;\r\n\r\nconst selectedDefaultColoringText = css`\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)} !important;\r\n    background: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'primary' }, props.theme)} !important;\r\n`;\r\n\r\nconst todayDefaultColoringText = css`\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'default' }, props.theme)};\r\n    background: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'selected' }, props.theme)};\r\n`;\r\n\r\n/**\r\n * Add custom styles.\r\n */\r\nconst DatePickerContainer = styled.div<{ $yearPicker: boolean; $margin: string; $quarterPicker?: boolean }>`\r\n  .react-datepicker-popper {\r\n    z-index: ${Z_INDEXES.dropdown};\r\n  }\r\n\r\n  .react-datepicker-popper[data-placement^=bottom] {\r\n    padding-top: 0px;\r\n  }\r\n\r\n  \r\n  .react-datepicker-popper[data-placement^=top] {\r\n    padding-bottom: 0px;\r\n  }\r\n\r\n  > div {\r\n    display: block;\r\n\r\n    ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n    .react-datepicker {\r\n      box-sizing: border-box;\r\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\r\n      border: 1px solid #e5e5e5;\r\n    }\r\n    .react-datepicker__input-container{\r\n      z-index: 0;\r\n    }\r\n\r\n    .react-datepicker__navigation {\r\n      line-height: normal;\r\n      text-indent: inherit;\r\n      border: none;\r\n      border-radius: 4px;\r\n      height: 48px;\r\n      width: 48px;\r\n      outline: none;\r\n      margin: 0px;\r\n      color: transparent;\r\n\r\n      &:hover {\r\n        background: ${props => COLORS.generateToken({componentType:'bg-surface', state:'hover'}, props.theme)};\r\n\r\n        &.react-datepicker__navigation--previous::before {\r\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\r\n        }\r\n\r\n        &.react-datepicker__navigation--next::before {\r\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\r\n        }\r\n      }\r\n\r\n      &:focus {\r\n        ${focusStyles}\r\n        &.react-datepicker__navigation--next::before {\r\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\r\n        }\r\n\r\n        &.react-datepicker__navigation--previous::before {\r\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\r\n        }\r\n      }\r\n\r\n      &::before {\r\n        text-align: center;\r\n        display: inline-block;\r\n        content: '';\r\n        height: 32px;\r\n        width: 32px;\r\n        vertical-align: middle;\r\n      }\r\n\r\n      &.react-datepicker__navigation--next::before {\r\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\r\n      }\r\n\r\n      &.react-datepicker__navigation--previous::before {\r\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\r\n      }\r\n    }\r\n\r\n    .react-datepicker__month-container,\r\n    .react-datepicker__year--container {\r\n      width: 336px;\r\n    }\r\n\r\n    .react-datepicker__month {\r\n      margin: 0px;\r\n    }\r\n\r\n    .react-datepicker__triangle {\r\n      left: 50% !important;\r\n      display: none;\r\n    }\r\n\r\n    .react-datepicker-popper[data-placement^='bottom'] {\r\n      margin-top: 0;\r\n    }\r\n\r\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\r\n      border-bottom-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'hover'}, props.theme)};\r\n    }\r\n\r\n    .react-datepicker__header {\r\n      border-bottom: 1px solid ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'subtle'}, props.theme)};\r\n      background: ${props => COLORS.generateToken({componentType: 'bg-surface', defaultVariant: 'subtle'}, props.theme)};\r\n      height: ${(props) => (!props.$yearPicker ? '96px' : '54px')};\r\n      padding-top: 0px;\r\n    }\r\n\r\n    .react-datepicker-year-header {\r\n      height: 48px;\r\n      line-height: 48px !important;\r\n      align-items: center;\r\n\r\n      ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme))}\r\n    }\r\n\r\n    .react-datepicker__current-month {\r\n      height: 48px;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      margin-right: 5px;\r\n\r\n      ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme))}\r\n    }\r\n\r\n    .react-datepicker__year {\r\n      max-height: 300px;\r\n      overflow-y: scroll;\r\n\r\n      ${scrollBarStyling(Size.Small)}\r\n    }\r\n\r\n    .react-datepicker__quarter-wrapper{\r\n      width: 100%;\r\n      display: flex;\r\n      align-content: space-evenly;\r\n      flex-wrap: wrap;\r\n      align-items: center;\r\n      gap: 20px;\r\n    }\r\n\r\n    .react-datepicker__year-wrapper {\r\n      max-width: 100%;\r\n      justify-content: space-around;\r\n    }\r\n\r\n    .react-datepicker__navigation-icon {\r\n      display: none;\r\n    }\r\n\r\n    .react-datepicker__day-name {\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      height: 48px;\r\n      margin: 0px;\r\n      width: 48px;\r\n\r\n      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme))}\r\n    }\r\n\r\n    \r\n\r\n    .react-datepicker__year-text {\r\n      background: ${props => COLORS.getColor('white', props.theme)};\r\n      border: none;\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      margin-top: 20px;\r\n      padding-top: 10px;\r\n      padding-bottom: 10px;\r\n\r\n      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme))}\r\n      &.react-datepicker__year-text--disabled {\r\n        display: none;\r\n      }\r\n\r\n      &.react-datepicker__day--keyboard-selected {\r\n        color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)};\r\n        background: ${props => COLORS.getColor('white', props.theme)};\r\n        font-weight: 400;\r\n        border: none;\r\n      }\r\n\r\n      &:hover {\r\n        ${unselectedHoverColoringText}\r\n      }\r\n\r\n      &:focus {\r\n        ${focusStyles}\r\n      }\r\n\r\n      &.react-datepicker__year-text--selected {\r\n        ${selectedDefaultColoringText}\r\n      }\r\n    }\r\n\r\n    .react-datepicker__day, .react-datepicker__quarter-text {\r\n      background: ${props => COLORS.getColor('white', props.theme)};\r\n      border: none;\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      flex-grow: 1;\r\n      height: 40px;\r\n      width: 40px;\r\n      margin: 4px;\r\n\r\n      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme))}\r\n      &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {\r\n        color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)};\r\n        background: ${props => COLORS.getColor('white', props.theme)};\r\n        flex-grow: 1;\r\n        font-weight: 400;\r\n        border: none;\r\n      }\r\n\r\n      &.react-datepicker__quarter-text--selected {\r\n        ${selectedDefaultColoringText}\r\n        flex-grow: 1;\r\n      }\r\n\r\n      &:hover {\r\n        ${unselectedHoverColoringText}\r\n      }\r\n\r\n      &:focus {\r\n        ${focusStyles}\r\n      }\r\n\r\n      &.react-datepicker__day--selected {\r\n        ${selectedDefaultColoringText}\r\n      }\r\n\r\n      &.react-datepicker__day--today {\r\n        border-radius: 0.3rem;\r\n        ${todayDefaultColoringText}\r\n        \r\n        &:hover {\r\n          ${unselectedHoverColoringText}\r\n        }\r\n\r\n        &:focus {\r\n          ${focusStyles}\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst IconWrapper = styled.div`\r\n  pointer-events: none;\r\n  position: absolute;\r\n  left: 16px;\r\n  width: 24px;\r\n  height: 24px;\r\n  z-index: ${+Z_INDEXES.focus + 1};\r\n`;\r\n\r\nconst DatepickerRow = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nconst StyledInputFieldStyling = styled(InputFieldStyling)<{disabled?: boolean, readOnly?: boolean}>`\r\n  padding-left: 48px !important;\r\n  \r\n  &::placeholder {\r\n    color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'subtle'}, props.theme)};\r\n  }\r\n\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_300', props.theme)};\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'hover'}, props.theme)};\r\n\r\n    ::placeholder {\r\n      color: ${props => COLORS.generateToken({componentType: 'text', state: 'hover'}, props.theme)};\r\n    }\r\n\r\n    cursor: pointer;\r\n    background-color: ${props => COLORS.generateToken({componentType: 'bg-surface', state: 'hover'}, props.theme)};\r\n    color: ${props => COLORS.generateToken({componentType: 'text', state: 'hover'}, props.theme)};\r\n  }\r\n\r\n  &:active,\r\n  &.open {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'active'}, props.theme)};\r\n    background-color: ${props => COLORS.generateToken({componentType: 'bg-surface', state: 'active'}, props.theme)};\r\n    color: ${props => COLORS.generateToken({componentType: 'text', state: 'active'}, props.theme)};\r\n\r\n    ::placeholder {\r\n      color: ${props => COLORS.generateToken({componentType: 'text', state: 'active'}, props.theme)};\r\n    }\r\n  }\r\n  \r\n  &:disabled {\r\n    background-color: ${props => COLORS.generateToken({componentType: 'bg-surface', state: 'disabled'}, props.theme)};\r\n  }\r\n\r\n  & ~ ${IconWrapper}{\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)};\r\n  }\r\n\r\n  &:hover ~ ${IconWrapper} {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'hover' }, props.theme)};\r\n  }\r\n\r\n  &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'active' }, props.theme)};\r\n  }\r\n\r\n  &[tabindex='-1'] ~ ${IconWrapper} {\r\n    color: ${props => !props.$suppressReadOnlyStyles ? COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme) :\r\n      COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n  }\r\n`;\r\n\r\nconst quarterComponentsClassPrefix = 'react-datepicker__quarter-';\r\n\r\nconst DatepickerField = React.forwardRef<HTMLInputElement, DatepickerFieldProps>(({\r\n                                            disabled,\r\n                                            readOnly,\r\n                                            onChange,\r\n                                            invalid,\r\n                                            value,\r\n                                            validationMessage,\r\n                                            dateFormat,\r\n                                            autoComplete,\r\n                                            placeholder,\r\n                                            required,\r\n                                            yearPicker,\r\n                                            yearsBeforeCurrentDate,\r\n                                            yearsAfterCurrentDate,\r\n                                            margin,\r\n                                            overflowTooltipPosition,\r\n                                            onBlur,\r\n                                            showQuarterYearPicker,\r\n                                            id,\r\n                                            dataTestId,\r\n                                            ...rest\r\n                                          }: DatepickerFieldProps, ref) => {\r\n  // Globally used variables within the component\r\n  const theme = useTheme();\r\n  const inputRef = useFocusVisibleRef();\r\n  const datepickerRef = React.useRef<any>(null);\r\n  const focusedQuarterRef = React.useRef<number>(1);\r\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\r\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\r\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\r\n  // 'open' flag is used only for tracking current state of the dropdown,\r\n  // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\r\n  const [open, setOpen] = React.useState<boolean>(false);\r\n\r\n  const getFormattedValue = () => {\r\n    if(showQuarterYearPicker)\r\n    {\r\n      const val = dayjs(value);\r\n      return val.year() + ', Q' + val.quarter();\r\n    }\r\n    else \r\n      return dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\r\n  }\r\n  /**\r\n   * Format the date in a specific way.\r\n   */\r\n  React.useEffect(() => {\r\n    if (value) inputRef.current.value = getFormattedValue();\r\n  }, [value]);\r\n\r\n  function getQuarterItem(classname: string) : HTMLElement {\r\n    return document.getElementsByClassName(quarterComponentsClassPrefix + classname)[0] as HTMLElement;\r\n  }\r\n\r\n  React.useEffect(() => {\r\n    if (yearPickerMode) {\r\n      //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\r\n      //we have to touch DOM directly\r\n      const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\r\n      const dropdownParent = selectedDate?.parentElement?.parentElement;\r\n      if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\r\n    }\r\n  }, [yearPickerMode]);\r\n\r\n  React.useEffect(() => {\r\n    if(showQuarterYearPicker && open)\r\n    {\r\n      const wrapper = getQuarterItem('wrapper');\r\n      const handler = (event: KeyboardEvent) => {\r\n        switch(event.key)\r\n        {\r\n          case ' ':\r\n          case 'Enter':\r\n            const currentQ = getQuarterItem(focusedQuarterRef.current + '');\r\n            currentQ.click();\r\n            break;\r\n\r\n          case 'ArrowLeft':\r\n            if(focusedQuarterRef.current > 1)\r\n            {\r\n              const currentQ = getQuarterItem(focusedQuarterRef.current + '');\r\n              const previousQ = getQuarterItem((focusedQuarterRef.current - 1) + '');\r\n              if(previousQ)\r\n              {\r\n                currentQ.tabIndex = -1;\r\n                previousQ.tabIndex = 0;\r\n                previousQ.focus();\r\n                focusedQuarterRef.current = focusedQuarterRef.current - 1;\r\n              }\r\n            }\r\n            break;\r\n\r\n          case 'ArrowRight':\r\n            if(focusedQuarterRef.current < 4)\r\n            {\r\n              const currentQ = getQuarterItem(focusedQuarterRef.current + '');\r\n              const nextQ = getQuarterItem((focusedQuarterRef.current + 1) + '');\r\n              if(nextQ)\r\n              {\r\n                currentQ.tabIndex = -1;\r\n                nextQ.tabIndex = 0;\r\n                nextQ.focus();\r\n                focusedQuarterRef.current = focusedQuarterRef.current + 1;\r\n              }\r\n            }\r\n            break;\r\n        }\r\n      };\r\n\r\n      wrapper.addEventListener('keydown', handler);\r\n      //unfortunately since there are no efs, and quarter picker is rendered not by our code, but by 'react-datepicker'\r\n      //we have to touch DOM directly\r\n      \r\n      const selectedQuarter = getQuarterItem('-selected');\r\n      if(selectedQuarter) {\r\n        for (let i = 1; i < 5; i++) {\r\n          if(selectedQuarter.innerText.includes('Q' + i)) {\r\n            focusedQuarterRef.current = i;\r\n            break;\r\n          }\r\n        }\r\n        selectedQuarter.setAttribute(\"tabIndex\", \"0\");\r\n      }\r\n      else\r\n      {\r\n        const firstQuarter = getQuarterItem('1');\r\n        if(firstQuarter) {\r\n          focusedQuarterRef.current = 1;\r\n          firstQuarter.setAttribute(\"tabIndex\", \"0\");\r\n        }\r\n      }\r\n\r\n      return () => {\r\n        wrapper.removeEventListener('keydown', handler);\r\n      };\r\n    }\r\n  }, [showQuarterYearPicker, open]);\r\n\r\n  //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\r\n  //otherwise after year selection datepicker will show January month of the selected year\r\n  React.useEffect(() => {\r\n    if (openAt) {\r\n      datepickerRef.current.setOpen(true);\r\n      //setOpenAt(null);\r\n    }\r\n  }, [openAt]);\r\n\r\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\r\n\r\n  const handleCalendarClose = () => {\r\n    inputRef.current?.blur();\r\n    setOpen(false);\r\n  };\r\n\r\n  const handleCalendarOpen = () => {\r\n    if (openAt) setOpenAt(null);\r\n    setOpen(true);\r\n  };\r\n\r\n  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\r\n  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\r\n\r\n  //itemsNumber - controls number of year select options generated in the dropdown\r\n  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\r\n  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\r\n  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\r\n\r\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\r\n    if (e.key === 'Escape' || e.key === 'Esc')\r\n      datepickerRef.current.setOpen(false);\r\n  };\r\n\r\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\r\n    // @ts-ignore\r\n    if (!e.currentTarget.contains(e.relatedTarget)) {\r\n      onBlur && onBlur(e);\r\n    }\r\n  };\r\n  const iconSize = 24;\r\n\r\n  return (\r\n    <>\r\n      {/* Let's render the input itself */}\r\n      <DatePickerContainer $quarterPicker={showQuarterYearPicker} data-testid={dataTestId} $yearPicker={yearPickerMode} $margin={margin || ''} onBlur={handleBlur}>\r\n        <DatePicker\r\n          ref={datepickerRef}\r\n          onCalendarOpen={handleCalendarOpen}\r\n          onCalendarClose={handleCalendarClose}\r\n          onKeyDown={handleKeyDown}\r\n          id={id}\r\n          onClickOutside={() => datepickerRef.current.setOpen(false)}\r\n\r\n          onChange={(e: any) => {\r\n            if (onChange) {\r\n              if (yearPickerMode) {\r\n                const newDate = new Date();\r\n                newDate.setFullYear(e.getFullYear());\r\n                newDate.setMonth(activeMonthPage);\r\n                setOpenAt(newDate);\r\n              } else onChange(e);\r\n            }\r\n            if (yearPickerMode) setYearPickerMode(false);\r\n          }}\r\n          disabled={disabled || readOnly}\r\n          locale={en}\r\n          showQuarterYearPicker={showQuarterYearPicker}\r\n          dateFormat={showQuarterYearPicker ? \"yyyy, QQQ\" : undefined}\r\n          showYearPicker={yearPickerMode}\r\n          //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\r\n          yearItemNumber={yearPickerMode ? itemsNumber : undefined}\r\n          maxDate={yearPickerMode ? maxDate : undefined}\r\n          selected={value}\r\n          openToDate={openAt ?? undefined}\r\n          preventOpenOnFocus={true}\r\n          shouldCloseOnSelect={true}\r\n          renderCustomHeader={\r\n            yearPicker\r\n              ? (params: ReactDatePickerCustomHeaderProps) =>\r\n                React.createElement(\r\n                  DatepickerFieldHeader,\r\n                  {\r\n                    ...params,\r\n                    setActiveMonthPage,\r\n                    customHeaderCount: 0,\r\n                    yearPickerMode: yearPickerMode,\r\n                    setYearPickerMode: setYearPickerMode,\r\n                  },\r\n                  null,\r\n                )\r\n              : undefined\r\n          }\r\n          customInput={\r\n            <InputWrapper $disabled={disabled} $readOnly={readOnly}>\r\n              <DatepickerRow>\r\n                  <StyledInputFieldStyling\r\n                    ref={inputRef}\r\n                    type=\"text\"\r\n                    name=\"datepicker\"\r\n                    onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\r\n                    className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\r\n                    tabIndex={disabled || readOnly ? -1 : 0}\r\n                    onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\r\n                    autoComplete={autoComplete}\r\n                    placeholder={placeholder}\r\n                    $extraRightPadding={iconSize}\r\n                    disabled={disabled}\r\n                    readOnly={true}\r\n                    $suppressReadOnlyStyles={!readOnly}\r\n                    required={required}\r\n                    {...rest}\r\n                  />\r\n                  <IconWrapper>\r\n                    <SystemIcons.Calendar size=\"24\"/>\r\n                  </IconWrapper>\r\n                </DatepickerRow>\r\n              {!open && <TooltipOverflow position={overflowTooltipPosition} input={inputRef} withArrow={true} maxWidth=\"100%\" size={Size.Small} align='end'>\r\n                {getFormattedValue()}\r\n              </TooltipOverflow>}\r\n            </InputWrapper>\r\n          }\r\n        />\r\n      </DatePickerContainer>\r\n\r\n      {/* If there is an error, let's render the error */}\r\n      {validationMessage && (\r\n        <ErrorMessage>\r\n          <SystemIcons.TechnicalWarning color={COLORS.generateToken({ componentType: 'icon', defaultVariant: 'warning' }, theme)}/>\r\n          <span>{validationMessage}</span>\r\n        </ErrorMessage>\r\n      )}\r\n    </>\r\n  );\r\n});\r\n\r\nexport default DatepickerField;\r\n"],"mappings":";;;;;;;;;;AAGA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,KAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,MAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,eAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,cAAA,GAAAR,sBAAA,CAAAC,OAAA;AAQA,IAAAQ,OAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,MAAA,GAAAT,OAAA;AACA,IAAAU,sBAAA,GAAAV,OAAA;AACA,IAAAW,OAAA,GAAAX,OAAA;AACA,IAAAY,gBAAA,GAAAb,sBAAA,CAAAC,OAAA;AAKA,IAAAa,QAAA,GAAAb,OAAA;AACAA,OAAA;AAGA,IAAAc,OAAA,GAAAd,OAAA;AACA,IAAAe,MAAA,GAAAf,OAAA;AAAwC,IAAAgB,WAAA,GAAAhB,OAAA;AAAA,MAAAiB,SAAA;AAnCxC;AACA;AACA;AAGA;AACA;AACA;AAFA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAjB,wBAAAiB,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAW,QAAAnB,CAAA,EAAAE,CAAA,QAAAC,CAAA,GAAAQ,MAAA,CAAAS,IAAA,CAAApB,CAAA,OAAAW,MAAA,CAAAU,qBAAA,QAAAC,CAAA,GAAAX,MAAA,CAAAU,qBAAA,CAAArB,CAAA,GAAAE,CAAA,KAAAoB,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAArB,CAAA,WAAAS,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAE,CAAA,EAAAsB,UAAA,OAAArB,CAAA,CAAAsB,IAAA,CAAAC,KAAA,CAAAvB,CAAA,EAAAmB,CAAA,YAAAnB,CAAA;AAAA,SAAAwB,cAAA3B,CAAA,aAAAE,CAAA,MAAAA,CAAA,GAAA0B,SAAA,CAAAC,MAAA,EAAA3B,CAAA,UAAAC,CAAA,WAAAyB,SAAA,CAAA1B,CAAA,IAAA0B,SAAA,CAAA1B,CAAA,QAAAA,CAAA,OAAAiB,OAAA,CAAAR,MAAA,CAAAR,CAAA,OAAA2B,OAAA,WAAA5B,CAAA,QAAA6B,gBAAA,CAAA1B,OAAA,EAAAL,CAAA,EAAAE,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAS,MAAA,CAAAqB,yBAAA,GAAArB,MAAA,CAAAsB,gBAAA,CAAAjC,CAAA,EAAAW,MAAA,CAAAqB,yBAAA,CAAA7B,CAAA,KAAAgB,OAAA,CAAAR,MAAA,CAAAR,CAAA,GAAA2B,OAAA,WAAA5B,CAAA,IAAAS,MAAA,CAAAC,cAAA,CAAAZ,CAAA,EAAAE,CAAA,EAAAS,MAAA,CAAAE,wBAAA,CAAAV,CAAA,EAAAD,CAAA,iBAAAF,CAAA;AAUAkC,cAAK,CAACC,MAAM,CAACC,uBAAc,CAAC;AAC5BF,cAAK,CAACC,MAAM,CAACE,sBAAa,CAAC;;AAE3B;AACA;AACA;;AAOA;AACA;AACA;;AAQA;AACA;AACA;;AAqCA,MAAMC,2BAA2B,GAAG,IAAAC,qBAAG;AACvC,aAAaC,KAAK,IAAIC,eAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAE,MAAM;EAAEC,KAAK,EAAE;AAAO,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAChG,kBAAkBL,KAAK,IAAIC,eAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAE,YAAY;EAAEC,KAAK,EAAE;AAAO,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAC3G,CAAC;AAED,MAAMC,2BAA2B,GAAG,IAAAP,qBAAG;AACvC,aAAaC,KAAK,IAAIC,eAAM,CAACC,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEI,QAAQ,EAAE,IAAI;EAAEC,cAAc,EAAE;AAAU,CAAC,EAAER,KAAK,CAACK,KAAK,CAAC;AAC7H,kBAAkBL,KAAK,IAAIC,eAAM,CAACC,aAAa,CAAC;EAAEC,aAAa,EAAE,SAAS;EAAEK,cAAc,EAAE;AAAU,CAAC,EAAER,KAAK,CAACK,KAAK,CAAC;AACrH,CAAC;AAED,MAAMI,wBAAwB,GAAG,IAAAV,qBAAG;AACpC,aAAaC,KAAK,IAAIC,eAAM,CAACC,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEK,cAAc,EAAE;AAAU,CAAC,EAAER,KAAK,CAACK,KAAK,CAAC;AAC7G,kBAAkBL,KAAK,IAAIC,eAAM,CAACC,aAAa,CAAC;EAAEC,aAAa,EAAE,YAAY;EAAEK,cAAc,EAAE;AAAW,CAAC,EAAER,KAAK,CAACK,KAAK,CAAC;AACzH,CAAC;;AAED;AACA;AACA;AACA,MAAMK,mBAAmB,GAAGC,yBAAM,CAACC,GAAwE;AAC3G;AACA,eAAeC,iBAAS,CAACC,QAAQ;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAOd,KAAK,IAAMA,KAAK,CAACe,OAAO,GAAG,WAAWf,KAAK,CAACe,OAAO,GAAG,GAAG,EAAG;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBf,KAAK,IAAIC,eAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,YAAY;EAAEC,KAAK,EAAC;AAAO,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAC7G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUW,mBAAW;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6BhB,KAAK,IAAIC,eAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,YAAY;EAAEC,KAAK,EAAC;AAAO,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC;AACpH;AACA;AACA;AACA,iCAAiCL,KAAK,IAAIC,eAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAE,QAAQ;EAAEK,cAAc,EAAE;AAAQ,CAAC,EAAER,KAAK,CAACK,KAAK,CAAC;AAChI,oBAAoBL,KAAK,IAAIC,eAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAE,YAAY;EAAEK,cAAc,EAAE;AAAQ,CAAC,EAAER,KAAK,CAACK,KAAK,CAAC;AACvH,gBAAiBL,KAAK,IAAM,CAACA,KAAK,CAACiB,WAAW,GAAG,MAAM,GAAG,MAAO;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQjB,KAAK,IAAI,IAAAkB,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAEnB,eAAM,CAACC,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEK,cAAc,EAAE;AAAS,CAAC,EAAER,KAAK,CAACK,KAAK,CAAC,CAAC;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","ignoreList":[]}

package/dist/InputFields/DatepickerField.d.ts

@@ -2,7 +2,7 @@
  * Import react libraries.
  */
 import React from 'react';
-import 'react-datepicker/dist/react-datepicker.css';
+import '../styles/react-datepicker.css';
 import { Testable } from '../types';
 /**
  * Add custom types.

package/dist/InputFields/DatepickerField.js

@@ -12,7 +12,7 @@ import React from 'react';
 /**
  * Import third-party libraries.
  */
-import styled, { useTheme } from 'styled-components';
+import styled, { css, useTheme } from 'styled-components';
 import DatePicker from 'react-datepicker';
 import en from 'date-fns/locale/en-GB';
 import dayjs from 'dayjs';
@@ -34,7 +34,7 @@ import TooltipOverflow from '../Tooltips/TooltipOverflow';
  * Import custom styles.
  */
 import { ErrorMessage, InputFieldStyling, InputWrapper } from './styling';
-import 'react-datepicker/dist/react-datepicker.css';
+import '../styles/react-datepicker.css';
 import { ComponentMStyling, ComponentSStyling } from '../styles';
 import { Z_INDEXES } from '../styles';
 import { useFocusVisibleRef } from '../common';
@@ -44,6 +44,38 @@ import { Size } from '../types';
  * Add custom types.
  */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const unselectedHoverColoringText = css`
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)} !important;
+    background: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)} !important;  
+`;
+const selectedDefaultColoringText = css`
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)} !important;
+    background: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'primary'
+}, props.theme)} !important;
+`;
+const todayDefaultColoringText = css`
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme)};
+    background: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'selected'
+}, props.theme)};
+`;
+
 /**
  * Add custom styles.
  */
@@ -86,7 +118,10 @@ const DatePickerContainer = styled.div`
       color: transparent;
 
       &:hover {
-        background: ${props => COLORS.getColor('primary_20', props.theme)};
+        background: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
 
         &.react-datepicker__navigation--previous::before {
           background-image: url("data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E");
@@ -145,12 +180,21 @@ const DatePickerContainer = styled.div`
     }
 
     .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {
-      border-bottom-color: ${props => COLORS.getColor('neutral_20', props.theme)};
+      border-bottom-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
     }
 
     .react-datepicker__header {
-      border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};
-      background: ${props => COLORS.getColor('neutral_20', props.theme)};
+      border-bottom: 1px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
+      background: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'subtle'
+}, props.theme)};
       height: ${props => !props.$yearPicker ? '96px' : '54px'};
       padding-top: 0px;
     }
@@ -160,7 +204,10 @@ const DatePickerContainer = styled.div`
       line-height: 48px !important;
       align-items: center;
 
-      ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}
+      ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
 
     .react-datepicker__current-month {
@@ -169,7 +216,10 @@ const DatePickerContainer = styled.div`
       align-items: center;
       margin-right: 5px;
 
-      ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}
+      ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
 
     .react-datepicker__year {
@@ -205,7 +255,10 @@ const DatePickerContainer = styled.div`
       margin: 0px;
       width: 48px;
 
-      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}
+      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
 
     
@@ -220,21 +273,26 @@ const DatePickerContainer = styled.div`
       padding-top: 10px;
       padding-bottom: 10px;
 
-      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}
+      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
       &.react-datepicker__year-text--disabled {
         display: none;
       }
 
       &.react-datepicker__day--keyboard-selected {
-        color: ${props => COLORS.getColor('neutral_600', props.theme)};
+        color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
         background: ${props => COLORS.getColor('white', props.theme)};
         font-weight: 400;
         border: none;
       }
 
       &:hover {
-        color: ${props => COLORS.getColor('primary_700', props.theme)};
-        background: ${props => COLORS.getColor('primary_20', props.theme)};
+        ${unselectedHoverColoringText}
       }
 
       &:focus {
@@ -242,8 +300,7 @@ const DatePickerContainer = styled.div`
       }
 
       &.react-datepicker__year-text--selected {
-        color: ${props => COLORS.getColor('white', props.theme)} !important;
-        background: ${props => COLORS.getColor('primary_500', props.theme)} !important;
+        ${selectedDefaultColoringText}
       }
     }
 
@@ -258,24 +315,28 @@ const DatePickerContainer = styled.div`
       width: 40px;
       margin: 4px;
 
-      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}
+      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
       &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {
-        color: ${props => COLORS.getColor('neutral_600', props.theme)};
+        color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
         background: ${props => COLORS.getColor('white', props.theme)};
         flex-grow: 1;
         font-weight: 400;
         border: none;
       }
 
-      &.react-datepicker__quarter--selected {
-        color: ${props => COLORS.getColor('white', props.theme)} !important;
+      &.react-datepicker__quarter-text--selected {
+        ${selectedDefaultColoringText}
         flex-grow: 1;
-        background: ${props => COLORS.getColor('primary_500', props.theme)} !important;
       }
 
       &:hover {
-        color: ${props => COLORS.getColor('primary_700', props.theme)};
-        background: ${props => COLORS.getColor('primary_20', props.theme)};
+        ${unselectedHoverColoringText}
       }
 
       &:focus {
@@ -283,18 +344,15 @@ const DatePickerContainer = styled.div`
       }
 
       &.react-datepicker__day--selected {
-        color: ${props => COLORS.getColor('white', props.theme)} !important;
-        background: ${props => COLORS.getColor('primary_500', props.theme)} !important;
+        ${selectedDefaultColoringText}
       }
 
       &.react-datepicker__day--today {
         border-radius: 0.3rem;
-        color: ${props => COLORS.getColor('neutral_700', props.theme)};
-        background: ${props => COLORS.getColor('neutral_100', props.theme)};
-
+        ${todayDefaultColoringText}
+        
         &:hover {
-          color: ${props => COLORS.getColor('primary_700', props.theme)};
-          background: ${props => COLORS.getColor('primary_20', props.theme)};
+          ${unselectedHoverColoringText}
         }
 
         &:focus {
@@ -321,7 +379,10 @@ const StyledInputFieldStyling = styled(InputFieldStyling)`
   padding-left: 48px !important;
   
   &::placeholder {
-    color: ${props => COLORS.getColor('neutral_500', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
   }
 
   &:focus:not(.focus-visible) {
@@ -329,46 +390,88 @@ const StyledInputFieldStyling = styled(InputFieldStyling)`
   }
 
   &:hover {
-    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_200', props.theme)};
+    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover'
+}, props.theme)};
 
     ::placeholder {
-      color: ${props => COLORS.getColor('primary_700', props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)};
     }
 
     cursor: pointer;
-    background-color: ${props => COLORS.getColor('primary_20', props.theme)};
-    color: ${props => COLORS.getColor('primary_700', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)};
   }
 
   &:active,
   &.open {
-    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_300', props.theme)};
-    background-color: ${props => COLORS.getColor('primary_100', props.theme)};
-    color: ${props => COLORS.getColor('primary_800', props.theme)};
+    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'active'
+}, props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
 
     ::placeholder {
-      color: ${props => COLORS.getColor('primary_800', props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
     }
   }
   
   &:disabled {
-    background-color: ${props => COLORS.getColor('white', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'disabled'
+}, props.theme)};
   }
 
   & ~ ${IconWrapper}{
-    color: ${props => COLORS.getColor('neutral_600', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
   }
 
   &:hover ~ ${IconWrapper} {
-    color: ${props => COLORS.getColor('primary_700', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)};
   }
 
   &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {
-    color: ${props => COLORS.getColor('primary_800', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
   }
 
   &[tabindex='-1'] ~ ${IconWrapper} {
-    color: ${props => COLORS.getColor('neutral_300', props.theme)};
+    color: ${props => !props.$suppressReadOnlyStyles ? COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme) : COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
   }
 `;
 const quarterComponentsClassPrefix = 'react-datepicker__quarter-';
@@ -607,7 +710,10 @@ const DatepickerField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       })
     }), validationMessage && /*#__PURE__*/_jsxs(ErrorMessage, {
       children: [/*#__PURE__*/_jsx(SystemIcons.TechnicalWarning, {
-        color: COLORS.getColor('critical_400', theme)
+        color: COLORS.generateToken({
+          componentType: 'icon',
+          defaultVariant: 'warning'
+        }, theme)
       }), /*#__PURE__*/_jsx("span", {
         children: validationMessage
       })]