@laerdal/life-react-components 6.0.0-dev.19.full → 6.0.0-dev.2.full

package/dist/InputFields/DatepickerField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatepickerField.js","names":["React","styled","css","useTheme","DatePicker","en","dayjs","advancedFormat","quarterOfYear","extend","COLORS","SystemIcons","DatepickerFieldHeader","ComponentTextStyle","focusStyles","scrollBarStyling","TooltipOverflow","ErrorMessage","InputFieldStyling","InputWrapper","ComponentMStyling","ComponentSStyling","Z_INDEXES","useFocusVisibleRef","Size","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","unselectedHoverColoringText","props","generateToken","componentType","state","theme","selectedDefaultColoringText","isOnFill","defaultVariant","todayDefaultColoringText","DatePickerContainer","div","dropdown","$margin","$yearPicker","Bold","Small","Regular","getColor","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","$suppressReadOnlyStyles","quarterComponentsClassPrefix","DatepickerField","forwardRef","_ref","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearPicker","yearsBeforeCurrentDate","yearsAfterCurrentDate","margin","overflowTooltipPosition","onBlur","showQuarterYearPicker","id","dataTestId","rest","_objectWithoutProperties","_excluded","inputRef","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","i","innerText","includes","setAttribute","firstQuarter","removeEventListener","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","handleBlur","currentTarget","contains","relatedTarget","iconSize","children","$quarterPicker","onCalendarOpen","onCalendarClose","onKeyDown","onClickOutside","newDate","setMonth","locale","undefined","showYearPicker","yearItemNumber","selected","openToDate","preventOpenOnFocus","shouldCloseOnSelect","renderCustomHeader","params","createElement","_objectSpread","customHeaderCount","customInput","$disabled","$readOnly","type","name","className","onFocus","setSelectionRange","$extraRightPadding","Calendar","size","position","input","withArrow","maxWidth","align","TechnicalWarning","color","propTypes","_pt","instanceOf","func","bool","string","number","oneOf"],"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":"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","ignoreList":[]}
+{"version":3,"file":"DatepickerField.js","names":["React","styled","useTheme","DatePicker","en","dayjs","advancedFormat","quarterOfYear","extend","COLORS","SystemIcons","DatepickerFieldHeader","ComponentTextStyle","focusStyles","scrollBarStyling","TooltipOverflow","ErrorMessage","InputFieldStyling","InputWrapper","ComponentMStyling","ComponentSStyling","Z_INDEXES","useFocusVisibleRef","Size","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DatePickerContainer","div","dropdown","props","$margin","getColor","theme","$yearPicker","Bold","Small","Regular","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","quarterComponentsClassPrefix","DatepickerField","forwardRef","_ref","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearPicker","yearsBeforeCurrentDate","yearsAfterCurrentDate","margin","overflowTooltipPosition","onBlur","showQuarterYearPicker","id","dataTestId","rest","_objectWithoutProperties","_excluded","inputRef","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","i","innerText","includes","setAttribute","firstQuarter","removeEventListener","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","handleBlur","currentTarget","contains","relatedTarget","iconSize","children","$quarterPicker","onCalendarOpen","onCalendarClose","onKeyDown","onClickOutside","newDate","setMonth","locale","undefined","showYearPicker","yearItemNumber","selected","openToDate","preventOpenOnFocus","shouldCloseOnSelect","renderCustomHeader","params","createElement","_objectSpread","customHeaderCount","customInput","$disabled","$readOnly","type","name","className","onFocus","setSelectionRange","$extraRightPadding","$suppressReadOnlyStyles","Calendar","size","position","input","withArrow","maxWidth","align","TechnicalWarning","color","propTypes","_pt","instanceOf","func","bool","string","number","oneOf"],"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":";;;;;;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;;AAEzB;AACA;AACA;AACA,OAAOC,MAAM,IAAIC,QAAQ,QAAQ,mBAAmB;AACpD,OAAOC,UAAU,MAA4C,kBAAkB;AAC/E,OAAOC,EAAE,MAAM,uBAAuB;AACtC,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,cAAc,MAAO,6BAA6B;AACzD,OAAOC,aAAa,MAAM,4BAA4B;AAEtDF,KAAK,CAACG,MAAM,CAACF,cAAc,CAAC;AAC5BD,KAAK,CAACG,MAAM,CAACD,aAAa,CAAC;;AAE3B;AACA;AACA;AACA,OAAOE,MAAM,MAAM,kBAAkB;AACrC,SAAQC,WAAW,QAAO,UAAU;AACpC,SAAQC,qBAAqB,QAAO,yBAAyB;AAC7D,SAAQC,kBAAkB,EAAEC,WAAW,EAAEC,gBAAgB,QAAO,WAAW;AAC3E,OAAOC,eAAe,MAAM,6BAA6B;;AAEzD;AACA;AACA;AACA,SAAQC,YAAY,EAAEC,iBAAiB,EAAEC,YAAY,QAAO,WAAW;AACvE,OAAO,4CAA4C;AACnD,SAAQC,iBAAiB,EAAEC,iBAAiB,QAAO,WAAW;AAC9D,SAAQC,SAAS,QAAO,WAAW;AACnC,SAAQC,kBAAkB,QAAO,WAAW;AAC5C,SAAQC,IAAI,QAAiB,UAAU;;AAEvC;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAsCA;AACA;AACA;AACA,MAAMC,mBAAmB,GAAG7B,MAAM,CAAC8B,GAAwE;AAC3G;AACA,eAAeV,SAAS,CAACW,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,IAAIxB,MAAM,CAAC0B,QAAQ,CAAC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAAC;AACzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUvB,WAAW;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,6BAA6BoB,KAAK,IAAIxB,MAAM,CAAC0B,QAAQ,CAAC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAAC;AAChF;AACA;AACA;AACA,iCAAiCH,KAAK,IAAIxB,MAAM,CAAC0B,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACrF,oBAAoBH,KAAK,IAAIxB,MAAM,CAAC0B,QAAQ,CAAC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAAC;AACvE,gBAAiBH,KAAK,IAAM,CAACA,KAAK,CAACI,WAAW,GAAG,MAAM,GAAG,MAAO;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQJ,KAAK,IAAIb,iBAAiB,CAACR,kBAAkB,CAAC0B,IAAI,EAAE7B,MAAM,CAAC0B,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AACxG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQH,KAAK,IAAIb,iBAAiB,CAACR,kBAAkB,CAAC0B,IAAI,EAAE7B,MAAM,CAAC0B,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AACxG;AACA;AACA;AACA;AACA;AACA;AACA,QAAQtB,gBAAgB,CAACS,IAAI,CAACgB,KAAK,CAAC;AACpC;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;AA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","ignoreList":[]}

