{"version":3,"file":"static/chunks/5082-c14e0b00d57db1c8.js","mappings":"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","sources":["webpack://_N_E/./src/components/DateRangePicker/styles.ts","webpack://_N_E/./src/components/DateRangePicker/index.tsx"],"sourcesContent":["import { type ThemeType } from \"@cruk/cruk-react-components\";\nimport styled from \"styled-components\";\n\nexport const TextInputWrapper = styled.span`\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n\n  fieldset {\n    text-align: left;\n  }\n`;\n\nexport const DatePickerHeightPlaceholder = styled.span`\n  display: block;\n  min-height: 418px;\n`;\n\nexport const StyledDatePickerWrapper = styled.span<{ theme: ThemeType }>`\n  max-width: 400px;\n  margin: 0 auto;\n\n  .react-datepicker {\n    background-color: #fff;\n    color: #000;\n    border: 1px solid #aeaeae;\n    display: inline-block;\n\n    position: absolute;\n    width: 100%;\n    left: 0;\n    @media (min-width: ${({ theme }) => theme.breakpoint.mobile}) {\n      position: relative;\n    }\n  }\n\n  fieldset {\n    margin-bottom: ${({ theme }) => theme.spacing.m};\n  }\n\n  .react-datepicker-wrapper {\n    display: inline-block;\n  }\n  .react-datepicker-popper[data-placement^=\"bottom\"]\n    .react-datepicker__triangle,\n  .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle,\n  .react-datepicker__year-read-view--down-arrow,\n  .react-datepicker__month-read-view--down-arrow,\n  .react-datepicker__month-year-read-view--down-arrow {\n    margin-left: -8px;\n    position: absolute;\n  }\n\n  .react-datepicker-popper[data-placement^=\"bottom\"]\n    .react-datepicker__triangle,\n  .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle,\n  .react-datepicker__year-read-view--down-arrow,\n  .react-datepicker__month-read-view--down-arrow,\n  .react-datepicker__month-year-read-view--down-arrow,\n  .react-datepicker-popper[data-placement^=\"bottom\"]\n    .react-datepicker__triangle::before,\n  .react-datepicker-popper[data-placement^=\"top\"]\n    .react-datepicker__triangle::before,\n  .react-datepicker__year-read-view--down-arrow::before,\n  .react-datepicker__month-read-view--down-arrow::before,\n  .react-datepicker__month-year-read-view--down-arrow::before {\n    box-sizing: content-box;\n    position: absolute;\n    border: 8px solid transparent;\n    height: 0;\n    width: 1px;\n  }\n\n  .react-datepicker-popper[data-placement^=\"bottom\"]\n    .react-datepicker__triangle::before,\n  .react-datepicker-popper[data-placement^=\"top\"]\n    .react-datepicker__triangle::before,\n  .react-datepicker__year-read-view--down-arrow::before,\n  .react-datepicker__month-read-view--down-arrow::before,\n  .react-datepicker__month-year-read-view--down-arrow::before {\n    content: \"\";\n    z-index: -1;\n    border-width: 8px;\n    left: -8px;\n    border-bottom-color: #aeaeae;\n  }\n  .react-datepicker-popper[data-placement^=\"bottom\"]\n    .react-datepicker__triangle {\n    top: 0;\n    margin-top: -8px;\n  }\n  .react-datepicker-popper[data-placement^=\"bottom\"]\n    .react-datepicker__triangle,\n  .react-datepicker-popper[data-placement^=\"bottom\"]\n    .react-datepicker__triangle::before {\n    border-top: none;\n    border-bottom-color: #f0f0f0;\n  }\n\n  .react-datepicker-popper[data-placement^=\"bottom\"]\n    .react-datepicker__triangle::before {\n    top: -1px;\n    border-bottom-color: #aeaeae;\n  }\n  .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle,\n  .react-datepicker__year-read-view--down-arrow,\n  .react-datepicker__month-read-view--down-arrow,\n  .react-datepicker__month-year-read-view--down-arrow {\n    bottom: 0;\n    margin-bottom: -8px;\n  }\n  .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle,\n  .react-datepicker__year-read-view--down-arrow,\n  .react-datepicker__month-read-view--down-arrow,\n  .react-datepicker__month-year-read-view--down-arrow,\n  .react-datepicker-popper[data-placement^=\"top\"]\n    .react-datepicker__triangle::before,\n  .react-datepicker__year-read-view--down-arrow::before,\n  .react-datepicker__month-read-view--down-arrow::before,\n  .react-datepicker__month-year-read-view--down-arrow::before {\n    border-bottom: none;\n    border-top-color: #fff;\n  }\n\n  .react-datepicker-popper[data-placement^=\"top\"]\n    .react-datepicker__triangle::before,\n  .react-datepicker__year-read-view--down-arrow::before,\n  .react-datepicker__month-read-view--down-arrow::before,\n  .react-datepicker__month-year-read-view--down-arrow::before {\n    bottom: -1px;\n    border-top-color: #aeaeae;\n  }\n\n  .react-datepicker--time-only .react-datepicker__triangle {\n    left: 35px;\n  }\n  .react-datepicker--time-only .react-datepicker__time-container {\n    border-left: 0;\n  }\n  .react-datepicker--time-only .react-datepicker__time {\n    border-radius: 0.3rem;\n  }\n  .react-datepicker--time-only .react-datepicker__time-box {\n    border-radius: 0.3rem;\n  }\n  .react-datepicker__triangle {\n    position: absolute;\n    left: 50px;\n  }\n  .react-datepicker-popper {\n    z-index: 1;\n  }\n  .react-datepicker-popper[data-placement^=\"bottom\"] {\n    margin-top: 10px;\n  }\n  .react-datepicker-popper[data-placement^=\"top\"] {\n    margin-bottom: 10px;\n  }\n  .react-datepicker-popper[data-placement^=\"right\"] {\n    margin-left: 8px;\n  }\n  .react-datepicker-popper[data-placement^=\"right\"]\n    .react-datepicker__triangle {\n    left: auto;\n    right: 42px;\n  }\n  .react-datepicker-popper[data-placement^=\"left\"] {\n    margin-right: 8px;\n  }\n  .react-datepicker-popper[data-placement^=\"left\"] .react-datepicker__triangle {\n    left: 42px;\n    right: auto;\n  }\n\n  .react-datepicker__header {\n    text-align: center;\n    background-color: #f0f0f0;\n    border-bottom: 1px solid #aeaeae;\n    border-top-left-radius: 0.3rem;\n    border-top-right-radius: 0.3rem;\n    padding-top: 8px;\n    position: relative;\n  }\n  .react-datepicker__header--time {\n    padding-bottom: 8px;\n    padding-left: 5px;\n    padding-right: 5px;\n  }\n  .react-datepicker__year-dropdown-container--select,\n  .react-datepicker__month-dropdown-container--select,\n  .react-datepicker__month-year-dropdown-container--select,\n  .react-datepicker__year-dropdown-container--scroll,\n  .react-datepicker__month-dropdown-container--scroll,\n  .react-datepicker__month-year-dropdown-container--scroll {\n    display: inline-block;\n    margin: 0 2px;\n  }\n  .react-datepicker__current-month,\n  .react-datepicker-time__header,\n  .react-datepicker-year-header {\n    margin-top: 0;\n    color: ${({ theme }: { theme: ThemeType }) => theme.colors.textDark};\n    font-family: ${({ theme }: { theme: ThemeType }) =>\n      theme.typography.fontFamilyHeadings};\n    font-size: ${({ theme }: { theme: ThemeType }) => theme.fontSizes.l};\n  }\n  .react-datepicker-time__header {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n  }\n  .react-datepicker__navigation {\n    background: none;\n    line-height: 1.7rem;\n    text-align: center;\n    cursor: pointer;\n    position: absolute;\n    top: 10px;\n    width: 0;\n    padding: 0;\n    border: 0.45rem solid transparent;\n    z-index: 1;\n    height: 10px;\n    width: 10px;\n    text-indent: -999em;\n    overflow: hidden;\n  }\n\n  .react-datepicker__navigation--previous {\n    left: 10px;\n    border-right-color: #333;\n  }\n  .react-datepicker__navigation--previous:hover {\n    border-right-color: #555;\n  }\n  .react-datepicker__navigation--previous--disabled,\n  .react-datepicker__navigation--previous--disabled:hover {\n    border-right-color: #e6e6e6;\n    cursor: default;\n  }\n  .react-datepicker__navigation--next {\n    right: 10px;\n    border-left-color: #333;\n  }\n  .react-datepicker__navigation--next--with-time:not(\n      .react-datepicker__navigation--next--with-today-button\n    ) {\n    right: 80px;\n  }\n  .react-datepicker__navigation--next:hover {\n    border-left-color: #555;\n  }\n  .react-datepicker__navigation--next--disabled,\n  .react-datepicker__navigation--next--disabled:hover {\n    border-left-color: #e6e6e6;\n    cursor: default;\n  }\n  .react-datepicker__navigation--years {\n    position: relative;\n    top: 0;\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .react-datepicker__navigation--years-previous {\n    top: 4px;\n    border-top-color: #ccc;\n  }\n  .react-datepicker__navigation--years-previous:hover {\n    border-top-color: #b3b3b3;\n  }\n  .react-datepicker__navigation--years-upcoming {\n    top: -4px;\n    border-bottom-color: #ccc;\n  }\n  .react-datepicker__navigation--years-upcoming:hover {\n    border-bottom-color: #b3b3b3;\n  }\n  .react-datepicker__month-container {\n    float: left;\n    width: 100%;\n  }\n  .react-datepicker__month {\n    margin: 0;\n    text-align: center;\n  }\n  .react-datepicker__month .react-datepicker__month-text {\n    display: inline-block;\n    width: 4rem;\n    margin: 2px;\n  }\n\n  .react-datepicker__week-number {\n    color: #ccc;\n    display: inline-block;\n    width: 1.7rem;\n    line-height: 1.7rem;\n    text-align: center;\n    margin: 0.166rem;\n  }\n  .react-datepicker__week-number.react-datepicker__week-number--clickable {\n    cursor: pointer;\n  }\n  .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {\n    border-radius: 0.3rem;\n    background-color: #f0f0f0;\n  }\n  .react-datepicker__day-names,\n  .react-datepicker__week {\n    white-space: nowrap;\n  }\n  .react-datepicker__day-name,\n  .react-datepicker__day,\n  .react-datepicker__time-name {\n    color: ${({ theme }: { theme: ThemeType }) => theme.colors.textDark};\n    display: inline-block;\n    width: 14%;\n    line-height: ${({ theme }: { theme: ThemeType }) => theme.spacing.m};\n    text-align: center;\n    margin: ${({ theme }: { theme: ThemeType }) => theme.spacing.xxs} 0;\n  }\n\n  .react-datepicker__day {\n    border-width: 4px;\n    border-style: solid;\n    border-color: transparent;\n  }\n\n  .react-datepicker__day:focus,\n  .react-datepicker__day:hover {\n    border-color: ${({ theme }: { theme: ThemeType }) =>\n      theme.name === \"su2c\" ? theme.colors.tertiary : theme.colors.secondary};\n  }\n\n  .react-datepicker__month--selected,\n  .react-datepicker__month--in-selecting-range,\n  .react-datepicker__month--in-range {\n    border-radius: 0.3rem;\n    background-color: #00007e;\n    color: #fff;\n  }\n  .react-datepicker__month--selected:hover,\n  .react-datepicker__month--in-selecting-range:hover,\n  .react-datepicker__month--in-range:hover {\n    background-color: #00007e;\n  }\n  .react-datepicker__month--disabled {\n    color: #ccc;\n    pointer-events: none;\n  }\n  .react-datepicker__month--disabled:hover {\n    cursor: default;\n    background-color: transparent;\n  }\n  .react-datepicker__day,\n  .react-datepicker__month-text {\n    cursor: pointer;\n  }\n  .react-datepicker__day:hover,\n  .react-datepicker__month-text:hover {\n    /* background-color: #f0f0f0; */\n  }\n  .react-datepicker__day--today,\n  .react-datepicker__month-text--today {\n    font-weight: bold;\n  }\n  .react-datepicker__day--highlighted,\n  .react-datepicker__month-text--highlighted {\n    border-radius: 0.3rem;\n    background-color: #3dcc4a;\n    color: #fff;\n  }\n  .react-datepicker__day--highlighted:hover,\n  .react-datepicker__month-text--highlighted:hover {\n    background-color: #32be3f;\n  }\n\n  .react-datepicker__day--highlighted-custom-1,\n  .react-datepicker__month-text--highlighted-custom-1 {\n    color: magenta;\n  }\n  .react-datepicker__day--highlighted-custom-2,\n  .react-datepicker__month-text--highlighted-custom-2 {\n    color: green;\n  }\n\n  .react-datepicker__day--selected,\n  .react-datepicker__day--in-selecting-range,\n  .react-datepicker__day--in-range {\n    background-color: ${({ theme }: { theme: ThemeType }) =>\n      theme.tokenColors.grey_200};\n    color: ${({ theme }: { theme: ThemeType }) => theme.colors.textDark};\n  }\n  .react-datepicker__day--selected:hover,\n  .react-datepicker__day--in-selecting-range:hover,\n  .react-datepicker__day--in-range:hover {\n    background-color: ${({ theme }: { theme: ThemeType }) =>\n      theme.colors.primary};\n    color: ${({ theme }: { theme: ThemeType }) => theme.colors.textOnPrimary};\n  }\n\n  .react-datepicker__day--in-selecting-range,\n  .react-datepicker__month-text--in-selecting-range {\n    background-color: ${({ theme }: { theme: ThemeType }) =>\n      theme.tokenColors.grey_200};\n    color: ${({ theme }: { theme: ThemeType }) => theme.colors.textDark};\n  }\n\n  .react-datepicker__day--selecting-range-start.react-datepicker__day--in-selecting-range {\n    background-color: ${({ theme }: { theme: ThemeType }) =>\n      theme.colors.primary};\n    color: ${({ theme }: { theme: ThemeType }) => theme.colors.textOnPrimary};\n  }\n\n  .react-datepicker__day--disabled,\n  .react-datepicker__month-text--disabled {\n    cursor: default;\n    color: #ccc;\n  }\n  .react-datepicker__day--disabled:hover,\n  .react-datepicker__month-text--disabled:hover {\n    background-color: transparent;\n  }\n\n  .react-datepicker__day--range-start,\n  .react-datepicker__day--range-end {\n    background-color: ${({ theme }: { theme: ThemeType }) =>\n      theme.colors.primary};\n    color: ${({ theme }: { theme: ThemeType }) => theme.colors.textOnPrimary};\n  }\n\n  .react-datepicker__month-text.react-datepicker__month--selected:hover,\n  .react-datepicker__month-text.react-datepicker__month--in-range:hover {\n    background-color: ${({ theme }: { theme: ThemeType }) =>\n      theme.colors.primary};\n    color: ${({ theme }: { theme: ThemeType }) => theme.colors.textOnPrimary};\n  }\n  .react-datepicker__month-text:hover {\n    background-color: #f0f0f0;\n  }\n  .react-datepicker__input-container {\n    position: relative;\n    display: inline-block;\n\n    input {\n      font-size: ${({ theme }: { theme: ThemeType }) => theme.fontSizes.m};\n      padding: ${({ theme }: { theme: ThemeType }) => theme.spacing.xxs};\n      margin: ${({ theme }: { theme: ThemeType }) => `${theme.spacing.xs} 0`};\n\n      width: 8em;\n    }\n  }\n\n  .react-datepicker__year-read-view,\n  .react-datepicker__month-read-view,\n  .react-datepicker__month-year-read-view {\n    border: 1px solid transparent;\n  }\n  .react-datepicker__year-read-view:hover,\n  .react-datepicker__month-read-view:hover,\n  .react-datepicker__month-year-read-view:hover {\n    cursor: pointer;\n  }\n  .react-datepicker__year-read-view:hover,\n  .react-datepicker__month-read-view:hover,\n  .react-datepicker__month-year-read-view:hover {\n    .react-datepicker__year-read-view--down-arrow,\n    .react-datepicker__month-read-view--down-arrow {\n      border-top-color: #b3b3b3;\n    }\n  }\n  .react-datepicker__year-read-view--down-arrow,\n  .react-datepicker__month-read-view--down-arrow,\n  .react-datepicker__month-year-read-view--down-arrow {\n    border-top-color: #ccc;\n    float: right;\n    margin-left: 20px;\n    top: 8px;\n    position: relative;\n    border-width: 0.45rem;\n  }\n  .react-datepicker__year-dropdown,\n  .react-datepicker__month-dropdown,\n  .react-datepicker__month-year-dropdown {\n    background-color: #f0f0f0;\n    position: absolute;\n    width: 50%;\n    left: 25%;\n    top: 30px;\n    z-index: 1;\n    text-align: center;\n    border-radius: 0.3rem;\n    border: 1px solid #aeaeae;\n  }\n\n  .react-datepicker__year-dropdown:hover,\n  .react-datepicker__month-dropdown:hover,\n  .react-datepicker__month-year-dropdown:hover {\n    cursor: pointer;\n  }\n  .react-datepicker__year-dropdown--scrollable,\n  .react-datepicker__month-dropdown--scrollable,\n  .react-datepicker__month-year-dropdown--scrollable {\n    height: 150px;\n    overflow-y: scroll;\n  }\n  .react-datepicker__year-option,\n  .react-datepicker__month-option,\n  .react-datepicker__month-year-option {\n    line-height: 20px;\n    width: 100%;\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .react-datepicker__year-option:first-of-type,\n  .react-datepicker__month-option:first-of-type,\n  .react-datepicker__month-year-option:first-of-type {\n    border-top-left-radius: 0.3rem;\n    border-top-right-radius: 0.3rem;\n  }\n  .react-datepicker__year-option:last-of-type,\n  .react-datepicker__month-option:last-of-type,\n  .react-datepicker__month-year-option:last-of-type {\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    border-bottom-left-radius: 0.3rem;\n    border-bottom-right-radius: 0.3rem;\n  }\n  .react-datepicker__year-option:hover,\n  .react-datepicker__month-option:hover,\n  .react-datepicker__month-year-option:hover {\n    background-color: #ccc;\n  }\n  .react-datepicker__year-option:hover,\n  .react-datepicker__month-option:hover,\n  .react-datepicker__month-year-option:hover {\n    .react-datepicker__navigation--years-upcoming {\n      border-bottom-color: #b3b3b3;\n    }\n  }\n  .react-datepicker__year-option:hover,\n  .react-datepicker__month-option:hover,\n  .react-datepicker__month-year-option:hover {\n    .react-datepicker__navigation--years-previous {\n      border-top-color: #b3b3b3;\n    }\n  }\n  .react-datepicker__year-option--selected,\n  .react-datepicker__month-option--selected,\n  .react-datepicker__month-year-option--selected {\n    position: absolute;\n    left: 15px;\n  }\n\n  .react-datepicker__close-icon {\n    background-color: transparent;\n    border: 0;\n    cursor: pointer;\n    outline: 0;\n    padding: 0;\n    vertical-align: middle;\n    position: absolute;\n    height: 16px;\n    width: 16px;\n    top: 25%;\n    right: 7px;\n\n    &:after {\n      background-color: #00007e;\n      border-radius: 50%;\n      bottom: 0;\n      box-sizing: border-box;\n      color: #fff;\n      content: \"×\";\n      cursor: pointer;\n      font-size: 12px;\n      height: 16px;\n      width: 16px;\n      line-height: 1;\n      margin: -8px auto 0;\n      padding: 2px;\n      position: absolute;\n      right: 0px;\n      text-align: center;\n    }\n  }\n  /* screen reader only */\n  .react-datepicker__aria-live {\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    height: 1px;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n`;\n","import React, {\n  useState,\n  type Dispatch,\n  type SetStateAction,\n  type FocusEvent,\n  type ChangeEvent,\n  useEffect,\n  type ChangeEventHandler,\n  type FocusEventHandler,\n} from \"react\";\nimport dynamic from \"next/dynamic\";\nimport { format, parseISO } from \"date-fns\";\n\nimport { DateField } from \"@cruk/cruk-react-components\";\n\nimport { isValidDate } from \"@fwa/src/utils/timeUtils\";\nimport { prefixSingleWithZero } from \"@fwa/src/utils/formatUtils\";\n\nimport {\n  StyledDatePickerWrapper,\n  TextInputWrapper,\n  DatePickerHeightPlaceholder,\n} from \"./styles\";\n\nconst ReactDatePicker = dynamic(\n  // @ts-expect-error dynamic +'react-datepicker' can't find types, standard import is fine, inference is fine\n  () => import(\"react-datepicker\"),\n  {\n    ssr: false,\n  },\n);\n\nexport type DateDataType = {\n  startDay: string | null;\n  startMonth: string | null;\n  startYear: string | null;\n  endDay: string | null;\n  endMonth: string | null;\n  endYear: string | null;\n};\n\nexport type StartAndEndDateType = {\n  startDate?: Date | null;\n  endDate?: Date | null;\n};\n\ntype DateRangePickerProps = {\n  /** initial selected date or start date for selected range */\n  startDate?: Date;\n  /** end date for selected range */\n  endDate?: Date;\n  /** if using external state and deferring validation to a form library with an external state, this prevents default validation */\n  dateState?: DateDataType;\n  /** The legend text wrapping the start date day-month-year group */\n  startDateLabel?: string;\n  /** The legend text wrapping the end date day-month-year group */\n  endDateLabel?: string;\n  /** custom text in between the legend text and the text input of the start date */\n  startDateHint?: string;\n  /** custom text in between the legend text and the text input of the end date */\n  endDateHint?: string;\n  /** min date selectable in the calendar view, when not using external state and validation messages are used also effects validation messages for text input */\n  minDate?: Date;\n  /** max date selectable in the calendar view, when not using external and validation messages are used also effects validation messages for text input */\n  maxDate?: Date;\n  /** allows date or date range to be unset, when not using external and validation messages are used also effects validation messages for text input */\n  allowNullDate?: boolean;\n  /** callback for when date or date range is selected in calendar view, this is needed as calendar view selection doesn't trigger a change event */\n  setCurrentValue: (selection: Date | StartAndEndDateType) => void;\n  /** call back for external components to know if date selection is invalid */\n  setIsDateRangeValid?:\n    | Dispatch<SetStateAction<boolean>>\n    | ((hasError: boolean) => void);\n  /** toggle of calendar input only view */\n  hideTextInput?: boolean;\n  /** toggle of date or date range selection */\n  isDateRange?: boolean;\n  /** if using external state and deferring validation to a form library exposing change handler for start date, this prevents default validation */\n  onChangeStartDate?: ChangeEventHandler<HTMLInputElement> | undefined;\n  /** if using external state and deferring validation to a form library exposing blur handler for start date, this prevents default validation */\n  onBlurStartDate?: FocusEventHandler<HTMLInputElement> | undefined;\n  /** if using external state and deferring validation to a form library exposing focus handler usefull for preventing error messages until user has entered a full date */\n  onFocusStartDate?: FocusEventHandler<HTMLInputElement> | undefined;\n  /** if using external state and deferring validation to a form library exposing change handler for end date, this prevents default validation */\n  onChangeEndDate?: ChangeEventHandler<HTMLInputElement> | undefined;\n  /** if using external state and deferring validation to a form library exposing blur handler for start date, this prevents default validation */\n  onBlurEndDate?: FocusEventHandler<HTMLInputElement> | undefined;\n  /** if using external state and deferring validation to a form library exposing focus handler usefull for preventing error messages until user has entered a full date */\n  onFocusEndDate?: FocusEventHandler<HTMLInputElement> | undefined;\n  /** if using external state and deferring validation to a form library pass error message back into component for start date */\n  errorMessageStart?: string;\n  /** if using external state and deferring validation to a form library pass error message back into component for end date */\n  errorMessageEnd?: string;\n};\n\n/** Component for selecting a date or date range with a calendar input, or a calendar input with optional date input fields, has default state management and validation but can this can be deferred to an external form and validation library */\nexport const DateRangePicker = ({\n  startDate: startDateProps,\n  endDate: endDateProps,\n  dateState,\n  startDateLabel = \"start date\",\n  endDateLabel = \"end date\",\n  startDateHint = `For example 31 10 ${new Date().getFullYear()}`,\n  endDateHint = `For example 31 11 ${new Date().getFullYear()}`,\n  minDate,\n  maxDate,\n  allowNullDate,\n  setCurrentValue,\n  setIsDateRangeValid,\n  isDateRange = true,\n  hideTextInput = false,\n  onChangeStartDate,\n  onBlurStartDate,\n  onFocusStartDate,\n  onChangeEndDate,\n  onBlurEndDate,\n  onFocusEndDate,\n  errorMessageStart,\n  errorMessageEnd,\n}: DateRangePickerProps) => {\n  const [dateData, setDateData] = useState<DateDataType>({\n    startDay: `${\n      startDateProps\n        ? prefixSingleWithZero(startDateProps.getDate().toString())\n        : \"\"\n    }`,\n    startMonth: `${\n      startDateProps\n        ? prefixSingleWithZero(`${startDateProps.getMonth() + 1}`)\n        : \"\"\n    }`,\n    startYear: `${startDateProps ? startDateProps.getFullYear() : \"\"}`,\n    endDay: `${\n      endDateProps\n        ? prefixSingleWithZero(endDateProps.getDate().toString())\n        : \"\"\n    }`,\n    endMonth: `${\n      endDateProps ? prefixSingleWithZero(`${endDateProps.getMonth() + 1}`) : \"\"\n    }`,\n    endYear: `${endDateProps ? endDateProps.getFullYear() : \"\"}`,\n  });\n  // These additional state are need for the range picker to work\n  const [startDateState, setStartDateState] = useState(startDateProps);\n  const [endDateState, setEndDateState] = useState(endDateProps);\n\n  // This is not ideal, because internal features like change of text fields and range selections can set date\n  // date range is handled as internal state, so change in external props doesn't update date selection after first render\n  // this use effect listens for change in props and makes sure that the change is propergated though internal state.\n  useEffect(() => {\n    if (startDateState !== startDateProps || endDateState !== endDateProps) {\n      setStartDateState(startDateProps);\n      setEndDateState(endDateProps);\n    }\n  }, [startDateProps, endDateProps]);\n\n  const [startDateValidationMessage, setStartDateValidationMessage] =\n    useState<string>(\"\");\n  const [endDateValidationMessage, setEndDateValidationMessage] =\n    useState<string>(\"\");\n\n  const getDatesFromState = (): {\n    startDate: Date;\n    endDate: Date;\n    startValid: boolean;\n    endValid: boolean;\n  } => {\n    const startDateFromState = parseISO(\n      `${dateData.startYear || \"\"}-${prefixSingleWithZero(\n        dateData.startMonth || \"\",\n      )}-${prefixSingleWithZero(dateData.startDay || \"\")}`,\n    );\n    const endDateFromState = parseISO(\n      `${dateData.endYear || \"\"}-${prefixSingleWithZero(\n        dateData.endMonth || \"\",\n      )}-${prefixSingleWithZero(dateData.endDay || \"\")}`,\n    );\n    const startValid = isValidDate(startDateFromState);\n    const endValid = isValidDate(endDateFromState);\n    return {\n      startDate: startDateFromState,\n      endDate: endDateFromState,\n      startValid,\n      endValid,\n    };\n  };\n\n  const handeleDateChanged = (event: ChangeEvent<HTMLInputElement>) => {\n    const input = event.target;\n    setDateData({\n      ...dateData,\n      [`${input.name}`]: input.value,\n    });\n    setStartDateValidationMessage(\"\");\n    setEndDateValidationMessage(\"\");\n  };\n\n  // validate start date  on blur\n  const handleStartDateBlur = (event: FocusEvent<HTMLInputElement>) => {\n    const input = event.target;\n    //  automatically set end date to start date if it doesn't exist\n    setDateData({\n      ...dateData,\n      [`${input.name}`]: prefixSingleWithZero(input.value),\n      [`endDay`]:\n        dateData.endDay ||\n        (dateData.startDay &&\n          dateData.startMonth &&\n          dateData.startYear &&\n          prefixSingleWithZero(dateData.startDay)),\n      [`endMonth`]:\n        dateData.endMonth ||\n        (dateData.startDay &&\n          dateData.startMonth &&\n          dateData.startYear &&\n          prefixSingleWithZero(dateData.startMonth)),\n      [`endYear`]:\n        dateData.endYear ||\n        (dateData.startDay &&\n          dateData.startMonth &&\n          dateData.startYear &&\n          prefixSingleWithZero(dateData.startYear)),\n    });\n\n    validateAndSetStartDate();\n  };\n\n  const validateAndSetStartDate = () => {\n    const { startDate, endDate, startValid, endValid } = getDatesFromState();\n    if (startValid) {\n      setStartDateState(startDate);\n    }\n    //  automatically set end date to start date if it doesn't exist\n\n    if (endValid) {\n      setEndDateState(endDate);\n    } else if (startValid) {\n      setEndDateState(startDate);\n    }\n\n    const emptyAndAllowed =\n      allowNullDate &&\n      !`${dateData.startDay || \"\"}${dateData.startMonth || \"\"}${\n        dateData.startYear || \"\"\n      }${dateData.endDay || \"\"}${dateData.endMonth || \"\"}${\n        dateData.endYear || \"\"\n      }`.trim().length;\n\n    if (!emptyAndAllowed && (!startDate || !startValid)) {\n      setStartDateValidationMessage(\n        `Please enter a valid ${\n          isDateRange ? startDateLabel : \"date\"\n        } with DD MM YYYY`,\n      );\n    } else if (isDateRange && endDate && startDate > endDate) {\n      setEndDateValidationMessage(\n        `The ${startDateLabel} must be same as or before the ${endDateLabel.replace(\"(optional)\", \"\")}`,\n      );\n    } else if (minDate && startDate < minDate) {\n      setStartDateValidationMessage(\n        `The ${\n          isDateRange ? startDateLabel : \"date\"\n        } must be after ${format(minDate, \"dd/MM/yyyy\")}`,\n      );\n    } else if (maxDate && startDate > maxDate) {\n      setStartDateValidationMessage(\n        `The ${\n          isDateRange ? startDateLabel : \"date\"\n        } must be before ${format(maxDate, \"dd/MM/yyyy\")}`,\n      );\n    } else if (isDateRange) {\n      setEndDateValidationMessage(\"\");\n      setStartDateValidationMessage(\"\");\n      setCurrentValue({\n        startDate: startValid ? startDate : undefined,\n        endDate: endValid ? endDate : startValid ? startDate : undefined,\n      });\n    } else if (!isDateRange) {\n      setEndDateValidationMessage(\"\");\n      setStartDateValidationMessage(\"\");\n      setCurrentValue(startDate);\n    }\n  };\n\n  // validate end date on blur\n  const handleEndDateBlur = (event: FocusEvent<HTMLInputElement>) => {\n    const input = event.target;\n    setDateData({\n      ...dateData,\n      [`${input.name}`]: prefixSingleWithZero(input.value),\n    });\n\n    validateAndSetEndDate();\n  };\n\n  const validateAndSetEndDate = () => {\n    const { startDate, endDate, startValid, endValid } = getDatesFromState();\n    if (startValid) {\n      setStartDateState(startDate);\n    }\n    if (endValid) {\n      setEndDateState(endDate);\n    }\n\n    const emptyAndAllowed =\n      allowNullDate &&\n      !`${dateData.endDay || \"\"}${dateData.endMonth || \"\"}${\n        dateData.endYear || \"\"\n      }`.trim().length;\n\n    if (emptyAndAllowed) setEndDateState(startDate);\n\n    if (!startValid && endValid) {\n      setEndDateValidationMessage(\"Start date is required\");\n    } else if (!emptyAndAllowed && !endValid) {\n      setEndDateValidationMessage(\n        \"Please enter a valid end date with DD MM YYYY\",\n      );\n    } else if (startDate && startDate > endDate) {\n      setEndDateValidationMessage(\n        `The ${startDateLabel} must be same as or before the ${endDateLabel.replace(\"(optional)\", \"\")}`,\n      );\n    } else if (endDate && minDate && endDate < minDate) {\n      setEndDateValidationMessage(\n        `The ${endDateLabel.replace(\"(optional)\", \"\")} must be after ${format(minDate, \"dd/MM/yyyy\")}`,\n      );\n    } else if (endDate && maxDate && endDate > maxDate) {\n      setEndDateValidationMessage(\n        `The ${endDateLabel.replace(\"(optional)\", \"\")} must be before ${format(maxDate, \"dd/MM/yyyy\")}`,\n      );\n    } else {\n      setEndDateValidationMessage(\"\");\n      setCurrentValue({\n        startDate: startValid ? startDate : undefined,\n        endDate: endValid ? endDate : undefined,\n      });\n    }\n  };\n\n  const rangePicked = (date: [Date | null, Date | null]) => {\n    const [start, end] = date;\n    setStartDateValidationMessage(\"\");\n    setEndDateValidationMessage(\"\");\n    setStartDateState(start || undefined);\n    setEndDateState(end || undefined);\n    setDateData({\n      startDay: `${start ? start.getDate() : \"\"}`,\n      startMonth: `${start ? start.getMonth() + 1 : \"\"}`,\n      startYear: `${start ? start.getFullYear() : \"\"}`,\n      endDay: `${end ? end.getDate() : \"\"}`,\n      endMonth: `${end ? end.getMonth() + 1 : \"\"}`,\n      endYear: `${end ? end.getFullYear() : \"\"}`,\n    });\n    setCurrentValue({ startDate: start, endDate: end });\n  };\n\n  const datePicked = (date: Date | null) => {\n    setStartDateValidationMessage(\"\");\n    setEndDateValidationMessage(\"\");\n    setStartDateState(date || undefined);\n    setEndDateState(date || undefined);\n    setDateData({\n      startDay: `${date ? date.getDate() : \"\"}`,\n      startMonth: `${date ? date.getMonth() + 1 : \"\"}`,\n      startYear: `${date ? date.getFullYear() : \"\"}`,\n      endDay: `${date ? date.getDate() : \"\"}`,\n      endMonth: `${date ? date.getMonth() + 1 : \"\"}`,\n      endYear: `${date ? date.getFullYear() : \"\"}`,\n    });\n    if (!date) {\n      return;\n    }\n    setCurrentValue(date);\n  };\n\n  // we don't want to show the error message\n  // when people are still hopping from date to month to year\n  const handleStartDateFocus = () => {\n    setStartDateValidationMessage(\"\");\n  };\n  const handleEndDateFocus = () => {\n    setEndDateValidationMessage(\"\");\n  };\n\n  useEffect(() => {\n    const invalid =\n      startDateValidationMessage.length || !!endDateValidationMessage.length;\n    if (setIsDateRangeValid) {\n      setIsDateRangeValid(!invalid);\n    }\n  }, [\n    startDateValidationMessage,\n    endDateValidationMessage,\n    setIsDateRangeValid,\n  ]);\n\n  return (\n    <StyledDatePickerWrapper>\n      {!hideTextInput && (\n        <TextInputWrapper>\n          <DateField\n            dayName=\"startDay\"\n            monthName=\"startMonth\"\n            yearName=\"startYear\"\n            hintText={startDateHint}\n            day={dateState ? dateState.startDay || \"\" : dateData.startDay || \"\"}\n            month={\n              dateState ? dateState.startMonth || \"\" : dateData.startMonth || \"\"\n            }\n            year={\n              dateState ? dateState.startYear || \"\" : dateData.startYear || \"\"\n            }\n            label={startDateLabel ?? \"\"}\n            onChange={onChangeStartDate || handeleDateChanged}\n            onBlur={onBlurStartDate || handleStartDateBlur}\n            onFocus={onFocusStartDate || handleStartDateFocus}\n            errorMessage={errorMessageStart || startDateValidationMessage}\n          />\n          {isDateRange && (\n            <DateField\n              dayName=\"endDay\"\n              monthName=\"endMonth\"\n              yearName=\"endYear\"\n              hintText={endDateHint}\n              day={dateState ? dateState.endDay || \"\" : dateData.endDay || \"\"}\n              month={\n                dateState ? dateState.endMonth || \"\" : dateData.endMonth || \"\"\n              }\n              year={\n                dateState ? dateState.endYear || \"\" : dateData.endYear || \"\"\n              }\n              label={endDateLabel ?? \"\"}\n              onChange={onChangeEndDate || handeleDateChanged}\n              onBlur={onBlurEndDate || handleEndDateBlur}\n              onFocus={onFocusEndDate || handleEndDateFocus}\n              errorMessage={errorMessageEnd || endDateValidationMessage}\n            />\n          )}\n        </TextInputWrapper>\n      )}\n      <DatePickerHeightPlaceholder>\n        {isDateRange ? (\n          <ReactDatePicker\n            onChange={rangePicked}\n            selectsRange={true}\n            selected={startDateState}\n            startDate={startDateState}\n            endDate={endDateState}\n            inline\n            aria-label={\"pick a date range\"}\n            minDate={minDate}\n            maxDate={maxDate}\n            // locale=\"en-GB\"\n            selectsMultiple={undefined}\n          />\n        ) : (\n          <ReactDatePicker\n            onChange={datePicked}\n            selected={startDateState}\n            startDate={startDateState}\n            endDate={startDateState}\n            inline\n            aria-label={\"pick a date\"}\n            minDate={minDate}\n            maxDate={maxDate}\n            // locale=\"en-GB\"\n            selectsMultiple={undefined}\n          />\n        )}\n      </DatePickerHeightPlaceholder>\n    </StyledDatePickerWrapper>\n  );\n};\n\nexport default DateRangePicker;\n"],"names":["TextInputWrapper","styled","span","theme","breakpoint","mobile","spacing","m","colors","textDark","typography","fontFamilyHeadings","fontSizes","l","xxs","name","tertiary","secondary","tokenColors","grey_200","primary","textOnPrimary","xs","dynamic","ssr","DateRangePicker","startDate","startDateProps","endDate","endDateProps","dateState","startDateLabel","endDateLabel","startDateHint","Date","getFullYear","endDateHint","minDate","maxDate","allowNullDate","setCurrentValue","setIsDateRangeValid","isDateRange","hideTextInput","onChangeStartDate","onBlurStartDate","onFocusStartDate","onChangeEndDate","onBlurEndDate","onFocusEndDate","errorMessageStart","errorMessageEnd","dateData","setDateData","useState","startDay","prefixSingleWithZero","getDate","toString","startMonth","getMonth","startYear","endDay","endMonth","endYear","startDateState","setStartDateState","endDateState","setEndDateState","useEffect","startDateValidationMessage","setStartDateValidationMessage","endDateValidationMessage","setEndDateValidationMessage","getDatesFromState","startDateFromState","parseISO","endDateFromState","startValid","isValidDate","endValid","handeleDateChanged","input","event","target","value","validateAndSetStartDate","emptyAndAllowed","trim","length","replace","format","undefined","validateAndSetEndDate","invalid","StyledDatePickerWrapper","DateField","dayName","monthName","yearName","hintText","day","month","year","label","onChange","onBlur","handleStartDateBlur","onFocus","errorMessage","handleStartDateFocus","handleEndDateBlur","handleEndDateFocus","DatePickerHeightPlaceholder","ReactDatePicker","rangePicked","start","end","date","selectsRange","selected","inline","aria-label","selectsMultiple","datePicked"],"sourceRoot":"","ignoreList":[]}