@laerdal/life-react-components 1.11.0-dev.7.full → 1.11.0-dev.9

package/dist/InputFields/DatepickerField.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/DatepickerField.tsx"],"names":["DatePickerContainer","styled","div","Z_INDEXES","dropdown","props","margin","COLORS","primary_20","focusStyles","neutral_20","neutral_200","yearPicker","ComponentTextStyle","Bold","neutral_600","Size","Small","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","InputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","DatepickerField","React","forwardRef","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","onBlur","rest","inputRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","handleBlur","currentTarget","contains","relatedTarget","newDate","setMonth","en","undefined","params","createElement","DatepickerFieldHeader","customHeaderCount","display","setSelectionRange","critical_400"],"mappings":"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","sourcesContent":["/**\n * Import react libraries.\n */\nimport React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport DatePicker from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\n\n/**\n * Import custom styles.\n */\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport {useFocusVisibleRef} from '../common';\nimport {Size} from '../types';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\n  value?: Date;\n  onChange?: (date: Date) => void;\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n\n  invalid?: boolean;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  yearPicker?: boolean;\n  yearsBeforeCurrentDate?: number;\n  yearsAfterCurrentDate?: number;\n  margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n  .react-datepicker-popper {\n    z-index: ${Z_INDEXES.dropdown};\n  }\n\n  > div {\n    display: block;\n\n    ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 32px;\n      width: 32px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ${COLORS.primary_20};\n\n        &.react-datepicker__navigation--previous::before {\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\");\n        }\n\n        &.react-datepicker__navigation--next::before {\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\");\n        }\n      }\n\n      &:focus {\n        ${focusStyles}\n        &.react-datepicker__navigation--next::before {\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\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\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\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\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\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\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\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ${COLORS.neutral_20};\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ${COLORS.neutral_200};\n      background: ${COLORS.neutral_20};\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ${scrollBarStyling(Size.Small)}\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year-text {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n    }\n\n    .react-datepicker__day {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__day--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ${COLORS.neutral_700};\n        background: ${COLORS.neutral_100};\n\n        &:hover {\n          color: ${COLORS.primary_700};\n          background: ${COLORS.primary_20};\n        }\n\n        &:focus {\n          ${focusStyles}\n        }\n      }\n    }\n  }\n`;\n\nconst IconWrapper = styled.div`\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ${Z_INDEXES.focus + 1};\n  color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  &::placeholder {\n    color: ${COLORS.neutral_500};\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n    ::placeholder {\n      color: ${COLORS.primary_700};\n    }\n\n    cursor: pointer;\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    ::placeholder {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover ~ ${IconWrapper} {\n    color: ${COLORS.primary_700};\n  }\n\n  &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled ~ ${IconWrapper}, &:read-only ~ ${IconWrapper} {\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst DatepickerField = React.forwardRef(({\n                                            disabled,\n                                            readOnly,\n                                            onChange,\n                                            invalid,\n                                            value,\n                                            validationMessage,\n                                            dateFormat,\n                                            autoComplete,\n                                            placeholder,\n                                            required,\n                                            yearPicker,\n                                            yearsBeforeCurrentDate,\n                                            yearsAfterCurrentDate,\n                                            margin,\n                                            onBlur,\n                                            ...rest\n                                          }: DatepickerFieldProps, ref) => {\n  // Globally used variables within the component\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\n  // 'open' flag is used only for tracking current state of the dropdown,\n  // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\n  const [open, setOpen] = React.useState<boolean>(false);\n\n  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }, [value]);\n\n  React.useEffect(() => {\n    if (yearPickerMode) {\n      //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n      //we have to touch DOM directly\n      const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n      const dropdownParent = selectedDate?.parentElement?.parentElement;\n      if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n    }\n  }, [yearPickerMode]);\n\n  //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n  //otherwise after year selection datepicker will show January month of the selected year\n  React.useEffect(() => {\n    if (openAt) {\n      datepickerRef.current.setOpen(true);\n      //setOpenAt(null);\n    }\n  }, [openAt]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleCalendarClose = () => {\n    inputRef.current?.blur();\n    setOpen(false);\n  };\n\n  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\n    setOpen(true);\n  };\n\n  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n  //itemsNumber - controls number of year select options generated in the dropdown\n  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape' || e.key === 'Esc')\n      datepickerRef.current.setOpen(false);\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onCalendarClose={handleCalendarClose}\n          onKeyDown={handleKeyDown}\n\n          onClickOutside={() => datepickerRef.current.setOpen(false)}\n\n          onChange={(e: any) => {\n            if (onChange) {\n              if (yearPickerMode) {\n                const newDate = new Date();\n                newDate.setFullYear(e.getFullYear());\n                newDate.setMonth(activeMonthPage);\n                setOpenAt(newDate);\n              } else onChange(e);\n            }\n            if (yearPickerMode) setYearPickerMode(false);\n          }}\n          disabled={disabled || readOnly}\n          locale={en}\n          showYearPicker={yearPickerMode}\n          //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n          yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n          maxDate={yearPickerMode ? maxDate : undefined}\n          selected={value}\n          openToDate={openAt ?? undefined}\n          preventOpenOnFocus={true}\n          shouldCloseOnSelect={true}\n          renderCustomHeader={\n            yearPicker\n              ? (params: DatepickerFieldHeaderParams) =>\n                React.createElement(\n                  DatepickerFieldHeader,\n                  {\n                    ...params,\n                    setActiveMonthPage,\n                    customHeaderCount: 0,\n                    yearPickerMode: yearPickerMode,\n                    setYearPickerMode: setYearPickerMode,\n                  },\n                  null,\n                )\n              : undefined\n          }\n          customInput={\n            <InputWrapper disabled={disabled} readOnly={readOnly}>\n              <div style={{display: 'block', margin: '4px 0px'}}>\n                <DatepickerRow>\n                  <StyledInputFieldStyling\n                    ref={inputRef}\n                    type=\"text\"\n                    name=\"datepicker\"\n                    onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\n                    className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\n                    tabIndex={disabled || readOnly ? -1 : 0}\n                    onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    readOnly={true}\n                    suppressReadOnlyStyles={!readOnly}\n                    required={required}\n                    {...rest}\n                  />\n                  <IconWrapper>\n                    <Calendar size=\"24\"/>\n                  </IconWrapper>\n                </DatepickerRow>\n              </div>\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default DatepickerField;\n"],"file":"DatepickerField.cjs"}
+{"version":3,"file":"DatepickerField.cjs","names":["DatePickerContainer","styled","div","Z_INDEXES","dropdown","props","margin","COLORS","primary_20","focusStyles","neutral_20","neutral_200","yearPicker","ComponentSStyling","ComponentTextStyle","Bold","neutral_600","scrollBarStyling","Size","Small","ComponentMStyling","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","InputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","DatepickerField","React","forwardRef","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","onBlur","rest","inputRef","useFocusVisibleRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","moment","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","handleBlur","currentTarget","contains","relatedTarget","newDate","setMonth","en","undefined","params","createElement","DatepickerFieldHeader","customHeaderCount","display","setSelectionRange","critical_400"],"sources":["../../src/InputFields/DatepickerField.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport DatePicker, { ReactDatePickerCustomHeaderProps } from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\n\n/**\n * Import custom styles.\n */\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport {useFocusVisibleRef} from '../common';\nimport {Size} from '../types';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\n  value?: Date;\n  onChange?: (date: Date) => void;\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n\n  invalid?: boolean;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  yearPicker?: boolean;\n  yearsBeforeCurrentDate?: number;\n  yearsAfterCurrentDate?: number;\n  margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n  .react-datepicker-popper {\n    z-index: ${Z_INDEXES.dropdown};\n  }\n\n  > div {\n    display: block;\n\n    ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 32px;\n      width: 32px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ${COLORS.primary_20};\n\n        &.react-datepicker__navigation--previous::before {\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\");\n        }\n\n        &.react-datepicker__navigation--next::before {\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\");\n        }\n      }\n\n      &:focus {\n        ${focusStyles}\n        &.react-datepicker__navigation--next::before {\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\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\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\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\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\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\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\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ${COLORS.neutral_20};\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ${COLORS.neutral_200};\n      background: ${COLORS.neutral_20};\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ${scrollBarStyling(Size.Small)}\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year-text {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n    }\n\n    .react-datepicker__day {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__day--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ${COLORS.neutral_700};\n        background: ${COLORS.neutral_100};\n\n        &:hover {\n          color: ${COLORS.primary_700};\n          background: ${COLORS.primary_20};\n        }\n\n        &:focus {\n          ${focusStyles}\n        }\n      }\n    }\n  }\n`;\n\nconst IconWrapper = styled.div`\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ${Z_INDEXES.focus + 1};\n  color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  &::placeholder {\n    color: ${COLORS.neutral_500};\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n    ::placeholder {\n      color: ${COLORS.primary_700};\n    }\n\n    cursor: pointer;\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    ::placeholder {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover ~ ${IconWrapper} {\n    color: ${COLORS.primary_700};\n  }\n\n  &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled ~ ${IconWrapper}, &:read-only ~ ${IconWrapper} {\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst DatepickerField = React.forwardRef(({\n                                            disabled,\n                                            readOnly,\n                                            onChange,\n                                            invalid,\n                                            value,\n                                            validationMessage,\n                                            dateFormat,\n                                            autoComplete,\n                                            placeholder,\n                                            required,\n                                            yearPicker,\n                                            yearsBeforeCurrentDate,\n                                            yearsAfterCurrentDate,\n                                            margin,\n                                            onBlur,\n                                            ...rest\n                                          }: DatepickerFieldProps, ref) => {\n  // Globally used variables within the component\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\n  // 'open' flag is used only for tracking current state of the dropdown,\n  // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\n  const [open, setOpen] = React.useState<boolean>(false);\n\n  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }, [value]);\n\n  React.useEffect(() => {\n    if (yearPickerMode) {\n      //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n      //we have to touch DOM directly\n      const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n      const dropdownParent = selectedDate?.parentElement?.parentElement;\n      if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n    }\n  }, [yearPickerMode]);\n\n  //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n  //otherwise after year selection datepicker will show January month of the selected year\n  React.useEffect(() => {\n    if (openAt) {\n      datepickerRef.current.setOpen(true);\n      //setOpenAt(null);\n    }\n  }, [openAt]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleCalendarClose = () => {\n    inputRef.current?.blur();\n    setOpen(false);\n  };\n\n  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\n    setOpen(true);\n  };\n\n  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n  //itemsNumber - controls number of year select options generated in the dropdown\n  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape' || e.key === 'Esc')\n      datepickerRef.current.setOpen(false);\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onCalendarClose={handleCalendarClose}\n          onKeyDown={handleKeyDown}\n\n          onClickOutside={() => datepickerRef.current.setOpen(false)}\n\n          onChange={(e: any) => {\n            if (onChange) {\n              if (yearPickerMode) {\n                const newDate = new Date();\n                newDate.setFullYear(e.getFullYear());\n                newDate.setMonth(activeMonthPage);\n                setOpenAt(newDate);\n              } else onChange(e);\n            }\n            if (yearPickerMode) setYearPickerMode(false);\n          }}\n          disabled={disabled || readOnly}\n          locale={en}\n          showYearPicker={yearPickerMode}\n          //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n          yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n          maxDate={yearPickerMode ? maxDate : undefined}\n          selected={value}\n          openToDate={openAt ?? undefined}\n          preventOpenOnFocus={true}\n          shouldCloseOnSelect={true}\n          renderCustomHeader={\n            yearPicker\n              ? (params: ReactDatePickerCustomHeaderProps) =>\n                React.createElement(\n                  DatepickerFieldHeader,\n                  {\n                    ...params,\n                    setActiveMonthPage,\n                    customHeaderCount: 0,\n                    yearPickerMode: yearPickerMode,\n                    setYearPickerMode: setYearPickerMode,\n                  },\n                  null,\n                )\n              : undefined\n          }\n          customInput={\n            <InputWrapper disabled={disabled} readOnly={readOnly}>\n              <div style={{display: 'block', margin: '4px 0px'}}>\n                <DatepickerRow>\n                  <StyledInputFieldStyling\n                    ref={inputRef}\n                    type=\"text\"\n                    name=\"datepicker\"\n                    onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\n                    className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\n                    tabIndex={disabled || readOnly ? -1 : 0}\n                    onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    readOnly={true}\n                    suppressReadOnlyStyles={!readOnly}\n                    required={required}\n                    {...rest}\n                  />\n                  <IconWrapper>\n                    <Calendar size=\"24\"/>\n                  </IconWrapper>\n                </DatepickerRow>\n              </div>\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default DatepickerField;\n"],"mappings":"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"}