package/dist/InputFields/DatepickerFieldHeader.cjs

@@ -32,41 +32,26 @@ const HeaderLabelContainer = _styledComponents.default.div`
   }
 
   svg {
-    color: ${props => _styles.COLORS.generateToken({
-  componentType: 'icon',
-  defaultVariant: 'subtle'
-}, props.theme)};
+    color: ${props => _styles.COLORS.getColor('neutral_600', props.theme)};
   }
 
   ${_common.CommonInteractionStyling}
 
   &:hover {
     div {
-      color: ${props => _styles.COLORS.generateToken({
-  componentType: 'text',
-  state: 'hover'
-}, props.theme)} !important;
+      color: ${props => _styles.COLORS.getColor('primary_600', props.theme)} !important;
     }
     svg {
-      color: ${props => _styles.COLORS.generateToken({
-  componentType: 'icon',
-  state: 'hover'
-}, props.theme)};
+      color: ${props => _styles.COLORS.getColor('primary_600', props.theme)};
     }
   }
 
   &:active {
     div {
-      color: ${props => _styles.COLORS.generateToken({
-  componentType: 'text',
-  state: 'active'
-}, props.theme)} !important;
+      color: ${props => _styles.COLORS.getColor('primary_600', props.theme)} !important;
     }
     svg {
-      color: ${props => _styles.COLORS.generateToken({
-  componentType: 'icon',
-  state: 'hover'
-}, props.theme)};
+      color: ${props => _styles.COLORS.getColor('primary_600', props.theme)};
     }
   }
 `;

