@hitachivantara/uikit-react-core 5.11.0 → 5.12.0

package/dist/cjs/components/DatePicker/DatePicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.cjs","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { useState, useEffect, useRef } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport { Calendar } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport {\n  HvCalendar,\n  HvInfoMessage,\n  HvWarningText,\n  HvCalendarProps,\n  HvActionBar,\n  HvButton,\n  HvFormElement,\n  HvTypography,\n  HvBaseDropdown,\n  HvLabel,\n} from \"@core/components\";\nimport { useControlled, useLabels, useTheme, useUniqueId } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types\";\nimport { setId, useSavedState } from \"@core/utils\";\nimport { isInvalid } from \"../Forms/FormElement/validationStates\";\nimport { isDate } from \"../Calendar/utils\";\nimport { getDateLabel } from \"./utils\";\nimport useVisibleDate from \"./useVisibleDate\";\nimport datePickerClasses, { HvDatePickerClasses } from \"./datePickerClasses\";\nimport { styles } from \"./DatePicker.styles\";\n\nconst DEFAULT_LABELS = {\n  applyLabel: \"Apply\",\n  cancelLabel: \"Cancel\",\n  clearLabel: \"Clear\",\n};\n\nexport type HvDatePickerStatus = \"standBy\" | \"valid\" | \"invalid\";\n\nexport interface HvDatePickerProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDatePickerClasses;\n  /**\n   * Id to be applied to the form element root node.\n   */\n  id?: string;\n\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * @ignore\n   */\n  \"aria-label\"?: string;\n  /**\n   * @ignore\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * @ignore\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\n\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvDatePickerStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * Identifies the element that provides an error message for the date picker.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (date?: Date, endDate?: Date) => void;\n  /**\n   * The callback fired when user clicks on cancel.\n   */\n  onCancel?: () => void;\n  /**\n   * The callback fired when user clicks on clear.\n   */\n  onClear?: () => void;\n  /**\n   * An object containing all the labels for the datepicker.\n   */\n  labels?: {\n    /**\n     * Apply button label.\n     */\n    applyLabel?: string;\n    /**\n     * Cancel button label.\n     */\n    cancelLabel?: string;\n    /**\n     * Clear button label.\n     */\n    clearLabel?: string;\n  };\n\n  /**\n   * The initial value of the input when in single calendar mode.\n   */\n  value?: Date;\n  /**\n   * The initial value for the start date when in range mode.\n   */\n  startValue?: Date;\n  /**\n   * The initial value for the end date when in range mode.\n   */\n  endValue?: Date;\n  /**\n   * Flag informing if the the component should be in range mode or in single mode.\n   * TODO: remove this in favour of discriminated union\n   */\n  rangeMode?: boolean;\n  /**\n   * The placement where the calendar should be placed according to the input. Options are `left` or `right`.\n   * Note this prop only affects the calendar when in `rangeMode`.\n   */\n  horizontalPlacement?: \"left\" | \"right\";\n  /**\n   * The calendar locale. If undefined, it uses calendar default\n   */\n  locale?: string;\n\n  /**\n   * Controls if actions buttons are visible at the calendar.\n   */\n  showActions?: boolean;\n  /**\n   * Controls if clear button is visible at the calendar,\n   * only works if showing actions or in range mode.\n   */\n  showClear?: boolean;\n  /**\n   * Disable the portal behavior. The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * Sets if the calendar container should follow the date picker input out of the screen or stay visible.\n   */\n  escapeWithReference?: boolean;\n  /**\n   * An element placed before the Calendar\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * An object containing props to be passed onto the baseDropdown.\n   */\n  dropdownProps?: Object;\n  /**\n   * If `true` the DatePicker will be in read only mode, unable to be interacted.\n   */\n  readOnly?: boolean;\n  /**\n   * Additional props passed to the HvCalendar component.\n   */\n  calendarProps?: Partial<HvCalendarProps>;\n}\n\n/**\n * A date picker, popup calendar or date range picker is a graphical user\n * interface widget which allows the user to select a date from a calendar.\n */\nexport const HvDatePicker = ({\n  classes,\n  className,\n\n  id,\n  name,\n\n  required = false,\n  disabled = false,\n  readOnly,\n\n  label,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  description,\n  \"aria-describedby\": ariaDescribedBy,\n\n  onChange,\n  onCancel,\n  onClear,\n  status,\n  statusMessage,\n  \"aria-errormessage\": ariaErrorMessage,\n\n  placeholder,\n\n  labels: labelsProp,\n\n  value,\n  startValue,\n  endValue,\n\n  rangeMode = false,\n  startAdornment,\n  horizontalPlacement = \"right\",\n  locale: localeProp,\n  showActions = false,\n  showClear = false,\n  disablePortal = true,\n  escapeWithReference = true,\n  dropdownProps,\n  calendarProps,\n  ...others\n}: HvDatePickerProps) => {\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const elementId = useUniqueId(id, \"hvdatepicker\");\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const locale = localeProp || \"en-US\";\n\n  const [calendarOpen, setCalendarOpen] = useState(false);\n\n  const [startDate, setStartDate, rollbackStartDate] = useSavedState(\n    rangeMode ? startValue : value\n  );\n  const [endDate, setEndDate, rollbackEndDate] = useSavedState(endValue);\n\n  const [visibleDate, dispatchAction] = useVisibleDate(startDate, endDate);\n\n  const focusTarget = useRef<HTMLDivElement>(null);\n\n  const { activeTheme } = useTheme();\n\n  useEffect(() => {\n    setStartDate(rangeMode ? startValue : value, true);\n    setEndDate(endValue, true);\n  }, [value, startValue, endValue, rangeMode]);\n\n  const endDateIsSet = useRef(false);\n  endDateIsSet.current = endDate != null;\n\n  useEffect(() => {\n    if (startDate != null) {\n      dispatchAction({\n        type: \"month_year\",\n        target: endDateIsSet.current ? \"left\" : \"best\",\n        year: startDate.getFullYear(),\n        month: startDate.getMonth() + 1,\n      });\n    }\n  }, [dispatchAction, startDate]);\n\n  useEffect(() => {\n    if (endDate != null) {\n      dispatchAction({\n        type: \"month_year\",\n        target: \"right\",\n        year: endDate.getFullYear(),\n        month: endDate.getMonth() + 1,\n      });\n    }\n  }, [dispatchAction, endDate]);\n\n  /**\n   * Handles the `Apply` action. Both single and ranged modes are handled here.\n   */\n  const handleApply = () => {\n    setStartDate(startDate, true);\n    setEndDate(endDate ?? startDate, true);\n\n    onChange?.(startDate, endDate);\n\n    setValidationState(() => {\n      // this will only run if status is uncontrolled\n      if (required && (!isDate(startDate) || (rangeMode && !isDate(endDate)))) {\n        return \"invalid\";\n      }\n\n      return \"valid\";\n    });\n\n    setCalendarOpen(false);\n  };\n\n  /**\n   * Handles the `Cancel` action. Both single and ranged modes are handled here.\n   */\n  const handleCancel = () => {\n    rollbackStartDate();\n    rollbackEndDate();\n\n    onCancel?.();\n\n    setCalendarOpen(false);\n  };\n\n  /**\n   * Handles the `Cancel` action. Both single and ranged modes are handled here.\n   */\n  const handleClear = () => {\n    setStartDate(undefined, false);\n    setEndDate(undefined, false);\n    onClear?.();\n  };\n\n  const handleCalendarClose = () => {\n    const shouldSave = !(rangeMode || showActions);\n    if (shouldSave) {\n      handleApply();\n    } else {\n      handleCancel();\n    }\n  };\n\n  const handleToggle = (evt, open) => {\n    /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n    if (evt === null) return;\n    setCalendarOpen(open);\n    if (!open) handleCalendarClose();\n  };\n\n  const focusOnContainer = () => {\n    focusTarget.current?.focus();\n  };\n\n  const handleDateChange = (event, newDate) => {\n    if (!isDate(newDate)) return;\n\n    const autoSave = !showActions && !rangeMode;\n\n    if (rangeMode) {\n      if (!startDate || (startDate && endDate) || newDate < startDate) {\n        setStartDate(newDate);\n        setEndDate(undefined);\n      } else {\n        setEndDate(newDate);\n      }\n    } else {\n      setStartDate(newDate, autoSave);\n    }\n\n    if (autoSave) {\n      onChange?.(newDate);\n\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required && !isDate(newDate)) {\n          return \"invalid\";\n        }\n\n        return \"valid\";\n      });\n\n      setCalendarOpen(false);\n    }\n  };\n\n  const handleInputDateChange = (event, newDate, position) => {\n    if (!isDate(newDate)) return;\n\n    if (!rangeMode) {\n      handleDateChange(event, newDate);\n      return;\n    }\n\n    if (position === \"left\") {\n      if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n    } else if (position === \"right\") {\n      if (!startDate) {\n        if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n        return;\n      }\n      setEndDate(newDate < startDate ? startDate : newDate);\n    }\n  };\n\n  /**\n   * Renders the container for the action elements.\n   */\n  const renderActions = () => (\n    <ClassNames>\n      {({ css, cx }) => (\n        <HvActionBar\n          className={\n            showClear\n              ? cx(\n                  datePickerClasses.actionContainer,\n                  css(styles.actionContainer),\n                  classes?.actionContainer\n                )\n              : \"\"\n          }\n        >\n          {showClear && (\n            <div\n              className={cx(\n                datePickerClasses.leftContainer,\n                classes?.leftContainer\n              )}\n            >\n              <HvButton\n                id={setId(id, \"action\", \"clear\")}\n                className={cx(\n                  datePickerClasses.action,\n                  css(styles.action),\n                  classes?.action\n                )}\n                variant=\"primaryGhost\"\n                onClick={handleClear}\n              >\n                {labels?.clearLabel}\n              </HvButton>\n            </div>\n          )}\n          <div\n            className={cx(\n              datePickerClasses.rightContainer,\n              classes?.rightContainer\n            )}\n          >\n            <HvButton\n              id={setId(id, \"action\", \"apply\")}\n              className={cx(\n                datePickerClasses.action,\n                css(styles.action),\n                classes?.action\n              )}\n              variant=\"primaryGhost\"\n              onClick={handleApply}\n            >\n              {labels?.applyLabel}\n            </HvButton>\n            <HvButton\n              id={setId(id, \"action\", \"cancel\")}\n              className={cx(\n                datePickerClasses.action,\n                css(styles.action),\n                classes?.action\n              )}\n              variant=\"primaryGhost\"\n              onClick={handleCancel}\n            >\n              {labels?.cancelLabel}\n            </HvButton>\n          </div>\n        </HvActionBar>\n      )}\n    </ClassNames>\n  );\n\n  const styledTypography = (dateString, variant, text) => {\n    const StyledTypography = styled(HvTypography)({\n      color: dateString\n        ? theme.colors.secondary\n        : theme.datePicker.dropdownPlaceholderColor,\n    });\n\n    return <StyledTypography variant={variant}>{text}</StyledTypography>;\n  };\n\n  const renderInput = (dateString) =>\n    styledTypography(\n      dateString,\n      activeTheme?.datePicker.placeholderVariant,\n      (dateString || placeholder) === undefined ? \"\" : dateString || placeholder\n    );\n\n  const dateValue = rangeMode ? { startDate, endDate } : startDate;\n\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isStateInvalid = isInvalid(validationState);\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <HvFormElement\n          id={id}\n          name={name}\n          value={dateValue}\n          status={validationState}\n          disabled={disabled}\n          required={required}\n          className={cx(\n            datePickerClasses.root,\n            css(styles.root),\n            className,\n            classes?.root\n          )}\n          readOnly={readOnly}\n          {...others}\n        >\n          {(hasLabel || hasDescription) && (\n            <div\n              className={cx(\n                datePickerClasses.labelContainer,\n                css(styles.labelContainer),\n                classes?.labelContainer\n              )}\n            >\n              {hasLabel && (\n                <HvLabel\n                  id={setId(elementId, \"label\")}\n                  label={label}\n                  className={cx(\n                    datePickerClasses.label,\n                    css(styles.label),\n                    classes?.label\n                  )}\n                />\n              )}\n\n              {hasDescription && (\n                <HvInfoMessage\n                  id={setId(elementId, \"description\")}\n                  className={cx(\n                    datePickerClasses.description,\n                    css(styles.description),\n                    classes?.description\n                  )}\n                >\n                  {description}\n                </HvInfoMessage>\n              )}\n            </div>\n          )}\n          <HvBaseDropdown\n            role=\"combobox\"\n            classes={{\n              root: cx(\n                datePickerClasses.dropdown,\n                css(styles.dropdown),\n                classes?.dropdown\n              ),\n              panel: cx(\n                datePickerClasses.panel,\n                css(styles.panel),\n                classes?.panel\n              ),\n              header: isStateInvalid\n                ? cx(\n                    datePickerClasses.dropdownHeaderInvalid,\n                    css(styles.dropdownHeaderInvalid),\n                    classes?.dropdownHeaderInvalid\n                  )\n                : undefined,\n              headerOpen: cx(\n                datePickerClasses.dropdownHeaderOpen,\n                css(styles.dropdownHeaderOpen),\n                classes?.dropdownHeaderOpen\n              ),\n            }}\n            readOnly={readOnly}\n            disabled={disabled}\n            disablePortal={disablePortal}\n            variableWidth\n            placement={horizontalPlacement}\n            expanded={calendarOpen}\n            onToggle={handleToggle}\n            onClickOutside={handleCalendarClose}\n            onContainerCreation={focusOnContainer}\n            placeholder={renderInput(\n              getDateLabel(dateValue, rangeMode, locale)\n            )}\n            adornment={\n              <Calendar\n                className={cx(\n                  datePickerClasses.icon,\n                  css(styles.icon),\n                  classes?.icon\n                )}\n                color={disabled ? \"secondary_80\" : undefined}\n              />\n            }\n            popperProps={{\n              modifiers: [\n                { name: \"preventOverflow\", enabled: escapeWithReference },\n              ],\n            }}\n            aria-haspopup=\"dialog\"\n            aria-label={ariaLabel}\n            aria-labelledby={\n              [label && setId(elementId, \"label\"), ariaLabelledBy]\n                .join(\" \")\n                .trim() || undefined\n            }\n            aria-invalid={isStateInvalid ? true : undefined}\n            aria-errormessage={errorMessageId}\n            aria-describedby={\n              [description && setId(elementId, \"description\"), ariaDescribedBy]\n                .join(\" \")\n                .trim() || undefined\n            }\n            {...dropdownProps}\n          >\n            <div ref={focusTarget} tabIndex={-1} />\n            <HvCalendar\n              id={setId(id, \"calendar\")}\n              startAdornment={startAdornment}\n              onChange={handleDateChange}\n              onInputChange={handleInputDateChange}\n              onVisibleDateChange={(_event, type, month, target) => {\n                dispatchAction({ type, target, month });\n              }}\n              locale={locale}\n              {...visibleDate}\n              {...calendarProps}\n            />\n            {(rangeMode || showActions) && renderActions()}\n          </HvBaseDropdown>\n          {canShowError && (\n            <HvWarningText\n              id={setId(elementId, \"error\")}\n              disableBorder\n              className={cx(datePickerClasses.error, classes?.error)}\n            >\n              {validationMessage}\n            </HvWarningText>\n          )}\n        </HvFormElement>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["DEFAULT_LABELS","applyLabel","cancelLabel","clearLabel","HvDatePicker","classes","className","id","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onCancel","onClear","status","statusMessage","ariaErrorMessage","placeholder","labels","labelsProp","value","startValue","endValue","rangeMode","startAdornment","horizontalPlacement","locale","localeProp","showActions","showClear","disablePortal","escapeWithReference","dropdownProps","calendarProps","others","useLabels","elementId","useUniqueId","validationState","setValidationState","useControlled","validationMessage","calendarOpen","setCalendarOpen","useState","startDate","setStartDate","rollbackStartDate","useSavedState","endDate","setEndDate","rollbackEndDate","visibleDate","dispatchAction","useVisibleDate","focusTarget","useRef","activeTheme","useTheme","useEffect","endDateIsSet","current","type","target","year","getFullYear","month","getMonth","handleApply","isDate","handleCancel","handleClear","undefined","handleCalendarClose","shouldSave","handleToggle","evt","open","focusOnContainer","focus","handleDateChange","event","newDate","autoSave","handleInputDateChange","position","renderActions","_jsx","ClassNames","children","css","cx","HvActionBar","datePickerClasses","actionContainer","styles","leftContainer","HvButton","setId","action","variant","onClick","_jsxs","rightContainer","styledTypography","dateString","text","StyledTypography","HvTypography","process","env","NODE_ENV","color","theme","colors","secondary","datePicker","dropdownPlaceholderColor","renderInput","placeholderVariant","dateValue","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","HvFormElement","root","labelContainer","HvLabel","HvInfoMessage","HvBaseDropdown","role","dropdown","panel","header","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","variableWidth","placement","expanded","onToggle","onClickOutside","onContainerCreation","getDateLabel","adornment","Calendar","icon","popperProps","modifiers","enabled","join","trim","ref","tabIndex","HvCalendar","onInputChange","onVisibleDateChange","_event","HvWarningText","disableBorder","error"],"mappings":"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"}
+{"version":3,"file":"DatePicker.cjs","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { useState, useEffect, useRef } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport { Calendar } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport {\n  HvCalendar,\n  HvInfoMessage,\n  HvWarningText,\n  HvCalendarProps,\n  HvActionBar,\n  HvButton,\n  HvFormElement,\n  HvTypography,\n  HvBaseDropdown,\n  HvLabel,\n} from \"@core/components\";\nimport { useControlled, useLabels, useTheme, useUniqueId } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types\";\nimport { setId, useSavedState } from \"@core/utils\";\nimport { isInvalid } from \"../Forms/FormElement/validationStates\";\nimport { isDate } from \"../Calendar/utils\";\nimport { getDateLabel } from \"./utils\";\nimport useVisibleDate from \"./useVisibleDate\";\nimport datePickerClasses, { HvDatePickerClasses } from \"./datePickerClasses\";\nimport { styles } from \"./DatePicker.styles\";\n\nconst DEFAULT_LABELS = {\n  applyLabel: \"Apply\",\n  cancelLabel: \"Cancel\",\n  clearLabel: \"Clear\",\n  invalidLabel: \"Invalid date\",\n};\n\nexport type HvDatePickerStatus = \"standBy\" | \"valid\" | \"invalid\";\n\nexport interface HvDatePickerProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDatePickerClasses;\n  /**\n   * Id to be applied to the form element root node.\n   */\n  id?: string;\n\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * @ignore\n   */\n  \"aria-label\"?: string;\n  /**\n   * @ignore\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * @ignore\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\n\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvDatePickerStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * Identifies the element that provides an error message for the date picker.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (date?: Date, endDate?: Date) => void;\n  /**\n   * The callback fired when user clicks on cancel.\n   */\n  onCancel?: () => void;\n  /**\n   * The callback fired when user clicks on clear.\n   */\n  onClear?: () => void;\n  /**\n   * An object containing all the labels for the datepicker.\n   */\n  labels?: {\n    /**\n     * Apply button label.\n     */\n    applyLabel?: string;\n    /**\n     * Cancel button label.\n     */\n    cancelLabel?: string;\n    /**\n     * Clear button label.\n     */\n    clearLabel?: string;\n    /**\n     * Invalid Date label.\n     */\n    invalidDateLabel?: string;\n  };\n\n  /**\n   * The initial value of the input when in single calendar mode.\n   */\n  value?: Date;\n  /**\n   * The initial value for the start date when in range mode.\n   */\n  startValue?: Date;\n  /**\n   * The initial value for the end date when in range mode.\n   */\n  endValue?: Date;\n  /**\n   * Flag informing if the the component should be in range mode or in single mode.\n   * TODO: remove this in favour of discriminated union\n   */\n  rangeMode?: boolean;\n  /**\n   * The placement where the calendar should be placed according to the input. Options are `left` or `right`.\n   * Note this prop only affects the calendar when in `rangeMode`.\n   */\n  horizontalPlacement?: \"left\" | \"right\";\n  /**\n   * The calendar locale. If undefined, it uses calendar default\n   */\n  locale?: string;\n\n  /**\n   * Controls if actions buttons are visible at the calendar.\n   */\n  showActions?: boolean;\n  /**\n   * Controls if clear button is visible at the calendar,\n   * only works if showing actions or in range mode.\n   */\n  showClear?: boolean;\n  /**\n   * Disable the portal behavior. The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * Sets if the calendar container should follow the date picker input out of the screen or stay visible.\n   */\n  escapeWithReference?: boolean;\n  /**\n   * An element placed before the Calendar\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * An object containing props to be passed onto the baseDropdown.\n   */\n  dropdownProps?: Object;\n  /**\n   * If `true` the DatePicker will be in read only mode, unable to be interacted.\n   */\n  readOnly?: boolean;\n  /**\n   * Additional props passed to the HvCalendar component.\n   */\n  calendarProps?: Partial<HvCalendarProps>;\n}\n\n/**\n * A date picker, popup calendar or date range picker is a graphical user\n * interface widget which allows the user to select a date from a calendar.\n */\nexport const HvDatePicker = ({\n  classes,\n  className,\n\n  id,\n  name,\n\n  required = false,\n  disabled = false,\n  readOnly,\n\n  label,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  description,\n  \"aria-describedby\": ariaDescribedBy,\n\n  onChange,\n  onCancel,\n  onClear,\n  status,\n  statusMessage,\n  \"aria-errormessage\": ariaErrorMessage,\n\n  placeholder,\n\n  labels: labelsProp,\n\n  value,\n  startValue,\n  endValue,\n\n  rangeMode = false,\n  startAdornment,\n  horizontalPlacement = \"right\",\n  locale: localeProp,\n  showActions = false,\n  showClear = false,\n  disablePortal = true,\n  escapeWithReference = true,\n  dropdownProps,\n  calendarProps,\n  ...others\n}: HvDatePickerProps) => {\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const elementId = useUniqueId(id, \"hvdatepicker\");\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const locale = localeProp || \"en-US\";\n\n  const [calendarOpen, setCalendarOpen] = useState(false);\n\n  const [startDate, setStartDate, rollbackStartDate] = useSavedState(\n    rangeMode ? startValue : value\n  );\n  const [endDate, setEndDate, rollbackEndDate] = useSavedState(endValue);\n\n  const [visibleDate, dispatchAction] = useVisibleDate(startDate, endDate);\n\n  const focusTarget = useRef<HTMLDivElement>(null);\n\n  const { activeTheme } = useTheme();\n\n  useEffect(() => {\n    setStartDate(rangeMode ? startValue : value, true);\n    setEndDate(endValue, true);\n  }, [value, startValue, endValue, rangeMode]);\n\n  const endDateIsSet = useRef(false);\n  endDateIsSet.current = endDate != null;\n\n  useEffect(() => {\n    if (startDate != null) {\n      dispatchAction({\n        type: \"month_year\",\n        target: endDateIsSet.current ? \"left\" : \"best\",\n        year: startDate.getFullYear(),\n        month: startDate.getMonth() + 1,\n      });\n    }\n  }, [dispatchAction, startDate]);\n\n  useEffect(() => {\n    if (endDate != null) {\n      dispatchAction({\n        type: \"month_year\",\n        target: \"right\",\n        year: endDate.getFullYear(),\n        month: endDate.getMonth() + 1,\n      });\n    }\n  }, [dispatchAction, endDate]);\n\n  /**\n   * Handles the `Apply` action. Both single and ranged modes are handled here.\n   */\n  const handleApply = () => {\n    setStartDate(startDate, true);\n    setEndDate(endDate ?? startDate, true);\n\n    onChange?.(startDate, endDate);\n\n    setValidationState(() => {\n      // this will only run if status is uncontrolled\n      if (required && (!isDate(startDate) || (rangeMode && !isDate(endDate)))) {\n        return \"invalid\";\n      }\n\n      return \"valid\";\n    });\n\n    setCalendarOpen(false);\n  };\n\n  /**\n   * Handles the `Cancel` action. Both single and ranged modes are handled here.\n   */\n  const handleCancel = () => {\n    rollbackStartDate();\n    rollbackEndDate();\n\n    onCancel?.();\n\n    setCalendarOpen(false);\n  };\n\n  /**\n   * Handles the `Cancel` action. Both single and ranged modes are handled here.\n   */\n  const handleClear = () => {\n    setStartDate(undefined, false);\n    setEndDate(undefined, false);\n    onClear?.();\n  };\n\n  const handleCalendarClose = () => {\n    const shouldSave = !(rangeMode || showActions);\n    if (shouldSave) {\n      handleApply();\n    } else {\n      handleCancel();\n    }\n  };\n\n  const handleToggle = (evt, open) => {\n    /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n    if (evt === null) return;\n    setCalendarOpen(open);\n    if (!open) handleCalendarClose();\n  };\n\n  const focusOnContainer = () => {\n    focusTarget.current?.focus();\n  };\n\n  const handleDateChange = (event, newDate) => {\n    if (!isDate(newDate)) return;\n\n    const autoSave = !showActions && !rangeMode;\n\n    if (rangeMode) {\n      if (!startDate || (startDate && endDate) || newDate < startDate) {\n        setStartDate(newDate);\n        setEndDate(undefined);\n      } else {\n        setEndDate(newDate);\n      }\n    } else {\n      setStartDate(newDate, autoSave);\n    }\n\n    if (autoSave) {\n      onChange?.(newDate);\n\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required && !isDate(newDate)) {\n          return \"invalid\";\n        }\n\n        return \"valid\";\n      });\n\n      setCalendarOpen(false);\n    }\n  };\n\n  const handleInputDateChange = (event, newDate, position) => {\n    if (!isDate(newDate)) return;\n\n    if (!rangeMode) {\n      handleDateChange(event, newDate);\n      return;\n    }\n\n    if (position === \"left\") {\n      if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n    } else if (position === \"right\") {\n      if (!startDate) {\n        if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n        return;\n      }\n      setEndDate(newDate < startDate ? startDate : newDate);\n    }\n  };\n\n  /**\n   * Renders the container for the action elements.\n   */\n  const renderActions = () => (\n    <ClassNames>\n      {({ css, cx }) => (\n        <HvActionBar\n          className={\n            showClear\n              ? cx(\n                  datePickerClasses.actionContainer,\n                  css(styles.actionContainer),\n                  classes?.actionContainer\n                )\n              : \"\"\n          }\n        >\n          {showClear && (\n            <div\n              className={cx(\n                datePickerClasses.leftContainer,\n                classes?.leftContainer\n              )}\n            >\n              <HvButton\n                id={setId(id, \"action\", \"clear\")}\n                className={cx(\n                  datePickerClasses.action,\n                  css(styles.action),\n                  classes?.action\n                )}\n                variant=\"primaryGhost\"\n                onClick={handleClear}\n              >\n                {labels?.clearLabel}\n              </HvButton>\n            </div>\n          )}\n          <div\n            className={cx(\n              datePickerClasses.rightContainer,\n              classes?.rightContainer\n            )}\n          >\n            <HvButton\n              id={setId(id, \"action\", \"apply\")}\n              className={cx(\n                datePickerClasses.action,\n                css(styles.action),\n                classes?.action\n              )}\n              variant=\"primaryGhost\"\n              onClick={handleApply}\n            >\n              {labels?.applyLabel}\n            </HvButton>\n            <HvButton\n              id={setId(id, \"action\", \"cancel\")}\n              className={cx(\n                datePickerClasses.action,\n                css(styles.action),\n                classes?.action\n              )}\n              variant=\"primaryGhost\"\n              onClick={handleCancel}\n            >\n              {labels?.cancelLabel}\n            </HvButton>\n          </div>\n        </HvActionBar>\n      )}\n    </ClassNames>\n  );\n\n  const styledTypography = (dateString, variant, text) => {\n    const StyledTypography = styled(HvTypography)({\n      color: dateString\n        ? theme.colors.secondary\n        : theme.datePicker.dropdownPlaceholderColor,\n    });\n\n    return <StyledTypography variant={variant}>{text}</StyledTypography>;\n  };\n\n  const renderInput = (dateString) =>\n    styledTypography(\n      dateString,\n      activeTheme?.datePicker.placeholderVariant,\n      (dateString || placeholder) === undefined ? \"\" : dateString || placeholder\n    );\n\n  const dateValue = rangeMode ? { startDate, endDate } : startDate;\n\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isStateInvalid = isInvalid(validationState);\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <HvFormElement\n          id={id}\n          name={name}\n          value={dateValue}\n          status={validationState}\n          disabled={disabled}\n          required={required}\n          className={cx(\n            datePickerClasses.root,\n            css(styles.root),\n            className,\n            classes?.root\n          )}\n          readOnly={readOnly}\n          {...others}\n        >\n          {(hasLabel || hasDescription) && (\n            <div\n              className={cx(\n                datePickerClasses.labelContainer,\n                css(styles.labelContainer),\n                classes?.labelContainer\n              )}\n            >\n              {hasLabel && (\n                <HvLabel\n                  id={setId(elementId, \"label\")}\n                  label={label}\n                  className={cx(\n                    datePickerClasses.label,\n                    css(styles.label),\n                    classes?.label\n                  )}\n                />\n              )}\n\n              {hasDescription && (\n                <HvInfoMessage\n                  id={setId(elementId, \"description\")}\n                  className={cx(\n                    datePickerClasses.description,\n                    css(styles.description),\n                    classes?.description\n                  )}\n                >\n                  {description}\n                </HvInfoMessage>\n              )}\n            </div>\n          )}\n          <HvBaseDropdown\n            role=\"combobox\"\n            classes={{\n              root: cx(\n                datePickerClasses.dropdown,\n                css(styles.dropdown),\n                classes?.dropdown\n              ),\n              panel: cx(\n                datePickerClasses.panel,\n                css(styles.panel),\n                classes?.panel\n              ),\n              header: isStateInvalid\n                ? cx(\n                    datePickerClasses.dropdownHeaderInvalid,\n                    css(styles.dropdownHeaderInvalid),\n                    classes?.dropdownHeaderInvalid\n                  )\n                : undefined,\n              headerOpen: cx(\n                datePickerClasses.dropdownHeaderOpen,\n                css(styles.dropdownHeaderOpen),\n                classes?.dropdownHeaderOpen\n              ),\n            }}\n            readOnly={readOnly}\n            disabled={disabled}\n            disablePortal={disablePortal}\n            variableWidth\n            placement={horizontalPlacement}\n            expanded={calendarOpen}\n            onToggle={handleToggle}\n            onClickOutside={handleCalendarClose}\n            onContainerCreation={focusOnContainer}\n            placeholder={renderInput(\n              getDateLabel(dateValue, rangeMode, locale)\n            )}\n            adornment={\n              <Calendar\n                className={cx(\n                  datePickerClasses.icon,\n                  css(styles.icon),\n                  classes?.icon\n                )}\n                color={disabled ? \"secondary_80\" : undefined}\n              />\n            }\n            popperProps={{\n              modifiers: [\n                { name: \"preventOverflow\", enabled: escapeWithReference },\n              ],\n            }}\n            aria-haspopup=\"dialog\"\n            aria-label={ariaLabel}\n            aria-labelledby={\n              [label && setId(elementId, \"label\"), ariaLabelledBy]\n                .join(\" \")\n                .trim() || undefined\n            }\n            aria-invalid={isStateInvalid ? true : undefined}\n            aria-errormessage={errorMessageId}\n            aria-describedby={\n              [description && setId(elementId, \"description\"), ariaDescribedBy]\n                .join(\" \")\n                .trim() || undefined\n            }\n            {...dropdownProps}\n          >\n            <div ref={focusTarget} tabIndex={-1} />\n            <HvCalendar\n              id={setId(id, \"calendar\")}\n              startAdornment={startAdornment}\n              onChange={handleDateChange}\n              onInputChange={handleInputDateChange}\n              onVisibleDateChange={(_event, type, month, target) => {\n                dispatchAction({ type, target, month });\n              }}\n              locale={locale}\n              {...visibleDate}\n              {...calendarProps}\n              invalidDateLabel={labels?.invalidDateLabel}\n            />\n            {(rangeMode || showActions) && renderActions()}\n          </HvBaseDropdown>\n          {canShowError && (\n            <HvWarningText\n              id={setId(elementId, \"error\")}\n              disableBorder\n              className={cx(datePickerClasses.error, classes?.error)}\n            >\n              {validationMessage}\n            </HvWarningText>\n          )}\n        </HvFormElement>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["DEFAULT_LABELS","applyLabel","cancelLabel","clearLabel","invalidLabel","HvDatePicker","classes","className","id","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onCancel","onClear","status","statusMessage","ariaErrorMessage","placeholder","labels","labelsProp","value","startValue","endValue","rangeMode","startAdornment","horizontalPlacement","locale","localeProp","showActions","showClear","disablePortal","escapeWithReference","dropdownProps","calendarProps","others","useLabels","elementId","useUniqueId","validationState","setValidationState","useControlled","validationMessage","calendarOpen","setCalendarOpen","useState","startDate","setStartDate","rollbackStartDate","useSavedState","endDate","setEndDate","rollbackEndDate","visibleDate","dispatchAction","useVisibleDate","focusTarget","useRef","activeTheme","useTheme","useEffect","endDateIsSet","current","type","target","year","getFullYear","month","getMonth","handleApply","isDate","handleCancel","handleClear","undefined","handleCalendarClose","shouldSave","handleToggle","evt","open","focusOnContainer","focus","handleDateChange","event","newDate","autoSave","handleInputDateChange","position","renderActions","_jsx","ClassNames","children","css","cx","HvActionBar","datePickerClasses","actionContainer","styles","leftContainer","HvButton","setId","action","variant","onClick","_jsxs","rightContainer","styledTypography","dateString","text","StyledTypography","HvTypography","process","env","NODE_ENV","color","theme","colors","secondary","datePicker","dropdownPlaceholderColor","renderInput","placeholderVariant","dateValue","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","HvFormElement","root","labelContainer","HvLabel","HvInfoMessage","HvBaseDropdown","role","dropdown","panel","header","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","variableWidth","placement","expanded","onToggle","onClickOutside","onContainerCreation","getDateLabel","adornment","Calendar","icon","popperProps","modifiers","enabled","join","trim","ref","tabIndex","HvCalendar","onInputChange","onVisibleDateChange","_event","invalidDateLabel","HvWarningText","disableBorder","error"],"mappings":"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"}

package/dist/cjs/components/FilterGroup/Counter/Counter.cjs

@@ -22,7 +22,6 @@ const HvFilterGroupCounter = ({
   id,
   classes
 }) => {
-  var _a;
   const {
     filterOptions,
     filterValues = [],
@@ -31,7 +30,7 @@ const HvFilterGroupCounter = ({
   const options = id && filterOptions.find((option) => option.id === id) ? [filterOptions.find((option) => option.id === id)] : filterOptions;
   const optionIdx = filterOptions.findIndex((option) => option.id === id);
   let groupsCounter = 0;
-  (_a = appliedFilters == null ? void 0 : appliedFilters.flat()) == null ? void 0 : _a.filter((elem) => elem !== void 0).forEach((fg, i) => {
+  appliedFilters.filter((elem) => elem !== void 0).forEach((fg, i) => {
     groupsCounter += getExistingFiltersById(i, filterValues, filterOptions);
   });
   const partialCounter = id ? getExistingFiltersById(optionIdx, filterValues, filterOptions) || 0 : groupsCounter;

package/dist/cjs/components/FilterGroup/Counter/Counter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Counter.cjs","sources":["../../../../../src/components/FilterGroup/Counter/Counter.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { styles } from \"./Counter.styles\";\nimport { HvFilterGroupFilters, HvFilterGroupValue } from \"../FilterGroup\";\nimport filterGroupCounterClasses, {\n  HvFilterGroupCounterClasses,\n} from \"./counterClasses\";\n\nexport interface HvFilterGroupCounterProps {\n  className?: string;\n  id?: string;\n  classes?: HvFilterGroupCounterClasses;\n}\n\nconst getExistingFiltersById = (\n  idx: number,\n  filterValues: HvFilterGroupValue,\n  filterOptions: HvFilterGroupFilters\n) => {\n  let total = 0;\n  filterValues[idx]?.forEach((fv) => {\n    if (filterOptions[idx]?.data.find((f) => f.id === fv)) {\n      total += 1;\n    }\n  });\n  return total;\n};\n\nexport const HvFilterGroupCounter = ({\n  className,\n  id,\n  classes,\n}: HvFilterGroupCounterProps) => {\n  const {\n    filterOptions,\n    filterValues = [],\n    appliedFilters = [],\n  } = useContext(HvFilterGroupContext);\n\n  const options =\n    id && filterOptions.find((option) => option.id === id)\n      ? ([\n          filterOptions.find((option) => option.id === id),\n        ] as HvFilterGroupFilters)\n      : filterOptions;\n  const optionIdx = filterOptions.findIndex((option) => option.id === id);\n\n  let groupsCounter = 0;\n  appliedFilters\n    ?.flat()\n    ?.filter((elem) => elem !== undefined)\n    .forEach((fg, i) => {\n      groupsCounter += getExistingFiltersById(i, filterValues, filterOptions);\n    });\n\n  const partialCounter = id\n    ? getExistingFiltersById(optionIdx, filterValues, filterOptions) || 0\n    : groupsCounter;\n\n  const totalCounter = options.reduce(\n    (acc, option) => acc + option.data.length,\n    0\n  );\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            filterGroupCounterClasses.root,\n            css(styles.root),\n            className,\n            classes?.root\n          )}\n        >\n          {partialCounter > 0 ? (\n            <p\n              className={cx(\n                filterGroupCounterClasses.partialCounter,\n                css(styles.partialCounter),\n                classes?.partialCounter\n              )}\n            >\n              {partialCounter}\n            </p>\n          ) : (\n            partialCounter\n          )}\n          {` / ${totalCounter}`}\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["getExistingFiltersById","idx","filterValues","filterOptions","total","forEach","fv","data","find","f","id","HvFilterGroupCounter","className","classes","appliedFilters","useContext","HvFilterGroupContext","options","option","optionIdx","findIndex","groupsCounter","flat","filter","elem","undefined","fg","i","partialCounter","totalCounter","reduce","acc","length","ClassNames","children","css","cx","filterGroupCounterClasses","root","styles"],"mappings":";;;;;;;;AAeA,MAAMA,yBAAyBA,CAC7BC,KACAC,cACAC,kBACG;;AACH,MAAIC,QAAQ;AACCH,qBAAAA,GAAG,MAAHA,mBAAMI,QAASC,CAAO,OAAA;;AAC7BH,SAAAA,MAAAA,cAAcF,GAAG,MAAjBE,gBAAAA,IAAoBI,KAAKC,KAAMC,CAAMA,MAAAA,EAAEC,OAAOJ,KAAK;AAC5C,eAAA;AAAA,IACX;AAAA,EAAA;AAEKF,SAAAA;AACT;AAEO,MAAMO,uBAAuBA,CAAC;AAAA,EACnCC;AAAAA,EACAF;AAAAA,EACAG;AACyB,MAAM;;AACzB,QAAA;AAAA,IACJV;AAAAA,IACAD,eAAe,CAAE;AAAA,IACjBY,iBAAiB,CAAA;AAAA,EAAA,IACfC,MAAAA,WAAWC,mBAAAA,oBAAoB;AAEnC,QAAMC,UACJP,MAAMP,cAAcK,KAAMU,CAAAA,WAAWA,OAAOR,OAAOA,EAAE,IAChD,CACCP,cAAcK,KAAMU,CAAAA,WAAWA,OAAOR,OAAOA,EAAE,CAAC,IAElDP;AACN,QAAMgB,YAAYhB,cAAciB,UAAWF,CAAWA,WAAAA,OAAOR,OAAOA,EAAE;AAEtE,MAAIW,gBAAgB;AAEhBC,yDAAAA,WAAAA,mBACAC,OAAQC,CAASA,SAAAA,SAASC,QAC3BpB,QAAQ,CAACqB,IAAIC,MAAM;AACD3B,qBAAAA,uBAAuB2B,GAAGzB,cAAcC,aAAa;AAAA,EAAA;AAG1E,QAAMyB,iBAAiBlB,KACnBV,uBAAuBmB,WAAWjB,cAAcC,aAAa,KAAK,IAClEkB;AAEEQ,QAAAA,eAAeZ,QAAQa,OAC3B,CAACC,KAAKb,WAAWa,MAAMb,OAAOX,KAAKyB,QACnC,CAAC;AAGH,wCACGC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,sCACP,OAAA;AAAA,MACExB,WAAWwB,GACTC,uBAA0BC,MAC1BH,IAAII,sBAAOD,IAAI,GACf1B,WACAC,mCAASyB,IAAI;AAAA,MACbJ,UAEDN,CAAAA,iBAAiB,mCAChB,KAAA;AAAA,QACEhB,WAAWwB,GACTC,eAA0BT,QAAAA,gBAC1BO,IAAII,eAAAA,OAAOX,cAAc,GACzBf,mCAASe,cAAc;AAAA,QACvBM,UAEDN;AAAAA,MAAc,CAAA,IAGjBA,gBAEA,MAAKC,cAAc;AAAA,IAAA,CAAA;AAAA,EAAA,CAGd;AAEjB;;"}
+{"version":3,"file":"Counter.cjs","sources":["../../../../../src/components/FilterGroup/Counter/Counter.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { styles } from \"./Counter.styles\";\nimport { HvFilterGroupFilters, HvFilterGroupValue } from \"../FilterGroup\";\nimport filterGroupCounterClasses, {\n  HvFilterGroupCounterClasses,\n} from \"./counterClasses\";\n\nexport interface HvFilterGroupCounterProps {\n  className?: string;\n  id?: string;\n  classes?: HvFilterGroupCounterClasses;\n}\n\nconst getExistingFiltersById = (\n  idx: number,\n  filterValues: HvFilterGroupValue,\n  filterOptions: HvFilterGroupFilters\n) => {\n  let total = 0;\n  filterValues[idx]?.forEach((fv) => {\n    if (filterOptions[idx]?.data.find((f) => f.id === fv)) {\n      total += 1;\n    }\n  });\n  return total;\n};\n\nexport const HvFilterGroupCounter = ({\n  className,\n  id,\n  classes,\n}: HvFilterGroupCounterProps) => {\n  const {\n    filterOptions,\n    filterValues = [],\n    appliedFilters = [],\n  } = useContext(HvFilterGroupContext);\n\n  const options =\n    id && filterOptions.find((option) => option.id === id)\n      ? ([\n          filterOptions.find((option) => option.id === id),\n        ] as HvFilterGroupFilters)\n      : filterOptions;\n  const optionIdx = filterOptions.findIndex((option) => option.id === id);\n\n  let groupsCounter = 0;\n  appliedFilters\n    .filter((elem) => elem !== undefined)\n    .forEach((fg, i) => {\n      groupsCounter += getExistingFiltersById(i, filterValues, filterOptions);\n    });\n\n  const partialCounter = id\n    ? getExistingFiltersById(optionIdx, filterValues, filterOptions) || 0\n    : groupsCounter;\n\n  const totalCounter = options.reduce(\n    (acc, option) => acc + option.data.length,\n    0\n  );\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            filterGroupCounterClasses.root,\n            css(styles.root),\n            className,\n            classes?.root\n          )}\n        >\n          {partialCounter > 0 ? (\n            <p\n              className={cx(\n                filterGroupCounterClasses.partialCounter,\n                css(styles.partialCounter),\n                classes?.partialCounter\n              )}\n            >\n              {partialCounter}\n            </p>\n          ) : (\n            partialCounter\n          )}\n          {` / ${totalCounter}`}\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["getExistingFiltersById","idx","filterValues","filterOptions","total","forEach","fv","data","find","f","id","HvFilterGroupCounter","className","classes","appliedFilters","useContext","HvFilterGroupContext","options","option","optionIdx","findIndex","groupsCounter","filter","elem","undefined","fg","i","partialCounter","totalCounter","reduce","acc","length","ClassNames","children","css","cx","filterGroupCounterClasses","root","styles"],"mappings":";;;;;;;;AAeA,MAAMA,yBAAyBA,CAC7BC,KACAC,cACAC,kBACG;;AACH,MAAIC,QAAQ;AACCH,qBAAAA,GAAG,MAAHA,mBAAMI,QAASC,CAAO,OAAA;;AAC7BH,SAAAA,MAAAA,cAAcF,GAAG,MAAjBE,gBAAAA,IAAoBI,KAAKC,KAAMC,CAAMA,MAAAA,EAAEC,OAAOJ,KAAK;AAC5C,eAAA;AAAA,IACX;AAAA,EAAA;AAEKF,SAAAA;AACT;AAEO,MAAMO,uBAAuBA,CAAC;AAAA,EACnCC;AAAAA,EACAF;AAAAA,EACAG;AACyB,MAAM;AACzB,QAAA;AAAA,IACJV;AAAAA,IACAD,eAAe,CAAE;AAAA,IACjBY,iBAAiB,CAAA;AAAA,EAAA,IACfC,MAAAA,WAAWC,mBAAAA,oBAAoB;AAEnC,QAAMC,UACJP,MAAMP,cAAcK,KAAMU,CAAAA,WAAWA,OAAOR,OAAOA,EAAE,IAChD,CACCP,cAAcK,KAAMU,CAAAA,WAAWA,OAAOR,OAAOA,EAAE,CAAC,IAElDP;AACN,QAAMgB,YAAYhB,cAAciB,UAAWF,CAAWA,WAAAA,OAAOR,OAAOA,EAAE;AAEtE,MAAIW,gBAAgB;AAEjBC,iBAAAA,OAAQC,UAASA,SAASC,MAAS,EACnCnB,QAAQ,CAACoB,IAAIC,MAAM;AACD1B,qBAAAA,uBAAuB0B,GAAGxB,cAAcC,aAAa;AAAA,EAAA,CACvE;AAEH,QAAMwB,iBAAiBjB,KACnBV,uBAAuBmB,WAAWjB,cAAcC,aAAa,KAAK,IAClEkB;AAEEO,QAAAA,eAAeX,QAAQY,OAC3B,CAACC,KAAKZ,WAAWY,MAAMZ,OAAOX,KAAKwB,QACnC,CAAC;AAGH,wCACGC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,sCACP,OAAA;AAAA,MACEvB,WAAWuB,GACTC,uBAA0BC,MAC1BH,IAAII,sBAAOD,IAAI,GACfzB,WACAC,mCAASwB,IAAI;AAAA,MACbJ,UAEDN,CAAAA,iBAAiB,mCAChB,KAAA;AAAA,QACEf,WAAWuB,GACTC,eAA0BT,QAAAA,gBAC1BO,IAAII,eAAAA,OAAOX,cAAc,GACzBd,mCAASc,cAAc;AAAA,QACvBM,UAEDN;AAAAA,MAAc,CAAA,IAGjBA,gBAEA,MAAKC,cAAc;AAAA,IAAA,CAAA;AAAA,EAAA,CAGd;AAEjB;;"}

package/dist/esm/components/Calendar/Calendar.js

@@ -23,6 +23,7 @@ const HvCalendar = ({
   onChange,
   onInputChange,
   onVisibleDateChange,
+  invalidDateLabel,
   ...others
 }) => {
   const {
@@ -45,6 +46,7 @@ const HvCalendar = ({
     onChange,
     onInputChange: (evt, date) => onInputChange && onInputChange(evt, date, "left"),
     onVisibleDateChange,
+    invalidDateLabel,
     ...others
   });
   const rangeCalendar = /* @__PURE__ */ jsxs(StyledRangeCalendarContainer, {
@@ -61,6 +63,7 @@ const HvCalendar = ({
       onChange,
       onInputChange: (evt, date) => onInputChange && onInputChange(evt, date, "left"),
       onVisibleDateChange: (event, action, index) => onVisibleDateChange == null ? void 0 : onVisibleDateChange(event, action, index, "left"),
+      invalidDateLabel,
       ...others
     }), /* @__PURE__ */ jsx(HvSingleCalendar, {
       className: clsx(calendarClasses.singleCalendar, classes == null ? void 0 : classes.singleCalendar),
@@ -77,6 +80,7 @@ const HvCalendar = ({
         onVisibleDateChange == null ? void 0 : onVisibleDateChange(event, action, index, "right");
       },
       showEndDate: true,
+      invalidDateLabel,
       ...others
     })]
   });

package/dist/esm/components/Calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, { useContext } from \"react\";\nimport { setId } from \"@core/utils\";\nimport {\n  HvFormElementContext,\n  HvFormElementValueContext,\n} from \"@core/components\";\nimport { isRange } from \"./utils\";\nimport { HvSingleCalendar } from \"./SingleCalendar\";\nimport calendarClasses, { HvCalendarClasses } from \"./calendarClasses\";\nimport { StyledRangeCalendarContainer, StyledRoot } from \"./Calendar.styles\";\n\nexport const HvCalendar = ({\n  classes,\n  id,\n  locale = \"en-US\",\n  value,\n  visibleMonth,\n  visibleYear,\n  rightVisibleMonth,\n  rightVisibleYear,\n  minimumDate,\n  maximumDate,\n  startAdornment,\n  onChange,\n  onInputChange,\n  onVisibleDateChange,\n  ...others\n}: HvCalendarProps) => {\n  const { elementId } = useContext(HvFormElementContext);\n  const elementValue = useContext(HvFormElementValueContext);\n  const localValue = value ?? elementValue;\n  const localId = id ?? setId(elementId, \"single-calendar\");\n  const rangeMode = isRange(localValue);\n  const rightCalendarId = setId(localId, \"single-calendar-right\");\n  const clampedMonth =\n    visibleMonth && visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;\n\n  const singleCalendar = (\n    <HvSingleCalendar\n      id={localId}\n      locale={locale}\n      value={localValue}\n      visibleMonth={clampedMonth}\n      visibleYear={visibleYear}\n      minimumDate={minimumDate}\n      maximumDate={maximumDate}\n      onChange={onChange}\n      onInputChange={(evt, date) =>\n        onInputChange && onInputChange(evt, date, \"left\")\n      }\n      onVisibleDateChange={onVisibleDateChange}\n      {...others}\n    />\n  );\n\n  const rangeCalendar = (\n    <StyledRangeCalendarContainer\n      className={clsx(\n        calendarClasses.rangeCalendarContainer,\n        classes?.rangeCalendarContainer\n      )}\n    >\n      <HvSingleCalendar\n        className={clsx(\n          calendarClasses.singleCalendar,\n          classes?.singleCalendar\n        )}\n        id={localId}\n        locale={locale}\n        value={localValue}\n        visibleMonth={clampedMonth}\n        visibleYear={visibleYear}\n        minimumDate={minimumDate}\n        maximumDate={maximumDate}\n        onChange={onChange}\n        onInputChange={(evt, date) =>\n          onInputChange && onInputChange(evt, date, \"left\")\n        }\n        onVisibleDateChange={(event, action, index) =>\n          onVisibleDateChange?.(event, action, index, \"left\")\n        }\n        {...others}\n      />\n\n      <HvSingleCalendar\n        className={clsx(\n          calendarClasses.singleCalendar,\n          classes?.singleCalendar\n        )}\n        id={rightCalendarId}\n        locale={locale}\n        value={localValue}\n        visibleMonth={rightVisibleMonth}\n        visibleYear={rightVisibleYear}\n        minimumDate={minimumDate}\n        maximumDate={maximumDate}\n        onChange={onChange}\n        onInputChange={(evt, date) =>\n          onInputChange && onInputChange(evt, date, \"right\")\n        }\n        onVisibleDateChange={(event, action, index) => {\n          onVisibleDateChange?.(event, action, index, \"right\");\n        }}\n        showEndDate\n        {...others}\n      />\n    </StyledRangeCalendarContainer>\n  );\n\n  return (\n    <StyledRoot className={clsx(calendarClasses.root, classes?.root)}>\n      {startAdornment}\n      {rangeMode ? rangeCalendar : singleCalendar}\n    </StyledRoot>\n  );\n};\n\nexport interface DateRangeProp {\n  startDate: Date;\n  endDate?: Date;\n}\n\nexport type VisibilitySelectorActions =\n  | \"previous_month\"\n  | \"next_month\"\n  | \"previous_year\"\n  | \"next_year\"\n  | \"month\"\n  | \"month_year\";\n\nexport interface HvCalendarProps {\n  /**\n   * Styles applied from the theme.\n   */\n  classes?: HvCalendarClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The calendar locale. If undefined, it defaults to en-US\n   *\n   */\n  locale?: string;\n  /**\n   * Date that the calendar would show.\n   * if using the object format the calendar enter in range mode showing two calendars\n   */\n  value?: DateRangeProp | Date;\n  /**\n   * Controls the visible month of the Calendar\n   */\n  visibleMonth?: number;\n  /**\n   * Controls the visible year of the Calendar\n   */\n  visibleYear?: number;\n  /**\n   * Controls the visible month of the Calendar on the right side of the datepicker\n   */\n  rightVisibleMonth?: number;\n  /**\n   * Controls the visible year of the Calendar on the right side of the datepicker\n   */\n  rightVisibleYear?: number;\n  /**\n   * Callback function to be triggered when the selected date has changed.\n   */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    value: Date | DateRangeProp\n  ) => void;\n  /**\n   * Callback function to be triggered when the selected date input has changed.\n   */\n  onInputChange?: (\n    event:\n      | React.ChangeEvent<\n          HTMLTextAreaElement | HTMLInputElement | HTMLButtonElement\n        >\n      | undefined,\n    value: Date | DateRangeProp,\n    position: \"left\" | \"right\"\n  ) => void;\n  /**\n   * Callback function to be triggered when the user clicks on the month or year selector.\n   * it receives the action that was pressed:\n   * previous_month, next_month, previous_year, next_year,month\n   */\n  onVisibleDateChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    action: VisibilitySelectorActions,\n    value?: Date | DateRangeProp | number,\n    position?: \"left\" | \"right\"\n  ) => void;\n  /**\n   * The maximum selectable date after this all values are disabled.\n   */\n  maximumDate?: Date;\n  /**\n   * The minimum selectable date before this all values are disabled.\n   */\n  minimumDate?: Date;\n  /**\n   * An element placed before the Calendar\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Indicates if header should display the day of week.\n   */\n  showDayOfWeek?: boolean;\n}\n"],"names":["HvCalendar","classes","id","locale","value","visibleMonth","visibleYear","rightVisibleMonth","rightVisibleYear","minimumDate","maximumDate","startAdornment","onChange","onInputChange","onVisibleDateChange","others","elementId","useContext","HvFormElementContext","elementValue","HvFormElementValueContext","localValue","localId","setId","rangeMode","isRange","rightCalendarId","clampedMonth","singleCalendar","HvSingleCalendar","evt","date","rangeCalendar","StyledRangeCalendarContainer","className","clsx","calendarClasses","rangeCalendarContainer","children","_jsx","event","action","index","showEndDate","StyledRoot","root"],"mappings":";;;;;;;;;;AAYO,MAAMA,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC;AAAAA,EACAC,SAAS;AAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACY,MAAM;AACf,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAcC,WAAWC,oBAAoB;AAC/CC,QAAAA,eAAeF,WAAWG,yBAAyB;AACzD,QAAMC,aAAajB,SAASe;AAC5B,QAAMG,UAAUpB,MAAMqB,MAAMP,WAAW,iBAAiB;AAClDQ,QAAAA,YAAYC,QAAQJ,UAAU;AAC9BK,QAAAA,kBAAkBH,MAAMD,SAAS,uBAAuB;AAC9D,QAAMK,eACJtB,gBAAgBA,eAAe,KAAK,IAAIA,eAAe,KAAK;AAExDuB,QAAAA,qCACHC,kBAAgB;AAAA,IACf3B,IAAIoB;AAAAA,IACJnB;AAAAA,IACAC,OAAOiB;AAAAA,IACPhB,cAAcsB;AAAAA,IACdrB;AAAAA,IACAG;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAC,eAAeA,CAACiB,KAAKC,SACnBlB,iBAAiBA,cAAciB,KAAKC,MAAM,MAAM;AAAA,IAElDjB;AAAAA,IAAyC,GACrCC;AAAAA,EAAAA,CAEP;AAEKiB,QAAAA,qCACHC,8BAA4B;AAAA,IAC3BC,WAAWC,KACTC,gBAAgBC,wBAChBpC,mCAASoC,sBAAsB;AAAA,IAC/BC,UAAA,CAEFC,oBAACV,kBAAgB;AAAA,MACfK,WAAWC,KACTC,gBAAgBR,gBAChB3B,mCAAS2B,cAAc;AAAA,MAEzB1B,IAAIoB;AAAAA,MACJnB;AAAAA,MACAC,OAAOiB;AAAAA,MACPhB,cAAcsB;AAAAA,MACdrB;AAAAA,MACAG;AAAAA,MACAC;AAAAA,MACAE;AAAAA,MACAC,eAAeA,CAACiB,KAAKC,SACnBlB,iBAAiBA,cAAciB,KAAKC,MAAM,MAAM;AAAA,MAElDjB,qBAAqBA,CAAC0B,OAAOC,QAAQC,UACnC5B,2DAAsB0B,OAAOC,QAAQC,OAAO;AAAA,MAC7C,GACG3B;AAAAA,IAAAA,CACJ,GAEFwB,oBAACV,kBAAgB;AAAA,MACfK,WAAWC,KACTC,gBAAgBR,gBAChB3B,mCAAS2B,cAAc;AAAA,MAEzB1B,IAAIwB;AAAAA,MACJvB;AAAAA,MACAC,OAAOiB;AAAAA,MACPhB,cAAcE;AAAAA,MACdD,aAAaE;AAAAA,MACbC;AAAAA,MACAC;AAAAA,MACAE;AAAAA,MACAC,eAAeA,CAACiB,KAAKC,SACnBlB,iBAAiBA,cAAciB,KAAKC,MAAM,OAAO;AAAA,MAEnDjB,qBAAqBA,CAAC0B,OAAOC,QAAQC,UAAU;AACvBF,mEAAAA,OAAOC,QAAQC,OAAO;AAAA,MAC9C;AAAA,MACAC,aAAW;AAAA,MAAA,GACP5B;AAAAA,IAAAA,CACJ,CAAA;AAAA,EAAA,CAEL;AAED,8BACG6B,YAAU;AAAA,IAACV,WAAWC,KAAKC,gBAAgBS,MAAM5C,mCAAS4C,IAAI;AAAA,IAAEP,WAC9D3B,gBACAa,YAAYQ,gBAAgBJ,cAAc;AAAA,EAAA,CAChC;AAEjB;"}
+{"version":3,"file":"Calendar.js","sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, { useContext } from \"react\";\nimport { setId } from \"@core/utils\";\nimport {\n  HvFormElementContext,\n  HvFormElementValueContext,\n} from \"@core/components\";\nimport { isRange } from \"./utils\";\nimport { HvSingleCalendar } from \"./SingleCalendar\";\nimport calendarClasses, { HvCalendarClasses } from \"./calendarClasses\";\nimport { StyledRangeCalendarContainer, StyledRoot } from \"./Calendar.styles\";\n\nexport const HvCalendar = ({\n  classes,\n  id,\n  locale = \"en-US\",\n  value,\n  visibleMonth,\n  visibleYear,\n  rightVisibleMonth,\n  rightVisibleYear,\n  minimumDate,\n  maximumDate,\n  startAdornment,\n  onChange,\n  onInputChange,\n  onVisibleDateChange,\n  invalidDateLabel,\n  ...others\n}: HvCalendarProps) => {\n  const { elementId } = useContext(HvFormElementContext);\n  const elementValue = useContext(HvFormElementValueContext);\n  const localValue = value ?? elementValue;\n  const localId = id ?? setId(elementId, \"single-calendar\");\n  const rangeMode = isRange(localValue);\n  const rightCalendarId = setId(localId, \"single-calendar-right\");\n  const clampedMonth =\n    visibleMonth && visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;\n\n  const singleCalendar = (\n    <HvSingleCalendar\n      id={localId}\n      locale={locale}\n      value={localValue}\n      visibleMonth={clampedMonth}\n      visibleYear={visibleYear}\n      minimumDate={minimumDate}\n      maximumDate={maximumDate}\n      onChange={onChange}\n      onInputChange={(evt, date) =>\n        onInputChange && onInputChange(evt, date, \"left\")\n      }\n      onVisibleDateChange={onVisibleDateChange}\n      invalidDateLabel={invalidDateLabel}\n      {...others}\n    />\n  );\n\n  const rangeCalendar = (\n    <StyledRangeCalendarContainer\n      className={clsx(\n        calendarClasses.rangeCalendarContainer,\n        classes?.rangeCalendarContainer\n      )}\n    >\n      <HvSingleCalendar\n        className={clsx(\n          calendarClasses.singleCalendar,\n          classes?.singleCalendar\n        )}\n        id={localId}\n        locale={locale}\n        value={localValue}\n        visibleMonth={clampedMonth}\n        visibleYear={visibleYear}\n        minimumDate={minimumDate}\n        maximumDate={maximumDate}\n        onChange={onChange}\n        onInputChange={(evt, date) =>\n          onInputChange && onInputChange(evt, date, \"left\")\n        }\n        onVisibleDateChange={(event, action, index) =>\n          onVisibleDateChange?.(event, action, index, \"left\")\n        }\n        invalidDateLabel={invalidDateLabel}\n        {...others}\n      />\n\n      <HvSingleCalendar\n        className={clsx(\n          calendarClasses.singleCalendar,\n          classes?.singleCalendar\n        )}\n        id={rightCalendarId}\n        locale={locale}\n        value={localValue}\n        visibleMonth={rightVisibleMonth}\n        visibleYear={rightVisibleYear}\n        minimumDate={minimumDate}\n        maximumDate={maximumDate}\n        onChange={onChange}\n        onInputChange={(evt, date) =>\n          onInputChange && onInputChange(evt, date, \"right\")\n        }\n        onVisibleDateChange={(event, action, index) => {\n          onVisibleDateChange?.(event, action, index, \"right\");\n        }}\n        showEndDate\n        invalidDateLabel={invalidDateLabel}\n        {...others}\n      />\n    </StyledRangeCalendarContainer>\n  );\n\n  return (\n    <StyledRoot className={clsx(calendarClasses.root, classes?.root)}>\n      {startAdornment}\n      {rangeMode ? rangeCalendar : singleCalendar}\n    </StyledRoot>\n  );\n};\n\nexport interface DateRangeProp {\n  startDate: Date;\n  endDate?: Date;\n}\n\nexport type VisibilitySelectorActions =\n  | \"previous_month\"\n  | \"next_month\"\n  | \"previous_year\"\n  | \"next_year\"\n  | \"month\"\n  | \"month_year\";\n\nexport interface HvCalendarProps {\n  /**\n   * Styles applied from the theme.\n   */\n  classes?: HvCalendarClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The calendar locale. If undefined, it defaults to en-US\n   *\n   */\n  locale?: string;\n  /**\n   * Date that the calendar would show.\n   * if using the object format the calendar enter in range mode showing two calendars\n   */\n  value?: DateRangeProp | Date;\n  /**\n   * Controls the visible month of the Calendar\n   */\n  visibleMonth?: number;\n  /**\n   * Controls the visible year of the Calendar\n   */\n  visibleYear?: number;\n  /**\n   * Controls the visible month of the Calendar on the right side of the datepicker\n   */\n  rightVisibleMonth?: number;\n  /**\n   * Controls the visible year of the Calendar on the right side of the datepicker\n   */\n  rightVisibleYear?: number;\n  /**\n   * Callback function to be triggered when the selected date has changed.\n   */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    value: Date | DateRangeProp\n  ) => void;\n  /**\n   * Callback function to be triggered when the selected date input has changed.\n   */\n  onInputChange?: (\n    event:\n      | React.ChangeEvent<\n          HTMLTextAreaElement | HTMLInputElement | HTMLButtonElement\n        >\n      | undefined,\n    value: Date | DateRangeProp,\n    position: \"left\" | \"right\"\n  ) => void;\n  /**\n   * Callback function to be triggered when the user clicks on the month or year selector.\n   * it receives the action that was pressed:\n   * previous_month, next_month, previous_year, next_year,month\n   */\n  onVisibleDateChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    action: VisibilitySelectorActions,\n    value?: Date | DateRangeProp | number,\n    position?: \"left\" | \"right\"\n  ) => void;\n  /**\n   * The maximum selectable date after this all values are disabled.\n   */\n  maximumDate?: Date;\n  /**\n   * The minimum selectable date before this all values are disabled.\n   */\n  minimumDate?: Date;\n  /**\n   * An element placed before the Calendar\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Indicates if header should display the day of week.\n   */\n  showDayOfWeek?: boolean;\n  /**\n   * Label shown when date is invalid.\n   */\n  invalidDateLabel?: string;\n}\n"],"names":["HvCalendar","classes","id","locale","value","visibleMonth","visibleYear","rightVisibleMonth","rightVisibleYear","minimumDate","maximumDate","startAdornment","onChange","onInputChange","onVisibleDateChange","invalidDateLabel","others","elementId","useContext","HvFormElementContext","elementValue","HvFormElementValueContext","localValue","localId","setId","rangeMode","isRange","rightCalendarId","clampedMonth","singleCalendar","HvSingleCalendar","evt","date","rangeCalendar","StyledRangeCalendarContainer","className","clsx","calendarClasses","rangeCalendarContainer","children","_jsx","event","action","index","showEndDate","StyledRoot","root"],"mappings":";;;;;;;;;;AAYO,MAAMA,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC;AAAAA,EACAC,SAAS;AAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACY,MAAM;AACf,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAcC,WAAWC,oBAAoB;AAC/CC,QAAAA,eAAeF,WAAWG,yBAAyB;AACzD,QAAMC,aAAalB,SAASgB;AAC5B,QAAMG,UAAUrB,MAAMsB,MAAMP,WAAW,iBAAiB;AAClDQ,QAAAA,YAAYC,QAAQJ,UAAU;AAC9BK,QAAAA,kBAAkBH,MAAMD,SAAS,uBAAuB;AAC9D,QAAMK,eACJvB,gBAAgBA,eAAe,KAAK,IAAIA,eAAe,KAAK;AAExDwB,QAAAA,qCACHC,kBAAgB;AAAA,IACf5B,IAAIqB;AAAAA,IACJpB;AAAAA,IACAC,OAAOkB;AAAAA,IACPjB,cAAcuB;AAAAA,IACdtB;AAAAA,IACAG;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAC,eAAeA,CAACkB,KAAKC,SACnBnB,iBAAiBA,cAAckB,KAAKC,MAAM,MAAM;AAAA,IAElDlB;AAAAA,IACAC;AAAAA,IAAmC,GAC/BC;AAAAA,EAAAA,CAEP;AAEKiB,QAAAA,qCACHC,8BAA4B;AAAA,IAC3BC,WAAWC,KACTC,gBAAgBC,wBAChBrC,mCAASqC,sBAAsB;AAAA,IAC/BC,UAAA,CAEFC,oBAACV,kBAAgB;AAAA,MACfK,WAAWC,KACTC,gBAAgBR,gBAChB5B,mCAAS4B,cAAc;AAAA,MAEzB3B,IAAIqB;AAAAA,MACJpB;AAAAA,MACAC,OAAOkB;AAAAA,MACPjB,cAAcuB;AAAAA,MACdtB;AAAAA,MACAG;AAAAA,MACAC;AAAAA,MACAE;AAAAA,MACAC,eAAeA,CAACkB,KAAKC,SACnBnB,iBAAiBA,cAAckB,KAAKC,MAAM,MAAM;AAAA,MAElDlB,qBAAqBA,CAAC2B,OAAOC,QAAQC,UACnC7B,2DAAsB2B,OAAOC,QAAQC,OAAO;AAAA,MAE9C5B;AAAAA,MAAmC,GAC/BC;AAAAA,IAAAA,CACJ,GAEFwB,oBAACV,kBAAgB;AAAA,MACfK,WAAWC,KACTC,gBAAgBR,gBAChB5B,mCAAS4B,cAAc;AAAA,MAEzB3B,IAAIyB;AAAAA,MACJxB;AAAAA,MACAC,OAAOkB;AAAAA,MACPjB,cAAcE;AAAAA,MACdD,aAAaE;AAAAA,MACbC;AAAAA,MACAC;AAAAA,MACAE;AAAAA,MACAC,eAAeA,CAACkB,KAAKC,SACnBnB,iBAAiBA,cAAckB,KAAKC,MAAM,OAAO;AAAA,MAEnDlB,qBAAqBA,CAAC2B,OAAOC,QAAQC,UAAU;AACvBF,mEAAAA,OAAOC,QAAQC,OAAO;AAAA,MAC9C;AAAA,MACAC,aAAW;AAAA,MACX7B;AAAAA,MAAmC,GAC/BC;AAAAA,IAAAA,CACJ,CAAA;AAAA,EAAA,CAEL;AAED,8BACG6B,YAAU;AAAA,IAACV,WAAWC,KAAKC,gBAAgBS,MAAM7C,mCAAS6C,IAAI;AAAA,IAAEP,WAC9D5B,gBACAc,YAAYQ,gBAAgBJ,cAAc;AAAA,EAAA,CAChC;AAEjB;"}

package/dist/esm/components/Calendar/CalendarHeader/CalendarHeader.js

@@ -8,13 +8,12 @@ import isNil from "lodash/isNil";
 import { Info } from "@hitachivantara/uikit-react-icons";
 import { isRange, isDate, formatToLocale, isSameDay } from "../utils.js";
 import calendarHeaderClasses from "./calendarHeaderClasses.js";
-import { StyledRoot, StyledHeaderDayOfWeek, StyledInput, StyledInputBorderContainer } from "./CalendarHeader.styles.js";
+import { StyledRoot, StyledHeaderDayOfWeek, StyledInput, StyledInputBorderContainer, StyledTypography } from "./CalendarHeader.styles.js";
 import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
 import { HvFormElementValueContext } from "../../Forms/FormElement/context/FormElementValueContext.js";
 import { HvFormElementContext } from "../../Forms/FormElement/context/FormElementContext.js";
 import { HvFormElementDescriptorsContext } from "../../Forms/FormElement/context/FormElementDescriptorsContext.js";
 import { setId } from "../../../utils/setId.js";
-import { HvTypography } from "../../Typography/Typography.js";
 import { isKeypress } from "../../../utils/keyboardUtils/keyCheck.js";
 import { keyboardCodes } from "../../../utils/keyboardUtils/keyboardCodes.js";
 dayjs.extend(localeData);
@@ -32,6 +31,7 @@ const HvCalendarHeader = ({
   showEndDate,
   showDayOfWeek = false,
   onFocus,
+  invalidDateLabel = "Invalid Date",
   ...others
 }) => {
   var _a;
@@ -142,14 +142,14 @@ const HvCalendarHeader = ({
       style: {
         height: 32
       },
-      children: !isValidValue && inputValue !== "" && /* @__PURE__ */ jsxs(HvTypography, {
+      children: !isValidValue && inputValue !== "" && /* @__PURE__ */ jsxs(StyledTypography, {
         component: "span",
         variant: "body",
         className: clsx(calendarHeaderClasses.invalidMessageStyling, classes == null ? void 0 : classes.invalidMessageStyling),
         children: [/* @__PURE__ */ jsx(Info, {
           color: "brand",
           iconSize: "S"
-        }), "Invalid date"]
+        }), invalidDateLabel]
       })
     })]
   });

package/dist/esm/components/Calendar/CalendarHeader/CalendarHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.js","sources":["../../../../../src/components/Calendar/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import { useState, useEffect, useContext } from \"react\";\nimport dayjs from \"dayjs\";\nimport localeData from \"dayjs/plugin/localeData\";\nimport localizedFormat from \"dayjs/plugin/localizedFormat\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport { clsx } from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport {\n  HvFormElementContext,\n  HvFormElementValueContext,\n  HvFormElementDescriptorsContext,\n  HvTypography,\n} from \"@core/components\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\nimport { isRange, isSameDay, formatToLocale, isDate } from \"../utils\";\nimport { DateRangeProp } from \"../Calendar\";\nimport calendarHeaderClasses, {\n  HvCalendarHeaderClasses,\n} from \"./calendarHeaderClasses\";\nimport {\n  StyledHeaderDayOfWeek,\n  StyledInput,\n  StyledInputBorderContainer,\n  StyledRoot,\n} from \"./CalendarHeader.styles\";\n\ndayjs.extend(localeData);\ndayjs.extend(localizedFormat);\ndayjs.extend(customParseFormat);\n\nconst { Enter } = keyboardCodes;\n\nexport const HvCalendarHeader = ({\n  id,\n  value,\n  locale = \"en-US\",\n  classes,\n  onChange,\n  showEndDate,\n  showDayOfWeek = false,\n  onFocus,\n  ...others\n}: HvCalendarHeaderProps) => {\n  const { elementId } = useContext(HvFormElementContext);\n  const elementValue = useContext(HvFormElementValueContext);\n  const { label } = useContext(HvFormElementDescriptorsContext);\n\n  let localValue: string | Date | DateRangeProp | undefined =\n    value ?? elementValue ?? \"\";\n  if (isRange(localValue)) {\n    localValue = showEndDate ? localValue.endDate : localValue.startDate;\n  }\n  const [dateValue, setDateValue] = useState<\n    string | Date | DateRangeProp | undefined\n  >(localValue);\n  const [editedValue, setEditedValue] = useState<string | null>(null);\n  const [displayValue, setDisplayValue] = useState(\"\");\n  const [weekdayDisplay, setWeekdayDisplay] = useState(\"\");\n\n  const localId = id ?? setId(elementId, \"calendarHeader\");\n\n  const inputValue = editedValue ?? displayValue;\n  const localeFormat = dayjs().locale(locale).localeData().longDateFormat(\"L\");\n\n  const [isValidValue, setIsValidValue] = useState(\n    inputValue.length === 0 || (!!inputValue && dayjs(localValue).isValid())\n  );\n\n  const validateInput = (incomingValid) =>\n    incomingValid === undefined || dayjs(incomingValid).isValid();\n  useEffect(() => {\n    const valid = validateInput(localValue);\n    setIsValidValue(valid);\n    if (valid) {\n      if (!localValue) {\n        setDisplayValue(\"\");\n        setEditedValue(null);\n        setWeekdayDisplay(\"\");\n        return;\n      }\n      const weekday = new Intl.DateTimeFormat(locale, {\n        weekday: \"short\",\n      }).format(isDate(localValue) ? localValue : 0);\n      setDisplayValue(formatToLocale(localValue, locale));\n      setEditedValue(null);\n      setWeekdayDisplay(weekday);\n    }\n  }, [localValue, locale]);\n\n  const handleNewDate = (event, date) => {\n    // attempt to format in locale data, or fallback to default\n    const localeParsedDate = dayjs(date, localeFormat);\n\n    const isValidInput = localeParsedDate.isValid();\n    const dateParsed = isValidInput\n      ? localeParsedDate.toDate()\n      : dayjs(date).toDate();\n    // prevent extra updates\n    if (!isSameDay(dateParsed, dateValue)) {\n      setDateValue(dateParsed);\n      onChange?.(event, dateParsed);\n    }\n\n    setIsValidValue(isValidInput);\n    if (isValidInput) {\n      setEditedValue(null);\n    }\n  };\n\n  const onBlurHandler = (event) => {\n    if (isNil(editedValue)) return;\n    if (editedValue === \"\") {\n      setIsValidValue(true);\n      setEditedValue(null);\n      return;\n    }\n    handleNewDate(event, editedValue);\n  };\n\n  const keyDownHandler = (event) => {\n    if (!isKeypress(event, Enter) || isNil(editedValue) || editedValue === \"\")\n      return;\n    event.preventDefault();\n\n    handleNewDate(event, editedValue);\n  };\n\n  const onFocusHandler = (event) => {\n    if (!localValue) return;\n    const formattedDate =\n      isValidValue && isDate(localValue)\n        ? dayjs(localValue).locale(locale).format(\"L\")\n        : editedValue;\n    setEditedValue(formattedDate);\n    onFocus?.(event, formattedDate);\n  };\n\n  const onChangeHandler = (event) => {\n    setEditedValue(event.target.value);\n  };\n  return (\n    <>\n      <StyledRoot\n        id={localId}\n        className={clsx(\n          calendarHeaderClasses.root,\n          classes?.root,\n          !isValidValue &&\n            inputValue !== \"\" &&\n            clsx(calendarHeaderClasses.invalid, classes?.invalid)\n        )}\n      >\n        {showDayOfWeek && (\n          <StyledHeaderDayOfWeek\n            className={clsx(\n              calendarHeaderClasses.headerDayOfWeek,\n              classes?.headerDayOfWeek\n            )}\n          >\n            {weekdayDisplay || \"\\u00A0\"}\n          </StyledHeaderDayOfWeek>\n        )}\n\n        <div\n          className={clsx(\n            calendarHeaderClasses.headerDate,\n            classes?.headerDate\n          )}\n        >\n          <StyledInput\n            type=\"text\"\n            id={setId(localId, \"header-input\")}\n            placeholder={localeFormat}\n            value={inputValue}\n            className={clsx(calendarHeaderClasses.input, classes?.input)}\n            onBlur={onBlurHandler}\n            onFocus={onFocusHandler}\n            onChange={onChangeHandler}\n            onKeyDown={keyDownHandler}\n            aria-labelledby={label?.[0]?.id}\n            {...others}\n          />\n        </div>\n      </StyledRoot>\n      {!isValidValue && inputValue !== \"\" && (\n        <StyledInputBorderContainer\n          role=\"presentation\"\n          className={clsx(\n            calendarHeaderClasses.inputBorderContainer,\n            classes?.inputBorderContainer\n          )}\n        />\n      )}\n      <div style={{ height: 32 }}>\n        {!isValidValue && inputValue !== \"\" && (\n          <HvTypography\n            component=\"span\"\n            variant=\"body\"\n            className={clsx(\n              calendarHeaderClasses.invalidMessageStyling,\n              classes?.invalidMessageStyling\n            )}\n          >\n            <Info color=\"brand\" iconSize=\"S\" />\n            Invalid date\n          </HvTypography>\n        )}\n      </div>\n    </>\n  );\n};\n\n// TODO: refactor this out\nHvCalendarHeader.formElementType = \"HvCalendarHeader\";\n\nexport interface HvCalendarHeaderProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvCalendarHeaderClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The text to be shown on the main part of the header.\n   */\n  value?: string | Date | DateRangeProp;\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale?: string;\n  /**\n   * Callback to define the input date.\n   */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    value: Date | DateRangeProp\n  ) => void;\n  /**\n   * Callback to handle input onFocus.\n   */\n  onFocus?: (\n    event: React.FocusEventHandler<any>,\n    formattedDate: string | null\n  ) => void;\n  /**\n   * Indicates if header should display end date in a date range.\n   */\n  showEndDate?: boolean;\n  /**\n   * Indicates if header should display the day of week.\n   */\n  showDayOfWeek?: boolean;\n}\n"],"names":["dayjs","extend","localeData","localizedFormat","customParseFormat","Enter","keyboardCodes","HvCalendarHeader","id","value","locale","classes","onChange","showEndDate","showDayOfWeek","onFocus","others","elementId","useContext","HvFormElementContext","elementValue","HvFormElementValueContext","label","HvFormElementDescriptorsContext","localValue","isRange","endDate","startDate","dateValue","setDateValue","useState","editedValue","setEditedValue","displayValue","setDisplayValue","weekdayDisplay","setWeekdayDisplay","localId","setId","inputValue","localeFormat","longDateFormat","isValidValue","setIsValidValue","length","isValid","validateInput","incomingValid","undefined","useEffect","valid","weekday","Intl","DateTimeFormat","format","isDate","formatToLocale","handleNewDate","event","date","localeParsedDate","isValidInput","dateParsed","toDate","isSameDay","onBlurHandler","isNil","keyDownHandler","isKeypress","preventDefault","onFocusHandler","formattedDate","onChangeHandler","target","_Fragment","children","_jsxs","StyledRoot","className","clsx","calendarHeaderClasses","root","invalid","_jsx","StyledHeaderDayOfWeek","headerDayOfWeek","headerDate","StyledInput","type","placeholder","input","onBlur","onKeyDown","StyledInputBorderContainer","role","inputBorderContainer","style","height","HvTypography","component","variant","invalidMessageStyling","Info","color","iconSize","formElementType"],"mappings":"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"}
+{"version":3,"file":"CalendarHeader.js","sources":["../../../../../src/components/Calendar/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import { useState, useEffect, useContext } from \"react\";\nimport dayjs from \"dayjs\";\nimport localeData from \"dayjs/plugin/localeData\";\nimport localizedFormat from \"dayjs/plugin/localizedFormat\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport { clsx } from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport {\n  HvFormElementContext,\n  HvFormElementValueContext,\n  HvFormElementDescriptorsContext,\n} from \"@core/components\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\nimport { isRange, isSameDay, formatToLocale, isDate } from \"../utils\";\nimport { DateRangeProp } from \"../Calendar\";\nimport calendarHeaderClasses, {\n  HvCalendarHeaderClasses,\n} from \"./calendarHeaderClasses\";\nimport {\n  StyledHeaderDayOfWeek,\n  StyledInput,\n  StyledInputBorderContainer,\n  StyledRoot,\n  StyledTypography,\n} from \"./CalendarHeader.styles\";\n\ndayjs.extend(localeData);\ndayjs.extend(localizedFormat);\ndayjs.extend(customParseFormat);\n\nconst { Enter } = keyboardCodes;\n\nexport const HvCalendarHeader = ({\n  id,\n  value,\n  locale = \"en-US\",\n  classes,\n  onChange,\n  showEndDate,\n  showDayOfWeek = false,\n  onFocus,\n  invalidDateLabel = \"Invalid Date\",\n  ...others\n}: HvCalendarHeaderProps) => {\n  const { elementId } = useContext(HvFormElementContext);\n  const elementValue = useContext(HvFormElementValueContext);\n  const { label } = useContext(HvFormElementDescriptorsContext);\n\n  let localValue: string | Date | DateRangeProp | undefined =\n    value ?? elementValue ?? \"\";\n  if (isRange(localValue)) {\n    localValue = showEndDate ? localValue.endDate : localValue.startDate;\n  }\n  const [dateValue, setDateValue] = useState<\n    string | Date | DateRangeProp | undefined\n  >(localValue);\n  const [editedValue, setEditedValue] = useState<string | null>(null);\n  const [displayValue, setDisplayValue] = useState(\"\");\n  const [weekdayDisplay, setWeekdayDisplay] = useState(\"\");\n\n  const localId = id ?? setId(elementId, \"calendarHeader\");\n\n  const inputValue = editedValue ?? displayValue;\n  const localeFormat = dayjs().locale(locale).localeData().longDateFormat(\"L\");\n\n  const [isValidValue, setIsValidValue] = useState(\n    inputValue.length === 0 || (!!inputValue && dayjs(localValue).isValid())\n  );\n\n  const validateInput = (incomingValid) =>\n    incomingValid === undefined || dayjs(incomingValid).isValid();\n  useEffect(() => {\n    const valid = validateInput(localValue);\n    setIsValidValue(valid);\n    if (valid) {\n      if (!localValue) {\n        setDisplayValue(\"\");\n        setEditedValue(null);\n        setWeekdayDisplay(\"\");\n        return;\n      }\n      const weekday = new Intl.DateTimeFormat(locale, {\n        weekday: \"short\",\n      }).format(isDate(localValue) ? localValue : 0);\n      setDisplayValue(formatToLocale(localValue, locale));\n      setEditedValue(null);\n      setWeekdayDisplay(weekday);\n    }\n  }, [localValue, locale]);\n\n  const handleNewDate = (event, date) => {\n    // attempt to format in locale data, or fallback to default\n    const localeParsedDate = dayjs(date, localeFormat);\n\n    const isValidInput = localeParsedDate.isValid();\n    const dateParsed = isValidInput\n      ? localeParsedDate.toDate()\n      : dayjs(date).toDate();\n    // prevent extra updates\n    if (!isSameDay(dateParsed, dateValue)) {\n      setDateValue(dateParsed);\n      onChange?.(event, dateParsed);\n    }\n\n    setIsValidValue(isValidInput);\n    if (isValidInput) {\n      setEditedValue(null);\n    }\n  };\n\n  const onBlurHandler = (event) => {\n    if (isNil(editedValue)) return;\n    if (editedValue === \"\") {\n      setIsValidValue(true);\n      setEditedValue(null);\n      return;\n    }\n    handleNewDate(event, editedValue);\n  };\n\n  const keyDownHandler = (event) => {\n    if (!isKeypress(event, Enter) || isNil(editedValue) || editedValue === \"\")\n      return;\n    event.preventDefault();\n\n    handleNewDate(event, editedValue);\n  };\n\n  const onFocusHandler = (event) => {\n    if (!localValue) return;\n    const formattedDate =\n      isValidValue && isDate(localValue)\n        ? dayjs(localValue).locale(locale).format(\"L\")\n        : editedValue;\n    setEditedValue(formattedDate);\n    onFocus?.(event, formattedDate);\n  };\n\n  const onChangeHandler = (event) => {\n    setEditedValue(event.target.value);\n  };\n  return (\n    <>\n      <StyledRoot\n        id={localId}\n        className={clsx(\n          calendarHeaderClasses.root,\n          classes?.root,\n          !isValidValue &&\n            inputValue !== \"\" &&\n            clsx(calendarHeaderClasses.invalid, classes?.invalid)\n        )}\n      >\n        {showDayOfWeek && (\n          <StyledHeaderDayOfWeek\n            className={clsx(\n              calendarHeaderClasses.headerDayOfWeek,\n              classes?.headerDayOfWeek\n            )}\n          >\n            {weekdayDisplay || \"\\u00A0\"}\n          </StyledHeaderDayOfWeek>\n        )}\n\n        <div\n          className={clsx(\n            calendarHeaderClasses.headerDate,\n            classes?.headerDate\n          )}\n        >\n          <StyledInput\n            type=\"text\"\n            id={setId(localId, \"header-input\")}\n            placeholder={localeFormat}\n            value={inputValue}\n            className={clsx(calendarHeaderClasses.input, classes?.input)}\n            onBlur={onBlurHandler}\n            onFocus={onFocusHandler}\n            onChange={onChangeHandler}\n            onKeyDown={keyDownHandler}\n            aria-labelledby={label?.[0]?.id}\n            {...others}\n          />\n        </div>\n      </StyledRoot>\n      {!isValidValue && inputValue !== \"\" && (\n        <StyledInputBorderContainer\n          role=\"presentation\"\n          className={clsx(\n            calendarHeaderClasses.inputBorderContainer,\n            classes?.inputBorderContainer\n          )}\n        />\n      )}\n      <div style={{ height: 32 }}>\n        {!isValidValue && inputValue !== \"\" && (\n          <StyledTypography\n            component=\"span\"\n            variant=\"body\"\n            className={clsx(\n              calendarHeaderClasses.invalidMessageStyling,\n              classes?.invalidMessageStyling\n            )}\n          >\n            <Info color=\"brand\" iconSize=\"S\" />\n            {invalidDateLabel}\n          </StyledTypography>\n        )}\n      </div>\n    </>\n  );\n};\n\n// TODO: refactor this out\nHvCalendarHeader.formElementType = \"HvCalendarHeader\";\n\nexport interface HvCalendarHeaderProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvCalendarHeaderClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The text to be shown on the main part of the header.\n   */\n  value?: string | Date | DateRangeProp;\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale?: string;\n  /**\n   * Callback to define the input date.\n   */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    value: Date | DateRangeProp\n  ) => void;\n  /**\n   * Callback to handle input onFocus.\n   */\n  onFocus?: (\n    event: React.FocusEventHandler<any>,\n    formattedDate: string | null\n  ) => void;\n  /**\n   * Indicates if header should display end date in a date range.\n   */\n  showEndDate?: boolean;\n  /**\n   * Indicates if header should display the day of week.\n   */\n  showDayOfWeek?: boolean;\n  /**\n   * Label shown when date is invalid.\n   */\n  invalidDateLabel?: string;\n}\n"],"names":["dayjs","extend","localeData","localizedFormat","customParseFormat","Enter","keyboardCodes","HvCalendarHeader","id","value","locale","classes","onChange","showEndDate","showDayOfWeek","onFocus","invalidDateLabel","others","elementId","useContext","HvFormElementContext","elementValue","HvFormElementValueContext","label","HvFormElementDescriptorsContext","localValue","isRange","endDate","startDate","dateValue","setDateValue","useState","editedValue","setEditedValue","displayValue","setDisplayValue","weekdayDisplay","setWeekdayDisplay","localId","setId","inputValue","localeFormat","longDateFormat","isValidValue","setIsValidValue","length","isValid","validateInput","incomingValid","undefined","useEffect","valid","weekday","Intl","DateTimeFormat","format","isDate","formatToLocale","handleNewDate","event","date","localeParsedDate","isValidInput","dateParsed","toDate","isSameDay","onBlurHandler","isNil","keyDownHandler","isKeypress","preventDefault","onFocusHandler","formattedDate","onChangeHandler","target","_Fragment","children","_jsxs","StyledRoot","className","clsx","calendarHeaderClasses","root","invalid","_jsx","StyledHeaderDayOfWeek","headerDayOfWeek","headerDate","StyledInput","type","placeholder","input","onBlur","onKeyDown","StyledInputBorderContainer","role","inputBorderContainer","style","height","StyledTypography","component","variant","invalidMessageStyling","Info","color","iconSize","formElementType"],"mappings":"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"}

package/dist/esm/components/Calendar/CalendarHeader/CalendarHeader.styles.js

@@ -4,9 +4,9 @@ import { jsx } from "@emotion/react/jsx-runtime";
 import { outlineStyles } from "../../../utils/focusUtils.js";
 import { HvTypography } from "../../Typography/Typography.js";
 const StyledRoot = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1yjj6ap3"
+  target: "e1yjj6ap4"
 } : {
-  target: "e1yjj6ap3",
+  target: "e1yjj6ap4",
   label: "StyledRoot"
 })({
   marginTop: theme.spacing("xs"),
@@ -19,23 +19,23 @@ const StyledRoot = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "prod
   "&:hover, &:focus": {
     borderBottom: `1px solid ${theme.colors.secondary}`
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJIZWFkZXIvQ2FsZW5kYXJIZWFkZXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLMEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9DYWxlbmRhci9DYWxlbmRhckhlYWRlci9DYWxlbmRhckhlYWRlci5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBIdlR5cG9ncmFwaHkgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50c1wiO1xuaW1wb3J0IHsgb3V0bGluZVN0eWxlcyB9IGZyb20gXCJAY29yZS91dGlsc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIG1hcmdpblRvcDogdGhlbWUuc3BhY2luZyhcInhzXCIpLFxuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgYm9yZGVyQm90dG9tOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEJvcmRlckJvdHRvbSxcbiAgYm9yZGVyVG9wOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEJvcmRlclRvcCxcbiAgYm9yZGVyTGVmdDogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJMZWZ0LFxuICBib3JkZXJSaWdodDogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJSaWdodCxcbiAgYm9yZGVyUmFkaXVzOiB0aGVtZS5jYWxlbmRhci5ib3JkZXJSYWRpdXMsXG4gIFwiJjpob3ZlciwgJjpmb2N1c1wiOiB7XG4gICAgYm9yZGVyQm90dG9tOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeX1gLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbnB1dEJvcmRlckNvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLm5lZ2F0aXZlLFxuICBoZWlnaHQ6IDEsXG4gIG1hcmdpblRvcDogLTEsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZElucHV0ID0gc3R5bGVkKChwcm9wcykgPT4gPGlucHV0IHsuLi5wcm9wc30gLz4pKHtcbiAgYm9yZGVyOiBcIm5vbmVcIixcbiAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gIHBhZGRpbmc6IGA1cHggJHt0aGVtZS5zcGFjaW5nKFwieHNcIil9YCxcbiAgZm9udEZhbWlseTogdGhlbWUuZm9udEZhbWlseS5ib2R5LFxuXG4gIGNvbG9yOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRDb2xvcixcbiAgZm9udFNpemU6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udFNpemUsXG4gIGxldHRlclNwYWNpbmc6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udExldHRlclNwYWNpbmcsXG4gIGxpbmVIZWlnaHQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udExpbmVIZWlnaHQsXG4gIGZvbnRXZWlnaHQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udFdlaWdodCxcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBcIiY6OnBsYWNlaG9sZGVyXCI6IHtcbiAgICBjb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeV82MCxcbiAgfSxcbiAgXCImOmZvY3VzXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgfSxcbiAgXCImOmZvY3VzLXZpc2libGVcIjoge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEhlYWRlckRheU9mV2VlayA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgY29sb3I6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udENvbG9yLFxuICBwYWRkaW5nTGVmdDogdGhlbWUuc3BhY2luZyhcInhzXCIpLFxufSk7XG4iXX0= */");
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJIZWFkZXIvQ2FsZW5kYXJIZWFkZXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLMEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9DYWxlbmRhci9DYWxlbmRhckhlYWRlci9DYWxlbmRhckhlYWRlci5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBIdlR5cG9ncmFwaHkgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50c1wiO1xuaW1wb3J0IHsgb3V0bGluZVN0eWxlcyB9IGZyb20gXCJAY29yZS91dGlsc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIG1hcmdpblRvcDogdGhlbWUuc3BhY2luZyhcInhzXCIpLFxuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgYm9yZGVyQm90dG9tOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEJvcmRlckJvdHRvbSxcbiAgYm9yZGVyVG9wOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEJvcmRlclRvcCxcbiAgYm9yZGVyTGVmdDogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJMZWZ0LFxuICBib3JkZXJSaWdodDogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJSaWdodCxcbiAgYm9yZGVyUmFkaXVzOiB0aGVtZS5jYWxlbmRhci5ib3JkZXJSYWRpdXMsXG4gIFwiJjpob3ZlciwgJjpmb2N1c1wiOiB7XG4gICAgYm9yZGVyQm90dG9tOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeX1gLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbnB1dEJvcmRlckNvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLm5lZ2F0aXZlLFxuICBoZWlnaHQ6IDEsXG4gIG1hcmdpblRvcDogLTEsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZElucHV0ID0gc3R5bGVkKChwcm9wcykgPT4gPGlucHV0IHsuLi5wcm9wc30gLz4pKHtcbiAgYm9yZGVyOiBcIm5vbmVcIixcbiAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gIHBhZGRpbmc6IGA1cHggJHt0aGVtZS5zcGFjaW5nKFwieHNcIil9YCxcbiAgZm9udEZhbWlseTogdGhlbWUuZm9udEZhbWlseS5ib2R5LFxuXG4gIGNvbG9yOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRDb2xvcixcbiAgZm9udFNpemU6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udFNpemUsXG4gIGxldHRlclNwYWNpbmc6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udExldHRlclNwYWNpbmcsXG4gIGxpbmVIZWlnaHQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udExpbmVIZWlnaHQsXG4gIGZvbnRXZWlnaHQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udFdlaWdodCxcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBcIiY6OnBsYWNlaG9sZGVyXCI6IHtcbiAgICBjb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeV82MCxcbiAgfSxcbiAgXCImOmZvY3VzXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgfSxcbiAgXCImOmZvY3VzLXZpc2libGVcIjoge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEhlYWRlckRheU9mV2VlayA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgY29sb3I6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Rm9udENvbG9yLFxuICBwYWRkaW5nTGVmdDogdGhlbWUuc3BhY2luZyhcInhzXCIpLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRUeXBvZ3JhcGh5ID0gc3R5bGVkKEh2VHlwb2dyYXBoeSkoe1xuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgY29sb3I6IHRoZW1lLmNvbG9ycy5uZWdhdGl2ZSxcbn0pO1xuIl19 */");
 const StyledInputBorderContainer = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1yjj6ap2"
+  target: "e1yjj6ap3"
 } : {
-  target: "e1yjj6ap2",
+  target: "e1yjj6ap3",
   label: "StyledInputBorderContainer"
 })({
   backgroundColor: theme.colors.negative,
   height: 1,
   marginTop: -1
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJIZWFkZXIvQ2FsZW5kYXJIZWFkZXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQjBDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJIZWFkZXIvQ2FsZW5kYXJIZWFkZXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgSHZUeXBvZ3JhcGh5IH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHNcIjtcbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtYXJnaW5Ub3A6IHRoZW1lLnNwYWNpbmcoXCJ4c1wiKSxcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gIGJvcmRlckJvdHRvbTogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJCb3R0b20sXG4gIGJvcmRlclRvcDogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJUb3AsXG4gIGJvcmRlckxlZnQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Qm9yZGVyTGVmdCxcbiAgYm9yZGVyUmlnaHQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Qm9yZGVyUmlnaHQsXG4gIGJvcmRlclJhZGl1czogdGhlbWUuY2FsZW5kYXIuYm9yZGVyUmFkaXVzLFxuICBcIiY6aG92ZXIsICY6Zm9jdXNcIjoge1xuICAgIGJvcmRlckJvdHRvbTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnl9YCxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW5wdXRCb3JkZXJDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5uZWdhdGl2ZSxcbiAgaGVpZ2h0OiAxLFxuICBtYXJnaW5Ub3A6IC0xLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbnB1dCA9IHN0eWxlZCgocHJvcHMpID0+IDxpbnB1dCB7Li4ucHJvcHN9IC8+KSh7XG4gIGJvcmRlcjogXCJub25lXCIsXG4gIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICBwYWRkaW5nOiBgNXB4ICR7dGhlbWUuc3BhY2luZyhcInhzXCIpfWAsXG4gIGZvbnRGYW1pbHk6IHRoZW1lLmZvbnRGYW1pbHkuYm9keSxcblxuICBjb2xvcjogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRGb250Q29sb3IsXG4gIGZvbnRTaXplOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRTaXplLFxuICBsZXR0ZXJTcGFjaW5nOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRMZXR0ZXJTcGFjaW5nLFxuICBsaW5lSGVpZ2h0OiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRMaW5lSGVpZ2h0LFxuICBmb250V2VpZ2h0OiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRXZWlnaHQsXG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgXCImOjpwbGFjZWhvbGRlclwiOiB7XG4gICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnlfNjAsXG4gIH0sXG4gIFwiJjpmb2N1c1wiOiB7XG4gICAgb3V0bGluZTogXCJub25lXCIsXG4gIH0sXG4gIFwiJjpmb2N1cy12aXNpYmxlXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRIZWFkZXJEYXlPZldlZWsgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIGNvbG9yOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRDb2xvcixcbiAgcGFkZGluZ0xlZnQ6IHRoZW1lLnNwYWNpbmcoXCJ4c1wiKSxcbn0pO1xuIl19 */");
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJIZWFkZXIvQ2FsZW5kYXJIZWFkZXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQjBDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJIZWFkZXIvQ2FsZW5kYXJIZWFkZXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgSHZUeXBvZ3JhcGh5IH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHNcIjtcbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtYXJnaW5Ub3A6IHRoZW1lLnNwYWNpbmcoXCJ4c1wiKSxcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gIGJvcmRlckJvdHRvbTogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJCb3R0b20sXG4gIGJvcmRlclRvcDogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJUb3AsXG4gIGJvcmRlckxlZnQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Qm9yZGVyTGVmdCxcbiAgYm9yZGVyUmlnaHQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Qm9yZGVyUmlnaHQsXG4gIGJvcmRlclJhZGl1czogdGhlbWUuY2FsZW5kYXIuYm9yZGVyUmFkaXVzLFxuICBcIiY6aG92ZXIsICY6Zm9jdXNcIjoge1xuICAgIGJvcmRlckJvdHRvbTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnl9YCxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW5wdXRCb3JkZXJDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5uZWdhdGl2ZSxcbiAgaGVpZ2h0OiAxLFxuICBtYXJnaW5Ub3A6IC0xLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbnB1dCA9IHN0eWxlZCgocHJvcHMpID0+IDxpbnB1dCB7Li4ucHJvcHN9IC8+KSh7XG4gIGJvcmRlcjogXCJub25lXCIsXG4gIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICBwYWRkaW5nOiBgNXB4ICR7dGhlbWUuc3BhY2luZyhcInhzXCIpfWAsXG4gIGZvbnRGYW1pbHk6IHRoZW1lLmZvbnRGYW1pbHkuYm9keSxcblxuICBjb2xvcjogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRGb250Q29sb3IsXG4gIGZvbnRTaXplOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRTaXplLFxuICBsZXR0ZXJTcGFjaW5nOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRMZXR0ZXJTcGFjaW5nLFxuICBsaW5lSGVpZ2h0OiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRMaW5lSGVpZ2h0LFxuICBmb250V2VpZ2h0OiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRXZWlnaHQsXG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgXCImOjpwbGFjZWhvbGRlclwiOiB7XG4gICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnlfNjAsXG4gIH0sXG4gIFwiJjpmb2N1c1wiOiB7XG4gICAgb3V0bGluZTogXCJub25lXCIsXG4gIH0sXG4gIFwiJjpmb2N1cy12aXNpYmxlXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRIZWFkZXJEYXlPZldlZWsgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIGNvbG9yOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRDb2xvcixcbiAgcGFkZGluZ0xlZnQ6IHRoZW1lLnNwYWNpbmcoXCJ4c1wiKSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVHlwb2dyYXBoeSA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gIGNvbG9yOiB0aGVtZS5jb2xvcnMubmVnYXRpdmUsXG59KTtcbiJdfQ== */");
 const StyledInput = /* @__PURE__ */ _styled((props) => /* @__PURE__ */ jsx("input", {
   ...props
 }), process.env.NODE_ENV === "production" ? {
-  target: "e1yjj6ap1"
+  target: "e1yjj6ap2"
 } : {
-  target: "e1yjj6ap1",
+  target: "e1yjj6ap2",
   label: "StyledInput"
 })({
   border: "none",
@@ -57,20 +57,31 @@ const StyledInput = /* @__PURE__ */ _styled((props) => /* @__PURE__ */ jsx("inpu
   "&:focus-visible": {
     ...outlineStyles
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJIZWFkZXIvQ2FsZW5kYXJIZWFkZXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3QjJCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJIZWFkZXIvQ2FsZW5kYXJIZWFkZXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgSHZUeXBvZ3JhcGh5IH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHNcIjtcbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtYXJnaW5Ub3A6IHRoZW1lLnNwYWNpbmcoXCJ4c1wiKSxcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gIGJvcmRlckJvdHRvbTogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJCb3R0b20sXG4gIGJvcmRlclRvcDogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJUb3AsXG4gIGJvcmRlckxlZnQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Qm9yZGVyTGVmdCxcbiAgYm9yZGVyUmlnaHQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Qm9yZGVyUmlnaHQsXG4gIGJvcmRlclJhZGl1czogdGhlbWUuY2FsZW5kYXIuYm9yZGVyUmFkaXVzLFxuICBcIiY6aG92ZXIsICY6Zm9jdXNcIjoge1xuICAgIGJvcmRlckJvdHRvbTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnl9YCxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW5wdXRCb3JkZXJDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5uZWdhdGl2ZSxcbiAgaGVpZ2h0OiAxLFxuICBtYXJnaW5Ub3A6IC0xLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbnB1dCA9IHN0eWxlZCgocHJvcHMpID0+IDxpbnB1dCB7Li4ucHJvcHN9IC8+KSh7XG4gIGJvcmRlcjogXCJub25lXCIsXG4gIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICBwYWRkaW5nOiBgNXB4ICR7dGhlbWUuc3BhY2luZyhcInhzXCIpfWAsXG4gIGZvbnRGYW1pbHk6IHRoZW1lLmZvbnRGYW1pbHkuYm9keSxcblxuICBjb2xvcjogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRGb250Q29sb3IsXG4gIGZvbnRTaXplOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRTaXplLFxuICBsZXR0ZXJTcGFjaW5nOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRMZXR0ZXJTcGFjaW5nLFxuICBsaW5lSGVpZ2h0OiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRMaW5lSGVpZ2h0LFxuICBmb250V2VpZ2h0OiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRXZWlnaHQsXG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgXCImOjpwbGFjZWhvbGRlclwiOiB7XG4gICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnlfNjAsXG4gIH0sXG4gIFwiJjpmb2N1c1wiOiB7XG4gICAgb3V0bGluZTogXCJub25lXCIsXG4gIH0sXG4gIFwiJjpmb2N1cy12aXNpYmxlXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRIZWFkZXJEYXlPZldlZWsgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIGNvbG9yOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRDb2xvcixcbiAgcGFkZGluZ0xlZnQ6IHRoZW1lLnNwYWNpbmcoXCJ4c1wiKSxcbn0pO1xuIl19 */");
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJIZWFkZXIvQ2FsZW5kYXJIZWFkZXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3QjJCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJIZWFkZXIvQ2FsZW5kYXJIZWFkZXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgSHZUeXBvZ3JhcGh5IH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHNcIjtcbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtYXJnaW5Ub3A6IHRoZW1lLnNwYWNpbmcoXCJ4c1wiKSxcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gIGJvcmRlckJvdHRvbTogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJCb3R0b20sXG4gIGJvcmRlclRvcDogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJUb3AsXG4gIGJvcmRlckxlZnQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Qm9yZGVyTGVmdCxcbiAgYm9yZGVyUmlnaHQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Qm9yZGVyUmlnaHQsXG4gIGJvcmRlclJhZGl1czogdGhlbWUuY2FsZW5kYXIuYm9yZGVyUmFkaXVzLFxuICBcIiY6aG92ZXIsICY6Zm9jdXNcIjoge1xuICAgIGJvcmRlckJvdHRvbTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnl9YCxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW5wdXRCb3JkZXJDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5uZWdhdGl2ZSxcbiAgaGVpZ2h0OiAxLFxuICBtYXJnaW5Ub3A6IC0xLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbnB1dCA9IHN0eWxlZCgocHJvcHMpID0+IDxpbnB1dCB7Li4ucHJvcHN9IC8+KSh7XG4gIGJvcmRlcjogXCJub25lXCIsXG4gIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICBwYWRkaW5nOiBgNXB4ICR7dGhlbWUuc3BhY2luZyhcInhzXCIpfWAsXG4gIGZvbnRGYW1pbHk6IHRoZW1lLmZvbnRGYW1pbHkuYm9keSxcblxuICBjb2xvcjogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRGb250Q29sb3IsXG4gIGZvbnRTaXplOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRTaXplLFxuICBsZXR0ZXJTcGFjaW5nOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRMZXR0ZXJTcGFjaW5nLFxuICBsaW5lSGVpZ2h0OiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRMaW5lSGVpZ2h0LFxuICBmb250V2VpZ2h0OiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRXZWlnaHQsXG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgXCImOjpwbGFjZWhvbGRlclwiOiB7XG4gICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnlfNjAsXG4gIH0sXG4gIFwiJjpmb2N1c1wiOiB7XG4gICAgb3V0bGluZTogXCJub25lXCIsXG4gIH0sXG4gIFwiJjpmb2N1cy12aXNpYmxlXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRIZWFkZXJEYXlPZldlZWsgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIGNvbG9yOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRDb2xvcixcbiAgcGFkZGluZ0xlZnQ6IHRoZW1lLnNwYWNpbmcoXCJ4c1wiKSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVHlwb2dyYXBoeSA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gIGNvbG9yOiB0aGVtZS5jb2xvcnMubmVnYXRpdmUsXG59KTtcbiJdfQ== */");
 const StyledHeaderDayOfWeek = /* @__PURE__ */ _styled(HvTypography, process.env.NODE_ENV === "production" ? {
-  target: "e1yjj6ap0"
+  target: "e1yjj6ap1"
 } : {
-  target: "e1yjj6ap0",
+  target: "e1yjj6ap1",
   label: "StyledHeaderDayOfWeek"
 })({
   color: theme.calendar.headerInputFontColor,
   paddingLeft: theme.spacing("xs")
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJIZWFkZXIvQ2FsZW5kYXJIZWFkZXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUErQ3FDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJIZWFkZXIvQ2FsZW5kYXJIZWFkZXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgSHZUeXBvZ3JhcGh5IH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHNcIjtcbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtYXJnaW5Ub3A6IHRoZW1lLnNwYWNpbmcoXCJ4c1wiKSxcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gIGJvcmRlckJvdHRvbTogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJCb3R0b20sXG4gIGJvcmRlclRvcDogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJUb3AsXG4gIGJvcmRlckxlZnQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Qm9yZGVyTGVmdCxcbiAgYm9yZGVyUmlnaHQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Qm9yZGVyUmlnaHQsXG4gIGJvcmRlclJhZGl1czogdGhlbWUuY2FsZW5kYXIuYm9yZGVyUmFkaXVzLFxuICBcIiY6aG92ZXIsICY6Zm9jdXNcIjoge1xuICAgIGJvcmRlckJvdHRvbTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnl9YCxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW5wdXRCb3JkZXJDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5uZWdhdGl2ZSxcbiAgaGVpZ2h0OiAxLFxuICBtYXJnaW5Ub3A6IC0xLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbnB1dCA9IHN0eWxlZCgocHJvcHMpID0+IDxpbnB1dCB7Li4ucHJvcHN9IC8+KSh7XG4gIGJvcmRlcjogXCJub25lXCIsXG4gIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICBwYWRkaW5nOiBgNXB4ICR7dGhlbWUuc3BhY2luZyhcInhzXCIpfWAsXG4gIGZvbnRGYW1pbHk6IHRoZW1lLmZvbnRGYW1pbHkuYm9keSxcblxuICBjb2xvcjogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRGb250Q29sb3IsXG4gIGZvbnRTaXplOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRTaXplLFxuICBsZXR0ZXJTcGFjaW5nOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRMZXR0ZXJTcGFjaW5nLFxuICBsaW5lSGVpZ2h0OiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRMaW5lSGVpZ2h0LFxuICBmb250V2VpZ2h0OiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRXZWlnaHQsXG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgXCImOjpwbGFjZWhvbGRlclwiOiB7XG4gICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnlfNjAsXG4gIH0sXG4gIFwiJjpmb2N1c1wiOiB7XG4gICAgb3V0bGluZTogXCJub25lXCIsXG4gIH0sXG4gIFwiJjpmb2N1cy12aXNpYmxlXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRIZWFkZXJEYXlPZldlZWsgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIGNvbG9yOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRDb2xvcixcbiAgcGFkZGluZ0xlZnQ6IHRoZW1lLnNwYWNpbmcoXCJ4c1wiKSxcbn0pO1xuIl19 */");
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJIZWFkZXIvQ2FsZW5kYXJIZWFkZXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUErQ3FDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJIZWFkZXIvQ2FsZW5kYXJIZWFkZXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgSHZUeXBvZ3JhcGh5IH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHNcIjtcbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtYXJnaW5Ub3A6IHRoZW1lLnNwYWNpbmcoXCJ4c1wiKSxcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gIGJvcmRlckJvdHRvbTogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJCb3R0b20sXG4gIGJvcmRlclRvcDogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJUb3AsXG4gIGJvcmRlckxlZnQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Qm9yZGVyTGVmdCxcbiAgYm9yZGVyUmlnaHQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Qm9yZGVyUmlnaHQsXG4gIGJvcmRlclJhZGl1czogdGhlbWUuY2FsZW5kYXIuYm9yZGVyUmFkaXVzLFxuICBcIiY6aG92ZXIsICY6Zm9jdXNcIjoge1xuICAgIGJvcmRlckJvdHRvbTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnl9YCxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW5wdXRCb3JkZXJDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5uZWdhdGl2ZSxcbiAgaGVpZ2h0OiAxLFxuICBtYXJnaW5Ub3A6IC0xLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbnB1dCA9IHN0eWxlZCgocHJvcHMpID0+IDxpbnB1dCB7Li4ucHJvcHN9IC8+KSh7XG4gIGJvcmRlcjogXCJub25lXCIsXG4gIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICBwYWRkaW5nOiBgNXB4ICR7dGhlbWUuc3BhY2luZyhcInhzXCIpfWAsXG4gIGZvbnRGYW1pbHk6IHRoZW1lLmZvbnRGYW1pbHkuYm9keSxcblxuICBjb2xvcjogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRGb250Q29sb3IsXG4gIGZvbnRTaXplOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRTaXplLFxuICBsZXR0ZXJTcGFjaW5nOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRMZXR0ZXJTcGFjaW5nLFxuICBsaW5lSGVpZ2h0OiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRMaW5lSGVpZ2h0LFxuICBmb250V2VpZ2h0OiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRXZWlnaHQsXG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgXCImOjpwbGFjZWhvbGRlclwiOiB7XG4gICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnlfNjAsXG4gIH0sXG4gIFwiJjpmb2N1c1wiOiB7XG4gICAgb3V0bGluZTogXCJub25lXCIsXG4gIH0sXG4gIFwiJjpmb2N1cy12aXNpYmxlXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRIZWFkZXJEYXlPZldlZWsgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIGNvbG9yOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRDb2xvcixcbiAgcGFkZGluZ0xlZnQ6IHRoZW1lLnNwYWNpbmcoXCJ4c1wiKSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVHlwb2dyYXBoeSA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gIGNvbG9yOiB0aGVtZS5jb2xvcnMubmVnYXRpdmUsXG59KTtcbiJdfQ== */");
+const StyledTypography = /* @__PURE__ */ _styled(HvTypography, process.env.NODE_ENV === "production" ? {
+  target: "e1yjj6ap0"
+} : {
+  target: "e1yjj6ap0",
+  label: "StyledTypography"
+})({
+  display: "flex",
+  alignItems: "center",
+  color: theme.colors.negative
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJIZWFkZXIvQ2FsZW5kYXJIZWFkZXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvRGdDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvQ2FsZW5kYXJIZWFkZXIvQ2FsZW5kYXJIZWFkZXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgSHZUeXBvZ3JhcGh5IH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHNcIjtcbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtYXJnaW5Ub3A6IHRoZW1lLnNwYWNpbmcoXCJ4c1wiKSxcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gIGJvcmRlckJvdHRvbTogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJCb3R0b20sXG4gIGJvcmRlclRvcDogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRCb3JkZXJUb3AsXG4gIGJvcmRlckxlZnQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Qm9yZGVyTGVmdCxcbiAgYm9yZGVyUmlnaHQ6IHRoZW1lLmNhbGVuZGFyLmhlYWRlcklucHV0Qm9yZGVyUmlnaHQsXG4gIGJvcmRlclJhZGl1czogdGhlbWUuY2FsZW5kYXIuYm9yZGVyUmFkaXVzLFxuICBcIiY6aG92ZXIsICY6Zm9jdXNcIjoge1xuICAgIGJvcmRlckJvdHRvbTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnl9YCxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW5wdXRCb3JkZXJDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5uZWdhdGl2ZSxcbiAgaGVpZ2h0OiAxLFxuICBtYXJnaW5Ub3A6IC0xLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbnB1dCA9IHN0eWxlZCgocHJvcHMpID0+IDxpbnB1dCB7Li4ucHJvcHN9IC8+KSh7XG4gIGJvcmRlcjogXCJub25lXCIsXG4gIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICBwYWRkaW5nOiBgNXB4ICR7dGhlbWUuc3BhY2luZyhcInhzXCIpfWAsXG4gIGZvbnRGYW1pbHk6IHRoZW1lLmZvbnRGYW1pbHkuYm9keSxcblxuICBjb2xvcjogdGhlbWUuY2FsZW5kYXIuaGVhZGVySW5wdXRGb250Q29sb3IsXG4gIGZvbnRTaXplOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRTaXplLFxuICBsZXR0ZXJTcGFjaW5nOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRMZXR0ZXJTcGFjaW5nLFxuICBsaW5lSGVpZ2h0OiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRMaW5lSGVpZ2h0LFxuICBmb250V2VpZ2h0OiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRXZWlnaHQsXG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgXCImOjpwbGFjZWhvbGRlclwiOiB7XG4gICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnlfNjAsXG4gIH0sXG4gIFwiJjpmb2N1c1wiOiB7XG4gICAgb3V0bGluZTogXCJub25lXCIsXG4gIH0sXG4gIFwiJjpmb2N1cy12aXNpYmxlXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRIZWFkZXJEYXlPZldlZWsgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIGNvbG9yOiB0aGVtZS5jYWxlbmRhci5oZWFkZXJJbnB1dEZvbnRDb2xvcixcbiAgcGFkZGluZ0xlZnQ6IHRoZW1lLnNwYWNpbmcoXCJ4c1wiKSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVHlwb2dyYXBoeSA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gIGNvbG9yOiB0aGVtZS5jb2xvcnMubmVnYXRpdmUsXG59KTtcbiJdfQ== */");
 export {
   StyledHeaderDayOfWeek,
   StyledInput,
   StyledInputBorderContainer,
-  StyledRoot
+  StyledRoot,
+  StyledTypography
 };
 //# sourceMappingURL=CalendarHeader.styles.js.map

package/dist/esm/components/Calendar/CalendarHeader/CalendarHeader.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.styles.js","sources":["../../../../../src/components/Calendar/CalendarHeader/CalendarHeader.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvTypography } from \"@core/components\";\nimport { outlineStyles } from \"@core/utils\";\n\nexport const StyledRoot = styled(\"div\")({\n  marginTop: theme.spacing(\"xs\"),\n  backgroundColor: theme.colors.atmo1,\n  borderBottom: theme.calendar.headerInputBorderBottom,\n  borderTop: theme.calendar.headerInputBorderTop,\n  borderLeft: theme.calendar.headerInputBorderLeft,\n  borderRight: theme.calendar.headerInputBorderRight,\n  borderRadius: theme.calendar.borderRadius,\n  \"&:hover, &:focus\": {\n    borderBottom: `1px solid ${theme.colors.secondary}`,\n  },\n});\n\nexport const StyledInputBorderContainer = styled(\"div\")({\n  backgroundColor: theme.colors.negative,\n  height: 1,\n  marginTop: -1,\n});\n\nexport const StyledInput = styled((props) => <input {...props} />)({\n  border: \"none\",\n  backgroundColor: \"transparent\",\n  padding: `5px ${theme.spacing(\"xs\")}`,\n  fontFamily: theme.fontFamily.body,\n\n  color: theme.calendar.headerInputFontColor,\n  fontSize: theme.calendar.headerInputFontSize,\n  letterSpacing: theme.calendar.headerInputFontLetterSpacing,\n  lineHeight: theme.calendar.headerInputFontLineHeight,\n  fontWeight: theme.calendar.headerInputFontWeight,\n  width: \"100%\",\n  \"&::placeholder\": {\n    color: theme.colors.secondary_60,\n  },\n  \"&:focus\": {\n    outline: \"none\",\n  },\n  \"&:focus-visible\": {\n    ...outlineStyles,\n  },\n});\n\nexport const StyledHeaderDayOfWeek = styled(HvTypography)({\n  color: theme.calendar.headerInputFontColor,\n  paddingLeft: theme.spacing(\"xs\"),\n});\n"],"names":["StyledRoot","process","env","NODE_ENV","target","label","marginTop","theme","spacing","backgroundColor","colors","atmo1","borderBottom","calendar","headerInputBorderBottom","borderTop","headerInputBorderTop","borderLeft","headerInputBorderLeft","borderRight","headerInputBorderRight","borderRadius","secondary","StyledInputBorderContainer","negative","height","StyledInput","_styled","props","_jsx","border","padding","fontFamily","body","color","headerInputFontColor","fontSize","headerInputFontSize","letterSpacing","headerInputFontLetterSpacing","lineHeight","headerInputFontLineHeight","fontWeight","headerInputFontWeight","width","secondary_60","outline","outlineStyles","StyledHeaderDayOfWeek","HvTypography","paddingLeft"],"mappings":";;;;;AAKO,MAAMA,aAAoB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACtCC,WAAWC,MAAMC,QAAQ,IAAI;AAAA,EAC7BC,iBAAiBF,MAAMG,OAAOC;AAAAA,EAC9BC,cAAcL,MAAMM,SAASC;AAAAA,EAC7BC,WAAWR,MAAMM,SAASG;AAAAA,EAC1BC,YAAYV,MAAMM,SAASK;AAAAA,EAC3BC,aAAaZ,MAAMM,SAASO;AAAAA,EAC5BC,cAAcd,MAAMM,SAASQ;AAAAA,EAC7B,oBAAoB;AAAA,IAClBT,cAAe,aAAYL,MAAMG,OAAOY;AAAAA,EAC1C;AACF,GAACrB,QAAAC,IAAAC,aAAC,eAAA,KAAA,irFAAA;AAEK,MAAMoB,6BAAoC,wBAAA,OAAKtB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACtDI,iBAAiBF,MAAMG,OAAOc;AAAAA,EAC9BC,QAAQ;AAAA,EACRnB,WAAW;AACb,GAACL,QAAAC,IAAAC,aAAC,eAAA,KAAA,irFAAA;AAEK,MAAMuB,cAAcC,wBAAQC,CAAUC,UAAAA,oBAAA,SAAA;AAAA,EAAA,GAAWD;AAAK,CAAA,GAAI3B,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACjEyB,QAAQ;AAAA,EACRrB,iBAAiB;AAAA,EACjBsB,SAAU,OAAMxB,MAAMC,QAAQ,IAAI;AAAA,EAClCwB,YAAYzB,MAAMyB,WAAWC;AAAAA,EAE7BC,OAAO3B,MAAMM,SAASsB;AAAAA,EACtBC,UAAU7B,MAAMM,SAASwB;AAAAA,EACzBC,eAAe/B,MAAMM,SAAS0B;AAAAA,EAC9BC,YAAYjC,MAAMM,SAAS4B;AAAAA,EAC3BC,YAAYnC,MAAMM,SAAS8B;AAAAA,EAC3BC,OAAO;AAAA,EACP,kBAAkB;AAAA,IAChBV,OAAO3B,MAAMG,OAAOmC;AAAAA,EACtB;AAAA,EACA,WAAW;AAAA,IACTC,SAAS;AAAA,EACX;AAAA,EACA,mBAAmB;AAAA,IACjB,GAAGC;AAAAA,EACL;AACF,GAAC9C,QAAAC,IAAAC,aAAC,eAAA,KAAA,irFAAA;AAEK,MAAM6C,wBAA+BC,wBAAAA,cAAYhD,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACxD6B,OAAO3B,MAAMM,SAASsB;AAAAA,EACtBe,aAAa3C,MAAMC,QAAQ,IAAI;AACjC,GAACP,QAAAC,IAAAC,aAAC,eAAA,KAAA,irFAAA;"}
+{"version":3,"file":"CalendarHeader.styles.js","sources":["../../../../../src/components/Calendar/CalendarHeader/CalendarHeader.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvTypography } from \"@core/components\";\nimport { outlineStyles } from \"@core/utils\";\n\nexport const StyledRoot = styled(\"div\")({\n  marginTop: theme.spacing(\"xs\"),\n  backgroundColor: theme.colors.atmo1,\n  borderBottom: theme.calendar.headerInputBorderBottom,\n  borderTop: theme.calendar.headerInputBorderTop,\n  borderLeft: theme.calendar.headerInputBorderLeft,\n  borderRight: theme.calendar.headerInputBorderRight,\n  borderRadius: theme.calendar.borderRadius,\n  \"&:hover, &:focus\": {\n    borderBottom: `1px solid ${theme.colors.secondary}`,\n  },\n});\n\nexport const StyledInputBorderContainer = styled(\"div\")({\n  backgroundColor: theme.colors.negative,\n  height: 1,\n  marginTop: -1,\n});\n\nexport const StyledInput = styled((props) => <input {...props} />)({\n  border: \"none\",\n  backgroundColor: \"transparent\",\n  padding: `5px ${theme.spacing(\"xs\")}`,\n  fontFamily: theme.fontFamily.body,\n\n  color: theme.calendar.headerInputFontColor,\n  fontSize: theme.calendar.headerInputFontSize,\n  letterSpacing: theme.calendar.headerInputFontLetterSpacing,\n  lineHeight: theme.calendar.headerInputFontLineHeight,\n  fontWeight: theme.calendar.headerInputFontWeight,\n  width: \"100%\",\n  \"&::placeholder\": {\n    color: theme.colors.secondary_60,\n  },\n  \"&:focus\": {\n    outline: \"none\",\n  },\n  \"&:focus-visible\": {\n    ...outlineStyles,\n  },\n});\n\nexport const StyledHeaderDayOfWeek = styled(HvTypography)({\n  color: theme.calendar.headerInputFontColor,\n  paddingLeft: theme.spacing(\"xs\"),\n});\n\nexport const StyledTypography = styled(HvTypography)({\n  display: \"flex\",\n  alignItems: \"center\",\n  color: theme.colors.negative,\n});\n"],"names":["StyledRoot","process","env","NODE_ENV","target","label","marginTop","theme","spacing","backgroundColor","colors","atmo1","borderBottom","calendar","headerInputBorderBottom","borderTop","headerInputBorderTop","borderLeft","headerInputBorderLeft","borderRight","headerInputBorderRight","borderRadius","secondary","StyledInputBorderContainer","negative","height","StyledInput","_styled","props","_jsx","border","padding","fontFamily","body","color","headerInputFontColor","fontSize","headerInputFontSize","letterSpacing","headerInputFontLetterSpacing","lineHeight","headerInputFontLineHeight","fontWeight","headerInputFontWeight","width","secondary_60","outline","outlineStyles","StyledHeaderDayOfWeek","HvTypography","paddingLeft","StyledTypography","display","alignItems"],"mappings":";;;;;AAKO,MAAMA,aAAoB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACtCC,WAAWC,MAAMC,QAAQ,IAAI;AAAA,EAC7BC,iBAAiBF,MAAMG,OAAOC;AAAAA,EAC9BC,cAAcL,MAAMM,SAASC;AAAAA,EAC7BC,WAAWR,MAAMM,SAASG;AAAAA,EAC1BC,YAAYV,MAAMM,SAASK;AAAAA,EAC3BC,aAAaZ,MAAMM,SAASO;AAAAA,EAC5BC,cAAcd,MAAMM,SAASQ;AAAAA,EAC7B,oBAAoB;AAAA,IAClBT,cAAe,aAAYL,MAAMG,OAAOY;AAAAA,EAC1C;AACF,GAACrB,QAAAC,IAAAC,aAAC,eAAA,KAAA,i3FAAA;AAEK,MAAMoB,6BAAoC,wBAAA,OAAKtB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACtDI,iBAAiBF,MAAMG,OAAOc;AAAAA,EAC9BC,QAAQ;AAAA,EACRnB,WAAW;AACb,GAACL,QAAAC,IAAAC,aAAC,eAAA,KAAA,q3FAAA;AAEK,MAAMuB,cAAcC,wBAAQC,CAAUC,UAAAA,oBAAA,SAAA;AAAA,EAAA,GAAWD;AAAK,CAAA,GAAI3B,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACjEyB,QAAQ;AAAA,EACRrB,iBAAiB;AAAA,EACjBsB,SAAU,OAAMxB,MAAMC,QAAQ,IAAI;AAAA,EAClCwB,YAAYzB,MAAMyB,WAAWC;AAAAA,EAE7BC,OAAO3B,MAAMM,SAASsB;AAAAA,EACtBC,UAAU7B,MAAMM,SAASwB;AAAAA,EACzBC,eAAe/B,MAAMM,SAAS0B;AAAAA,EAC9BC,YAAYjC,MAAMM,SAAS4B;AAAAA,EAC3BC,YAAYnC,MAAMM,SAAS8B;AAAAA,EAC3BC,OAAO;AAAA,EACP,kBAAkB;AAAA,IAChBV,OAAO3B,MAAMG,OAAOmC;AAAAA,EACtB;AAAA,EACA,WAAW;AAAA,IACTC,SAAS;AAAA,EACX;AAAA,EACA,mBAAmB;AAAA,IACjB,GAAGC;AAAAA,EACL;AACF,GAAC9C,QAAAC,IAAAC,aAAC,eAAA,KAAA,q3FAAA;AAEK,MAAM6C,wBAA+BC,wBAAAA,cAAYhD,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACxD6B,OAAO3B,MAAMM,SAASsB;AAAAA,EACtBe,aAAa3C,MAAMC,QAAQ,IAAI;AACjC,GAACP,QAAAC,IAAAC,aAAC,eAAA,KAAA,q3FAAA;AAEK,MAAMgD,mBAA0BF,wBAAAA,cAAYhD,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACnD+C,SAAS;AAAA,EACTC,YAAY;AAAA,EACZnB,OAAO3B,MAAMG,OAAOc;AACtB,GAACvB,QAAAC,IAAAC,aAAC,eAAA,KAAA,q3FAAA;"}

package/dist/esm/components/Calendar/SingleCalendar/SingleCalendar.js

@@ -36,6 +36,7 @@ const HvSingleCalendar = ({
   onVisibleDateChange,
   showEndDate,
   showDayOfWeek,
+  invalidDateLabel,
   children,
   ...others
 }) => {
@@ -115,7 +116,8 @@ const HvSingleCalendar = ({
         locale,
         onChange: handleInputChange,
         showEndDate: showEndDate && !isDateSelectionMode,
-        showDayOfWeek
+        showDayOfWeek,
+        invalidDateLabel
       }), calViewMode === "calendar" && /* @__PURE__ */ jsxs("div", {
         children: [/* @__PURE__ */ jsx(HvComposedNavigation, {
           id,