package/dist/InputFields/DatepickerField.d.ts

@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import 'react-datepicker/dist/react-datepicker.css';
-declare const DatepickerField: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onBlur" | "onChange" | "size" | "value"> & {
+declare const DatepickerField: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onBlur" | "onChange" | "value" | "size"> & {
     value?: Date | undefined;
     onChange?: ((date: Date) => void) | undefined;
     onBlur?: ((event: React.FocusEvent<HTMLDivElement>) => void) | undefined;

package/dist/InputFields/DatepickerField.js

@@ -7,9 +7,9 @@ var _excluded = ["disabled", "readOnly", "onChange", "invalid", "value", "valida
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /**
  * Import react libraries.

package/dist/InputFields/DatepickerField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/DatepickerField.tsx"],"names":["React","styled","DatePicker","en","moment","COLORS","Calendar","TechnicalWarning","DatepickerFieldHeader","ComponentTextStyle","focusStyles","scrollBarStyling","ErrorMessage","InputFieldStyling","InputWrapper","ComponentMStyling","ComponentSStyling","Z_INDEXES","useFocusVisibleRef","Size","DatePickerContainer","div","dropdown","props","margin","primary_20","neutral_20","neutral_200","yearPicker","Bold","neutral_600","Small","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","DatepickerField","forwardRef","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","onBlur","rest","inputRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","handleBlur","currentTarget","contains","relatedTarget","newDate","setMonth","undefined","params","createElement","customHeaderCount","display","setSelectionRange","critical_400"],"mappings":"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","sourcesContent":["/**\n * Import react libraries.\n */\nimport React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport DatePicker from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\n\n/**\n * Import custom styles.\n */\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport {useFocusVisibleRef} from '../common';\nimport {Size} from '../types';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\n  value?: Date;\n  onChange?: (date: Date) => void;\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n\n  invalid?: boolean;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  yearPicker?: boolean;\n  yearsBeforeCurrentDate?: number;\n  yearsAfterCurrentDate?: number;\n  margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n  .react-datepicker-popper {\n    z-index: ${Z_INDEXES.dropdown};\n  }\n\n  > div {\n    display: block;\n\n    ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 32px;\n      width: 32px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ${COLORS.primary_20};\n\n        &.react-datepicker__navigation--previous::before {\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\");\n        }\n\n        &.react-datepicker__navigation--next::before {\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\");\n        }\n      }\n\n      &:focus {\n        ${focusStyles}\n        &.react-datepicker__navigation--next::before {\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\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\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\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\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\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\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\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ${COLORS.neutral_20};\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ${COLORS.neutral_200};\n      background: ${COLORS.neutral_20};\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ${scrollBarStyling(Size.Small)}\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year-text {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n    }\n\n    .react-datepicker__day {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__day--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ${COLORS.neutral_700};\n        background: ${COLORS.neutral_100};\n\n        &:hover {\n          color: ${COLORS.primary_700};\n          background: ${COLORS.primary_20};\n        }\n\n        &:focus {\n          ${focusStyles}\n        }\n      }\n    }\n  }\n`;\n\nconst IconWrapper = styled.div`\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ${Z_INDEXES.focus + 1};\n  color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  &::placeholder {\n    color: ${COLORS.neutral_500};\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n    ::placeholder {\n      color: ${COLORS.primary_700};\n    }\n\n    cursor: pointer;\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    ::placeholder {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover ~ ${IconWrapper} {\n    color: ${COLORS.primary_700};\n  }\n\n  &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled ~ ${IconWrapper}, &:read-only ~ ${IconWrapper} {\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst DatepickerField = React.forwardRef(({\n                                            disabled,\n                                            readOnly,\n                                            onChange,\n                                            invalid,\n                                            value,\n                                            validationMessage,\n                                            dateFormat,\n                                            autoComplete,\n                                            placeholder,\n                                            required,\n                                            yearPicker,\n                                            yearsBeforeCurrentDate,\n                                            yearsAfterCurrentDate,\n                                            margin,\n                                            onBlur,\n                                            ...rest\n                                          }: DatepickerFieldProps, ref) => {\n  // Globally used variables within the component\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\n  // 'open' flag is used only for tracking current state of the dropdown,\n  // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\n  const [open, setOpen] = React.useState<boolean>(false);\n\n  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }, [value]);\n\n  React.useEffect(() => {\n    if (yearPickerMode) {\n      //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n      //we have to touch DOM directly\n      const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n      const dropdownParent = selectedDate?.parentElement?.parentElement;\n      if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n    }\n  }, [yearPickerMode]);\n\n  //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n  //otherwise after year selection datepicker will show January month of the selected year\n  React.useEffect(() => {\n    if (openAt) {\n      datepickerRef.current.setOpen(true);\n      //setOpenAt(null);\n    }\n  }, [openAt]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleCalendarClose = () => {\n    inputRef.current?.blur();\n    setOpen(false);\n  };\n\n  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\n    setOpen(true);\n  };\n\n  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n  //itemsNumber - controls number of year select options generated in the dropdown\n  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape' || e.key === 'Esc')\n      datepickerRef.current.setOpen(false);\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onCalendarClose={handleCalendarClose}\n          onKeyDown={handleKeyDown}\n\n          onClickOutside={() => datepickerRef.current.setOpen(false)}\n\n          onChange={(e: any) => {\n            if (onChange) {\n              if (yearPickerMode) {\n                const newDate = new Date();\n                newDate.setFullYear(e.getFullYear());\n                newDate.setMonth(activeMonthPage);\n                setOpenAt(newDate);\n              } else onChange(e);\n            }\n            if (yearPickerMode) setYearPickerMode(false);\n          }}\n          disabled={disabled || readOnly}\n          locale={en}\n          showYearPicker={yearPickerMode}\n          //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n          yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n          maxDate={yearPickerMode ? maxDate : undefined}\n          selected={value}\n          openToDate={openAt ?? undefined}\n          preventOpenOnFocus={true}\n          shouldCloseOnSelect={true}\n          renderCustomHeader={\n            yearPicker\n              ? (params: DatepickerFieldHeaderParams) =>\n                React.createElement(\n                  DatepickerFieldHeader,\n                  {\n                    ...params,\n                    setActiveMonthPage,\n                    customHeaderCount: 0,\n                    yearPickerMode: yearPickerMode,\n                    setYearPickerMode: setYearPickerMode,\n                  },\n                  null,\n                )\n              : undefined\n          }\n          customInput={\n            <InputWrapper disabled={disabled} readOnly={readOnly}>\n              <div style={{display: 'block', margin: '4px 0px'}}>\n                <DatepickerRow>\n                  <StyledInputFieldStyling\n                    ref={inputRef}\n                    type=\"text\"\n                    name=\"datepicker\"\n                    onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\n                    className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\n                    tabIndex={disabled || readOnly ? -1 : 0}\n                    onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    readOnly={true}\n                    suppressReadOnlyStyles={!readOnly}\n                    required={required}\n                    {...rest}\n                  />\n                  <IconWrapper>\n                    <Calendar size=\"24\"/>\n                  </IconWrapper>\n                </DatepickerRow>\n              </div>\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default DatepickerField;\n"],"file":"DatepickerField.js"}
+{"version":3,"file":"DatepickerField.js","names":["React","styled","DatePicker","en","moment","COLORS","Calendar","TechnicalWarning","DatepickerFieldHeader","ComponentTextStyle","focusStyles","scrollBarStyling","ErrorMessage","InputFieldStyling","InputWrapper","ComponentMStyling","ComponentSStyling","Z_INDEXES","useFocusVisibleRef","Size","DatePickerContainer","div","dropdown","props","margin","primary_20","neutral_20","neutral_200","yearPicker","Bold","neutral_600","Small","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","DatepickerField","forwardRef","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","onBlur","rest","inputRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","handleBlur","currentTarget","contains","relatedTarget","newDate","setMonth","undefined","params","createElement","customHeaderCount","display","setSelectionRange","critical_400"],"sources":["../../src/InputFields/DatepickerField.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport DatePicker, { ReactDatePickerCustomHeaderProps } from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\n\n/**\n * Import custom styles.\n */\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport {useFocusVisibleRef} from '../common';\nimport {Size} from '../types';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\n  value?: Date;\n  onChange?: (date: Date) => void;\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n\n  invalid?: boolean;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  yearPicker?: boolean;\n  yearsBeforeCurrentDate?: number;\n  yearsAfterCurrentDate?: number;\n  margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n  .react-datepicker-popper {\n    z-index: ${Z_INDEXES.dropdown};\n  }\n\n  > div {\n    display: block;\n\n    ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 32px;\n      width: 32px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ${COLORS.primary_20};\n\n        &.react-datepicker__navigation--previous::before {\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\");\n        }\n\n        &.react-datepicker__navigation--next::before {\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\");\n        }\n      }\n\n      &:focus {\n        ${focusStyles}\n        &.react-datepicker__navigation--next::before {\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\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\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\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\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\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\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\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ${COLORS.neutral_20};\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ${COLORS.neutral_200};\n      background: ${COLORS.neutral_20};\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ${scrollBarStyling(Size.Small)}\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year-text {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n    }\n\n    .react-datepicker__day {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__day--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ${COLORS.neutral_700};\n        background: ${COLORS.neutral_100};\n\n        &:hover {\n          color: ${COLORS.primary_700};\n          background: ${COLORS.primary_20};\n        }\n\n        &:focus {\n          ${focusStyles}\n        }\n      }\n    }\n  }\n`;\n\nconst IconWrapper = styled.div`\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ${Z_INDEXES.focus + 1};\n  color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  &::placeholder {\n    color: ${COLORS.neutral_500};\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n    ::placeholder {\n      color: ${COLORS.primary_700};\n    }\n\n    cursor: pointer;\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    ::placeholder {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover ~ ${IconWrapper} {\n    color: ${COLORS.primary_700};\n  }\n\n  &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled ~ ${IconWrapper}, &:read-only ~ ${IconWrapper} {\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst DatepickerField = React.forwardRef(({\n                                            disabled,\n                                            readOnly,\n                                            onChange,\n                                            invalid,\n                                            value,\n                                            validationMessage,\n                                            dateFormat,\n                                            autoComplete,\n                                            placeholder,\n                                            required,\n                                            yearPicker,\n                                            yearsBeforeCurrentDate,\n                                            yearsAfterCurrentDate,\n                                            margin,\n                                            onBlur,\n                                            ...rest\n                                          }: DatepickerFieldProps, ref) => {\n  // Globally used variables within the component\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\n  // 'open' flag is used only for tracking current state of the dropdown,\n  // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\n  const [open, setOpen] = React.useState<boolean>(false);\n\n  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }, [value]);\n\n  React.useEffect(() => {\n    if (yearPickerMode) {\n      //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n      //we have to touch DOM directly\n      const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n      const dropdownParent = selectedDate?.parentElement?.parentElement;\n      if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n    }\n  }, [yearPickerMode]);\n\n  //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n  //otherwise after year selection datepicker will show January month of the selected year\n  React.useEffect(() => {\n    if (openAt) {\n      datepickerRef.current.setOpen(true);\n      //setOpenAt(null);\n    }\n  }, [openAt]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleCalendarClose = () => {\n    inputRef.current?.blur();\n    setOpen(false);\n  };\n\n  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\n    setOpen(true);\n  };\n\n  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n  //itemsNumber - controls number of year select options generated in the dropdown\n  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape' || e.key === 'Esc')\n      datepickerRef.current.setOpen(false);\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onCalendarClose={handleCalendarClose}\n          onKeyDown={handleKeyDown}\n\n          onClickOutside={() => datepickerRef.current.setOpen(false)}\n\n          onChange={(e: any) => {\n            if (onChange) {\n              if (yearPickerMode) {\n                const newDate = new Date();\n                newDate.setFullYear(e.getFullYear());\n                newDate.setMonth(activeMonthPage);\n                setOpenAt(newDate);\n              } else onChange(e);\n            }\n            if (yearPickerMode) setYearPickerMode(false);\n          }}\n          disabled={disabled || readOnly}\n          locale={en}\n          showYearPicker={yearPickerMode}\n          //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n          yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n          maxDate={yearPickerMode ? maxDate : undefined}\n          selected={value}\n          openToDate={openAt ?? undefined}\n          preventOpenOnFocus={true}\n          shouldCloseOnSelect={true}\n          renderCustomHeader={\n            yearPicker\n              ? (params: ReactDatePickerCustomHeaderProps) =>\n                React.createElement(\n                  DatepickerFieldHeader,\n                  {\n                    ...params,\n                    setActiveMonthPage,\n                    customHeaderCount: 0,\n                    yearPickerMode: yearPickerMode,\n                    setYearPickerMode: setYearPickerMode,\n                  },\n                  null,\n                )\n              : undefined\n          }\n          customInput={\n            <InputWrapper disabled={disabled} readOnly={readOnly}>\n              <div style={{display: 'block', margin: '4px 0px'}}>\n                <DatepickerRow>\n                  <StyledInputFieldStyling\n                    ref={inputRef}\n                    type=\"text\"\n                    name=\"datepicker\"\n                    onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\n                    className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\n                    tabIndex={disabled || readOnly ? -1 : 0}\n                    onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    readOnly={true}\n                    suppressReadOnlyStyles={!readOnly}\n                    required={required}\n                    {...rest}\n                  />\n                  <IconWrapper>\n                    <Calendar size=\"24\"/>\n                  </IconWrapper>\n                </DatepickerRow>\n              </div>\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default DatepickerField;\n"],"mappings":"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"}

package/dist/InputFields/DatepickerFieldHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"names":["HeaderLabelContainer","styled","div","COLORS","neutral_600","CommonInteractionStyling","primary_600","DatepickerFieldHeader","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","React","useEffect","display","justifyContent","getFullYear","customHeaderCount","prevYearButtonDisabled","nextYearButtonDisabled"],"mappings":"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","sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\nimport { ArrowDropUp, ArrowDropDown } from '../icons/systemicons/SystemIcons';\nimport styled from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { scrollBarStyling, COLORS } from '../styles';\n\nexport interface DatepickerFieldHeaderParams {\n  date: Date;\n  changeYear(year: number): void;\n  changeMonth(month: number): void;\n  customHeaderCount: number;\n  decreaseMonth(): void;\n  increaseMonth(): void;\n  prevMonthButtonDisabled: boolean;\n  nextMonthButtonDisabled: boolean;\n  decreaseYear(): void;\n  increaseYear(): void;\n  prevYearButtonDisabled: boolean;\n  nextYearButtonDisabled: boolean;\n  yearPickerMode: boolean;\n  setYearPickerMode(val: boolean): void;\n  setActiveMonthPage(val: number): void;\n}\n\nconst HeaderLabelContainer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: 10px;\n  cursor: pointer;\n\n  button {\n    background: transparent;\n    padding: 0px;\n    width: auto;\n  }\n\n  svg {\n    color: ${COLORS.neutral_600};\n  }\n\n  ${CommonInteractionStyling}\n\n  &:hover {\n    div {\n      color: ${COLORS.primary_600} !important;\n    }\n    svg {\n      color: ${COLORS.primary_600};\n    }\n  }\n\n  &:active {\n    div {\n      color: ${COLORS.primary_600} !important;\n    }\n    svg {\n      color: ${COLORS.primary_600};\n    }\n  }\n`;\n\nexport const DatepickerFieldHeader = ({\n  date,\n  decreaseMonth,\n  increaseMonth,\n  prevMonthButtonDisabled,\n  nextMonthButtonDisabled,\n  setYearPickerMode,\n  yearPickerMode,\n  setActiveMonthPage,\n}: DatepickerFieldHeaderParams) => {\n  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n  const handleDecreaseMonth = () => {\n    let previousMonth = date.getMonth() - 1;\n    if (previousMonth < 0) previousMonth = months.length - 1;\n    setActiveMonthPage(previousMonth);\n    decreaseMonth();\n  };\n\n  const handleIncreaseMonth = () => {\n    let nextMonth = date.getMonth() + 1;\n    if (nextMonth >= months.length - 1) nextMonth = 0;\n    setActiveMonthPage(nextMonth);\n    increaseMonth();\n  };\n\n  React.useEffect(() => {\n    setActiveMonthPage(date.getMonth());\n  }, [date]);\n\n  return (\n    <>\n      <div\n        style={{\n          display: 'flex',\n          justifyContent: 'center',\n        }}>\n        {!yearPickerMode && (\n          <button className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\n            Prevoius month\n          </button>\n        )}\n        <HeaderLabelContainer onClick={() => setYearPickerMode(!yearPickerMode)}>\n          <div className=\"react-datepicker__current-month\">{`${months[date.getMonth()]} ${date.getFullYear()}`}</div>\n          {yearPickerMode ? <ArrowDropUp size=\"24px\" /> : <ArrowDropDown size=\"24px\" />}\n        </HeaderLabelContainer>\n        {!yearPickerMode && (\n          <button className=\"react-datepicker__navigation react-datepicker__navigation--next\" onClick={handleIncreaseMonth} disabled={nextMonthButtonDisabled}>\n            Next month\n          </button>\n        )}\n      </div>\n    </>\n  );\n};\n"],"file":"DatepickerFieldHeader.cjs"}
+{"version":3,"file":"DatepickerFieldHeader.cjs","names":["HeaderLabelContainer","styled","div","COLORS","neutral_600","CommonInteractionStyling","primary_600","DatepickerFieldHeader","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","React","useEffect","display","justifyContent","getFullYear","customHeaderCount","prevYearButtonDisabled","nextYearButtonDisabled"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\nimport { ArrowDropUp, ArrowDropDown } from '../icons/systemicons/SystemIcons';\nimport styled from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { scrollBarStyling, COLORS } from '../styles';\n\nexport interface DatepickerFieldHeaderParams {\n  date: Date;\n  changeYear(year: number): void;\n  changeMonth(month: number): void;\n  customHeaderCount: number;\n  decreaseMonth(): void;\n  increaseMonth(): void;\n  prevMonthButtonDisabled: boolean;\n  nextMonthButtonDisabled: boolean;\n  decreaseYear(): void;\n  increaseYear(): void;\n  prevYearButtonDisabled: boolean;\n  nextYearButtonDisabled: boolean;\n  yearPickerMode: boolean;\n  setYearPickerMode(val: boolean): void;\n  setActiveMonthPage(val: number): void;\n}\n\nconst HeaderLabelContainer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: 10px;\n  cursor: pointer;\n\n  button {\n    background: transparent;\n    padding: 0px;\n    width: auto;\n  }\n\n  svg {\n    color: ${COLORS.neutral_600};\n  }\n\n  ${CommonInteractionStyling}\n\n  &:hover {\n    div {\n      color: ${COLORS.primary_600} !important;\n    }\n    svg {\n      color: ${COLORS.primary_600};\n    }\n  }\n\n  &:active {\n    div {\n      color: ${COLORS.primary_600} !important;\n    }\n    svg {\n      color: ${COLORS.primary_600};\n    }\n  }\n`;\n\nexport const DatepickerFieldHeader = ({\n  date,\n  decreaseMonth,\n  increaseMonth,\n  prevMonthButtonDisabled,\n  nextMonthButtonDisabled,\n  setYearPickerMode,\n  yearPickerMode,\n  setActiveMonthPage,\n}: DatepickerFieldHeaderParams) => {\n  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n  const handleDecreaseMonth = () => {\n    let previousMonth = date.getMonth() - 1;\n    if (previousMonth < 0) previousMonth = months.length - 1;\n    setActiveMonthPage(previousMonth);\n    decreaseMonth();\n  };\n\n  const handleIncreaseMonth = () => {\n    let nextMonth = date.getMonth() + 1;\n    if (nextMonth >= months.length - 1) nextMonth = 0;\n    setActiveMonthPage(nextMonth);\n    increaseMonth();\n  };\n\n  React.useEffect(() => {\n    setActiveMonthPage(date.getMonth());\n  }, [date]);\n\n  return (\n    <>\n      <div\n        style={{\n          display: 'flex',\n          justifyContent: 'center',\n        }}>\n        {!yearPickerMode && (\n          <button className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\n            Prevoius month\n          </button>\n        )}\n        <HeaderLabelContainer onClick={() => setYearPickerMode(!yearPickerMode)}>\n          <div className=\"react-datepicker__current-month\">{`${months[date.getMonth()]} ${date.getFullYear()}`}</div>\n          {yearPickerMode ? <ArrowDropUp size=\"24px\" /> : <ArrowDropDown size=\"24px\" />}\n        </HeaderLabelContainer>\n        {!yearPickerMode && (\n          <button className=\"react-datepicker__navigation react-datepicker__navigation--next\" onClick={handleIncreaseMonth} disabled={nextMonthButtonDisabled}>\n            Next month\n          </button>\n        )}\n      </div>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAoBA,IAAMA,oBAAoB,GAAGC,yBAAA,CAAOC,GAAV,giBAcbC,cAAA,CAAOC,WAdM,EAiBtBC,gCAjBsB,EAqBXF,cAAA,CAAOG,WArBI,EAwBXH,cAAA,CAAOG,WAxBI,EA8BXH,cAAA,CAAOG,WA9BI,EAiCXH,cAAA,CAAOG,WAjCI,CAA1B;;AAsCO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,OASF;EAAA,IARjCC,IAQiC,QARjCA,IAQiC;EAAA,IAPjCC,aAOiC,QAPjCA,aAOiC;EAAA,IANjCC,aAMiC,QANjCA,aAMiC;EAAA,IALjCC,uBAKiC,QALjCA,uBAKiC;EAAA,IAJjCC,uBAIiC,QAJjCA,uBAIiC;EAAA,IAHjCC,iBAGiC,QAHjCA,iBAGiC;EAAA,IAFjCC,cAEiC,QAFjCA,cAEiC;EAAA,IADjCC,kBACiC,QADjCA,kBACiC;EACjC,IAAMC,MAAM,GAAG,CAAC,SAAD,EAAY,UAAZ,EAAwB,OAAxB,EAAiC,OAAjC,EAA0C,KAA1C,EAAiD,MAAjD,EAAyD,MAAzD,EAAiE,QAAjE,EAA2E,WAA3E,EAAwF,SAAxF,EAAmG,UAAnG,EAA+G,UAA/G,CAAf;;EACA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAM;IAChC,IAAIC,aAAa,GAAGV,IAAI,CAACW,QAAL,KAAkB,CAAtC;IACA,IAAID,aAAa,GAAG,CAApB,EAAuBA,aAAa,GAAGF,MAAM,CAACI,MAAP,GAAgB,CAAhC;IACvBL,kBAAkB,CAACG,aAAD,CAAlB;IACAT,aAAa;EACd,CALD;;EAOA,IAAMY,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAM;IAChC,IAAIC,SAAS,GAAGd,IAAI,CAACW,QAAL,KAAkB,CAAlC;IACA,IAAIG,SAAS,IAAIN,MAAM,CAACI,MAAP,GAAgB,CAAjC,EAAoCE,SAAS,GAAG,CAAZ;IACpCP,kBAAkB,CAACO,SAAD,CAAlB;IACAZ,aAAa;EACd,CALD;;EAOAa,KAAK,CAACC,SAAN,CAAgB,YAAM;IACpBT,kBAAkB,CAACP,IAAI,CAACW,QAAL,EAAD,CAAlB;EACD,CAFD,EAEG,CAACX,IAAD,CAFH;EAIA,oBACE;IAAA,uBACE;MACE,KAAK,EAAE;QACLiB,OAAO,EAAE,MADJ;QAELC,cAAc,EAAE;MAFX,CADT;MAAA,WAKG,CAACZ,cAAD,iBACC;QAAQ,SAAS,EAAC,qEAAlB;QAAwF,OAAO,EAAEG,mBAAjG;QAAsH,QAAQ,EAAEN,uBAAhI;QAAA;MAAA,EANJ,eAUE,sBAAC,oBAAD;QAAsB,OAAO,EAAE;UAAA,OAAME,iBAAiB,CAAC,CAACC,cAAF,CAAvB;QAAA,CAA/B;QAAA,wBACE;UAAK,SAAS,EAAC,iCAAf;UAAA,oBAAqDE,MAAM,CAACR,IAAI,CAACW,QAAL,EAAD,CAA3D,cAAgFX,IAAI,CAACmB,WAAL,EAAhF;QAAA,EADF,EAEGb,cAAc,gBAAG,qBAAC,wBAAD;UAAa,IAAI,EAAC;QAAlB,EAAH,gBAAiC,qBAAC,0BAAD;UAAe,IAAI,EAAC;QAApB,EAFlD;MAAA,EAVF,EAcG,CAACA,cAAD,iBACC;QAAQ,SAAS,EAAC,iEAAlB;QAAoF,OAAO,EAAEO,mBAA7F;QAAkH,QAAQ,EAAET,uBAA5H;QAAA;MAAA,EAfJ;IAAA;EADF,EADF;AAwBD,CArDM;;;;EAvDLJ,I;EAGAoB,iB;EAGAjB,uB;EACAC,uB;EAGAiB,sB;EACAC,sB;EACAhB,c"}

package/dist/InputFields/DatepickerFieldHeader.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface DatepickerFieldHeaderParams {
     date: Date;
     changeYear(year: number): void;

package/dist/InputFields/DatepickerFieldHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"names":["React","ArrowDropUp","ArrowDropDown","styled","CommonInteractionStyling","COLORS","HeaderLabelContainer","div","neutral_600","primary_600","DatepickerFieldHeader","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","useEffect","display","justifyContent","getFullYear","customHeaderCount","prevYearButtonDisabled","nextYearButtonDisabled"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,WAAT,EAAsBC,aAAtB,QAA2C,kCAA3C;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,wBAAT,QAAyC,WAAzC;AACA,SAA2BC,MAA3B,QAAyC,WAAzC;;;;AAoBA,IAAMC,oBAAoB,GAAGH,MAAM,CAACI,GAAV,khBAcbF,MAAM,CAACG,WAdM,EAiBtBJ,wBAjBsB,EAqBXC,MAAM,CAACI,WArBI,EAwBXJ,MAAM,CAACI,WAxBI,EA8BXJ,MAAM,CAACI,WA9BI,EAiCXJ,MAAM,CAACI,WAjCI,CAA1B;AAsCA,OAAO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,OASF;AAAA,MARjCC,IAQiC,QARjCA,IAQiC;AAAA,MAPjCC,aAOiC,QAPjCA,aAOiC;AAAA,MANjCC,aAMiC,QANjCA,aAMiC;AAAA,MALjCC,uBAKiC,QALjCA,uBAKiC;AAAA,MAJjCC,uBAIiC,QAJjCA,uBAIiC;AAAA,MAHjCC,iBAGiC,QAHjCA,iBAGiC;AAAA,MAFjCC,cAEiC,QAFjCA,cAEiC;AAAA,MADjCC,kBACiC,QADjCA,kBACiC;AACjC,MAAMC,MAAM,GAAG,CAAC,SAAD,EAAY,UAAZ,EAAwB,OAAxB,EAAiC,OAAjC,EAA0C,KAA1C,EAAiD,MAAjD,EAAyD,MAAzD,EAAiE,QAAjE,EAA2E,WAA3E,EAAwF,SAAxF,EAAmG,UAAnG,EAA+G,UAA/G,CAAf;;AACA,MAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAM;AAChC,QAAIC,aAAa,GAAGV,IAAI,CAACW,QAAL,KAAkB,CAAtC;AACA,QAAID,aAAa,GAAG,CAApB,EAAuBA,aAAa,GAAGF,MAAM,CAACI,MAAP,GAAgB,CAAhC;AACvBL,IAAAA,kBAAkB,CAACG,aAAD,CAAlB;AACAT,IAAAA,aAAa;AACd,GALD;;AAOA,MAAMY,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAM;AAChC,QAAIC,SAAS,GAAGd,IAAI,CAACW,QAAL,KAAkB,CAAlC;AACA,QAAIG,SAAS,IAAIN,MAAM,CAACI,MAAP,GAAgB,CAAjC,EAAoCE,SAAS,GAAG,CAAZ;AACpCP,IAAAA,kBAAkB,CAACO,SAAD,CAAlB;AACAZ,IAAAA,aAAa;AACd,GALD;;AAOAb,EAAAA,KAAK,CAAC0B,SAAN,CAAgB,YAAM;AACpBR,IAAAA,kBAAkB,CAACP,IAAI,CAACW,QAAL,EAAD,CAAlB;AACD,GAFD,EAEG,CAACX,IAAD,CAFH;AAIA,sBACE;AAAA,2BACE;AACE,MAAA,KAAK,EAAE;AACLgB,QAAAA,OAAO,EAAE,MADJ;AAELC,QAAAA,cAAc,EAAE;AAFX,OADT;AAAA,iBAKG,CAACX,cAAD,iBACC;AAAQ,QAAA,SAAS,EAAC,qEAAlB;AAAwF,QAAA,OAAO,EAAEG,mBAAjG;AAAsH,QAAA,QAAQ,EAAEN,uBAAhI;AAAA;AAAA,QANJ,eAUE,MAAC,oBAAD;AAAsB,QAAA,OAAO,EAAE;AAAA,iBAAME,iBAAiB,CAAC,CAACC,cAAF,CAAvB;AAAA,SAA/B;AAAA,gCACE;AAAK,UAAA,SAAS,EAAC,iCAAf;AAAA,8BAAqDE,MAAM,CAACR,IAAI,CAACW,QAAL,EAAD,CAA3D,cAAgFX,IAAI,CAACkB,WAAL,EAAhF;AAAA,UADF,EAEGZ,cAAc,gBAAG,KAAC,WAAD;AAAa,UAAA,IAAI,EAAC;AAAlB,UAAH,gBAAiC,KAAC,aAAD;AAAe,UAAA,IAAI,EAAC;AAApB,UAFlD;AAAA,QAVF,EAcG,CAACA,cAAD,iBACC;AAAQ,QAAA,SAAS,EAAC,iEAAlB;AAAoF,QAAA,OAAO,EAAEO,mBAA7F;AAAkH,QAAA,QAAQ,EAAET,uBAA5H;AAAA;AAAA,QAfJ;AAAA;AADF,IADF;AAwBD,CArDM;;AAvDLJ,EAAAA,I;AAGAmB,EAAAA,iB;AAGAhB,EAAAA,uB;AACAC,EAAAA,uB;AAGAgB,EAAAA,sB;AACAC,EAAAA,sB;AACAf,EAAAA,c","sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\nimport { ArrowDropUp, ArrowDropDown } from '../icons/systemicons/SystemIcons';\nimport styled from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { scrollBarStyling, COLORS } from '../styles';\n\nexport interface DatepickerFieldHeaderParams {\n  date: Date;\n  changeYear(year: number): void;\n  changeMonth(month: number): void;\n  customHeaderCount: number;\n  decreaseMonth(): void;\n  increaseMonth(): void;\n  prevMonthButtonDisabled: boolean;\n  nextMonthButtonDisabled: boolean;\n  decreaseYear(): void;\n  increaseYear(): void;\n  prevYearButtonDisabled: boolean;\n  nextYearButtonDisabled: boolean;\n  yearPickerMode: boolean;\n  setYearPickerMode(val: boolean): void;\n  setActiveMonthPage(val: number): void;\n}\n\nconst HeaderLabelContainer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: 10px;\n  cursor: pointer;\n\n  button {\n    background: transparent;\n    padding: 0px;\n    width: auto;\n  }\n\n  svg {\n    color: ${COLORS.neutral_600};\n  }\n\n  ${CommonInteractionStyling}\n\n  &:hover {\n    div {\n      color: ${COLORS.primary_600} !important;\n    }\n    svg {\n      color: ${COLORS.primary_600};\n    }\n  }\n\n  &:active {\n    div {\n      color: ${COLORS.primary_600} !important;\n    }\n    svg {\n      color: ${COLORS.primary_600};\n    }\n  }\n`;\n\nexport const DatepickerFieldHeader = ({\n  date,\n  decreaseMonth,\n  increaseMonth,\n  prevMonthButtonDisabled,\n  nextMonthButtonDisabled,\n  setYearPickerMode,\n  yearPickerMode,\n  setActiveMonthPage,\n}: DatepickerFieldHeaderParams) => {\n  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n  const handleDecreaseMonth = () => {\n    let previousMonth = date.getMonth() - 1;\n    if (previousMonth < 0) previousMonth = months.length - 1;\n    setActiveMonthPage(previousMonth);\n    decreaseMonth();\n  };\n\n  const handleIncreaseMonth = () => {\n    let nextMonth = date.getMonth() + 1;\n    if (nextMonth >= months.length - 1) nextMonth = 0;\n    setActiveMonthPage(nextMonth);\n    increaseMonth();\n  };\n\n  React.useEffect(() => {\n    setActiveMonthPage(date.getMonth());\n  }, [date]);\n\n  return (\n    <>\n      <div\n        style={{\n          display: 'flex',\n          justifyContent: 'center',\n        }}>\n        {!yearPickerMode && (\n          <button className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\n            Prevoius month\n          </button>\n        )}\n        <HeaderLabelContainer onClick={() => setYearPickerMode(!yearPickerMode)}>\n          <div className=\"react-datepicker__current-month\">{`${months[date.getMonth()]} ${date.getFullYear()}`}</div>\n          {yearPickerMode ? <ArrowDropUp size=\"24px\" /> : <ArrowDropDown size=\"24px\" />}\n        </HeaderLabelContainer>\n        {!yearPickerMode && (\n          <button className=\"react-datepicker__navigation react-datepicker__navigation--next\" onClick={handleIncreaseMonth} disabled={nextMonthButtonDisabled}>\n            Next month\n          </button>\n        )}\n      </div>\n    </>\n  );\n};\n"],"file":"DatepickerFieldHeader.js"}
+{"version":3,"file":"DatepickerFieldHeader.js","names":["React","ArrowDropUp","ArrowDropDown","styled","CommonInteractionStyling","COLORS","HeaderLabelContainer","div","neutral_600","primary_600","DatepickerFieldHeader","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","useEffect","display","justifyContent","getFullYear","customHeaderCount","prevYearButtonDisabled","nextYearButtonDisabled"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\nimport { ArrowDropUp, ArrowDropDown } from '../icons/systemicons/SystemIcons';\nimport styled from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { scrollBarStyling, COLORS } from '../styles';\n\nexport interface DatepickerFieldHeaderParams {\n  date: Date;\n  changeYear(year: number): void;\n  changeMonth(month: number): void;\n  customHeaderCount: number;\n  decreaseMonth(): void;\n  increaseMonth(): void;\n  prevMonthButtonDisabled: boolean;\n  nextMonthButtonDisabled: boolean;\n  decreaseYear(): void;\n  increaseYear(): void;\n  prevYearButtonDisabled: boolean;\n  nextYearButtonDisabled: boolean;\n  yearPickerMode: boolean;\n  setYearPickerMode(val: boolean): void;\n  setActiveMonthPage(val: number): void;\n}\n\nconst HeaderLabelContainer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: 10px;\n  cursor: pointer;\n\n  button {\n    background: transparent;\n    padding: 0px;\n    width: auto;\n  }\n\n  svg {\n    color: ${COLORS.neutral_600};\n  }\n\n  ${CommonInteractionStyling}\n\n  &:hover {\n    div {\n      color: ${COLORS.primary_600} !important;\n    }\n    svg {\n      color: ${COLORS.primary_600};\n    }\n  }\n\n  &:active {\n    div {\n      color: ${COLORS.primary_600} !important;\n    }\n    svg {\n      color: ${COLORS.primary_600};\n    }\n  }\n`;\n\nexport const DatepickerFieldHeader = ({\n  date,\n  decreaseMonth,\n  increaseMonth,\n  prevMonthButtonDisabled,\n  nextMonthButtonDisabled,\n  setYearPickerMode,\n  yearPickerMode,\n  setActiveMonthPage,\n}: DatepickerFieldHeaderParams) => {\n  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n  const handleDecreaseMonth = () => {\n    let previousMonth = date.getMonth() - 1;\n    if (previousMonth < 0) previousMonth = months.length - 1;\n    setActiveMonthPage(previousMonth);\n    decreaseMonth();\n  };\n\n  const handleIncreaseMonth = () => {\n    let nextMonth = date.getMonth() + 1;\n    if (nextMonth >= months.length - 1) nextMonth = 0;\n    setActiveMonthPage(nextMonth);\n    increaseMonth();\n  };\n\n  React.useEffect(() => {\n    setActiveMonthPage(date.getMonth());\n  }, [date]);\n\n  return (\n    <>\n      <div\n        style={{\n          display: 'flex',\n          justifyContent: 'center',\n        }}>\n        {!yearPickerMode && (\n          <button className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\n            Prevoius month\n          </button>\n        )}\n        <HeaderLabelContainer onClick={() => setYearPickerMode(!yearPickerMode)}>\n          <div className=\"react-datepicker__current-month\">{`${months[date.getMonth()]} ${date.getFullYear()}`}</div>\n          {yearPickerMode ? <ArrowDropUp size=\"24px\" /> : <ArrowDropDown size=\"24px\" />}\n        </HeaderLabelContainer>\n        {!yearPickerMode && (\n          <button className=\"react-datepicker__navigation react-datepicker__navigation--next\" onClick={handleIncreaseMonth} disabled={nextMonthButtonDisabled}>\n            Next month\n          </button>\n        )}\n      </div>\n    </>\n  );\n};\n"],"mappings":"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"}

package/dist/InputFields/Label.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/Label.tsx"],"names":["Label","styled","label","COLORS","neutral_500","BREAKPOINTS","MEDIUM","LabelRow","div","props","margin","LabelRowInner","size","Size","Small","InputLabel","inputId","text","React","useState","required","setRequired","useEffect","document","getElementById","getAttribute","onTriggerClick","id","click","critical_500"],"mappings":";;;;;;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AACA;;AACA;;;;;;;;;;AAEA;AACA,IAAMA,KAAK,GAAGC,0BAAOC,KAAV,+MACP,qCAAoB,CAApB,EAAuBC,eAAOC,WAA9B,CADO,EAGPC,oBAAYC,MAHL,EAIL,oCAAmB,CAAnB,EAAsBH,eAAOC,WAA7B,CAJK,EAQL,qCAAoB,CAApB,EAAuBD,eAAOC,WAA9B,CARK,EAWL,oCAAmB,CAAnB,EAAsBD,eAAOC,WAA7B,CAXK,CAAX;;AAiBA,IAAMG,QAAQ,GAAGN,0BAAOO,GAAV,+JAIV,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAxD;AAAA,CAJU,CAAd;;AAOA,IAAMC,aAAa,GAAGV,0BAAOO,GAAV,yLAIV,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACG,IAAN,KAAeC,YAAKC,KAApB,GAA4B,KAA5B,GAAoC,KAAhD;AAAA,CAJU,CAAnB,C,CAQA;;;AAQA,IAAMC,UAA+C,GAAG,SAAlDA,UAAkD,OAAiD;AAAA;;AAAA,MAA9CC,OAA8C,QAA9CA,OAA8C;AAAA,MAArCC,IAAqC,QAArCA,IAAqC;AAAA,MAA/BL,IAA+B,QAA/BA,IAA+B;AAAA,MAAzBF,MAAyB,QAAzBA,MAAyB;;AACvG;AACA,wBAAgCQ,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;AAEA;AACF;AACA;;;AACEH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AAAA;;AACpB,QAAI,0BAAAC,QAAQ,CAACC,cAAT,CAAwBR,OAAxB,iFAAkCS,YAAlC,CAA+C,UAA/C,OAA+D,EAAnE,EAAuE;AACrEJ,MAAAA,WAAW,CAAC,IAAD,CAAX;AACD,KAFD,MAEO;AACLA,MAAAA,WAAW,CAAC,KAAD,CAAX;AACD;AACF,GAND,EAMG,2BAACE,QAAQ,CAACC,cAAT,CAAwBR,OAAxB,CAAD,2DAAC,uBAAkCS,YAAlC,CAA+C,UAA/C,CAAD,CANH;AAOA;AACF;AACA;AACA;;AACE,MAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,EAAD,EAAsB;AAAA;;AAC3C,8BAAAJ,QAAQ,CAACC,cAAT,CAAwBG,EAAxB,mFAA6BC,KAA7B;AACD,GAFD;;AAIA,sBACE,qBAAC,QAAD;AAAU,IAAA,MAAM,EAAElB,MAAlB;AAAA,2BACE,sBAAC,aAAD;AAAe,MAAA,IAAI,EAAEE,IAArB;AAAA,iBACGQ,QAAQ,iBAAI,qBAAC,kBAAD,CAAa,QAAb;AAAsB,QAAA,IAAI,EAAC,MAA3B;AAAkC,QAAA,KAAK,EAAEjB,eAAO0B;AAAhD,QADf,eAEE,qBAAC,KAAD;AAAO,QAAA,OAAO,EAAEb,OAAhB;AAAyB,QAAA,OAAO,EAAE;AAAA,iBAAMU,cAAc,CAACV,OAAD,CAApB;AAAA,SAAlC;AAAiE,QAAA,SAAS,EAAEJ,IAAI,IAAI,EAApF;AAAA,kBACGK;AADH,QAFF;AAAA;AADF,IADF;AAUD,CAhCD;;;AANED,EAAAA,O;AACAC,EAAAA,I;AAEAP,EAAAA,M;;eAqCaK,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\nimport { SystemIcons } from '../icons';\n\n// Add component-specific styles.\nconst Label = styled.label`\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  &.small {\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\n  }\n  &.medium {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  pointer-events: none;\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst LabelRowInner = styled.div<{ size: Size.Small | Size.Medium | undefined }>`\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  gap: ${(props) => (props.size === Size.Small ? '2px' : '4px')};\n  align-items: center;\n`;\n\n// Add component-specific types\ntype LabelProps = {\n  inputId: string;\n  text: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin }: LabelProps) => {\n  // Globally used variables within the component\n  const [required, setRequired] = React.useState<boolean>(false);\n\n  /**\n   * Checks if field is set as required and we have to mark it accordingly.\n   */\n  React.useEffect(() => {\n    if (document.getElementById(inputId)?.getAttribute('required') === '') {\n      setRequired(true);\n    } else {\n      setRequired(false);\n    }\n  }, [document.getElementById(inputId)?.getAttribute('required')]);\n  /**\n   * Triggers a click element on a specific element.\n   * @param id - ID of the element which needs to be clicked.\n   */\n  const onTriggerClick = (id: string): void => {\n    document.getElementById(id)?.click();\n  };\n\n  return (\n    <LabelRow margin={margin}>\n      <LabelRowInner size={size}>\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.critical_500} />}\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n          {text}\n        </Label>\n      </LabelRowInner>\n    </LabelRow>\n  );\n};\n\nexport default InputLabel;\n"],"file":"Label.cjs"}
+{"version":3,"file":"Label.cjs","names":["Label","styled","label","ComponentXXSStyling","COLORS","neutral_500","BREAKPOINTS","MEDIUM","ComponentXSStyling","LabelRow","div","props","margin","LabelRowInner","size","Size","Small","InputLabel","inputId","text","React","useState","required","setRequired","useEffect","document","getElementById","getAttribute","onTriggerClick","id","click","critical_500"],"sources":["../../src/InputFields/Label.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\nimport { SystemIcons } from '../icons';\n\n// Add component-specific styles.\nconst Label = styled.label`\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  &.small {\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\n  }\n  &.medium {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  pointer-events: none;\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst LabelRowInner = styled.div<{ size: Size.Small | Size.Medium | undefined }>`\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  gap: ${(props) => (props.size === Size.Small ? '2px' : '4px')};\n  align-items: center;\n`;\n\n// Add component-specific types\ntype LabelProps = {\n  inputId: string;\n  text: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin }: LabelProps) => {\n  // Globally used variables within the component\n  const [required, setRequired] = React.useState<boolean>(false);\n\n  /**\n   * Checks if field is set as required and we have to mark it accordingly.\n   */\n  React.useEffect(() => {\n    if (document.getElementById(inputId)?.getAttribute('required') === '') {\n      setRequired(true);\n    } else {\n      setRequired(false);\n    }\n  }, [document.getElementById(inputId)?.getAttribute('required')]);\n  /**\n   * Triggers a click element on a specific element.\n   * @param id - ID of the element which needs to be clicked.\n   */\n  const onTriggerClick = (id: string): void => {\n    document.getElementById(id)?.click();\n  };\n\n  return (\n    <LabelRow margin={margin}>\n      <LabelRowInner size={size}>\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.critical_500} />}\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n          {text}\n        </Label>\n      </LabelRowInner>\n    </LabelRow>\n  );\n};\n\nexport default InputLabel;\n"],"mappings":";;;;;;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AACA;;AACA;;;;;;;;;;AAEA;AACA,IAAMA,KAAK,GAAGC,yBAAA,CAAOC,KAAV,+MACP,IAAAC,+BAAA,EAAoB,CAApB,EAAuBC,cAAA,CAAOC,WAA9B,CADO,EAGPC,mBAAA,CAAYC,MAHL,EAIL,IAAAC,8BAAA,EAAmB,CAAnB,EAAsBJ,cAAA,CAAOC,WAA7B,CAJK,EAQL,IAAAF,+BAAA,EAAoB,CAApB,EAAuBC,cAAA,CAAOC,WAA9B,CARK,EAWL,IAAAG,8BAAA,EAAmB,CAAnB,EAAsBJ,cAAA,CAAOC,WAA7B,CAXK,CAAX;;AAiBA,IAAMI,QAAQ,GAAGR,yBAAA,CAAOS,GAAV,+JAIV,UAACC,KAAD;EAAA,OAAYA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAxD;AAAA,CAJU,CAAd;;AAOA,IAAMC,aAAa,GAAGZ,yBAAA,CAAOS,GAAV,yLAIV,UAACC,KAAD;EAAA,OAAYA,KAAK,CAACG,IAAN,KAAeC,WAAA,CAAKC,KAApB,GAA4B,KAA5B,GAAoC,KAAhD;AAAA,CAJU,CAAnB,C,CAQA;;;AAQA,IAAMC,UAA+C,GAAG,SAAlDA,UAAkD,OAAiD;EAAA;;EAAA,IAA9CC,OAA8C,QAA9CA,OAA8C;EAAA,IAArCC,IAAqC,QAArCA,IAAqC;EAAA,IAA/BL,IAA+B,QAA/BA,IAA+B;EAAA,IAAzBF,MAAyB,QAAzBA,MAAyB;;EACvG;EACA,sBAAgCQ,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAhC;EAAA;EAAA,IAAOC,QAAP;EAAA,IAAiBC,WAAjB;EAEA;AACF;AACA;;;EACEH,KAAK,CAACI,SAAN,CAAgB,YAAM;IAAA;;IACpB,IAAI,0BAAAC,QAAQ,CAACC,cAAT,CAAwBR,OAAxB,iFAAkCS,YAAlC,CAA+C,UAA/C,OAA+D,EAAnE,EAAuE;MACrEJ,WAAW,CAAC,IAAD,CAAX;IACD,CAFD,MAEO;MACLA,WAAW,CAAC,KAAD,CAAX;IACD;EACF,CAND,EAMG,2BAACE,QAAQ,CAACC,cAAT,CAAwBR,OAAxB,CAAD,2DAAC,uBAAkCS,YAAlC,CAA+C,UAA/C,CAAD,CANH;EAOA;AACF;AACA;AACA;;EACE,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,EAAD,EAAsB;IAAA;;IAC3C,0BAAAJ,QAAQ,CAACC,cAAT,CAAwBG,EAAxB,mFAA6BC,KAA7B;EACD,CAFD;;EAIA,oBACE,qBAAC,QAAD;IAAU,MAAM,EAAElB,MAAlB;IAAA,uBACE,sBAAC,aAAD;MAAe,IAAI,EAAEE,IAArB;MAAA,WACGQ,QAAQ,iBAAI,qBAAC,kBAAD,CAAa,QAAb;QAAsB,IAAI,EAAC,MAA3B;QAAkC,KAAK,EAAElB,cAAA,CAAO2B;MAAhD,EADf,eAEE,qBAAC,KAAD;QAAO,OAAO,EAAEb,OAAhB;QAAyB,OAAO,EAAE;UAAA,OAAMU,cAAc,CAACV,OAAD,CAApB;QAAA,CAAlC;QAAiE,SAAS,EAAEJ,IAAI,IAAI,EAApF;QAAA,UACGK;MADH,EAFF;IAAA;EADF,EADF;AAUD,CAhCD;;;EANED,O;EACAC,I;EAEAP,M;;eAqCaK,U"}

package/dist/InputFields/Label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/Label.tsx"],"names":["React","BREAKPOINTS","COLORS","Size","styled","ComponentXSStyling","ComponentXXSStyling","SystemIcons","Label","label","neutral_500","MEDIUM","LabelRow","div","props","margin","LabelRowInner","size","Small","InputLabel","inputId","text","useState","required","setRequired","useEffect","document","getElementById","getAttribute","onTriggerClick","id","click","critical_500"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\nimport { SystemIcons } from '../icons';\n\n// Add component-specific styles.\nconst Label = styled.label`\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  &.small {\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\n  }\n  &.medium {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  pointer-events: none;\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst LabelRowInner = styled.div<{ size: Size.Small | Size.Medium | undefined }>`\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  gap: ${(props) => (props.size === Size.Small ? '2px' : '4px')};\n  align-items: center;\n`;\n\n// Add component-specific types\ntype LabelProps = {\n  inputId: string;\n  text: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin }: LabelProps) => {\n  // Globally used variables within the component\n  const [required, setRequired] = React.useState<boolean>(false);\n\n  /**\n   * Checks if field is set as required and we have to mark it accordingly.\n   */\n  React.useEffect(() => {\n    if (document.getElementById(inputId)?.getAttribute('required') === '') {\n      setRequired(true);\n    } else {\n      setRequired(false);\n    }\n  }, [document.getElementById(inputId)?.getAttribute('required')]);\n  /**\n   * Triggers a click element on a specific element.\n   * @param id - ID of the element which needs to be clicked.\n   */\n  const onTriggerClick = (id: string): void => {\n    document.getElementById(id)?.click();\n  };\n\n  return (\n    <LabelRow margin={margin}>\n      <LabelRowInner size={size}>\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.critical_500} />}\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n          {text}\n        </Label>\n      </LabelRowInner>\n    </LabelRow>\n  );\n};\n\nexport default InputLabel;\n"],"file":"Label.js"}
+{"version":3,"file":"Label.js","names":["React","BREAKPOINTS","COLORS","Size","styled","ComponentXSStyling","ComponentXXSStyling","SystemIcons","Label","label","neutral_500","MEDIUM","LabelRow","div","props","margin","LabelRowInner","size","Small","InputLabel","inputId","text","useState","required","setRequired","useEffect","document","getElementById","getAttribute","onTriggerClick","id","click","critical_500"],"sources":["../../src/InputFields/Label.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\nimport { SystemIcons } from '../icons';\n\n// Add component-specific styles.\nconst Label = styled.label`\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  &.small {\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\n  }\n  &.medium {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  pointer-events: none;\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst LabelRowInner = styled.div<{ size: Size.Small | Size.Medium | undefined }>`\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  gap: ${(props) => (props.size === Size.Small ? '2px' : '4px')};\n  align-items: center;\n`;\n\n// Add component-specific types\ntype LabelProps = {\n  inputId: string;\n  text: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin }: LabelProps) => {\n  // Globally used variables within the component\n  const [required, setRequired] = React.useState<boolean>(false);\n\n  /**\n   * Checks if field is set as required and we have to mark it accordingly.\n   */\n  React.useEffect(() => {\n    if (document.getElementById(inputId)?.getAttribute('required') === '') {\n      setRequired(true);\n    } else {\n      setRequired(false);\n    }\n  }, [document.getElementById(inputId)?.getAttribute('required')]);\n  /**\n   * Triggers a click element on a specific element.\n   * @param id - ID of the element which needs to be clicked.\n   */\n  const onTriggerClick = (id: string): void => {\n    document.getElementById(id)?.click();\n  };\n\n  return (\n    <LabelRow margin={margin}>\n      <LabelRowInner size={size}>\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.critical_500} />}\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n          {text}\n        </Label>\n      </LabelRowInner>\n    </LabelRow>\n  );\n};\n\nexport default InputLabel;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,WAApC;AACA,SAASC,IAAT,QAAqB,UAArB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,kBAAT,EAA6BC,mBAA7B,QAAwD,sBAAxD;AACA,SAASC,WAAT,QAA4B,UAA5B,C,CAEA;;;;AACA,IAAMC,KAAK,GAAGJ,MAAM,CAACK,KAAV,iMACPH,mBAAmB,CAAC,CAAD,EAAIJ,MAAM,CAACQ,WAAX,CADZ,EAGPT,WAAW,CAACU,MAHL,EAILN,kBAAkB,CAAC,CAAD,EAAIH,MAAM,CAACQ,WAAX,CAJb,EAQLJ,mBAAmB,CAAC,CAAD,EAAIJ,MAAM,CAACQ,WAAX,CARd,EAWLL,kBAAkB,CAAC,CAAD,EAAIH,MAAM,CAACQ,WAAX,CAXb,CAAX;AAiBA,IAAME,QAAQ,GAAGR,MAAM,CAACS,GAAV,iJAIV,UAACC,KAAD;EAAA,OAAYA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAxD;AAAA,CAJU,CAAd;AAOA,IAAMC,aAAa,GAAGZ,MAAM,CAACS,GAAV,2KAIV,UAACC,KAAD;EAAA,OAAYA,KAAK,CAACG,IAAN,KAAed,IAAI,CAACe,KAApB,GAA4B,KAA5B,GAAoC,KAAhD;AAAA,CAJU,CAAnB,C,CAQA;;AAQA,IAAMC,UAA+C,GAAG,SAAlDA,UAAkD,OAAiD;EAAA;;EAAA,IAA9CC,OAA8C,QAA9CA,OAA8C;EAAA,IAArCC,IAAqC,QAArCA,IAAqC;EAAA,IAA/BJ,IAA+B,QAA/BA,IAA+B;EAAA,IAAzBF,MAAyB,QAAzBA,MAAyB;;EACvG;EACA,sBAAgCf,KAAK,CAACsB,QAAN,CAAwB,KAAxB,CAAhC;EAAA;EAAA,IAAOC,QAAP;EAAA,IAAiBC,WAAjB;EAEA;AACF;AACA;;;EACExB,KAAK,CAACyB,SAAN,CAAgB,YAAM;IAAA;;IACpB,IAAI,0BAAAC,QAAQ,CAACC,cAAT,CAAwBP,OAAxB,iFAAkCQ,YAAlC,CAA+C,UAA/C,OAA+D,EAAnE,EAAuE;MACrEJ,WAAW,CAAC,IAAD,CAAX;IACD,CAFD,MAEO;MACLA,WAAW,CAAC,KAAD,CAAX;IACD;EACF,CAND,EAMG,2BAACE,QAAQ,CAACC,cAAT,CAAwBP,OAAxB,CAAD,2DAAC,uBAAkCQ,YAAlC,CAA+C,UAA/C,CAAD,CANH;EAOA;AACF;AACA;AACA;;EACE,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,EAAD,EAAsB;IAAA;;IAC3C,0BAAAJ,QAAQ,CAACC,cAAT,CAAwBG,EAAxB,mFAA6BC,KAA7B;EACD,CAFD;;EAIA,oBACE,KAAC,QAAD;IAAU,MAAM,EAAEhB,MAAlB;IAAA,uBACE,MAAC,aAAD;MAAe,IAAI,EAAEE,IAArB;MAAA,WACGM,QAAQ,iBAAI,KAAC,WAAD,CAAa,QAAb;QAAsB,IAAI,EAAC,MAA3B;QAAkC,KAAK,EAAErB,MAAM,CAAC8B;MAAhD,EADf,eAEE,KAAC,KAAD;QAAO,OAAO,EAAEZ,OAAhB;QAAyB,OAAO,EAAE;UAAA,OAAMS,cAAc,CAACT,OAAD,CAApB;QAAA,CAAlC;QAAiE,SAAS,EAAEH,IAAI,IAAI,EAApF;QAAA,UACGI;MADH,EAFF;IAAA;EADF,EADF;AAUD,CAhCD;;;EANED,O;EACAC,I;EAEAN,M;;AAqCF,eAAeI,UAAf"}

package/dist/InputFields/NumberField.cjs

@@ -45,9 +45,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));