package/dist/InputFields/DatepickerFieldHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatepickerFieldHeader.cjs","names":["React","_interopRequireWildcard","require","_icons","_styledComponents","_interopRequireDefault","_common","_styles","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","HeaderLabelContainer","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","CommonInteractionStyling","state","DatepickerFieldHeader","_ref","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","useEffect","jsx","Fragment","children","jsxs","style","display","justifyContent","type","className","onClick","disabled","getFullYear","SystemIcons","ArrowDropUp","size","ArrowDropDown","exports","propTypes","_propTypes","instanceOf","Date","isRequired","customHeaderCount","number","bool","prevYearButtonDisabled","nextYearButtonDisabled"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"sourcesContent":["/**\r\n * Import react libraries.\r\n */\r\nimport * as React from 'react';\r\nimport { SystemIcons } from '../icons';\r\nimport styled from 'styled-components';\r\nimport { CommonInteractionStyling } from '../common';\r\nimport { COLORS } from '../styles';\r\n\r\nexport interface DatepickerFieldHeaderParams {\r\n  date: Date;\r\n  changeYear(year: number): void;\r\n  changeMonth(month: number): void;\r\n  customHeaderCount: number;\r\n  decreaseMonth(): void;\r\n  increaseMonth(): void;\r\n  prevMonthButtonDisabled: boolean;\r\n  nextMonthButtonDisabled: boolean;\r\n  decreaseYear(): void;\r\n  increaseYear(): void;\r\n  prevYearButtonDisabled: boolean;\r\n  nextYearButtonDisabled: boolean;\r\n  yearPickerMode: boolean;\r\n  setYearPickerMode(val: boolean): void;\r\n  setActiveMonthPage(val: number): void;\r\n}\r\n\r\nconst HeaderLabelContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding-left: 10px;\r\n  cursor: pointer;\r\n\r\n  button {\r\n    background: transparent;\r\n    padding: 0px;\r\n    width: auto;\r\n  }\r\n\r\n  svg {\r\n    color: ${props => COLORS.generateToken({ componentType: 'icon', defaultVariant: 'subtle' }, props.theme)};\r\n  }\r\n\r\n  ${CommonInteractionStyling}\r\n\r\n  &:hover {\r\n    div {\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'hover' }, props.theme)} !important;\r\n    }\r\n    svg {\r\n      color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'hover' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active {\r\n    div {\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'active' }, props.theme)} !important;\r\n    }\r\n    svg {\r\n      color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'hover' }, props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const DatepickerFieldHeader = ({\r\n  date,\r\n  decreaseMonth,\r\n  increaseMonth,\r\n  prevMonthButtonDisabled,\r\n  nextMonthButtonDisabled,\r\n  setYearPickerMode,\r\n  yearPickerMode,\r\n  setActiveMonthPage,\r\n}: DatepickerFieldHeaderParams) => {\r\n  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\r\n  const handleDecreaseMonth = () => {\r\n    let previousMonth = date.getMonth() - 1;\r\n    if (previousMonth < 0) previousMonth = months.length - 1;\r\n    setActiveMonthPage(previousMonth);\r\n    decreaseMonth();\r\n  };\r\n\r\n  const handleIncreaseMonth = () => {\r\n    let nextMonth = date.getMonth() + 1;\r\n    if (nextMonth >= months.length - 1) nextMonth = 0;\r\n    setActiveMonthPage(nextMonth);\r\n    increaseMonth();\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    setActiveMonthPage(date.getMonth());\r\n  }, [date]);\r\n\r\n  return (\r\n    <>\r\n      <div\r\n        style={{\r\n          display: 'flex',\r\n          justifyContent: 'center',\r\n        }}>\r\n        {!yearPickerMode && (\r\n          <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\r\n          </button>\r\n        )}\r\n        <HeaderLabelContainer onClick={() => setYearPickerMode(!yearPickerMode)}>\r\n          <div className=\"react-datepicker__current-month\">{`${months[date.getMonth()]} ${date.getFullYear()}`}</div>\r\n          {yearPickerMode ? <SystemIcons.ArrowDropUp size=\"24px\" /> : <SystemIcons.ArrowDropDown size=\"24px\" />}\r\n        </HeaderLabelContainer>\r\n        {!yearPickerMode && (\r\n          <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--next\" onClick={handleIncreaseMonth} disabled={nextMonthButtonDisabled}>\r\n          </button>\r\n        )}\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DatepickerFieldHeader.cjs","names":["React","_interopRequireWildcard","require","_icons","_styledComponents","_interopRequireDefault","_common","_styles","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","HeaderLabelContainer","styled","div","props","COLORS","getColor","theme","CommonInteractionStyling","DatepickerFieldHeader","_ref","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","useEffect","jsx","Fragment","children","jsxs","style","display","justifyContent","type","className","onClick","disabled","getFullYear","SystemIcons","ArrowDropUp","size","ArrowDropDown","exports","propTypes","_propTypes","instanceOf","Date","isRequired","customHeaderCount","number","bool","prevYearButtonDisabled","nextYearButtonDisabled"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"sourcesContent":["/**\r\n * Import react libraries.\r\n */\r\nimport * as React from 'react';\r\nimport { SystemIcons } from '../icons';\r\nimport styled from 'styled-components';\r\nimport { CommonInteractionStyling } from '../common';\r\nimport { COLORS } from '../styles';\r\n\r\nexport interface DatepickerFieldHeaderParams {\r\n  date: Date;\r\n  changeYear(year: number): void;\r\n  changeMonth(month: number): void;\r\n  customHeaderCount: number;\r\n  decreaseMonth(): void;\r\n  increaseMonth(): void;\r\n  prevMonthButtonDisabled: boolean;\r\n  nextMonthButtonDisabled: boolean;\r\n  decreaseYear(): void;\r\n  increaseYear(): void;\r\n  prevYearButtonDisabled: boolean;\r\n  nextYearButtonDisabled: boolean;\r\n  yearPickerMode: boolean;\r\n  setYearPickerMode(val: boolean): void;\r\n  setActiveMonthPage(val: number): void;\r\n}\r\n\r\nconst HeaderLabelContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding-left: 10px;\r\n  cursor: pointer;\r\n\r\n  button {\r\n    background: transparent;\r\n    padding: 0px;\r\n    width: auto;\r\n  }\r\n\r\n  svg {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n\r\n  ${CommonInteractionStyling}\r\n\r\n  &:hover {\r\n    div {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)} !important;\r\n    }\r\n    svg {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active {\r\n    div {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)} !important;\r\n    }\r\n    svg {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const DatepickerFieldHeader = ({\r\n  date,\r\n  decreaseMonth,\r\n  increaseMonth,\r\n  prevMonthButtonDisabled,\r\n  nextMonthButtonDisabled,\r\n  setYearPickerMode,\r\n  yearPickerMode,\r\n  setActiveMonthPage,\r\n}: DatepickerFieldHeaderParams) => {\r\n  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\r\n  const handleDecreaseMonth = () => {\r\n    let previousMonth = date.getMonth() - 1;\r\n    if (previousMonth < 0) previousMonth = months.length - 1;\r\n    setActiveMonthPage(previousMonth);\r\n    decreaseMonth();\r\n  };\r\n\r\n  const handleIncreaseMonth = () => {\r\n    let nextMonth = date.getMonth() + 1;\r\n    if (nextMonth >= months.length - 1) nextMonth = 0;\r\n    setActiveMonthPage(nextMonth);\r\n    increaseMonth();\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    setActiveMonthPage(date.getMonth());\r\n  }, [date]);\r\n\r\n  return (\r\n    <>\r\n      <div\r\n        style={{\r\n          display: 'flex',\r\n          justifyContent: 'center',\r\n        }}>\r\n        {!yearPickerMode && (\r\n          <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\r\n          </button>\r\n        )}\r\n        <HeaderLabelContainer onClick={() => setYearPickerMode(!yearPickerMode)}>\r\n          <div className=\"react-datepicker__current-month\">{`${months[date.getMonth()]} ${date.getFullYear()}`}</div>\r\n          {yearPickerMode ? <SystemIcons.ArrowDropUp size=\"24px\" /> : <SystemIcons.ArrowDropDown size=\"24px\" />}\r\n        </HeaderLabelContainer>\r\n        {!yearPickerMode && (\r\n          <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--next\" onClick={handleIncreaseMonth} disabled={nextMonthButtonDisabled}>\r\n          </button>\r\n        )}\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/DatepickerFieldHeader.js

@@ -22,41 +22,26 @@ const HeaderLabelContainer = styled.div`
   }
 
   svg {
-    color: ${props => COLORS.generateToken({
-  componentType: 'icon',
-  defaultVariant: 'subtle'
-}, props.theme)};
+    color: ${props => COLORS.getColor('neutral_600', props.theme)};
   }
 
   ${CommonInteractionStyling}
 
   &:hover {
     div {
-      color: ${props => COLORS.generateToken({
-  componentType: 'text',
-  state: 'hover'
-}, props.theme)} !important;
+      color: ${props => COLORS.getColor('primary_600', props.theme)} !important;
     }
     svg {
-      color: ${props => COLORS.generateToken({
-  componentType: 'icon',
-  state: 'hover'
-}, props.theme)};
+      color: ${props => COLORS.getColor('primary_600', props.theme)};
     }
   }
 
   &:active {
     div {
-      color: ${props => COLORS.generateToken({
-  componentType: 'text',
-  state: 'active'
-}, props.theme)} !important;
+      color: ${props => COLORS.getColor('primary_600', props.theme)} !important;
     }
     svg {
-      color: ${props => COLORS.generateToken({
-  componentType: 'icon',
-  state: 'hover'
-}, props.theme)};
+      color: ${props => COLORS.getColor('primary_600', props.theme)};
     }
   }
 `;

package/dist/InputFields/DatepickerFieldHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatepickerFieldHeader.js","names":["React","SystemIcons","styled","CommonInteractionStyling","COLORS","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","HeaderLabelContainer","div","props","generateToken","componentType","defaultVariant","theme","state","DatepickerFieldHeader","_ref","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","useEffect","children","style","display","justifyContent","type","className","onClick","disabled","getFullYear","ArrowDropUp","size","ArrowDropDown","propTypes","_pt","instanceOf","Date","isRequired","customHeaderCount","number","bool","prevYearButtonDisabled","nextYearButtonDisabled"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"sourcesContent":["/**\r\n * Import react libraries.\r\n */\r\nimport * as React from 'react';\r\nimport { SystemIcons } from '../icons';\r\nimport styled from 'styled-components';\r\nimport { CommonInteractionStyling } from '../common';\r\nimport { COLORS } from '../styles';\r\n\r\nexport interface DatepickerFieldHeaderParams {\r\n  date: Date;\r\n  changeYear(year: number): void;\r\n  changeMonth(month: number): void;\r\n  customHeaderCount: number;\r\n  decreaseMonth(): void;\r\n  increaseMonth(): void;\r\n  prevMonthButtonDisabled: boolean;\r\n  nextMonthButtonDisabled: boolean;\r\n  decreaseYear(): void;\r\n  increaseYear(): void;\r\n  prevYearButtonDisabled: boolean;\r\n  nextYearButtonDisabled: boolean;\r\n  yearPickerMode: boolean;\r\n  setYearPickerMode(val: boolean): void;\r\n  setActiveMonthPage(val: number): void;\r\n}\r\n\r\nconst HeaderLabelContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding-left: 10px;\r\n  cursor: pointer;\r\n\r\n  button {\r\n    background: transparent;\r\n    padding: 0px;\r\n    width: auto;\r\n  }\r\n\r\n  svg {\r\n    color: ${props => COLORS.generateToken({ componentType: 'icon', defaultVariant: 'subtle' }, props.theme)};\r\n  }\r\n\r\n  ${CommonInteractionStyling}\r\n\r\n  &:hover {\r\n    div {\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'hover' }, props.theme)} !important;\r\n    }\r\n    svg {\r\n      color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'hover' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active {\r\n    div {\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'active' }, props.theme)} !important;\r\n    }\r\n    svg {\r\n      color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'hover' }, props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const DatepickerFieldHeader = ({\r\n  date,\r\n  decreaseMonth,\r\n  increaseMonth,\r\n  prevMonthButtonDisabled,\r\n  nextMonthButtonDisabled,\r\n  setYearPickerMode,\r\n  yearPickerMode,\r\n  setActiveMonthPage,\r\n}: DatepickerFieldHeaderParams) => {\r\n  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\r\n  const handleDecreaseMonth = () => {\r\n    let previousMonth = date.getMonth() - 1;\r\n    if (previousMonth < 0) previousMonth = months.length - 1;\r\n    setActiveMonthPage(previousMonth);\r\n    decreaseMonth();\r\n  };\r\n\r\n  const handleIncreaseMonth = () => {\r\n    let nextMonth = date.getMonth() + 1;\r\n    if (nextMonth >= months.length - 1) nextMonth = 0;\r\n    setActiveMonthPage(nextMonth);\r\n    increaseMonth();\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    setActiveMonthPage(date.getMonth());\r\n  }, [date]);\r\n\r\n  return (\r\n    <>\r\n      <div\r\n        style={{\r\n          display: 'flex',\r\n          justifyContent: 'center',\r\n        }}>\r\n        {!yearPickerMode && (\r\n          <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\r\n          </button>\r\n        )}\r\n        <HeaderLabelContainer onClick={() => setYearPickerMode(!yearPickerMode)}>\r\n          <div className=\"react-datepicker__current-month\">{`${months[date.getMonth()]} ${date.getFullYear()}`}</div>\r\n          {yearPickerMode ? <SystemIcons.ArrowDropUp size=\"24px\" /> : <SystemIcons.ArrowDropDown size=\"24px\" />}\r\n        </HeaderLabelContainer>\r\n        {!yearPickerMode && (\r\n          <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--next\" onClick={handleIncreaseMonth} disabled={nextMonthButtonDisabled}>\r\n          </button>\r\n        )}\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DatepickerFieldHeader.js","names":["React","SystemIcons","styled","CommonInteractionStyling","COLORS","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","HeaderLabelContainer","div","props","getColor","theme","DatepickerFieldHeader","_ref","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","useEffect","children","style","display","justifyContent","type","className","onClick","disabled","getFullYear","ArrowDropUp","size","ArrowDropDown","propTypes","_pt","instanceOf","Date","isRequired","customHeaderCount","number","bool","prevYearButtonDisabled","nextYearButtonDisabled"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"sourcesContent":["/**\r\n * Import react libraries.\r\n */\r\nimport * as React from 'react';\r\nimport { SystemIcons } from '../icons';\r\nimport styled from 'styled-components';\r\nimport { CommonInteractionStyling } from '../common';\r\nimport { COLORS } from '../styles';\r\n\r\nexport interface DatepickerFieldHeaderParams {\r\n  date: Date;\r\n  changeYear(year: number): void;\r\n  changeMonth(month: number): void;\r\n  customHeaderCount: number;\r\n  decreaseMonth(): void;\r\n  increaseMonth(): void;\r\n  prevMonthButtonDisabled: boolean;\r\n  nextMonthButtonDisabled: boolean;\r\n  decreaseYear(): void;\r\n  increaseYear(): void;\r\n  prevYearButtonDisabled: boolean;\r\n  nextYearButtonDisabled: boolean;\r\n  yearPickerMode: boolean;\r\n  setYearPickerMode(val: boolean): void;\r\n  setActiveMonthPage(val: number): void;\r\n}\r\n\r\nconst HeaderLabelContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding-left: 10px;\r\n  cursor: pointer;\r\n\r\n  button {\r\n    background: transparent;\r\n    padding: 0px;\r\n    width: auto;\r\n  }\r\n\r\n  svg {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n\r\n  ${CommonInteractionStyling}\r\n\r\n  &:hover {\r\n    div {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)} !important;\r\n    }\r\n    svg {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active {\r\n    div {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)} !important;\r\n    }\r\n    svg {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const DatepickerFieldHeader = ({\r\n  date,\r\n  decreaseMonth,\r\n  increaseMonth,\r\n  prevMonthButtonDisabled,\r\n  nextMonthButtonDisabled,\r\n  setYearPickerMode,\r\n  yearPickerMode,\r\n  setActiveMonthPage,\r\n}: DatepickerFieldHeaderParams) => {\r\n  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\r\n  const handleDecreaseMonth = () => {\r\n    let previousMonth = date.getMonth() - 1;\r\n    if (previousMonth < 0) previousMonth = months.length - 1;\r\n    setActiveMonthPage(previousMonth);\r\n    decreaseMonth();\r\n  };\r\n\r\n  const handleIncreaseMonth = () => {\r\n    let nextMonth = date.getMonth() + 1;\r\n    if (nextMonth >= months.length - 1) nextMonth = 0;\r\n    setActiveMonthPage(nextMonth);\r\n    increaseMonth();\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    setActiveMonthPage(date.getMonth());\r\n  }, [date]);\r\n\r\n  return (\r\n    <>\r\n      <div\r\n        style={{\r\n          display: 'flex',\r\n          justifyContent: 'center',\r\n        }}>\r\n        {!yearPickerMode && (\r\n          <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\r\n          </button>\r\n        )}\r\n        <HeaderLabelContainer onClick={() => setYearPickerMode(!yearPickerMode)}>\r\n          <div className=\"react-datepicker__current-month\">{`${months[date.getMonth()]} ${date.getFullYear()}`}</div>\r\n          {yearPickerMode ? <SystemIcons.ArrowDropUp size=\"24px\" /> : <SystemIcons.ArrowDropDown size=\"24px\" />}\r\n        </HeaderLabelContainer>\r\n        {!yearPickerMode && (\r\n          <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--next\" onClick={handleIncreaseMonth} disabled={nextMonthButtonDisabled}>\r\n          </button>\r\n        )}\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/Label.cjs

@@ -29,21 +29,17 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 // Add component-specific styles.
 const Label = _styledComponents.default.label`
-  color: ${props => _styles.COLORS.generateToken({
-  componentType: 'text',
-  defaultVariant: 'subtle'
-}, props.theme)};
-  ${props => (0, _typography.ComponentXXSStyling)(1, null)}
+  ${props => (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.getColor('neutral_500', props.theme))}
 
   ${_styles.BREAKPOINTS.MEDIUM} {
-    ${props => (0, _typography.ComponentXSStyling)(1, null)}
+    ${props => (0, _typography.ComponentXSStyling)(1, _styles.COLORS.getColor('neutral_500', props.theme))}
   }
 
   &.small {
-    ${props => (0, _typography.ComponentXXSStyling)(1, null)}
+    ${props => (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.getColor('neutral_500', props.theme))}
   }
   &.medium {
-    ${props => (0, _typography.ComponentXSStyling)(1, null)}
+    ${props => (0, _typography.ComponentXSStyling)(1, _styles.COLORS.getColor('neutral_500', props.theme))}
   }
 
   pointer-events: none;
@@ -60,11 +56,7 @@ const CopyContainer = _styledComponents.default.div`
   &:visited:not(.disabled) {
     ${_typography.TypographyBase}
     {
-      color: ${props => _styles.COLORS.generateToken({
-  componentType: 'text-link',
-  defaultVariant: 'primary',
-  state: 'active'
-}, props.theme)};
+      color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
     }
   }
 
@@ -72,10 +64,7 @@ const CopyContainer = _styledComponents.default.div`
   &.hover-state:not(.disabled) {
     ${_typography.TypographyBase}
     {
-      color: ${props => _styles.COLORS.generateToken({
-  componentType: 'text-link',
-  defaultVariant: 'primary'
-}, props.theme)};
+      color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
       text-decoration-line: underline;
     }
   }
@@ -84,10 +73,7 @@ const CopyContainer = _styledComponents.default.div`
   &.focus-state:not(.disabled) {
     ${_typography.TypographyBase}
     {
-      color: ${props => _styles.COLORS.generateToken({
-  componentType: 'text-link',
-  defaultVariant: 'primary'
-}, props.theme)};
+      color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
       background-color: white;
       text-decoration-line: underline;
     }
@@ -97,10 +83,7 @@ const CopyContainer = _styledComponents.default.div`
   &.active-state:not(.disabled) {
     ${_typography.TypographyBase}
     {
-      color: ${props => _styles.COLORS.generateToken({
-  componentType: 'text-link',
-  defaultVariant: 'primary'
-}, props.theme)};
+      color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
       background-color: white;
       text-decoration-line: underline;
     }
@@ -115,10 +98,7 @@ const CopyContainer = _styledComponents.default.div`
       text-decoration-style: solid;
       text-decoration-line: none;
       font-weight: 700;
-      color: ${props => _styles.COLORS.generateToken({
-  componentType: 'text-link',
-  defaultVariant: 'primary'
-}, props.theme)};
+      color: ${props => _styles.COLORS.getColor('primary_600', props.theme)};
     }
   }
 
@@ -131,11 +111,7 @@ const CopyContainer = _styledComponents.default.div`
       text-decoration-style: solid;
       text-decoration-line: none;
       font-weight: 700;
-      color: ${props => _styles.COLORS.generateToken({
-  componentType: 'text-link',
-  defaultVariant: 'primary',
-  state: 'disabled'
-}, props.theme)};
+      color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
     }
   }
   cursor: pointer;
@@ -211,10 +187,7 @@ const InputLabel = _ref => {
         children: text
       }), required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Asterisk, {
         size: "16px",
-        color: _styles.COLORS.generateToken({
-          componentType: 'icon',
-          defaultVariant: 'critical'
-        }, theme)
+        color: _styles.COLORS.getColor('critical_500', theme)
       }), showCopyButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(CopyContainer, {
         className: copyState != CopyState.Available ? "disabled" : "",
         onClick: copyInputClick,